반응형 Angular 대시보드 2부: DataGrid 및 차트 추가 방법

Angular대시보드 반응형 Angular 대시보드 2부: DataGrid 및 차트 추가 방법

추천0

페이지 정보

작성자 GrapeCity

작성일 2023-09-06 15:47 조회 255회 댓글 0건

본문

관련링크

이 시리즈의 문서 읽기:
반응형 Angular 대시보드 1부: 개요 및 대시보드 레이아웃 만들기
반응형 Angular 대시보드 2부: DataGrid 및 차트 추가 방법
반응형 Angular 대시보드 3부: 맵 컨트롤로 지리 데이터 표시
Angular 대시보드 글 전체 보기

우리는 1부에서 대시보드가 유용한 이유에 대해 이야기하고, 구축할 대시보드 유형 및 대시보드 응용 프로그램을 설정해 보았습니다.

2부에서는 대시보드 상단에 정보 카드를 구현하고 사이트 방문하는 이용자 수와 엑세스하는 방법에 대한 정보를 표시할 FlexCharts 및 Gauges(게이지)를 구현합니다.

정보 카드 및 Wijmo Tooltip

많은 대시보드가 페이지 상단 카드에 필수 정보를 표시합니다.

판매 대시보드의 경우에는 일반적으로 파이프라인의 거래, 전환율, 총 판매, 목표치까지 남은 판매액 등과 같은 정보가 있습니다.

대시보드에서는 사이트 방문자에 대한 통계를 모니터링하도록 만들 계획이기 때문에 활성 세션 수, 사이트 로드 시간, APDEX 스코어(Application Performance Index: 제공되는 웹 서비스에 대해 사용자 만족도를 측정하는 표준 지표), 이탈률 등을 표시합니다.

Angular에서 작업하고 있으므로 정보 카드를 표시할 새 컴포넌트 생성하기 위해 다음 명령을 실행합니다.

ng g c current-info

current-info 컴포넌트가 존재하기 때문에, current-info.component.html 파일에 HTML을 추가할 수 있습니다.

<div class="info-grid">
    <div class="info">
        <div class="info-session-header">ACTIVE SESSIONS (NOW) <i class="bi bi-question-circle" [wjTooltip]="activeSessionTooltip" [wjTooltipPosition]="6"></i></div>
        <div class="info-session-count">{{ activeSession.current }}</div>
        <div class="info-session previous-day">
            <div class="previous-day-count">
                <div>30 DAYS AGO</div>
                <div class="previous-day-value">{{ activeSession.previous }}</div>
            </div>
            <div class="previous-day-change">
                <div class="change-right">CHANGE</div><br>
                <div class="change-right negative"><i class="bi bi-caret-down-fill"></i>{{ activeSession.change }}</div>
            </div>
        </div>
    </div>
</div>

이는 활성 세션(Active Sessions) 카드의 코드입니다.

화면 너비 기준으로 카드 순서를 재정렬하여 반응형으로 동작하도록 app.component.html 파일과 마찬가지로 그리드를 사용하여 4 개의 카드를 구성하겠습니다.

여기서는 많은 클래스를 구현하고 있습니다.

개중 일부 클래스를 다루겠지만, current-info.component.css 파일에 대해서는 조금 더 깊이 있게 알아보고자 합니다.

알아야 할 중요한 점은 여기서 카드의 레이아웃을 처리한다는 것입니다.

info-grid 클래스: 카드의 레이아웃을 관리
info 클래스: 모든 카드에 적용할 핵심 스타일을 처리
info-session-header와 같은 클래스: 모든 카드의 각 섹션에 스타일을 지정

HTML의 나머지 부분을 통합하기 전, 짚고 넘어갈 사항이 한 가지 더 있습니다.

Bootstrap 아이콘 및 Wijmo의 Tooltip 클래스 사용에 관한 것입니다.

<i> 태그를 보면 bi, bi-question-circle 및 bi-caret-down-fill과 같은 요소에 몇 가지 클래스를 사용하고 있음을 알 수 있습니다.

bi 클래스는 부트스트랩 아이콘의 기본 클래스입니다.

표시하려는 실제 아이콘인 bi-question-circle 및 bi-caret-down-fill을 포함합니다.

물음표 아이콘을 추가하는 동일한 <i> 요소에는 Wijmo Tooltip도 추가합니다.

Tooltip은 사용자가 아이콘에 마우스 커서를 놓으면 카드에 대한 자세한 정보를 표시합니다.

