대시 보드를 만들 때 고려해야 할 사항이 많이 있습니다. 특히 관리자와 경영진이 중요한 결정을 내리는 데 도움이되는 방식으로 방대한 양의 정보를 가져와 시각화하는 방법이 무엇인지 고려해야해야 합니다.

React 개발자는 대시보드를 구현하는 것이 어려운 책임 중 하나라는 것입니다. NPM에는 대시​​보드를 제공하는 데 도움이되는 차트 및 그래프 라이브러리로 가득합니다. 그러나 시행착오를 통해  필요한 것을 찾는 데는 정말 많은 시간이 많이 소요됩니다.

이러한 고민을 해결해드리고자, Wijmo는 훌륭한 대시보드를 만드는 데 도움이되는 엔터프라이즈급 차트 및 그래프 구성 요소를 제공합니다.

영업 대시 보드 생성

이번 포스팅에서는 여러분의 매니저가 대시 보드를 신속하게 준비하도록 요청할 때, 여러분이 염두에 두어야할 것에 대해서 예기하고자 합니다. 이 글을 읽고 있다면 아마도 그래픽 디자이너가 아닌 개발자 일 것입니다. 문제는 개발자로서, 위의 대시 보드 예제에 얼마나 가까이 접근 할 수 있습니까?

Wijmo를 사용하면 위와 같은 대시보를 개발하는데 가까이 갈 수 있습니다. 아래 내용을 통해 사용할 툴과 위젯을 살펴 봅시다.

다음은 대시 보드를 구성하는 데 사용할 도구입니다.

부트스트랩 (Bootstrap)

Flexbox와 CSS Grid가있는 세계에서 Reddit의 프로그래밍 전문가와 자체 스타일 전문가는 더 이상 Bootstrap 과 같은 CSS 프레임 워크가 필요 하지 않다고 알려줍니다 . 그리고 기술적으로는 정확합니다.

그러나 Bootstrap을 사용하면 반응 형 그리드 기반 응용 프로그램을 매우 쉽게 설정할 수 있으며, 시간을 절약할 수있는 추가 기능이 많이 있습니다. 우리 모두는 시간이 촉박한 개발자이므로 Bootstrap을 사용하도록 합시다.

자신 만의 놀라운 대시 보드를 만들 때, Bootstrap , Bulma , Tachyons 또는 기타, 여러분이 원하는 것을 자유롭게 사용하십시오.

이 포스팅에서는 부트 스트랩 기본 사항에 익숙하다고 가정하지만, 이전에 한 번이라도 사용한 적이 없더라고 이해하는 데는 괜찮을 것입니다. CSS 클래스 이름를 볼때, col-sm-4, mt-1그리고 card들은 단지 부트 스트랩의 CSS의 일부임을 이해만 하면 됩니다.

리액트(React)

이 기사를 읽고 있다면 이미 React에 익숙 할 것입니다 . 그러나 그렇지 않은 경우, React란, Facebook에서 만든 멋진 JavaScript UI 구성 라이브러리입니다.

2013 년에 출시된 이래, 전 세계 개발자들의 폭발적인 인기를 얻어 왔습니다. 대기업과 소기업에 구분 없이 이제는 널이 사용되고 있습니다.

심지어 React Native 형식으로, 웹으로 부터 분기되었으며, React Native를 사용하면 React 및 JavaScript를 사용하여 훌륭하고 빠른 모바일 앱을 만들 수 있습니다.

이 포스팅의 나머지 부분에서는 순전히 기능적인 컴포넌트를 포함하여, 기본 React 개념에 대해 잘 알고 있다고 가정합니다. 아직 React whiz가 아니라면 괜찮습니다! 그러나 진행하면서 확신할 수 없는 React 관련 코드가 있는, 경우 React 설명서를 참조해야 합니다.

위즈모(Wijmo)

Wijmo는 엔터프라이즈 급 JavaScript UI 컨트롤의 훌륭한 세트입니다.

관리자, 동료 및 최종 사용자를 매혹시키는 놀라운 대시보드, 리포팅 도구 및 업무용 앱을 만드는 데 필요한 모든 것을 한 곳에서 관리 할 수 있는 방법입니다.

