[Front] BarChart 구현하기

BarChart를 직접 구현해보자

위와 같은 BarChart를 구현해야 했다.

Chart.js 라이브러리를 이용하려고 했으나..

1. 막대 위에 데이터 표시

2. 막대 둥글게 표현

3. 차트 세로 축 데이터 표시 및 dotted로 라인 표현

등등.. Chart.js를 커스텀해서 쓰기엔 어려운 부분이 있었기에 직접 구현하기로 결정했다.

 

사용 스택 : React, JavaScript, Tailwind, Framer-motion

 

1. BarChart 컴포넌트 Props

 - items / multiItems : 가로축 라벨당 두개의 막대가 있는 경우를 고려하여 items 혹은 multiItems를 받는다.

 - standard : 프로젝트에서 기준에 따라 막대 색상을 변경해야 했기 때문에 해당 기준을 받는 props이다.

 - range : 세로축 기준을 min, max로 받는다.

 - backgroundColor : 막대의 색상을 커스텀 가능하게 props로 받는다.

 

2. 세로축

<>
<div className="border-t relative ml-[22px]">
     <p className="absolute text-[9px] text-gray-300 left-[-22px] top-[-8px] bg-white pr-[4px]">
         {range?.max.toLocaleString() || 10}
     </p>
</div>
<div className="border-t ml-[22px] border-dotted" />
<div className="border-t relative ml-[22px]">
     <p className="absolute text-[9px] text-gray-300 left-[-22px] top-[-8px] bg-white pr-[4px]">
         {range?.max || range?.min ? Math.round((range.max + range.min) / 2).toLocaleString() : 5}
     </p>
</div>
<div className="border-t ml-[22px] border-dotted" />
<div className="border-t relative ml-[22px]">
      <p className="absolute text-[9px] text-gray-300 left-[-22px] top-[-8px] bg-white">{range?.min || 0}</p>
</div>
</>

- min, max를 각각 최하단, 최상단 line으로 잡아놓고 가운데 기준은 min+max / 2 한 값으로 고정해놓았다. 그리고 위아래로 dotted line을 추가하여 디자인에 맞추어 작업하였다.

- 이 세로축을 기준으로 막대는 absolute로 위치하게 하여 세로축위에 얹어지도록 작업하였다.

 

3. 막대 그리기

  const dayLabel = (date: string) => {
        const currentDate = new Date(date);
        const week = ['일', '월', '화', '수', '목', '금', '토'];
        return week[currentDate.getDay()];
  };

- item의 date에 맞추어 date label을 생성

- item의 data값은 막대 길이 +  3%만큼 위에 위치하게 작업

- 막대는 페이지 진입시 애니메이션이 작동하게끔 framer-motion을 이용 - <motion.div>로 감싸서 처리하니 깔끔하게 애니메이션 처리 완! (framer motion 최고다..ㅎ)

- 막대 두개를 나타내야하는 경우를 위해 위와 동일한 코드로 multiItems를 이용해 막대를 두개 렌더링하면 된다

 

4. 결과물