activeSessionTooltip 변수를 wjTooltip 속성에 할당하여 표시하려는 텍스트를 설정하고, wjTooltipPosition 속성에 숫자 값을 설정하여 Tooltip의 위치를 설정했습니다.

속성을 설정하는 데 사용할 수 있는 열거 값은 문서에서 확인할 수 있습니다.

또한 카드 전체에 표시하려는 일부 값을 바인딩하고 있으며, 이 정보는 current-info.component.ts 파일에 저장됩니다.

일반적으로 이와 같은 값을 사용하면 서버에서 해당 값을 읽어들일 수 있지만, 대시보드의 목적을 위해 TypeScript 파일 내에서 이러한 값을 설정할 것입니다.

아래를 살펴보면 사이트 로드 시간, APDEX 스코어(Application Performance Index: 제공되는 웹 서비스에 대해 사용자 만족도를 측정하는 표준 지표), 이탈률에 대한 카드가 포함된 current-info 컴포넌트에 대한 전체 HTML을 볼 수 있습니다.

<div class="info-grid">
    <div class="info">
        <div class="info-session-header">ACTIVE SESSIONS (NOW) <i class="bi bi-question-circle" [wjTooltip]="activeSessionTooltip" [wjTooltipPosition]="6"></i></div>
        <div class="info-session-count">{{ activeSession.current }}</div>
        <div class="info-session previous-day">
            <div class="previous-day-count">
                <div>30 DAYS AGO</div>
                <div class="previous-day-value">{{ activeSession.previous }}</div>
            </div>
            <div class="previous-day-change">
                <div class="change-right">CHANGE</div><br>
                <div class="change-right negative"><i class="bi bi-caret-down-fill"></i>{{ activeSession.change }}</div>
            </div>
        </div>
    </div>
    <div class="info">
        <div class="info-session-header">LOAD TIME (NOW) <i class="bi bi-question-circle" [wjTooltip]="loadTimeTooltip" [wjTooltipPosition]="6"></i></div>
        <div class="info-session-count">{{ loadTime.current }}</div>
        <div class="info-session previous-day">
            <div class="previous-day-count">
                <div>30 DAYS AGO</div>
                <div class="previous-day-value">{{ loadTime.previous }}</div>
            </div>
            <div class="previous-day-change">
                <div class="change-right">CHANGE</div><br>
                <div class="change-right positive"><i class="bi bi-caret-up-fill"></i>{{ loadTime.change }}</div>
            </div>
        </div>
    </div>
    <div class="info">
        <div class="info-session-header">APDEX SCORE (NOW) <i class="bi bi-question-circle" [wjTooltip]="apdexTooltip" [wjTooltipPosition]="6"></i></div>
        <div class="info-session-count">{{ apdexScore.current }}</div>
        <div class="info-session previous-day">
            <div class="previous-day-count">
                <div>30 DAYS AGO</div>
                <div class="previous-day-value">{{ apdexScore.previous }}</div>
            </div>
            <div class="previous-day-change">
                <div class="change-right">CHANGE</div><br>
                <div class="change-right positive"><i class="bi bi-caret-up-fill"></i>{{ apdexScore.change }}</div>
            </div>
        </div>
    </div>
    <div class="info">
        <div class="info-session-header">BOUNCE RATE (NOW) <i class="bi bi-question-circle" [wjTooltip]="bounceRateTooltip" [wjTooltipPosition]="6"></i></div>
        <div class="info-session-count">{{ bounceRate.current }}</div>
        <div class="info-session previous-day">
            <div class="previous-day-count">
                <div>30 DAYS AGO</div>
                <div class="previous-day-value">{{ bounceRate.previous }}</div>
            </div>
            <div class="previous-day-change">
                <div class="change-right">CHANGE</div><br>
                <div class="change-right negative"><i class="bi bi-caret-down-fill"></i>{{ bounceRate.change }}</div>
            </div>
        </div>
    </div>
</div>

다음에는 current-info.component.css 파일로 넘어가서 해당 카드를 어떻게 배치하는지에 대해 알아보겠습니다.

.info-grid {
    display: grid;
    grid-auto-columns: 1fr;
    grid-template-areas:
        'one'
        'two'
        'three'
        'four';
    width: 100%;
    margin-inline: auto;
    box-shadow: 2px 2px 2px 2px hsl(0, 0%, 70%);
    background-color: white;
}
 
.info {
    padding: 1rem;
}
 
.info:nth-child(1) {
    grid-area: one;
}
 
.info:nth-child(2) {
    grid-area: two;
}
 
.info:nth-child(3) {
    grid-area: three;
}
 
