Dashboard Tile을 사용하여 쉽게 대시보드 작성

새로운 차트 기능인 대시보드 타일을 소개하게 되어 매우 기쁩니다. 이 차트 작성 기능을 사용하여 거의 수동 코딩 없이 대화형 대시보드를 구축하는 방법을 알아보세요.

Graham Murray Last Updated Apr 29, 2025 7min read

소개

이번 릴리스에는 Infragistics 새롭고 흥미로운 차트 기능이 있습니다. 우리는 그것을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;

이에 대한 응답으로,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는 모든 구성 요소의 통합에 대해 더 큰 제어 권한을 부여하기 때문에 최종 사용자가 사용 가능한 다양한 메뉴를 기반으로 시각화가 표시되는 방식을 조정할 수 있는 편집 가능한 대시보드 타일 시나리오를 만들 수 있습니다. 이는 응용 프로그램에서 동적 대시보드를 더 쉽게 만들 수 있도록 하기 위한 것입니다.

이에 비해 위의 시나리오는 다음과 같이 만들 수 있습니다.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();

하지만 정말 멋진 부분은DashboardTile version of the scenario is much more dynamic than the version that used CategoryChart.

대시보드 타일 분석

DashboardTile 에는 통합 제목이 있습니다.

를 통해 설정할 수 있습니다.tileTitle.

DashboardTile 에는 관련 차트의 항목을 표시하도록 자동으로 구성되는 통합 범례가 있습니다.

DashboardTile 범주 차트와 비교하여 유사한 명령 집합을 표시하는 도구 모음을 표시합니다.

그러나 다음과 관련된 몇 가지 다른 작업이 추가로 있습니다.DashboardTile.

그리드 작업을 클릭하면 에 바인딩된 데이터가 포함된 그리드가 표시됩니다.DashboardTile. Selection state is synchronized between the grid and the chart.

편집기 작업을 클릭하면 현재 표시된 시각화에 대한 컨텍스트 설정이 있는 편집기가 표시되며, 이를 통해 최종 사용자는 시각화를 원하는 대로 수정할 수 있습니다.

때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:

바인딩하면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.

자동 시각화

데이터 시각화 시나리오를 더 쉽게 배치하고 구성할 수 있도록 하고 최종 사용자가 런타임을 수정할 수 있도록 하는 것 외에도DashboardTile also helps you automatically render a useful visualization with no configuration.

이렇게 하면 더 적은 코드로 더 많은 작업을 더 쉽게 수행할 수 있지만 응용 프로그램에 매우 동적인 데이터가 있고 빌드 시 사용할 시각화를 반드시 예측할 수 없는 경우에도 도움이 됩니다.

DashboardTile 휴리스틱 라이브러리를 사용하여 표시할 가장 적합한 시각화를 결정합니다. 다음은 몇 가지 예입니다.

단일 값을 제공하는 경우DashboardTile is likely to present you with a LinearGauge or RadialGauge.
서로 쉽게 구별할 수 있는 소수의 값을 제공하는 경우,DashboardTile is likely to present you with a PieChart.
정확하게 비교하기 어려운 적은 수의 값을 제공하는 경우DashboardTile will avoid a PieChart and instead present you with a column chart.
세로 막대형 차트에 적합한 것보다 더 많은 값이 있는 경우DashboardTile will tend to show you a line chart.
데이터가 분산형 값으로 표시되는 경우DashboardTile will tend to show you a scatter chart.
분산형 데이터가 지리적 좌표인 것 같으면DashboardTile may choose to plot these on a map rather than a chart.
데이터가 기하학적 모양으로 표시되는 경우 차트 또는 맵에 그려질 수 있습니다.
데이터가 재고 데이터인 것처럼 보이는 경우,DashboardTile may chose to show a candlestick or OHLC plot.
면DashboardTile‘s heuristics are fooled, you can always set the desired chart type via the chartType property, or modify the chart type via the toolbar chart type action.

결론

DashboardTile는 현재 미리보기로 출시된 흥미로운 새 차트 기능입니다. 최종 릴리스 전에 더 많은 개선을 할 수 있도록 피드백을 주셔서 감사합니다.

Product Updates Angular Blazor Infragistics Ultimate React Uncategorized Web Components WPF

Dashboard Tile을 사용하여 쉽게 대시보드 작성

소개

동기

대시보드 타일 분석

자동 시각화

결론

관련 기사

5 React Grid Examples That Will Transform Your Next Project

Getting Started with Master-Detail Layout Using Ignite UI for Angular Grid

Build a React Excel-like Grid with Ignite UI