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 clasificación para revelar. Lo llamamos elDashboardTile y su propósito es presentar una visualización dinámica que el usuario final pueda modificar en tiempo de ejecución mediante sus diversas acciones en la barra de herramientas. Ya está disponible como vista previa para Ignite UI Para Angular / React / WebComponents / Blazor y Ultimate UI for WPF (y más plataformas próximas).
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 pretende presentar un conjunto común de componentes para los datos proporcionados con configuración cero o casi nula, y todos dispuestos de forma 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 puede crearse conDashboardTile 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 lo realmente impresionante es que laDashboardTile versión del escenario es mucho más dinámica que la que se usóCategoryChart.
Anatomía del icono del panel
DashboardTiletiene un título integrado:
que puedes configurar a través de eltileTitle.
DashboardTiletiene una leyenda integrada que se configura automáticamente para mostrar elementos del gráfico asociado, lo que sea:
DashboardTilepresenta una barra de herramientas que muestra un conjunto de comandos similar al gráfico de categorías:
Pero también hay otras actividades específicas de ellasDashboardTile.
Si haces clic en la acción de la cuadrícula, muestra una cuadrícula que contiene los datos vinculados a laDashboardTile. El estado de selección se sincroniza entre la cuadrícula y la carta.
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 seDashboardTile muestra por primera vez, da su mejor idea de qué visualización mostrarte (hablaré más de eso más adelante). Sin embargo, si fue incorrecto, o si quieres comparar con otras formas de visualizar los datos, puedes usar la acción de gráfico en la barra de herramientas:
Si asignas elDashboardTile a aLocalDataSource, 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 la disposición y configuración de un escenario de visualización de datos, y permitir que el usuario final modifique las cosas en tiempo de ejecución, tambiénDashboardTile te ayuda a renderizar 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.
DashboardTileutiliza una biblioteca de heurísticas para intentar determinar la visualización más adecuada para mostrar. Aquí tienes algunos ejemplos:
- Si aportas un valor único,
DashboardTileprobablemente te presentará unLinearGaugeoRadialGauge. - Si proporcionas un pequeño número de valores que son fáciles de distinguir entre sí,
DashboardTileprobablemente te presentará unPieChart. - Si proporcionas un pequeño número de valores difíciles de comparar con precisión
DashboardTile, evitarás unPieCharty te presentará en su lugar un gráfico de columnas. - Si tienes más valores de los que tienen sentido para un gráfico de columnas,
DashboardTiletenderán a mostrarte un gráfico de líneas. - Si tus datos parecen ser valores de dispersión,
DashboardTiletenderán a mostrarte un gráfico de dispersión. - Si tus datos de dispersión parecen ser coordenadas geográficas,
DashboardTilepuedes elegir representarlas en un mapa en lugar de en una carta. - Si los datos parecen ser formas geométricas, es posible que se tracen en un gráfico o en un mapa.
- Si tus datos parecen ser de acciones,
DashboardTilepuede que te muestren un candelabro o un gráfico OHLC. - Si
DashboardTilelas heurísticas son engañadas, siempre puedes establecer el tipo de gráfico deseado mediante lachartTypepropiedad, o modificar el tipo de gráfico mediante la acción de diagramas de la barra de herramientas.
Conclusión
DashboardTilees una emocionante nueva función de clasificación que ahora hemos lanzado como un Avance. Agradeceríamos vuestros comentarios para poder hacer más mejoras antes del lanzamiento final.