.info:nth-child(4) {
    grid-area: four;
}
 
.info-session-header {
    font-size: 1.05em;
    color: gray;
}
 
.info-session-count {
    font-size: 2.5em;
    font-weight: 200;
}
 
.previous-day {
    display: grid;
    grid-auto-columns: 1fr;
    grid-template-areas: 'one two';
    color: gray;
}
 
.previous-day-value {
    color: black;
    font-weight: bold;
}
 
.change-right {
    float: right;
}
 
.caret {
    width: 0;
    height: 0;
    display: inline-block;
    border: 9px solid transparent;
}
 
.positive {
    color: green;
}
 
.negative {
    color: red;
}
 
@media (max-width: 799px) {
    .info:nth-child(1) {
        border-bottom: 1px lightgray solid;
    }
 
    .info:nth-child(2) {
        border-bottom: 1px lightgray solid;
    }
 
    .info:nth-child(3) {
        border-bottom: 1px lightgray solid;
    }
}
 
@media (min-width: 800px) {
    .info-grid {
        grid-template-areas:
            'one two'
            'three four';
    }
 
    .info:nth-child(1) {
        border-bottom: 1px lightgray solid;
        border-right: 1px lightgray solid;
    }
 
    .info:nth-child(2) {
        border-bottom: 1px lightgray solid;
    }
 
    .info:nth-child(3) {
        border-right: 1px lightgray solid;
    }
}
 
@media (min-width: 1200px) {
    .info-grid {
        grid-template-areas:
            'one two three four';
    }
 
    .info:nth-child(1) {
        border-right: 1px lightgray solid;
    }
     
    .info:nth-child(2) {
        border-right: 1px lightgray solid;
    }
     
    .info:nth-child(3) {
        border-right: 1px lightgray solid;
    }
}

많은 CSS가 대시보드 레이아웃을 처리하는 CSS와 매우 유사하다는 사실을 알 수 있습니다.

카드는 그리드를 사용하여 배치되고, 각 카드를 그리드 내 배치하는 데에 사용할 수 있는 grid-area 값 또한 할당합니다.

화면 크기에 따라 카드 레이아웃을 처리할 너비 매개 변수도 정의합니다.

CSS와 관련하여 마지막으로 살펴볼 것은, 카드 하단에 30일 전의 각 카드 통계를 표시한다는 점입니다.

지난달보다 줄어든 경우에는 빨간색, 늘어난 경우에는 초록색으로 표시합니다.

previous-day 및 previous-day-value 클래스가 이 정보를 처리합니다.

앱을 실행하기 전에 current-info.component.ts 파일로 이동하여 컴포넌트에 로드하고 있는 데이터를 살펴보겠습니다.

import { Component, OnInit } from '@angular/core';
 
@Component({
  selector: 'app-current-info',
  templateUrl: './current-info.component.html',
  styleUrls: ['./current-info.component.css']
})
export class CurrentInfoComponent implements OnInit {
  activeSessionTooltip = 'Number of current active sessions.';
  loadTimeTooltip = 'Current average loadtime of the site.';
  apdexTooltip = 'Ratio of tolerating requests to total requests made.';
  bounceRateTooltip = 'Percentage of visitors who enter and then leave the site.';
 
  activeSession = { current: 112, previous: 148, change: '24.32%' };
  loadTime = { current: '2.08s', previous: '1.7s', change: '18.30%' };
  apdexScore = { current: '1.00', previous: '0.96', change: '4.17%' };
  bounceRate = { current: '10.2%', previous: '16.4%', change: '37.8%' }
 
  constructor() { }
 
  ngOnInit(): void {
  }
 
}

이것은 매우 기본적인 TypeScript입니다.

각 카드에 표시하려고 하는 데이터를 만들고, 각 Tooltip에 표시하려는 텍스트를 정의하는 것일 뿐입니다.

다음으로 컴포넌트를 app.component.html 파일에 추가해야 합니다.

<div class="livemap load-info">
    <app-current-info></app-current-info>
  </div>

이제 응용 프로그램을 실행하면 다음 내용을 확인할 수 있습니다.

정보 카드

사용자가 물음표 아이콘 중 하나에 마우스 커서를 놓으면 카드에 대한 추가 정보를 표시하는 Wijmo Tooltip이 나타납니다.

정보 카드 팁

세션 통계 및 FlexChart

다음으로 다룰 섹션은 FlexChart를 대시보드에 결합하여 사용자의 세션 통계를 표시하는 방법입니다.

이를 위해서 다음 명령을 사용하여 3 개의 컴포넌트를 새로 만들 것입니다.