또한, Wijmo에는 React, Angular 및 Vue 용 래퍼가 내장되어 있습니다. React를 사용하여 대시 보드를 구축 할 예정이므로, 이는 매우 좋은 소식입니다. 많은 차트 라이브러리는 차트를 제대로 작동시키기 위해, DOM 참조를 사용하고 개발자를 혼란스럽게 합니다. Wijmo를 사용하면 사용하려는 컴포넌트 요소를 import 하는 것 만으로 즉시 사용할 수 있습니다.

Wijmo UI 컴포넌트 - 올스타 라인업

대시 보드를 구성하는 데 사용할 가장 인기 있는 Wijmo 컴포넌트가 몇 가지 있습니다. 그들이 이번 포스팅의 스타가 될 것이기 때문에, 그것들을 만드는 데 필요한 코드로 뛰어 들기 전에 그것들을 잠시 살펴 봅시다.

FlexGrid

표시할 테이블 형식의 데이터가 있지만, 지루하고 보기흉한 HTML 테이블에 사용하지 않으려면, Wijmo의 FlexGrid가 도움이 될 수 있습니다. FlexGrid는 자동 열 생성, 열 정렬 및 재정렬, 편집 및 클립 보드 지원 기능을 제공합니다.

FlexChart

FlexChart는 여러 유형의 차트를 표시 할 수 있는 다재 다능한 마술사입니다. 열(column), 막대(bar), 산포(scatter), 선(line), 영역(area) 및 스플라인(spline) 뿐만 아니라, 이러한 유형의 여러 조합을 한 번에 표시 할 수 있습니다!

FlexChart를 사용하여, 대시보드에 멋진 막대 차트를 추가할 것입니다.

FlexPie

여러 데이터 범주의 상대적인 크기를 표시하려는 경우, FlexPie를 사용하여 아름답게 표현할 수 있습니다.

FlexPie는 일반 원형 차트를 사용하는 어느 곳에서나 사용할 수 있지만, FlexPie에는 원형 차트 군중과 차별화되는 몇 가지 추가 기능를 포함하고 있습니다.

방사형 게이지

관리자가 영업 대시보드를 볼 때, 이번 주 매출이 크거나 수용 가능한지, 또는 어려운 상황인지를 한눈에 볼 수 있기를 원합니다. RadialGauge는 우리에게 이러한 능력을 제공하며, 사용자에게는 멋진 시각화 효과를 보여 줍니다.

소스코드(Source Code)

일을 멋지고 단순하게 유지하기 위해 StackBlitz를 사용하여 대시보드를 실시간으로 호스팅하고 실행합고자 합니다. 실제 여러분의 개발 앱에서는 모든 구성 요소를 별도의 파일로 가져와야합니다. 우리는 index.js에 모든 것을 정의할 수 있으면, 모든 것을 빠르게 가져올 수 있습니다.

• React 대시보드(Dashboard) 실행 및 소스코드 보기

한 번에 하나씩 중요한 코드 섹션을 모두 살펴 보겠지만, 앱과 직접 관련이 없는 상용구에 대해서는 논의하지 않겠습니다. 우리 모두는 시간이 촉박한 개발자이므로, 해당 포스팅에서는 사용중인 Wijmo 구성 요소의 가능한 모든 구성에 대해는 다루지 않습니다. 소스코드를 보는 것만으로도 쉽고 빠르게 이해가 가능합니다.

대신 각 구성 요소에 대한 코드를 살펴본 후 구성 요소를 보다 심층적으로 살펴볼 수 있는 곳을 보여 드리겠습니다.

이제 시작합시다.

index.js의 맨 위에 모든 import를 완료한 후에,  두 가지 기능적인 컴포넌트를 볼 수 있습니다.

const ChartPanel = ({title, children}) => {
  return (
    <div className="col-lg-4 col-md-6 col-sm-12 mt-1">
        <div className="card dashboardPanel">
            <div className="card-body">
          <h5 className="card-title">{title}</h5>
            {children}
            </div>
        </div>
    </div>
  );
}

