[React 프로젝트] react-chart-js2를 이용한 React Dashboard

프로젝트 개요 

• React 프로젝트
• 2021.01.11-2021.1.18
• 프론트엔드
• UI/UX 디자인 및 코딩

react-chart0js2 라이브러리를 이용해서 만든 React 대쉬보드 템플릿입니다.

---

React Dashboard Template

Seungyoonkim66/react_dashboard_template

How to use

• clone the project file.

$ git clone https://github.com/Seungyoonkim66/react_dashboard_template.git 
$ cd react_dashboard_template

• install packages.

npm install

• run

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.

• change /src/components/data/rawData file to your data.

Data Specification 

Dashboard Chart API Specification

 

---

view

 

---

Data example

export const usagePerTeamRawData = {
  chartName:'팀별 사용량',
  label : ["team1", "team2", "team3", "team4"],
  data : [20, 10, 30, 15]
}

export const usageParTimeRawData = {
  chartName: "시간대별 사용량",
  labels : [
    "2021-04-16-00:00", 
    "2021-04-16-01:00", 
    "2021-04-16-02:00", 
    "2021-04-16-03:00", 
    "2021-04-16-04:00", 
    "2021-04-16-05:00",
  ],
  label: 'line_name',
  data : [20, 10, 30, 15, 32, 11, 23]
}

export const usagePerTimeHourRawData = {
  chartName: '시간대별 팀별 사용량',
  labels : ["time1", "time2", "time3", "time4", "time5"],
  datas: [
    { label: 'team1', data: [33, 53, 85, 41, 44, 65], },
    { label: 'team2', data: [33, 25, 35, 51, 54, 76] },
    { label: 'team3', data: [13, 15, 25, 21, 54, 76] },
    { label: 'team4', data: [63, 9, 14, 11, 22, 12] },
    { label: 'team5', data: [62, 9, 22, 33, 12, 54] },
  ]
}
export const stackedUsagePerTeamRawData = {
  chartName:'팀별 누적 사용량',
  labels: ["IM1", "IGH", "ICE", "IRM", "Lighthouse"],
  data: [
    {
      id: 0, // user id 
      stack: 0, // team index 
      username: "ann",
      data: 100
    },
    {
      id: 1, // user id 
      stack: 0, // team index 
      username: "ben",
      data: 200
    },
    {
      id: 3, // user id 
      stack: 0, // team index 
      username: "ken",
      data: 100
    },
    {
      id: 4,
      stack: 1,
      username: 'bell',
      data: 30
    },{
      id: 5,
      stack: 1,
      username: 'merry',
      data: 120
    },
    {
      id: 6,
      stack: 2,
      username: 'werl',
      data: 243
    },
    {
      id: 7,
      stack: 3,
      username: 'wkjgd',
      data: 100
    },
    {
      id: 8,
      stack: 3,
      username: 'sgsdf',
      data: 102
    },
    {
      id: 9,
      stack: 4,
      username: 'alksd',
      data: 209
    },
    {
      id: 10,
      stack: 4,
      username: 'asdks',
      data: 120
    },
  ]
}

export const StackedUsageRawData = {
  chartName: '누적 사용 건수',
  data: 3070
}

export const RequestCountsRawData = {
  chartName: '사업자번호 요청 갯수',
  data: 62419,
};

 

• 여러 페이지의 대시보드 창을 만들려면 /src/renderData 데이터를 변경해주셔야 합니다. 각 페이지의 이름, 랜더링할 컴포넌트, 사이드바에 나타낼 아이콘을 넣어주면 됩니다.

import AssessmentSharpIcon from '@material-ui/icons/AssessmentSharp';
import TransformSharpIcon from '@material-ui/icons/TransformSharp';
import MoreVertSharpIcon from '@material-ui/icons/MoreVertSharp';
import SRDashboard from './components/srDashboard';
import * as data from './components/data/rawData';
import KPMGColor from './lib/color/KPMGColor';


// setting main color 
const chartColors = KPMGColor.chartColors;
const chartColor = KPMGColor.lineChartColor; // as rgb 


export const Dashboards = [
    { name: 'dashboard1', link: '/dashboard1', icon: <AssessmentSharpIcon />, component: <SRDashboard data={data} chartColors={chartColors} chartColor={chartColor} /> },
    { name: 'dashboard2', link: '/dashboard2', icon: <TransformSharpIcon />, component: <div style={{ margin: '1rem'}}>.. more charts</div> },
    { name: '', link: '/home', icon: <MoreVertSharpIcon /> },
];

 

---

프로젝트 리뷰

대쉬보드를 만들 기회가 있어 react-chart-js2 라이브러리를 사용해 보았는데 사용하기 아주 편리했습니다. react 라이브러리를 사용해볼 수 있어서 아주 좋은 기회였다고 생각합니다 ㅎㅎ. 현재는 정적 데이터를 넣어놨지만 백엔드 개발자 분께 api spec을 전달해드리고 구현이 다 되는대로 api로 데이터를 받아 실제 대시보드를 만들 계획입니다.

추후 데이터를 받아 차트를 그릴 일이 있다면 이번에 만든 컴포넌트를 재사용할 수 있으면 좋겠습니다. ㅎㅎ