ng g c session-info
ng g c top-platform-info
ng g c top-browser

session-info 컴포넌트: 총 세션 수에 대한 정보를 표시
top-platform-info: 사용자가 사이트 방문을 위해 사용하고 있는 장치 유형과 관련된 정보를 제공
top-browser:사용자가 사이트에 액세스하기 위해 사용하는 여러 브라우저와 관련된 정보를 표시

첫 번째로 다룰 컴포넌트는 session-info입니다.

<div class="sessions-container">
    <div class="sessions-info">
        <div class="session-header">SESSIONS <i class="bi bi-question-circle" [wjTooltip]="sessionTooltip" [wjTooltipPosition]="6"></i></div>
    </div>
    <div class="sessions-info">
        <div class="session-total">
            <div class="session-total-value">
                {{ totalSessions }}
            </div>
            <div class="session-total-annotation">
                IN TOTAL
            </div>
        </div>
        <wj-flex-pie class="session-chart" [itemsSource]="data" [bindingName]="'sessions'" [binding]="'number'" [innerRadius]="0.85" [palette]="['rgba(50, 50, 255, 1)', 'rgb(0, 200, 200, 1)']" style="margin-left: auto; margin-right: auto;">
            <wj-flex-chart-legend [position]="'None'"></wj-flex-chart-legend>
        </wj-flex-pie>
    </div>
    <div class="sessions-info sessions-breakdown">
        <div style="display: flex; justify-content: space-between">
            <div>NEW</div><div>RETURNING</div>
        </div>
        <div style="display: flex; justify-content: space-between">
            <div class="session-value-bg">{{data[0].number}}</div><div class="session-value-bg">{{ data[1].number }}</div>
        </div>
        <hr>
        <div>AVERAGE PAGEVIEWS/SESSION</div>
        <div style="display: flex; justify-content: space-between">
            <div class="session-value-bg">{{ pageViews.value }}</div><div class="session-value-sm"><i class="bi bi-caret-up-fill positive"></i>{{ pageViews.change }}</div>
        </div>
        <hr>
        <div>AVERAGE SESSION DURATION</div>
        <div style="display: flex; justify-content: space-between">
            <div class="session-value-bg">{{ sessions.value }}</div><div class="session-value-sm"><i class="bi bi-caret-up-fill positive"></i>{{ sessions.change }}</div>
        </div>
    </div>
</div>

이 컴포넌트의 HTML은 간단합니다.

현재 카드 헤더, Wijmo Tooltip이 첨부된 부트스트랩 아이콘, 통계를 표시하고 Flexbox로 서식을 지정하는 카드 베이스가 있습니다.

하지만 이 컴포넌트에서 집중하고자 하는 부분은 우리가 통합하려는 Wijmo FlexPie입니다.

Wijmo의 FlexPie는 단 몇 줄의 HTML 코드로 구현할 수 있는 아주 강력한 컴포넌트입니다.

핵심적으로 기능을 수행하기 위해 전달해야 하는 것은 하단의 세 가지와 같습니다.

데이터 소스(itemsSource 속성에 연결)
binding 속성에 결합하는 바인딩 값
bindingName 속성에 결합하는 name-value

컨트롤에 스타일을 좀 더 추가하기 위해 더 많은 정보를 중앙에 표시할 수 있도록 FlexPie 차트에 내부 반경(inner radius)을 설정하고 사용자 정의 팔레트를 설정합니다.

* 이번 차트에서는 청록색(rgba(0, 200, 200, 1))과 로열 블루(rgba(50, 50, 255, 1))를 두 가지 팔레트 색으로 사용했습니다.

마지막으로 할 일은 모든 항목이 보기 좋게 배열되도록 컨트롤의 중심을 가로로 배치하는 것입니다.

CSS로 이동하기 전에 앱 폴더에 data.service.ts 파일을 생성하고 이 서비스를 app.module.ts 파일에 공급자로 추가하겠습니다.

마지막으로, 다음 코드를 추가합니다.

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})

export class DataService {

  sessionData = [
      { sessions: 'New Users', number: 49120 },
      { sessions: 'Returning Users', number: 62780 }
  ];
 
  getSessionData() {
      return this.sessionData;
  }
}

data.service.ts 파일에서 getSessionData() 메서드가 전송하는 데이터를 확인할 수 있습니다.

객체 배열(array of objects)을 반환하고 있으며, 이를 사용해 컨트롤을 채우겠습니다.

간단히 말해, 응용 프로그램이 샘플 데이터를 생성하면 대시보드에서는 서버에서 데이터를 가지고 오기 위해 API를 호출합니다.