const DataPanel = ({title, children}) => {
  return (
    <div className="col-sm-12">
        <div className="card dashboardRow">
            <div className="card-body">
          <h5 className="card-title">{title}</h5>
          {children}
            </div>
        </div>
    </div>
  )
}

이것들은 우리의 부트스트랩 관련 상용구를 대부분 한 곳에 보관하는 래퍼입니다. 이 래퍼 클래스를 사용하면 Wijmo 컨트롤을 사용하여 대시 보드 패널을 매우 쉽게 만들 수 있기 때문에 자신의 필요에 맞게 대시 보드를 사용자 정의하고 패널을 추가할 수 있습니다.

다음으로 우리 회사가 오늘 얼마나 팔았는지 보여주는 RadialGauge가있는 패널을 만듭니다.

const Gauge = ({data}) => {
  return (
    <ChartPanel title="Today's Sales ($)">
        <div className="gauge">
            <RadialGauge
            min={ 0 } max={ 500000 }
            isReadOnly={ true }
            thickness={0.15}
            value={ data }
          />
        </div>
    </ChartPanel>
  );
}

우리의 게이지 구성 요소는 간단합니다. 위에서 정의한 ChartPanel을 사용하여 Wijmo RadialGauge를 감쌉니다. 우리는 몇 가지 props을 전달하여 필요에 맞게 사용자 정의합니다. 대시보드에 적절한 최소값(min)과 최대값(max)을 설정하고, 게이지를 읽기전용으로 만들고 두께(thickness)를 설정합니다.

게이지 컴포넌트는 data라는 하나의 매개변수(parameter)를 사용하여 RadialGauge의 value prop에 전달합니다. 이 값은 항상 게이지가 설정된 현재 값(value)을 나타내는 숫자로 설정해야합니다. 이 숫자는 항상 게이지의 최소 속성과 최대 속성 사이에 있어야합니다.

우리는 RadialGauge의 많은 옵션 중 일부만 사용했습니다. 수행 할 수있는 작업에 대한 자세한 내용은 Wijmo Gauge 101 페이지를 참조하십시오.

다음으로 국가(country)별 판매를 분류하는 막대 차트(bar chart)를 추가하겠습니다.

const SalesChart = ({salesData}) => {
  return (
    <ChartPanel title="Sales By Country">
        <FlexChart itemsSource={salesData}
                     bindingX="country"
                     style={ { height: "290px" } }>
            <FlexChartSeries name="Sales" binding="sales" />
        </FlexChart>
    </ChartPanel>
  );
}

게이지와 마찬가지로 사용자 정의 ChartPanel에 모든 것을 래핑합니다. 그 안에 Wijmo FlexChart가 추가되었습니다. 여러분은 우리가 몇몇 prop을 패스하고 있는 것을 볼 수 있을 것입니다 : itemsSource, bindingX,와 style.

style간단합니다 : Wijmo 차트에 전달되는 CSS 속성으로 가득찬 객체일 뿐입니다. 이 경우 차트 높이가 차트 패널에 깔끔하게 맞도록 설정됩니다.

itemsSource이름에서 알 수 있듯이 차트를 구성하는 데 사용될 데이터 항목 목록이 포함되어 있습니다. prop에는 x 축 레이블에 대한 문자열(string) 속성이 하나 이상 있고, y 축 값이 포함된 숫자 속성이 하나있는 객체를 포함하는, JavaScript 배열이 전달됩니다. 

이 경우 대시 보드의 경우 itemsSource차트의 모양은 다음과 같습니다.

 const salesByCountry = [
 { country: "Canada", sales: 27250 },
 { country: "USA", sales: 107340},
 { country: "Germany", sales: 45360 },
 { country: "UK", sales: 66250}
]

다음으로, bindingX가 "country"로 설정되어 있는 것을 볼 수 있습니다. 이것은 우리가 제공 한 itemsSource를 통해, 차트를 구성할 때 Wijmo에게 country각 데이터 의 속성을 해당 데이터 포인트의 x 축 레이블로 사용해야한다는 것을 알려줍니다.

