React Icono del panel

    The React Dashboard Tile is a automatic data visualization component which determines via analysis of a DataSource collection/array or single data point what would be the most appropriate visualization to display. It then also provides a further suite of tools in its embedded IgrToolbar that let you alter the visualization that is presented in a variety of ways.

    Se puede seleccionar una amplia variedad de visualizaciones para su visualización en función de la forma de los datos proporcionados, incluidos, entre otros: gráficos de categorías, gráficos radiales y polares, gráficos de dispersión, mapas geográficos, indicadores radiales y lineales, gráficos financieros y gráficos apilados.

    Interactuar con el menú de tipo de gráfico en la barra de herramientas permitirá seleccionar una visualización diferente entre la lista de posibles candidatos.

    React Dashboard Tile Example

    Dependencies

    Instale los siguientes paquetes en el conjunto de herramientas Ignite UI for React:

    npm install igniteui-react-charts
npm install igniteui-react-core
npm install igniteui-react-dashboards
npm install igniteui-react-gauges
npm install igniteui-react-data-grids
npm install igniteui-react-inputs
npm install igniteui-react-layouts
npm install igniteui-react-maps

    Se sugieren los siguientes módulos cuando se utiliza el componente Icono de panel:

    import { IgrDashboardTileModule, IgrDataChartDashboardTileModule, IgrRadialGaugeDashboardTileModule,
         IgrLinearGaugeDashboardTileModule, IgrGeographicMapDashboardTileModule,
         IgrPieChartDashboardTileModule } from "igniteui-react-dashboards";

IgrDataChartDashboardTileModule.register();
IgrRadialGaugeDashboardTileModule.register();
IgrLinearGaugeDashboardTileModule.register();
IgrGeographicMapDashboardTileModule.register();
IgrPieChartDashboardTileModule.register();
IgrDashboardTileModule.register();

    Usage

    Depending on what you bind the Dashboard Tile's DataSource property to will determine which visualization you see by default, as the control will evaluate the data you bind and then choose a visualization from the Ignite UI for React toolset to show. The data visualization controls that are included to be shown in the Dashboard Tile are the following:

    The data visualization that is chosen by default is mainly dependent on the schema and the count of the DataSource that you have bound. For example, if you bind a single numeric value, you will get a IgrRadialGauge, but if you bind a collection of value-label pairs that are easy to distinguish from each other, you will likely get a XamDataPieChart. If you bind an DataSource that has more value paths, you will receive a IgrDataChart with multiple column series or line series, depending mainly on the count of the collection bound. You can also bind to a ShapeDataSource or data the appears to contain geographic points to receive a IgrGeographicMap.

    You are not locked into a single visualization when you bind the DataSource, and you can tell the control that you want to see a particular visualization by setting its VisualizationType property. For example, if you specifically wanted to see a line chart, you could define the Dashboard Tile like so:

    The visualization or properties of the visualization are also configurable using the IgrToolbar at the top of the control. This IgrToolbar has the default tools for the current visualization with the addition of four Dashboard Tile specific ones, highlighted below:

    Barra de herramientas de mosaicos del panel de control

    De izquierda a derecha:

    • The first tool will show a data grid with the DataSource provided to the control. This is a toggle tool, so if you click it again after showing the grid, it will revert to the visualization.
    • La segunda herramienta le permite configurar los ajustes de la visualización de datos actual.
    • The third tool allows you to change the current visualization, allowing you to plot a different series type or show a different type of visualization altogether. This can be set on the control by setting the VisualizationType property, mentioned above.
    • The last tool allows you to configure which properties on your underlying data item are included for the control. You can configure this by setting the includedProperties or excludedProperties collection on the control.

    Esta demostración muestra la integración de mosaicos del panel con el Gráfico circular React. Las opciones de la barra de herramientas en la parte superior derecha brindan acceso para aplicar estilos y cambiar la visualización de datos.

    En esta demostración se muestra la integración del icono del panel de control con el mapa geográfico React. Las opciones de la barra de herramientas en la parte superior derecha proporcionan acceso para diseñar y cambiar la visualización de datos.

    API References

    Additional Resources