ダッシュボードタイルを使用したダッシュボードの簡単な作成
新しいチャート機能であるダッシュボードタイルを導入できることを非常に嬉しく思います。このグラフ作成機能を使用して、ほとんど手作業でコーディングせずにインタラクティブなダッシュボードを構築する方法を学びます。
Graham Murray
7min read
紹介
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).
モチベーション
Infragisticsでは、通常、コンポーネントを非常にモジュール化するように整理しています。完全なチャート作成エクスペリエンスには、チャート、凡例、ツールバー、ZoomSlider、ラベル、設定など、構成/接続するためのさまざまなコンポーネントが含まれる場合があります。あるユーザーはこれらをある方法で構成およびレイアウトしたい場合もあれば、別のユーザーがまったく異なる方法で構成およびレイアウトしたい場合があるため、これらのコンポーネントが別々であるが接続されており、ユーザーの裁量でユーザーのレイアウトに配置し、個別に構成できると便利です。
ただし、これにより、単純なタスクを完了するための詳細な構成量が発生する可能性があり、ユーザーがコンポーネントを構成できる程度は気が遠くなる可能性があります。さらに難しいことに、ウェブ上では、特にプラットフォームの経験が浅い人にとっては、見た目にも美しいデータビジュアライゼーションレイアウトを実現することは難しい場合があります。さらに、ユーザーの大部分は、コンポーネントの合理的にまっすぐな構成を望んでいる場合があります。
たとえば、ビジュアライゼーションの外観を良くする一般的な方法を次に示します。
そして、その効果を生み出すためには、次の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>
そして、この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%;
}
また、コンポーネントは次のようにコードで構成する必要がありました。
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.
さらに、Infragistics はすべてのコンポーネントの統合をより詳細に制御しているため、編集可能なダッシュボード タイル シナリオを作成する機会を利用して、エンドユーザーは利用可能なさまざまなメニューに基づいてビジュアライゼーションの表示方法を微調整できます。これは、アプリケーションでの動的ダッシュボードの作成を容易にすることを目的としています。
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>
そして、このCSSは:
html,
body {
margin: 0px;
height: 100%;
}
そして、このコード:
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.
ダッシュボード タイルの構造
DashboardTileには、統合されたタイトルがあります。
which you can set via the tileTitle.
DashboardTileには、関連付けられたチャートのアイテムを表示するように自動的に設定される統合凡例があります。
DashboardTileは、カテゴリチャートと比較した同様のコマンドセットを表示するツールバーを表示します。
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.
エディター アクションをクリックすると、現在表示されているビジュアライゼーションのコンテキスト設定を持つエディターが表示され、エンドユーザーはビジュアライゼーションを好みに合わせて変更できます。
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.
自動視覚化
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.
これは、より少ないコードでより多くのことを簡単に行うのに役立ちますが、アプリケーションに非常に動的なデータがあり、ビルド時にどの視覚化を使用するかを必ずしも予測できない場合にも役立ちます。
DashboardTileヒューリスティックのライブラリを使用して、表示する最適なビジュアライゼーションを決定します。次に例をいくつか示します。
- 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. - データが幾何学的形状に見える場合は、チャートまたはマップにプロットされている可能性があります。
- 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.
Conclusion
DashboardTileは、プレビューとしてリリースされたエキサイティングな新しいチャート機能です。最終リリース前にさらに改善を行うことができるように、フィードバックをいただければ幸いです。