FlexChart 내부에는 FlexChartSeries 요소가 있습니다. 그것은 두 개의 prop을 전달받습니다 : name및 binding. name는 차트 범례에서이 데이터 계열(series)에 레이블(label)을 지정할 대상을 Wijmo에 알려주고, 바인딩은 이 데이터 계열을 렌더링하는 데 사용할 각 데이터 항목의 속성을 Wijmo에 알려줍니다.

대시보드 차트에서 단일 데이터 계열(series)만 사용하고 있지만, FlexChart는 여러 데이터 계열을 단일 차트에 렌더링할 수 있습니다. FlexChart가 할 수있는 모든 것을 자세히 살펴 보려면 FlexChart 101을 살펴보십시오.

const SalesPie = ({salesData}) => {
  return (
    <ChartPanel title="Sales by Salesperson">
          <FlexPie itemsSource={salesData}
                 binding="sales"
                 bindingName="name"
                 innerRadius={0.70}
                 style={{ height: "290px" } }/>
    </ChartPanel>
  );
}

다음으로 FlexPie가 있습니다. FlexPie는 FlexChart의 가까운 사촌이기 때문에, 매우 유사한 prop 세트를 허용합니다. 한 가지 중요한 차이점이 있습니다. FlexPie는 원형 차트의 여러 계열(series)이 그다지 의미가 없기 때문에 단일 데이터 계열 만 표시 할 수 있습니다!

결과적으로 계열을 별도로 추가하는 대신, 데이터 바인딩 속성을 FlexPie에 직접 제공합니다. 우리가 사용한 모든 prop을 살펴 봅시다 :

itemsSources는 FlexChart에서와 동일한 방식으로 작동합니다. 차트 범례(Legend)의 데이터 요소에 레이블(label)을 지정하는 문자열 속성과, 데이터 요소의 파이(pie) 부체꼴 모양을 렌더링하는 데 사용되는 숫자 속성을 포함하는 JavaScript 객체 배열을 전달해야합니다. FlexPie가 사용하는 데이터는 다음과 같습니다.

export const salesByPerson = [
 { name: "Bill", sales: 5500},
 { name: "Ted", sales: 7250},
 { name: "Angela", sales: 8500},
 { name: "Jill", sales: 10750}
]

다음으로,  bindingName은 차트에서 데이터 포인트를 레이블링하는 데 사용해야하는 각 데이터 Object의 property(속성)을 알려줍니다. 해당 예제의 경우, name 속성을 이용합니다.

binding은 Wijmo에게 각 데이터 객체의 어떤 속성(property)이 해당 데이터 포인트의 파이 부체꼴 크기를 계산하는 데 필요한 숫자(numeric) 값이 포함되어 있는지 알려줍니다.

innerRadius는 흥미있는  속성입니다: 0과 1 사이의 값으로 설정하면 파이의 중심을 비우고 파이 차트를 도넛 차트로 바꿉니다! 차트를 도넛으로 바꾸면 21 세기 스타일의 힙 스터가됩니다.

style은 FlexChart와 동일한 방식으로 작동합니다. 도넛형 차트가 대시보드 상자 안에 깔끔하게 들어 맞도록하기 위해 추가했습니다. FlexPie가 할 수있는 모든 것에 대해 자세히 알아 보려면  FlexPie 101을  확인하십시오.

마지막으로 최근 거래 목록을 보여주는 표를 살펴 보겠습니다. 지루한 오래된 HTML 테이블 대신 Wijmo FlexGrid를 사용하고 있습니다.

const TransactionList = ({transactions}) => {
  return (
    <DataPanel title="Recent Transactions">
      <FlexGrid style={{width: "100%" }}
                    itemsSource={transactions}>
          <FlexGridColumn header="Client Name" 
                        binding="client" width="2*" />
          <FlexGridColumn header="Description" 
                        binding="description" width="3*" />
          <FlexGridColumn header="Total ($)" 
                        binding="value" width="1*" />
          <FlexGridColumn header="Quantity" 
                        binding="itemCount" width="1*" />
        </FlexGrid>
    </DataPanel>
  );
}

먼저 그리드를 맞춤형 부트스트랩 인증 컨테이너 구성 요소 중 하나 인 DataPanel에 래핑합니다.

