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

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

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

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, DashboardTile is likely to present you with a LinearGauge or RadialGauge.
  • If you provide a small number of values that are easy to distinguish from one another, DashboardTile is likely to present you with a PieChart.
  • If you provide a small number of values that are difficult to compare precisely DashboardTile will avoid a PieChart and instead present you with a column chart.
  • If you have more values than make sense for a column chart, DashboardTile will tend to show you a line chart.
  • If your data appears to be scatter values, DashboardTile will tend to show you a scatter chart.
  • If your scatter data seems to be geographic coordinates, DashboardTile may choose to plot these on a map rather than a chart.
  • 데이터가 기하학적 모양으로 표시되는 경우 차트 또는 맵에 그려질 수 있습니다.
  • If your data appears to be stock data, DashboardTile may chose to show a candlestick or OHLC plot.
  • If 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.

Conclusion

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

Product Updates Angular Blazor Infragistics Ultimate React Uncategorized Web Components WPF
데모 요청