반응형 Angular 대시보드 1부: 개요 및 대시보드 레이아웃 만들기

Angular대시보드 반응형 Angular 대시보드 1부: 개요 및 대시보드 레이아웃 만들기

추천0

페이지 정보

작성자 GrapeCity

작성일 2022-06-16 09:56 조회 950회 댓글 0건

본문

관련링크

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

대시보드는 많은 비즈니스의 중요한 부분으로 자리 잡았습니다.

필요한 정보를 한눈에 볼 수 있도록 가져오는 기능은 매우 중요하며 비즈니스 운영 및 직원 업무 시간을 단축하고 대시보드에 표시되는 데이터를 바탕으로 더 나은 결정을 내릴 수 있도록 합니다.

데이터는 쉽게 이해할 수 있는 형식으로 표시되어, 관리자 및 임원이 빠르게 데이터를 이해하고 해당 데이터를 바탕으로 의사결정을 내릴 수 있어야 합니다.

그러나 빠르게 반응하고 효율적인 대시보드를 만드는 것은 쉬운 일이 아닙니다.

온라인에는 다양한 기능을 제공하는 많은 라이브러리가 있으며 많은 개발자가 대시보드를 빌드할 때 여러 UX/UI 라이브러리를 사용합니다.

다행히, Wijmo의 컴포넌트 라이브러리를 사용하면 여러 패키지를 설치하고 실행할 필요 없이 대시보드를 쉽게 구축할 수 있습니다.

이번 블로그 시리즈 전반에서는 Wijmo 및 CSS를 사용하여 사용자의 거주 지역을 기반으로 우리 사이트를 방문한 사용자에 대한 정보를 개략적으로 보여 주는 반응형 대시보드를 만드는 단계를 안내합니다.

따라서 모든 장치에서 데이터를 볼 수 있는 기능과 함께 쉽게 사용할 수 있는 데이터를 제공할 수 있습니다.

프로젝트를 최종 폼으로 확인해 보고 싶으시다면 링크를 클릭해 주시길 바랍니다.

대시보드 정의

대시보드를 빌드하는 복잡한 과정을 시작하기 전에 대시보드라고 말할 때 대시보드가 무엇을 의미하는지 정의해 보겠습니다.

일반적으로 대시보드는 다음과 같은 모양입니다.

Wijmo 실시간 맵

이 대시보드는 보기 좋고, 간결하고, 정보가 눈에 잘 들어옵니다.

개발자에게 대시보드 빌드를 부탁해야 하겠다는 아이디어를 제안했을 때 관리자가 마음속에 그린 모양입니다.

그래픽 디자이너가 없다는 것은 많은 개발자가 안고 있는 문제입니다. 그저 개발자일 뿐이니까요.

그래픽 디자이너의 경험이 없는 상태에서 이와 같은 대시보드를 빌드하는 데 얼마나 근접할 수 있을까요?

올바른 라이브러리만 선택한다면 아주 유사하게 만들 수 있습니다.

Wijmo를 사용하면 보기에도 좋고 사용자에게 필요한 모든 데이터를 제공하는 대시보드를 쉽게 만들 수 있습니다.

위 이미지는 이번 블로그 시리즈를 거치며 빌드하고 있는 대시보드입니다.

사용 중인 도구에 대해 살펴보겠습니다.

ToolTip

Angular

이 블로그를 읽고 있는 여러분이 Angular에 대해 잘 알고 있다고 가정하겠습니다.

잘 모르는 사람을 위해 간단히 설명하면, Angular는 Google에서 개발한 TypeScript 프레임워크로, 개발자가 쉽게 빌드 및 배포할 수 있는 웹 응용 프로그램을 쉽게 구성하도록 합니다.

Angular를 사용해 본 적이 없는 경우 또는 사용한 지 한참 지난 경우 계속 진행하기 전에 Angular 설명서를 살펴보는 것이 좋습니다.

여기서는 Angular에 관한 기본 사항을 다루지 않는 대신 대시보드를 빌드하는 데 집중할 것입니다.

따라서 Angular를 사용해 본 적이 없다면 잘 모르는 개념이 등장할 수 있습니다.

Wijmo

GrapeCity에서 개발한 Wijmo는 놀라운 엔터프라이즈급 JavaScript/TypeScript UI 컨트롤 집합으로, JavaScript, Angular, React, Vue 및 Web Components에서 사용할 수 있습니다.

Wijmo는 웹 응용 프로그램에 쉽게 통합할 수 있는 일체형 UX/UI 라이브러리입니다.

