Criando painéis com facilidade usando o bloco do painel
Estamos extremamente entusiasmados em apresentar uma nova funcionalidade de gráficos – Dashboard Tile. Saiba como usar esse recurso de gráficos para criar painéis interativos com quase nenhuma codificação manual.
Graham Murray
7min read
Introdução
Neste lançamento, Infragistics traz uma nova e empolgante função de paradas para revelar. Nós a chamamos deDashboardTile e seu propósito é apresentar uma visualização dinâmica que o usuário final pode alterar em tempo de execução por meio de suas diversas ações na barra de ferramentas. Já está disponível como uma prévia para Ignite UI Para Angular / React / WebComponents / Blazor e Ultimate UI for WPF (e mais plataformas por vir).
Motivação
Na Infragistics, geralmente organizamos nossos componentes para serem extremamente modulares. Uma experiência completa de gráficos pode envolver vários componentes diferentes para configurar/conectar, incluindo: Gráfico, Legenda, Barra de ferramentas, ZoomSlider, Rótulos, Configurações, etc. Um usuário pode querer que eles sejam configurados e dispostos de uma maneira, enquanto outro usuário pode querer que eles sejam configurados e dispostos de uma maneira totalmente diferente, por isso é útil para nós que esses componentes sejam separados, mas conectados, e possam ser colocados no layout do usuário a seu critério e configurados individualmente.
No entanto, isso pode resultar em uma quantidade detalhada de configuração para concluir tarefas simples, e o grau em que permitimos que o usuário configure os componentes pode ser assustador. Para tornar as coisas mais desafiadoras, obter layouts de visualização de dados esteticamente agradáveis pode ser um desafio na web, especialmente para aqueles menos experientes com a plataforma. Além disso, uma grande parte dos usuários pode querer uma configuração razoavelmente direta dos componentes.
Por exemplo, essa é uma maneira bastante comum de querer que uma visualização pareça:
E para produzir esse efeito, este html foi necessário:
<!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>
E 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%;
}
e os componentes precisavam ser configurados em código assim:
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;
Em resposta,DashboardTile pretende apresentar um conjunto comum de componentes para os dados fornecidos com configuração zero ou próxima a zero, e todos dispostos de forma esteticamente agradável.
Além disso, como a Infragistics está assumindo maior controle sobre a integração de todos os componentes, aproveitamos a oportunidade para criar um cenário de bloco de painel editável em que o usuário final pode ajustar como a visualização é apresentada com base em vários menus disponibilizados. O objetivo é facilitar a criação de painéis dinâmicos em seus aplicativos.
Em comparação, o cenário acima pode ser criado comDashboardTile 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>
e este css:
html,
body {
margin: 0px;
height: 100%;
}
e 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();
Mas a parte realmente incrível é que aDashboardTile versão do cenário é muito mais dinâmica do que a versão usadaCategoryChart.
Anatomia do bloco do painel
DashboardTilepossui um título integrado:
que você pode configurar via otileTitle.
DashboardTilepossui uma legenda integrada que é automaticamente configurada para exibir itens do gráfico associado, seja qual for:
DashboardTileapresenta uma barra de ferramentas que apresenta um conjunto de comandos semelhante ao gráfico de categorias:
Mas também existem várias outras atividades específicas paraDashboardTile isso.
Se você clicar na ação da grade, ela mostra uma grade contendo os dados vinculados àDashboardTile grade. O estado de seleção é sincronizado entre a grade e o mapa.
Se você clicar na ação do editor, ela mostrará um editor com configurações contextuais para a visualização exibida no momento, que permitem que o usuário final modifique a visualização de acordo com sua preferência.
Quando aDashboardTile visualização inicial, ela dá sua melhor ideia de qual visualização mostrar (falarei mais sobre isso depois). Se estiver incorreto, ou se você quiser comparar com outras formas de visualizar os dados, pode usar a ação de tipo gráfico na barra de ferramentas:
Se você vincular oDashboardTile a aLocalDataSource, o estado de agrupamento/resumo é sincronizado entre a grade e o gráfico, de modo que as mudanças na agregação da grade são propagadas para o gráfico.
Visualização automática
Além de facilitar o layout e configuração de um cenário de visualização de dados, e permitir que o usuário final modifique tudo em tempo de execução, issoDashboardTile também ajuda a renderizar automaticamente uma visualização útil sem nenhuma configuração.
Isso é útil para facilitar a realização de mais com menos código, mas também ajuda se o aplicativo tiver dados muito dinâmicos e você não puder necessariamente prever qual visualização usar no momento da compilação.
DashboardTileutiliza uma biblioteca de heurísticas para tentar determinar a visualização mais apropriada para exibir. Aqui estão alguns exemplos:
- Se você fornecer um único valor,
DashboardTileprovavelmente vai te apresentar umLinearGaugeou.RadialGauge - Se você fornecer um pequeno número de valores que sejam fáceis de distinguir entre si,
DashboardTileprovavelmente vai te apresentar umPieChartvalor específico. - Se você fornecer um pequeno número de valores, são difíceis de comparar com precisão
DashboardTile, isso evitará umPieCharte apresentará um gráfico de colunas. - Se você tem mais valores do que fazem sentido para um gráfico de colunas,
DashboardTileisso tende a mostrar um gráfico de linhas. - Se seus dados parecerem valores de dispersão,
DashboardTiletende a mostrar um gráfico de dispersão. - Se seus dados de dispersão parecerem coordenadas geográficas,
DashboardTilepode optar por plotá-las em um mapa em vez de um gráfico. - Se seus dados parecerem ter formas geométricas, elas poderão ser plotadas em um gráfico ou mapa.
- Se seus dados parecerem ser de ações,
DashboardTilepode optar por mostrar um vela ou um gráfico OHLC. - Se
DashboardTileas heurísticas forem enganadas, você sempre pode definir o tipo de gráfico desejado via achartTypepropriedade, ou modificar o tipo de gráfico pela ação de gráfico da barra de ferramentas.
Conclusão
DashboardTileé um novo e empolgante recurso de paradas que agora lançamos como uma prévia. Agradeceríamos seu feedback para que possamos fazer mais melhorias antes do lançamento final.
