ダッシュボードタイルを使用したダッシュボードの簡単な作成

新しいチャート機能であるダッシュボードタイルを導入できることを非常に嬉しく思います。このグラフ作成機能を使用して、ほとんど手作業でコーディングせずにインタラクティブなダッシュボードを構築する方法を学びます。

Graham Murray Last Updated Apr 29, 2025 7min read

紹介

今回のリリースでは、Infragisticsが新しくエキサイティングなチャート機能の発表を予定しています。私たちはこれをDashboardTileその目的は、エンドユーザーが様々なツールバーアクションを通じて実行時に変更できる動的な可視化を提供することです。入手可能です今プレビュー Ignite UIに対してAngular / React / Webコンポーネント/ BlazorそしてUltimate UI for WPF (そして今後も続くプラットフォーム)。

モチベーション

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;

これに対し、DashboardTileは提供されたデータに対してゼロまたはほぼゼロの構成を持つ共通のコンポーネントセットを提示し、すべて美的に美しいレイアウトで配置することを目的としています。

さらに、Infragistics はすべてのコンポーネントの統合をより詳細に制御しているため、編集可能なダッシュボードタイルシナリオを作成する機会を利用して、エンドユーザーは利用可能なさまざまなメニューに基づいてビジュアライゼーションの表示方法を微調整できます。これは、アプリケーションでの動的ダッシュボードの作成を容易にすることを目的としています。

比較すると、上記のシナリオは以下のHTMLで作成可能ですDashboardTile:

<!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();

しかし本当に素晴らしいのは、シナリオのDashboardTileバージョンが使われたバージョンよりもずっと動的であることですCategoryChart。

ダッシュボードタイルの構造

DashboardTile統合されたタイトルを持っています:

tileTitleで設定できます。

DashboardTile統合された凡例があり、関連するチャートの項目を表示するように自動的に設定されます。

DashboardTileカテゴリチャートと同様のコマンドセットを表示するツールバーを提示します:

しかし、他にもいくつかの具体的な行動がありますDashboardTile。

グリッドアクションをクリックすると、そのデータが入ったグリッドが表示され、そのデータがDashboardTileに割り当てられています。選択状態はグリッドとチャートの間で同期されます。

エディターアクションをクリックすると、現在表示されているビジュアライゼーションのコンテキスト設定を持つエディターが表示され、エンドユーザーはビジュアライゼーションを好みに合わせて変更できます。

最初に表示されるときDashboardTileどのビジュアライゼーションを見せるべきかを推測します(詳細は後述します)。もし誤りや、他の可視化方法と比較したい場合は、ツールバーのチャートタイプのアクションを使えます:

もしDashboardTileaLocalDataSourceにバインドすると、グリッドとチャート間でグループ化/要約状態が同期され、グリッド集約の変更がチャートに伝播されます。

自動視覚化

データ可視化シナリオのレイアウトや設定を容易にし、エンドユーザーが実行時に変更できるだけでなく、設定なしで便利なビジュアライゼーションを自動的にレンダリングできるのも役立ちますDashboardTile。

これは、より少ないコードでより多くのことを簡単に行うのに役立ちますが、アプリケーションに非常に動的なデータがあり、ビルド時にどの視覚化を使用するかを必ずしも予測できない場合にも役立ちます。

DashboardTileヒューリスティックライブラリを用いて、最も適切な可視化を決定しようとします。以下はいくつかの例です:

単一の値を提示すると、DashboardTileLinearGaugeまたはRadialGaugeを示す可能性が高いです。
互いに区別しやすい少数の値を提示すれば、DashboardTilePieChartを示す可能性が高いです。
比較が難しい少数の値を提示した場合DashboardTilePieChartは避けて列状のグラフを提示します。
列チャートとして意味が通じない値が多い場合は、折れ線グラフが表示される傾向がありますDashboardTile
もしデータが散布の数値のように見えるなら、DashboardTile散布チャートが表示される傾向があります。
もし散乱データが地理座標のように見えるなら、DashboardTileチャートではなく地図にプロットすることを選ぶかもしれません。
データが幾何学的形状に見える場合は、チャートまたはマップにプロットされている可能性があります。
もしデータが株価データのように見える場合は、DashboardTileろうそくのプロットやOHLCプロットを選択することができます。
もしDashboardTileのヒューリスティックが騙された場合は、thechartType propertyで望むチャートタイプを設定するか、ツールバーのチャートタイプアクションで変更することもできます。

結論

DashboardTileこれは、プレビューとして公開したエキサイティングな新しいチャート機能です。最終リリース前にさらなる改善ができるよう、皆さんのフィードバックをいただけるとありがたいです。

Product Updates Angular Blazor Infragistics Ultimate React Uncategorized Web Components WPF

Angular

ダッシュボードタイルを使用したダッシュボードの簡単な作成

紹介

モチベーション

ダッシュボードタイルの構造

自動視覚化

結論

関連記事

Ignite UI for Angular 21.0がリリースされました!新しくてワクワクする点

React開発者にとって最適なマテリアルUIの代替案

Reactにとって最適なAnt Designの代替案は何ですか?

ダッシュボードタイルを使用したダッシュボードの簡単な作成

紹介

モチベーション

ダッシュボード タイルの構造

自動視覚化

結論

ダッシュボードタイルの構造