따라서 뛰어난 대시보드 및 보고 도구를 빠르게 만들 수 있습니다.

대시보드에 통합할 모든 도구는 Wijmo와 함께 바로 사용할 수 있으며, 이러한 도구에는 타사 라이브러리가 필요 없으며 쉽게 구현할 수 있습니다.

사용할 각 컨트롤의 기능을 정의하고 컨트롤에 데이터 소스를 제공하기만 하면 됩니다.

그 외 많은 라이브러리의 경우 DOM 참조를 사용하고 제대로 작동하도록 미세 조정해야 하지만 Wijmo의 경우 사용하려는 컴포넌트를 가져오기만 하면 바로 사용할 수 있습니다.

아래에서는 대시보드를 구현할 때 함께 사용할 Wijmo 컴포넌트가 무엇인지 알 수 있습니다.

FlexGrid

Wijmo의 Angular DataGrid인 FlexGrid는 따분해 보이는 HTML 표에 대한 해결책입니다.

상당한 수준으로 사용자 정의할 수 있는 그리드로, 사용자가 사용자 정의 셀, 집계, 가상화, 페이징 등과 같은 기능을 구현할 수 있습니다!

이렇게 많은 기능을 그리드에서 속성을 설정하는 것만큼 간단하게 통합할 수 있다는 점이 가장 큰 이점입니다.

따라서 개발자는 매우 복잡한 DataGrid를 빠르고 쉽게 구현할 수 있습니다.

FlexChart

Wijmo의 Angular Chart인 FlexChart는 개발자에게 선택할 수 있는 80가지가 넘는 다양한 차트 유형을 제공합니다.

즉, 필요한 차트는 무엇이든 활용할 수 있습니다.

세로 막대형 차트, 가로 막대형 차트, 분산형 차트, 꺾은선형 차트, 영역형 차트 및 스플라인 차트 등이 있습니다.

또한 이러한 차트 유형 여러 개를 한 번에 결합할 수도 있습니다!

여기서는 FlexChart를 사용하여 아주 보기 좋은 원형 차트와 막대형 차트를 구현하여 대시보드에 데이터를 표시해 보겠습니다.

FlexMap

Wijmo 컴포넌트 라이브러리에 새로 도입된 FlexMap은 FlexChart 컨트롤을 기반으로 빌드되었습니다.

FlexChart의 동일한 기능 중 많은 부분을 통합하고 GeoJSON을 사용하여 대화식 등치 지역도 컨트롤을 빌드할 수 있습니다.

지도의 여러 지역에 데이터를 할당하고, 지역의 데이터를 기준으로 지역에 색상을 지정하도록 palette 구성표를 설정하고, 사용자가 지역 관련 데이터를 보도록 각 지역에 도구 설명을 할당할 수 있습니다.

이 대시보드의 경우 FlexMap을 사용하여 사용자가 버튼 클릭 시 지역별 데이터를 표시할 수 있도록 만들 예정입니다.

Linear Gauge(선형 게이지)

선형 계기

Wijmo의 Linear Gauge(선형 게이지)를 통해 사용자는 표시되는 데이터를 한눈에 빠르게 평가할 수 있습니다.

이 대시보드에서 Linear Gauge(선형 게이지)는 사이트가 제공되는 다른 모든 국가 대비 국가별 사이트 방문자 비율을 보여 줍니다.

프로젝트 설정

대시보드를 빌드할 때 사용할 Wijmo 컴포넌트에 대해 간단하게 살펴보았으므로, 이제 프로젝트를 설정해 보겠습니다.

이를 위해, Angular CLI를 사용하고 다음 명령을 실행합니다.

ng new wijmo-dashboard
cd wijmo-dashboard

프로젝트를 설정하고 폴더로 이동한 다음 Wijmo를 설치해야 합니다.

또한 약간의 스타일 지정을 위해 부트스트랩 아이콘을 설치합니다.

이러한 패키지를 설치하려면 다음 명령을 실행합니다.

npm i @grapecity/wijmo.all
npm i bootstrap-icons

그러면 애플리케이션에서는 NPM을 사용하여 Wijmo의 패키지를 전부 설치합니다.

Wijmo가 설치되면 app.module.ts 파일 내에서 사용하려고 하는 모든 모듈을 import 해야 합니다.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { WjCoreModule } from '@grapecity/wijmo.angular2.core';
import { WjGridModule } from '@grapecity/wijmo.angular2.grid';
import { WjChartModule } from '@grapecity/wijmo.angular2.chart';
import { WjChartMapModule } from '@grapecity/wijmo.angular2.chart.map';
import { WjGaugeModule } from '@grapecity/wijmo.angular2.gauge';
import { WjInputModule } from '@grapecity/wijmo.angular2.input';