다음으로, session-info.component.ts 파일을 살펴보겠습니다.

import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';
 
@Component({
  selector: 'app-session-info',
  templateUrl: './session-info.component.html',
  styleUrls: ['./session-info.component.css']
})
export class SessionInfoComponent implements OnInit {
  data: any[];
  sessionTooltip = 'User sessions breakdown.';
  pageViews = { value: 3.54, change: '12.26%' };
  sessions = { value: '4m 41s', change: '9.38%' };
  totalSessions = '111.9k';
 
  constructor(private dataService: DataService) {
    this.data = dataService.getSessionData();
  }
 
  ngOnInit(): void {
  }
 
}

카드에 표시할 샘플 데이터를 만들고 데이터 서비스를 호출하여 FlexPie 컨트롤을 위한 데이터를 가지고 옵니다.

HTML이 있고 앞으로 사용하게 될 데이터를 확인했으므로, session-info.component.css 파일로 이동하여 현재 진행 중인 스타일 지정 작업을 간략하게 살펴보겠습니다.

.sessions-container {
    padding: 1rem;
}
 
.session-header {
    font-size: 1.05em;
    color: gray;
}
 
.sessions-info {
    position: relative;
}
 
.session-chart {
    border: none;
    height: 200px;
    width: 200px;
}
 
