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
Este lanzamiento, Infragistics tiene una nueva y emocionante función de gráficos para revelar. Lo llamamos el DashboardTile y su propósito es presentar una visualización dinámica que el usuario final puede modificar en tiempo de ejecución a través de sus diversas acciones de la barra de herramientas. Ya está disponible como versión preliminar para Ignite UI For Angular / React / WebComponents / Blazor y Ultimate UI for WPF (y más plataformas por venir).
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;
En respuesta, DashboardTile está destinado a presentar un conjunto común de componentes para los datos proporcionados con configuración cero o casi cero, y todos dispuestos de una manera estéticamente agradable.
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.
En comparación, el escenario anterior se puede crear con DashboardTile 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>
<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();
Pero la parte realmente impresionante es que la DashboardTile versión del escenario es mucho más dinámica que la versión que se usó CategoryChart.
Anatomía del icono del panel
DashboardTile tiene un título integrado:
que puede configurar a través de el tileTitle.
DashboardTile tiene una leyenda integrada que se configura automáticamente para mostrar los elementos del gráfico asociado, lo que sea:
DashboardTile Presenta una barra de herramientas que muestra un conjunto similar de comandos en comparación con el gráfico de categorías:
Pero también hay otras acciones que son específicas de DashboardTile.
Si hace clic en la acción de cuadrícula, se muestra una cuadrícula que contiene los datos que están enlazados a la DashboardTile. El estado de selección se sincroniza entre la cuadrícula y el gráfico.
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.
Cuando se DashboardTile muestra inicialmente, da su mejor suposición sobre qué visualización mostrarle (más sobre eso más adelante). Sin embargo, si era incorrecto, o si desea comparar con otras formas de visualizar los datos, puede usar la acción de tipo de gráfico en la barra de herramientas:
Si enlaza el DashboardTile a un LocalDataSource El estado de agrupación/resumen se sincroniza incluso entre la cuadrícula y el gráfico, de modo que los cambios en la agregación de la cuadrícula se propagan al gráfico.
Visualización automática
Además de facilitar el diseño y la configuración de un escenario de visualización de datos, y permitir que el usuario final modifique las cosas en tiempo de ejecución, DashboardTile también le ayuda a representar automáticamente una visualización útil sin configuración.
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 Utiliza una biblioteca de heurísticas para tratar de determinar la visualización más adecuada que se va a mostrar. Estos son algunos ejemplos:
- Si proporciona un solo valor,
DashboardTilees probable que le presente unLinearGaugeoRadialGauge. - Si proporciona un pequeño número de valores que sean fáciles de distinguir entre sí,
DashboardTilees probable que le presente unPieChart. - Si proporciona un pequeño número de valores que son difíciles de comparar con precisión
DashboardTile, evitará un y en su lugar le presentará unPieChartgráfico de columnas. - Si tiene más valores de los que tienen sentido para un gráfico de columnas,
DashboardTiletenderá a mostrarle un gráfico de líneas. - Si sus datos parecen ser valores de dispersión,
DashboardTiletenderá a mostrarle un gráfico de dispersión. - Si sus datos de dispersión parecen ser coordenadas geográficas,
DashboardTilepuede optar por trazarlas en un mapa en lugar de un gráfico. - Si los datos parecen ser formas geométricas, es posible que se tracen en un gráfico o en un mapa.
- Si sus datos parecen ser datos de acciones,
DashboardTilepuede optar por mostrar una vela o un gráfico OHLC. - Si
DashboardTilese engaña a la heurística, siempre puede establecer el tipo de gráfico deseado a través de lachartTypepropiedad, o modificar el tipo de gráfico a través de la acción de tipo de gráfico de la barra de herramientas.
Conclusión
DashboardTile es una nueva y emocionante función de gráficos que ahora hemos lanzado como una vista previa. Agradeceríamos sus comentarios para que podamos realizar más mejoras antes del lanzamiento final.