@NgModule({
 declarations: [
   AppComponent
],
 imports: [
   BrowserModule,
   AppRoutingModule,
   WjCoreModule,
   WjGridModule,
   WjChartModule,
   WjChartMapModule,
   WjGaugeModule,
   WjInputModule
],
 providers: [],
 bootstrap: [AppComponent]
})

export class AppModule { }

아래에서는 각 Wijmo 모듈의 용도에 대해 간략하게 설명합니다.

WjCoreModule: Wijmo의 핵심 모듈로, Wijmo의 다른 모듈 및 도구 설명 컨트롤을 활용하려면 포함해야 합니다.
WjGridModule: Wijmo의 FlexGrid 컨트롤을 사용하는 데 필요합니다.
WjChartModule: FlexChart의 막대형 차트와 원형 차트를 사용하는 데 필요합니다.
WjChartMapModule: FlexMap 컨트롤을 사용하는 데 필요합니다.
WjGaugeModule: Linear Gauge(선형 게이지) 컨트롤을 사용하는 데 필요합니다.
WjInputModule: 팝업 컨트롤을 사용하는 데 필요합니다.

대시보드 CSS 설정

사용할 패키지를 설치하고 대시보드에서 사용할 모듈을 app.module.ts 파일로 가져왔으므로 이제 핵심 스타일 몇 개를 설정할 차례입니다.

프로젝트의 styles.css 파일 내에 다음 내용을 포함합니다.

@import '@grapecity/wijmo.styles/themes/wijmo.theme.material.css';
@import '~bootstrap-icons/font/bootstrap-icons.css';

body {
   margin: 0;
   background-color: hsl(0, 0%, 95%);
}

.wj-flexgrid {
   border: none;
}

.wj-flexgrid .wj-cell {
   border-left: none;
   border-right: none;
   display: flex;
   align-items: center;
   padding: 6px 16px;
   background: hsl(0, 0%, 100%);
   font-weight: 400;
   height: 48px;
}

.wj-flexgrid .wj-colheaders .wj-header.wj-cell {
   height: 56px;
   font-weight: bold;
   font-size: 16px;
   background: hsl(0, 0%, 80%);
   border-right: 1px solid gray;
}

.wj-flexgrid .wj-colheaders .wj-header.wj-cell:last-child {
   border-right: none;
}

.wj-cell.wj-has-notes:after {
   position: absolute;
   content: '';
   width: 0;
   right: 0;
   top: -10px;
   border: 10px solid transparent;
   border-right: 10px solid red;
   opacity: .5;
}
 
.wj-cell.wj-has-notes:hover:after {
   opacity: 1;
}

여기서 몇 가지 작업을 수행합니다.

가장 먼저, Wijmo 스타일 시트와 부트스트랩 아이콘을 둘 다 가져옵니다.

둘 다 styles.css 파일 내에 포함해야 응용 프로그램의 나머지 부분에서 사용할 수 있습니다.

둘째, 대시보드의 <body> 에 대한 일부 기본 스타일을 설정합니다.

컴포넌트의 간격을 좀 더 잘 제어할 수 있도록 여백을 0으로 설정하고 배경색을 연한 회색으로 변경합니다.

연한 회색 때문에 페이지에서 컴포넌트가 약간 더 돋보입니다.

마지막으로, FlexGrid 자체에 스타일 변경 사항을 몇 가지 추가합니다.

FlexGrid 스타일 변경 사항을 styles.css 파일에 추가해야 합니다.

FlexGrid의 CSS 파일을 사용하는 컴포넌트에서 직접 스타일을 변경하면 해당 변경 사항이 적용되지 않습니다.

여기서, DataGrid의 셀에 공백을 약간 더 추가하고 열 헤더를 더 정의합니다.

또한 셀에 도구 설명이 추가되는 약간의 스타일을 추가하고 사용자가 마우스로 해당 셀을 가리키면 도구 설명이 표시되도록 합니다.

지금 이 부분에 대해서는 너무 걱정하지 않으셔도 됩니다. 도구 설명을 구현한 다음 이 부분을 다루겠습니다.

스타일 섹션을 설명하기 위해 대시보드 레이아웃을 설정하겠습니다.

이렇게 하기 위해 CSS 그리드를 사용합니다.

그러면 어떤 장치에서 대시보드를 열었든 상관없이 대시보드가 빠르게 응답하여 적절하게 서식을 지정할 수 있습니다.