다음으로 FlexGrid를 만듭니다. 우리는 두 가지 prop을 전달합니다: style와 itemsSource는 이전에 모두 보았으며 여기에서도 같은 목적으로 사용됩니다. 한 가지 주목할 점은 전달 된 데이터의 모양 itemsSource이 지금까지 본 것과는 약간 다르다는 것 입니다.

const recentSales = [
 { client: "Dunder Mifflin", 
   description: "Assorted paper-making supplies", 
   value: 4700, itemCount: 10},
 { client: "Utopia Planitia Shipyards", 
   description: "Dilithium, duranium, assorted shipbuilding supplies",
   value: 21750, itemCount: 250}
];

보시다시피, 문자열과 숫자 속성이 혼합된 객체 배열이 있습니다. 각 개체 속성은 차트 열에 바인딩 될 수 있습니다. 열을 수동으로 지정하지 않으면 FlexGrid는 지능적으로 일련의 열과 열 머리글을 자동으로 생성합니다.

데이터 모양을 제어하기 위해, FlexGrid에 몇 개의 FlexGridColumns를 추가했음을 알 수 있습니다. 우리는 각각의 FlexGridColumn에  header, binding 및 width라는 세 개의 prop을 전달했습니다.

header 는 어떤 header 텍스트가 컬럼의 레이블(label)로 사용될지를 말해줍니다. 

binding은 Wijmo에게 해당 열에 바인딩해야하는 각 데이터 객체의 속성을 알려줍니다. 열 머리글이 데이터 개체의 속성 이름과 완전히 일치하지 않도록 의도적으로 설정했습니다. 예를 들어 수량(Quantity) 열 이름은 itemCount데이터 속성 에 바인딩됩니다 .

마지막으로 각 열에 width prop을 전달합니다 . 우리가 전달하는 너비는 약간 재미있을 것입니다: Star size 조정은 FlexGrid의 동적 크기 조정을 정의하는 강력한 방법입니다. Wijmo의 문서 는 이것이 어떻게 작동하는지, 그리고 데이터 그리드를 사용하여 원하는대로 정확하게 렌더링 할 수있는 방법에 대한 훌륭한 설명을 제공합니다.

FlexGrid의 기능에 대한 전체 내용은 FlexGrid 101을 참조하십시오 .

최종 대시 보드 앱 구성 요소를 살펴 보도록하겠습니다.

class App extends Component {
 constructor() {
   super();
   this.state = {
     recentSales: recentSales,
     salesByCountry: salesByCountry,
     salesByPerson: salesByPerson
   };
 }

 calculateSales () {
   let totalSales = 0;
   this.state.recentSales.forEach(sale => totalSales += sale.value);
   return totalSales;
 }

 render() {
   return (
     <>
      <NavBar title="Sales Dashboard" />
      <div className="container">             
        <div className="row">
         <Gauge data={ this.calculateSales() } />
         <SalesChart salesData={this.state.salesByCountry} />
         <SalesPie salesData={this.state.salesByPerson} />
        </div>
        <div className="row">
         <TransactionList transactions={this.state.recentSales} />
        </div>
      </div>
      </>
   );
 }
}

우리는 커스텀 코드를 고유한 컴포넌트로 감샀으며, 이 App 컴포넌트는 100% 표준 React 입니다. 

최종 판매 대시 보드

이 코드를 모두 살펴본 후에는 최종 결과를 볼 때가되었습니다! StackBlitz에서 실시간으로 실행되는 것을 볼 수 있습니다 . 최종 결과는 다음과 같은 대시 보드입니다.

• React 대시보드(Dashboard) 실행 및 소스코드 보기

우리는 위의 과정을 통해, 멋지게 보이는 대시 보드를 신속하게 조립할 수 있었습니다! 또한, Bootstrap의 반응 형 CSS 덕분에 모바일에서도 훌륭하게 보입니다.

이것은 시작에 불과합니다. 여기에 구축 한 코드로 시작하여 눈부신 Wijmo 대시 보드의 기반으로 사용해보시는 것은 어떨까요.