[다독다독] react-chartjs-2로 월별 완독 차트 만들기

KINA KIM·2022년 5월 25일
0

react-chartjs2로 독서 기록 웹 애플리케이션에 연도-월별로 완독한 책이 몇 권인지 확인할 수 있는 기능을 추가하려고 한다.

설치

yarn add chart.js react-chartjs-2

기본 차트

몇 월에 몇 권을 읽었는지 나타내기 위해 가시성이 좋은 막대그래프를 사용하기로 했다. react-chartjs-2 공식 홈페이지의 example을 참고해서 기본 차트를 그려보자.

import React from 'react';
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  BarElement,
  Tooltip,
} from 'chart.js';
import { Bar } from 'react-chartjs-2';

function ChartView() {
  ChartJS.register(
    CategoryScale,
    LinearScale,
    BarElement,
    Tooltip,
  );
  const options = { reponsive: true }
  const labels = ['01월', '02월', '03월', '04월', '05월', '06월', '07월', '08월', '09월', '10월', '11월', '12월'];
  const data = {
    labels,
    datasets: [
      {
        data: [100, 300, 500, 600, 300, 200, 100, 300, 500, 100, 200, 5],
        backgroundColor: 'rgba(255, 99, 132, 0.5)',
      },
    ],
  };

  return (
    <Bar options={options} data={data} />
  )
}

export default ChartView

툴팁까지 예쁘게 나온다.

Select를 연동하여 연도별 읽은 책 수 보여주기

select 박스와 연동하여 연도를 선택할 때마다 해당 연도에 읽은 책 권수를 차트로 나타냈다. 월별 권수 count 함수는 아래와 같다.

1) 완독한 날짜의 월만 빼와서 배열을 만든다.
month : [05, 05, 04, 05, 05]
2) 0으로 채워진 길이가 12인 빈 배열을 만든다.
data = [0,0,0,0,0...]
3) 2번에서 만든 data 배열의 인덱스를 월로 생각하고, 1번에서 만든 month 배열을 map으로 돌면서 해당 월을 만날 때마다 data[month]를 1씩 늘려준다.
data = [0,0,0,1,4...]

  // 차트에 삽입할 월별 권수 배열 만들기
  const getCountBooks = (year) => {
    const month = endDate.filter(item => item.includes(year))
      .map(item => item.split('-').splice(1, 1).join())
    const data = new Array(11).fill(0)
    month.map(item => {
      data[Number(item) - 1]++
    })
    return data
  }
  //select 박스 변화 감지
  const onChangeYear = (e) => {
    const data = getCountBooks(e.target.value)
    setCountBook(data)
  }

결과


0개의 댓글