.session-total {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
 
.session-total-value {
    font-size: 2em;
}
 
.session-total-annotation {
    font-size: 1em;
    font-weight: 600;
    color: gray;
}
 
.sessions-breakdown {
    color: gray;
}
 
.session-value-bg {
    color: black;
    font-weight: 500;
    font-size: 1.75rem;
}
 
.session-value-sm {
    padding-top: 0.75em;
}
 
.positive {
    color: green;
}

여기서는 모든 항목이 올바른 간격을 유지할 수 있도록 <div>마다 패딩(padding: 테두리와 콘텐츠 사이에 있는 여백)을 설정하고, FlexPie 컨트롤의 중앙에 일부 통계가 위치하도록 조정합니다.

또한 컴포넌트의 숫자가 돋보이도록 컬러링을 추가해야 합니다.

session-info 컴포넌트를 app.component.html 파일에 추가합니다.

  <div class="livemap sessions">
    <app-session-info></app-session-info>
  </div>

응용 프로그램을 실행하면 sessions-info 컴포넌트는 다음과 같은 모양이 됩니다.

대시보드의 세션 섹션이 완료되었으므로 "Top Platforms" 및 "Top Browsers" 카드를 구현하겠습니다.

이 대시보드 카드는 둘 다 동일한 기능을 하지만 서로 다른 데이터를 표시합니다.

먼저 "Top Platforms" 카드에 대해 살펴봅니다.

<div class="platforms-container">
    <div class="platforms-header">TOP PLATFORMS <i class="bi bi-question-circle" [wjTooltip]="platformTooltip" [wjTooltipPosition]="6"></i></div>
    <div class="platforms-info">
        <wj-flex-chart [header]="'Average Load Time'" [bindingX]="'platform'" [selectionMode]="'Point'" [itemsSource]="loadTimeData" [palette]="palette">
            <wj-flex-chart-legend [position]="'None'"></wj-flex-chart-legend>
            <wj-flex-chart-series [name]="'Previous Month'" [binding]="'prevMonth'"></wj-flex-chart-series>
            <wj-flex-chart-series [name]="'Current Month'" [binding]="'curMonth'"></wj-flex-chart-series>
        </wj-flex-chart>
        <wj-flex-pie [header]="'Sessions by Platform'" [bindingName]="'platform'" [binding]="'sessions'" [itemsSource]="sessionData" [palette]="palette"></wj-flex-pie>
    </div>
</div>

지금까지 빌드한 다른 카드에 비해 HTML 코드가 훨씬 짧다는 사실을 알 수 있습니다.

이는 Wijmo의 FlexChart 컨트롤 뿐 아니라 Wijmo의 모든 컨트롤의 사용성이 얼마나 쉬운지 나타내고 있습니다.

카드의 헤더에 다른 Wijmo Tooltip을 통합하고 있으며, 이 카드에서 FlexChart의 막대형 차트와 FlexPie 차트 등 두 가지 FlexChart도 구현합니다.

우리가 할 일은 몇 가지 속성을 설정하는 것입니다.

FlexPie의 경우 '세션' 카드에서 설정한 것과 동일한 sans innerRadius 속성을 설정합니다.

막대형 차트를 위해서는 itemsSource 속성, palette 속성 그리고 bindingX 속성과 x-axis 속성을 설정합니다.

또한 표시하려는 차트와 다양한 시리즈에 범례도 추가합니다.

이 막대형 차트의 경우에는 이번 달과 지난달 모두에 대한 정보를 표시하고자 합니다.

HTML을 구현했으므로 이제 top-platform-info.component.ts 파일 및 data.service.ts 파일로 이동하여 바인딩 중인 데이터를 살펴보겠습니다.

import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';
 
import * as wjChart from '@grapecity/wijmo.chart';
 
@Component({
  selector: 'app-top-platform-info',
  templateUrl: './top-platform-info.component.html',
  styleUrls: ['./top-platform-info.component.css']
})
export class TopPlatformInfoComponent implements OnInit {
  loadTimeData: any[];
  sessionData: any[];
  platformTooltip = 'Breakdown of sessions by platform.';
  palette = wjChart.Palettes.darkly;
 
  constructor(private dataService: DataService) {
    this.loadTimeData = dataService.getPlatformLoadTimeData();
    this.sessionData = dataService.getPlatformSessionData();
  }
 
  ngOnInit(): void {
  }
 
}

이 data.service.ts 파일에서는 표시하려는 tooltip 텍스트를 설정하고, 팔레트를 설정하고, 두 차트의 데이터를 가지고 오기 위한 데이터 서비스를 호출합니다.

platformLoadTimeData = [
    { platform: 'Desktop', prevMonth: 1.58, curMonth: 1.49 },
    { platform: 'Phone', prevMonth: 2.01, curMonth: 1.96 },
    { platform: 'Tablet', prevMonth: 2.16, curMonth: 2.41 },
    { platform: 'Other', prevMonth: 2.53, curMonth: 2.65 }
];
 
platformSessionData = [
    { platform: 'Desktop', sessions: 68379 },
    { platform: 'Phone', sessions: 21478 },
    { platform: 'Tablet', sessions: 14523 },
    { platform: 'Other', sessions: 7520 }
];
 
getPlatformLoadTimeData() {
    return this.platformLoadTimeData;
}
 
getPlatformSessionData() {
    return this.platformSessionData;
}

마찬가지로 대시보드에서 샘플데이터를 사용하고 있지만, 데이터베이스에서 데이터를 가지고 오기 위해 API를 호출할 가능성이 높습니다.

대시보드에서는 각 플랫폼(데스크톱, 휴대폰, 태블릿 등)의 로드 시간 및 각 플랫폼의 세션 수를 표시합니다.

마지막으로 CSS를 구현해야 합니다.

.platforms-container {
    padding: 1rem;
}
 
.platforms-header {
    font-size: 1.05em;
    color: gray;
}
 
.platforms-info {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}
 
.wj-flexchart {
    height: 300px;
    border: none;
    width: 50%;
}
 
@media (max-width: 799px) {
    .platforms-info {
        flex-direction: column;
    }
 
    .wj-flexchart {
        width: 100%;
    }
}

이 컴포넌트의 CSS는 카드 가장자리에 사용하는 패딩(padding: 테두리와 콘텐츠 사이에 있는 여백) 및 화면 너비에 맞게 데이터를 표시하는 방법을 처리합니다.

화면이 더 작아지면 표시하는 두 차트의 가로 레이아웃을 세로 레이아웃으로 전환합니다.

다음으로, app.component.html 파일에 top-platform-info 컴포넌트를 추가합니다.

<div class="livemap top-platforms">
    <app-top-platform-info></app-top-platform-info>
  </div>

이제 응용 프로그램을 실행하면 다음 내용을 볼 수 있습니다.

차트 샘플

두 차트의 어떤 부분이든 마우스 커서를 올리면 데이터를 나타내는 팝업이 표시됩니다.

차트 도구 설명

top-browser 컴포넌트로 이동해 보겠습니다.

이 컴포넌트는 본질적으로 top-platform-info 컴포넌트와 동일한 기능을 합니다.

컨트롤과 CSS 레이아웃은 동일하며, 유일한 차이는 컨트롤에 전달되는 데이터입니다.

모든 파일의 코드가 아래와 같이 표시됩니다.

top-browser.component.html

<div class="browsers-container">
    <div class="browsers-header">TOP BROWSERS <i class="bi bi-question-circle" [wjTooltip]="browserTooltip" [wjTooltipPosition]="6"></i></div>
    <div class="browsers-info">
        <wj-flex-chart [header]="'Average Load Time'" [bindingX]="'browser'" [selectionMode]="'Point'" [itemsSource]="loadTimeData" [palette]="palette">
            <wj-flex-chart-legend [position]="'None'"></wj-flex-chart-legend>
            <wj-flex-chart-series [name]="'Previous Month'" [binding]="'prevMonth'"></wj-flex-chart-series>
            <wj-flex-chart-series [name]="'Current Month'" [binding]="'curMonth'"></wj-flex-chart-series>
        </wj-flex-chart>
        <wj-flex-pie [header]="'Sessions by Browser'" [bindingName]="'browser'" [binding]="'sessions'" [itemsSource]="sessionData" [palette]="palette"></wj-flex-pie>
    </div>
</div>

top-browser.component.ts

import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';
 
import * as wjChart from '@grapecity/wijmo.chart';
 
@Component({
  selector: 'app-top-browser',
  templateUrl: './top-browser.component.html',
  styleUrls: ['./top-browser.component.css']
})
export class TopBrowserComponent implements OnInit {
  loadTimeData: any[];
  sessionData: any[];
  browserTooltip = 'Breakdown of sessions by browser.';
  palette = wjChart.Palettes.darkly;
 
  constructor(private dataService: DataService) {
    this.loadTimeData = dataService.getBrowserLoadTimeData();
    this.sessionData = dataService.getBrowserSessionData();
  }
 
  ngOnInit(): void {
  }
}

top-browser.component.css

.browsers-container {
    padding: 1rem;
}
 
.browsers-header {
    font-size: 1.05em;
    color: gray;
}
 
.browsers-info {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}
 
.wj-flexchart {
    height: 300px;
    border: none;
    width: 50%;
}
 
@media (max-width: 799px) {
    .browsers-info {
        flex-direction: column;
    }
 
    .wj-flexchart {
        width: 100%;
    }
}

data.service.ts

browserLoadTimeData = [
    { browser: 'Chrome', prevMonth: 1.68, curMonth: 1.52 },
    { browser: 'Firefox', prevMonth: 1.93, curMonth: 1.71 },
    { browser: 'Edge', prevMonth: 2.25, curMonth: 2.38 },
    { browser: 'Safari', prevMonth: 2.11, curMonth: 2.03 },
    { browser: 'Other', prevMonth: 2.56, curMonth: 2.49 }
];
 
browserSessionData = [
    { browser: 'Chrome', sessions: 34520 },
    { browser: 'Firefox', sessions: 29586 },
    { browser: 'Edge', sessions: 13793 },
    { browser: 'Safari', sessions: 22136 },
    { browser: 'Other', sessions: 11865 }
];
 
getBrowserLoadTimeData() {
    return this.browserLoadTimeData;
}
 
getBrowserSessionData() {
    return this.browserSessionData;
}

top-browser 컴포넌트를 app.component.html 파일에 추가합니다.

<div class="livemap browsers">
    <app-top-browser></app-top-browser>
  </div>

이제 응용 프로그램을 실행하면 브라우저 세션 데이터에 대한 데이터가 채워진 카드가 표시됩니다.

브라우저 차트

국가 세션 및 Linear Gauge(선형 게이지)

마지막으로 대시보드에 추가할 부분은 Wijmo의 Linear Gauge(선형 게이지) 컨트롤을 이용하여 최상위 국가를 세션 별로 표시하는 카드입니다.

가장 먼저 해야 할 일은 카드와 함께 제공되는 데이터를 표시하는 컴포넌트를 생성하는 것입니다.

ng g c top-country-info

이제 top-country-info.component.html 파일로 이동하여 HTML을 구현하겠습니다.

<div class="top-countries">
    <div class="countries">
        <div class="countries-header">TOP COUNTRIES BY SESSION <i class="bi bi-question-circle" [wjTooltip]="countrySessionTooltip" [wjTooltipPosition]="6"></i></div>
    </div>
    <div class="countries countries-list">
        <div *ngFor="let country of countryData" class="country-item">
            <div><b>{{ country.name }}</b></div>
            <div>Total Visits: {{ country.visits }}k</div>
            <div>Percentage: {{ country.percentage }}%</div>
            <div class="country-subtotal-gauge">
                <wj-linear-gauge #theGauge [isReadOnly]="true" [min]="0" [max]="maxVisits" [value]="country.visits" [showRanges]="false">
                </wj-linear-gauge>
            </div>
        </div>
    </div>
</div>

앞에서 나온 다른 카드들과 마찬가지로 상단에 헤더를 만들고, 부트스트랩 아이콘을 사용하여 Tooltip 아이콘을 추가하고, Wijmo Tooltip을 아이콘에 결합하겠습니다.

또한 조회수를 기준으로 상위 10개 국가를 열거하여 총 방문자 수, 사이트 총 방문자 수 대비 방문자 백분율, Wijmo의 Linear Gauge(선형 게이지)를 사용하여 백분율을 시각적으로 표시하겠습니다.

알다시피 Wijmo의 Linear Gauge(선형 게이지)는 한 줄짜리 마크업입니다.

isReadOnly 속성을 사용하여 컨트롤을 읽기 전용으로 설정하고 최소 및 최대 값(최대값은 방문자가 가장 많은 국가의 방문자 수), 해당 국가의 방문자 값을 설정합니다.

이제 top-country-info.component.ts 파일로 이동하면 Linear Gauge(선형 게이지) 컨트롤에 대해 입수한 데이터를 볼 수 있습니다.

import { Component, OnInit } from '@angular/core';
 
@Component({
  selector: 'app-top-country-info',
  templateUrl: './top-country-info.component.html',
  styleUrls: ['./top-country-info.component.css']
})
export class TopCountryInfoComponent implements OnInit {
  countryData = [
    { name: 'United States', visits: 21.9, percentage: 19.7 },
    { name: 'Japan', visits: 13.8, percentage: 12.4 },
    { name: 'Canada', visits: 12.7, percentage: 11.4 },
    { name: 'China', visits: 11.3, percentage: 10.2 },
    { name: 'United Kingdom', visits: 7.9, percentage: 7.1 },
    { name: 'Russia', visits: 5.9, percentage: 5.3 },
    { name: 'Germany', visits: 5.9, percentage: 5.3 },
    { name: 'Mexico', visits: 4.2, percentage: 3.8 },
    { name: 'France', visits: 3.4, percentage: 3.1 },
    { name: 'Ukraine', visits: 3.1, percentage: 2.8 }
  ];
  maxVisits = 21.9;
  countrySessionTooltip = 'Displays the top 10 countries by # of sessions.';
 
  constructor() { }
 
  ngOnInit(): void {
  }
}

이 파일에서는 HTML 파일에 전달할 샘플 데이터를 만듭니다.

또한 컨트롤이 깔끔해 보이고, 각 국가의 방문자 수를 시각적으로 잘 표시할 수 있도록 maxVisits 변수를 가장 많은 방문이 발생한 국가와 동일한 숫자로 설정합니다.

이 파일에서는 tooltip 텍스트도 설정합니다.

마지막으로 top-country-info.component.css 파일을 살펴보면서 카드 레이아웃을 어떻게 구성할지 알아보겠습니다.

.top-countries {
    width: 100%;
    margin-inline: auto;
    box-shadow: 2px 2px 2px 2px hsl(0, 0%, 70%);
    background-color: white;
    padding: 1rem;
    height: 550px;
}
 
.countries-header {
    font-size: 1.05em;
    color: gray;
}
 
.countries-list {
    height: 95%;
    max-height: 95%;
    overflow-y: scroll;
    padding-right: 10px;
}
 
.country-item {
    margin-top: 1em;
}

여기서는 카드의 스타일(대시보드의 다른 카드와 동일) 및 컨트롤을 둘러싸는 패딩(padding: 테두리와 콘텐츠 사이에 있는 여백)과 표시할 텍스트를 설정합니다.

top-country-info 컴포넌트를 app.component.html 파일에 추가합니다.

<div class="livemap top-countries">
    <app-top-country-info></app-top-country-info>
  </div>

응용 프로그램을 실행하면 다음과 같은 카드가 표시됩니다.

이 포스팅에서 작업할 모든 카드를 구현했으므로 전체 컴포넌트를 app.component.html 파일에 추가해야 합니다.

<main class="livemap-grid">
  <div class="livemap load-info">
    <app-current-info></app-current-info>
  </div>
  <div class="livemap map">
  </div>
  <div class="livemap user-info">
  </div>
  <div class="livemap sessions">
    <app-session-info></app-session-info>
  </div>
  <div class="livemap issue-info">
  </div>
  <div class="livemap top-countries">
    <app-top-country-info></app-top-country-info>
  </div>
  <div class="livemap top-platforms">
    <app-top-platform-info></app-top-platform-info>
  </div>
  <div class="livemap browsers">
    <app-top-browser></app-top-browser>
  </div>
</main>

응용 프로그램을 실행하고 축소해 보면 다음과 같이 전체 대시보드를 살펴볼 수 있습니다.

Wijmo Map Live