Dashboard Tile을 사용하여 쉽게 대시보드 작성
새로운 차트 기능인 대시보드 타일을 소개하게 되어 매우 기쁩니다. 이 차트 작성 기능을 사용하여 거의 수동 코딩 없이 대화형 대시보드를 구축하는 방법을 알아보세요.
Graham Murray
7min read
소개
이번 릴리스에는 Infragistics 새롭고 흥미로운 차트 기능이 있습니다. 우리는 그것을 DashboardTile 그리고 그 목적은 최종 사용자가 다양한 도구 모음 작업을 통해 런타임에 변경할 수 있는 동적 시각화를 제공하는 것입니다. 이용하실 수 있습니다 지금로 미리 보기 Ignite UI 대상 Angular / React / 웹 컴포넌트 / 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 제공된 데이터에 대한 공통 구성 요소 집합을 0 또는 0에 가까운 구성으로 제시하기 위한 것이며, 모두 미학적으로 만족스러운 방식으로 배치됩니다.
또한 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();
그러나 정말 멋진 부분은 시나리오의 버전이 사용 CategoryChart 된 버전보다 훨씬 더 동적이라는 것입니다 DashboardTile.
대시보드 타일 분석
DashboardTile 에는 통합 제목이 있습니다.
를 통해 tileTitle 설정할 수 있습니다.
DashboardTile 에는 관련 차트의 항목을 표시하도록 자동으로 구성되는 통합 범례가 있습니다.
DashboardTile 범주 차트와 비교하여 유사한 명령 집합을 표시하는 도구 모음을 표시합니다.
그러나 이와 DashboardTile 관련된 몇 가지 다른 작업이 추가로 있습니다.
그리드 작업을 클릭하면 에 바인딩 DashboardTile 된 데이터가 포함된 그리드가 표시됩니다. 선택 상태는 그리드와 차트 간에 동기화됩니다.
편집기 작업을 클릭하면 현재 표시된 시각화에 대한 컨텍스트 설정이 있는 편집기가 표시되며, 이를 통해 최종 사용자는 시각화를 원하는 대로 수정할 수 있습니다.
처음 DashboardTile 표시되면 표시할 시각화에 대한 최상의 추측을 제공합니다(나중에 자세히 설명). 하지만 데이터가 잘못되었거나 데이터를 시각화하는 다른 방법과 비교하고 싶다면 툴바에서 차트 유형 작업을 사용할 수 있습니다.
에 DashboardTile LocalDataSource 바인딩하면 그룹화/요약 상태가 그리드와 차트 간에도 동기화되므로 그리드 집계에 대한 변경 사항이 차트에 전파됩니다.
자동 시각화
데이터 시각화 시나리오를 더 쉽게 배치하고 구성할 수 있도록 하고 최종 사용자가 런타임 DashboardTile을 수정할 수 있도록 하는 것 외에도 구성 없이 유용한 시각화를 자동으로 렌더링하는 데 도움이 됩니다.
이렇게 하면 더 적은 코드로 더 많은 작업을 더 쉽게 수행할 수 있지만 응용 프로그램에 매우 동적인 데이터가 있고 빌드 시 사용할 시각화를 반드시 예측할 수 없는 경우에도 도움이 됩니다.
DashboardTile 휴리스틱 라이브러리를 사용하여 표시할 가장 적합한 시각화를 결정합니다. 다음은 몇 가지 예입니다.
- 단일 값을 제공하면 or
RadialGauge을DashboardTile제시LinearGauge할 가능성이 높습니다. - 서로 쉽게 구별할 수 있는 소수의 값을 제공하는 경우,
DashboardTile를 제시PieChart할 가능성이 높습니다. - 정확하게
DashboardTile비교하기 어려운 소수의 값을 제공하면 를PieChart피하고 대신 세로 막 대형 차트가 표시됩니다. - 세로 막 대형 차트
DashboardTile에 적합한 것보다 더 많은 값이 있으면 꺾은선형 차트가 표시되는 경향이 있습니다. - 데이터가 분산형 값으로
DashboardTile표시되면 분산형 차트가 표시되는 경향이 있습니다. - 분산형 데이터가 지리적 좌표
DashboardTile인 것 같으면 차트가 아닌 지도에 표시하도록 선택할 수 있습니다. - 데이터가 기하학적 모양으로 표시되는 경우 차트 또는 맵에 그려질 수 있습니다.
- 데이터가 주식 데이터
DashboardTile인 것 같으면 촛대 또는 OHLC 플롯을 표시하도록 선택할 수 있습니다. - 휴리스틱이 속았다면
DashboardTile언제든지 속성을 통해chartType원하는 차트 유형을 설정하거나 도구 모음 차트 유형 작업을 통해 차트 유형을 수정할 수 있습니다.
결론
DashboardTile는 현재 미리보기로 출시된 흥미로운 새 차트 기능입니다. 최종 릴리스 전에 더 많은 개선을 할 수 있도록 피드백을 주셔서 감사합니다.