app.component.css 파일을 열고 다음 내용을 포함합니다.

.livemap-grid {
   display: grid;
   gap: 1.5rem;
   grid-auto-columns: minmax(0, 1fr);
   grid-template-areas:
       'one'
       'two'
       'three'
       'five'
       'four'
       'six'
       'seven'
       'eight';
   padding-block: 2rem;
   width: 95%;
   margin-inline: auto;
}

.map {
   height: 550px;
   box-shadow: 2px 2px 2px 2px hsl(0, 0%, 70%);
   width: 100%;
}

.sessions {
   height: 550px;
   box-shadow: 2px 2px 2px 2px hsl(0, 0%, 70%);
   width: 100%;
}

.user-info {
   height: 550px;
   box-shadow: 2px 2px 2px 2px hsl(0, 0%, 70%);
   width: 100%;
}

.issue-info {
   height: 550px;
   box-shadow: 2px 2px 2px 2px hsl(0, 0%, 70%);
   width: 100%;
}

.top-platforms {
   box-shadow: 2px 2px 2px 2px hsl(0, 0%, 70%);
   width: 100%;
}

.browsers {
   box-shadow: 2px 2px 2px 2px hsl(0, 0%, 70%);
   width: 100%;
}

.livemap:nth-child(1) {
   grid-area: one;
}

.livemap:nth-child(2) {
   grid-area: two;
}

.livemap:nth-child(3) {
   grid-area: three;
}

.livemap:nth-child(4) {
   grid-area: four;
}

.livemap:nth-child(5) {
   grid-area: five;
}

.livemap:nth-child(6) {
   grid-area: six;
}

.livemap:nth-child(7) {
   grid-area: seven;
}

.livemap:nth-child(8) {
   grid-area: eight;
}

@media (min-width: 800px) {
  .livemap-grid {
       grid-template-areas:
           'one one one one'
           'two two two two'
           'two two two two'
           'three three three three'
           'three three three three'
           'five five five five'
           'five five five five'
           'four four six six'
           'four four six six'
           'seven seven seven seven'
           'eight eight eight eight';
  }
}

@media (min-width: 1200px) {
  .livemap-grid {
       grid-template-areas:
           'one one one one'
           'two two two two'
           'two two two two'
           'three three three four'
           'three three three four'
           'five five five six'
           'five five five six'
           'seven seven eight eight';
  }

  .map {
       height: 550px;
  }
}

이 CSS는 양이 상당히 많지만 하려고 하는 작업은 매우 간단합니다.

대시보드의 레이아웃을 처리할 livemap-grid 클래스를 만듭니다.

이 display 속성을 grid로 설정하고, 그리드에 안쪽 여백과 여백을 일부 추가하고, 열 레이아웃을 처리하려는 방법을 지정합니다.

기본적으로, 단일 열에 각 요소(8개)를 표시합니다.

또한 grid-auto-columns 속성을 minmax(0, 1fr)로 설정합니다.

그리드의 이러한 각 섹션 내에 있는 Wijmo 컨트롤이 화면 크기를 적절하게 확장하고 줄여 컨테이너의 전체 너비를 유지합니다.

그런 다음 그리드의 각각 다른 섹션에 대해 약간의 스타일을 설정합니다.

즉, 섹션이 페이지 배경과 구분되도록 합니다.

또한 그리드의 각 자식 요소를 살펴보고 영역에 할당합니다. 이렇게 하면 자식 요소가 그리드 내에 적절하게 배치됩니다.

코드의 최종 섹션에서는 화면 너비를 기준으로 그리드의 크기 조정 및 서식 지정을 처리합니다.

이는 여러 장치에서 대시보드 레이아웃과 사용자가 해당 장치에서 창의 크기 조정을 결정한 경우 둘 다 처리합니다.

이 문서에서 수행할 마지막 작업은 CSS 그리드를 렌더링하는 HTML 만들기입니다.

app.component.html 파일을 열고 다음 내용을 포함합니다.

<main class="livemap-grid">
    <div class="livemap load-info"></div>
    <div class="livemap map"></div>
    <div class="livemap user-info"></div>
    <div class="livemap sessions"></div>
    <div class="livemap issue-info"></div>
    <div class="livemap top-countries"></div>
    <div class="livemap top-platforms"></div>
    <div class="livemap browsers"></div>
</main>

app.component.css 파일 내에서 간략하게 설명한 모든 CSS 클래스를 사용합니다.

애플리케이션을 실행하면 다음 모양이 나타나야 합니다.

Wijmo 실시간 맵 시작