Creación de paneles con facilidad mediante el icono del panel
Estamos muy emocionados de presentar una nueva funcionalidad de gráficos: Dashboard Tile. Aprenda a usar esta función de gráficos para crear paneles interactivos casi sin codificación manual.
Graham Murray
7min read
Introducción
This release, Infragistics has a new and exciting charting feature to reveal. We call it the DashboardTile and its purpose is to present a dynamic visualization that the end user can alter at runtime via its various toolbar actions. It is available now as a Preview for Ignite UI For Angular/React/WebComponents/Blazor and Ultimate UI for WPF (and more platforms to come).
Motivación
En Infragistics, solemos organizar nuestros componentes para que sean extremadamente modulares. Una experiencia de gráficos completa puede implicar una serie de componentes dispares para configurar/conectar, entre ellos: Gráfico, Leyenda, Barra de herramientas, ZoomSlider, Etiquetas, Configuración, etc. Un usuario puede querer que estos se configuren y se diseñen de una manera, mientras que otro usuario puede querer que se configuren y dispongan de una manera completamente diferente, por lo que es útil para nosotros que estos componentes estén separados pero conectados, y se puedan colocar en el diseño del usuario a su discreción y configurarse individualmente.
Sin embargo, esto puede dar lugar a una cantidad detallada de configuración para completar tareas sencillas, y el grado en que permitimos que el usuario configure los componentes puede ser desalentador. Para hacer las cosas más desafiantes, lograr diseños de visualización de datos estéticamente agradables puede ser un desafío en la web, especialmente para aquellos con menos experiencia con la plataforma. Además, una gran parte de los usuarios pueden querer una configuración razonablemente sencilla de los componentes.
Por ejemplo, esta es una forma bastante común de querer que se vea una visualización:
Y para producir ese efecto, se requería este html:
<!DOCTYPE html>
<html>
<head>
<title>Sample | Ignite UI | Web Components | infragistics</title>
<meta charset="UTF-8" />
<link rel="stylesheet"
href="/src/index.css"
type="text/css" />
</head>
<body>
<div id="root">
<div class="container sample">
<div class="aboveContentSplit">
<div
class="aboveContentLeftContainer">
<igc-toolbar
name="toolbar"
id="toolbar"
orientation="Horizontal">
</igc-toolbar>
</div>
<div
class="aboveContentRightContainer">
<igc-legend
name="legend"
id="legend"
orientation="Horizontal">
</igc-legend>
</div>
</div>
<div class="container fill">
<igc-category-chart name="chart"
id="chart"
chart-type="Line"
is-horizontal-zoom-enabled="true"
is-vertical-zoom-enabled="true"
included-properties="year, europe, china, america"
y-axis-title="TWh"
is-transition-in-enabled="true">
</igc-category-chart>
</div>
</div>
</div>
</body>
</html>
Y este css:
.aboveContentSplit {
display: flex;
flex-direction: row;
}
.aboveContentLeftContainer {
margin-left: 1.25rem;
display: flex;
flex-grow: 1;
justify-content: flex-start;
align-items: flex-end;
}
.aboveContentRightContainer {
margin-right: 1.25rem;
display: flex;
flex-grow: 1;
justify-content: flex-end;
align-items: flex-end;
}
html,
body,
#root {
margin: 0px;
height: 100%;
}
.container {
display: flex;
flex-flow: column;
flex-wrap: nowrap;
align-items: stretch;
align-self: stretch;
/* min-width: 200px; */
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
.fill > * {
height: 100%;
}
y los componentes debían configurarse en código de la siguiente manera:
import {
IgcLegendModule,
IgcCategoryChartModule,
IgcCategoryChartToolbarModule }
from "igniteui-webcomponents-charts";
import { IgcToolbarModule } from "igniteui-webcomponents-layouts";
import {
IgcLegendComponent,
IgcCategoryChartComponent
}
from "igniteui-webcomponents-charts";
import { IgcToolbarComponent } from "igniteui-webcomponents-layouts";
import { CountryRenewableElectricity } from "./CountryRenewableElectricity";
import { ModuleManager } from "igniteui-webcomponents-core";
import "./index.css";
ModuleManager.register(
IgcLegendModule,
IgcToolbarModule,
IgcCategoryChartModule,
IgcCategoryChartToolbarModule);
var legend = document.getElementById("legend") as IgcLegendComponent;
var toolbar = document.getElementById("toolbar") as IgcToolbarComponent;
var chart = document.getElementById("chart") as IgcCategoryChartComponent;
toolbar.target = chart;
chart.dataSource = new CountryRenewableElectricity();
chart.legend = legend;
In response, DashboardTile is meant to present a common set of components for the provided data with zero or next to zero configuration, and all laid out in an aesthetically pleasing way.
Además, dado Infragistics está tomando un mayor control sobre la integración de todos los componentes, aprovechamos la oportunidad para crear un escenario de mosaico de panel editable en el que el usuario final puede ajustar cómo se presenta la visualización en función de varios menús que están disponibles. Esto tiene como objetivo facilitar la creación de paneles dinámicos en sus aplicaciones.
By comparison, the above scenario can be created with DashboardTile with this html:
<!DOCTYPE html>
<html>
<head>
<title>Sample | Ignite UI | Web Components | infragistics</title>
<meta charset="UTF-8" />
<link rel="stylesheet"
href="/src/index.css"
type="text/css" />
</head>
<body>
<igc-dashboard-tile
id="tile"
tile-title="Renewable Electricity by Country"
width="100%"
height="100%">
</igc-dashboard-tile>
</body>
</html>
Y este CSS:
html,
body {
margin: 0px;
height: 100%;
}
Y este código:
import { CountryRenewableElectricity } from "./CountryRenewableElectricity";
import { ModuleManager } from "igniteui-webcomponents-core";
import {
IgcDashboardTileComponent,
IgcDashboardTileModule,
IgcDataChartDashboardTileModule,
IgcGeographicMapDashboardTileModule,
IgcLinearGaugeDashboardTileModule,
IgcPieChartDashboardTileModule,
IgcRadialGaugeDashboardTileModule
} from "igniteui-webcomponents-dashboards";
import "./index.css";
ModuleManager.register(
IgcDashboardTileModule,
IgcDataChartDashboardTileModule,
IgcPieChartDashboardTileModule,
IgcGeographicMapDashboardTileModule,
IgcRadialGaugeDashboardTileModule,
IgcLinearGaugeDashboardTileModule);
var tile = document.getElementById("tile") as IgcDashboardTileComponent;
tile.dataSource = new CountryRenewableElectricity();
But the truly awesome part is that the DashboardTile version of the scenario is much more dynamic than the version that used CategoryChart.
Anatomía del icono del panel
DashboardTile has an integrated title:
which you can set via the tileTitle.
DashboardTile has an integrated legend which is automatically configured to display items from the associated chart, whichever that may be:
DashboardTile presents a toolbar which surfaces a similar set of commands compared to category chart:
But there are additionally several other actions that are specific to DashboardTile.
If you click the grid action, it shows a grid containing the data that is bound to the DashboardTile. Selection state is synchronized between the grid and the chart.
Si hace clic en la acción del editor, se muestra un editor con configuraciones contextuales para la visualización mostrada actualmente que permite al usuario final modificar la visualización a su gusto.
When the DashboardTile initially displays it gives its best guess as to which visualization to show you (more on that later). If it was incorrect, though, or if you’d like to compare with other ways to visualize the data you can use the chart type action on the toolbar:
If you bind the DashboardTile to a LocalDataSource the grouping/summary state is even synchronized between the grid and the chart, so that changes to the grid aggregation are propagated to the chart.
Visualización automática
Apart from making it easier to lay out and configure a data visualization scenario, and letting the end user modify things are runtime, the DashboardTile also helps you automatically render a useful visualization with no configuration.
Esto es útil para que sea más fácil hacer más con menos código, pero también ayuda si la aplicación tiene datos muy dinámicos y no necesariamente se puede predecir qué visualización usar en tiempo de compilación.
DashboardTile uses a library of heuristics to try to determine the most appropriate visualization to display. Here are some examples:
- If you provide a single value,
DashboardTileis likely to present you with aLinearGaugeorRadialGauge. - If you provide a small number of values that are easy to distinguish from one another,
DashboardTileis likely to present you with aPieChart. - If you provide a small number of values that are difficult to compare precisely
DashboardTilewill avoid aPieChartand instead present you with a column chart. - If you have more values than make sense for a column chart,
DashboardTilewill tend to show you a line chart. - If your data appears to be scatter values,
DashboardTilewill tend to show you a scatter chart. - If your scatter data seems to be geographic coordinates,
DashboardTilemay choose to plot these on a map rather than a chart. - Si los datos parecen ser formas geométricas, es posible que se tracen en un gráfico o en un mapa.
- If your data appears to be stock data,
DashboardTilemay chose to show a candlestick or OHLC plot. - If
DashboardTile‘s heuristics are fooled, you can always set the desired chart type via thechartTypeproperty, or modify the chart type via the toolbar chart type action.
Conclusión
DashboardTile is an exciting new charting feature which we have now released as a Preview. We’d appreciate your feedback so that we can make more improvements before final release.
