[greyhairchooselife] 시계열 차트, 호버기능 구현

[greyHairChooseLife]

• [x] 주어진 JSON 데이터의 key값(시간)을 기반으로 시계열 차트를 만들어주세요
• [x] 하나의 차트안에 Area 형태의 그래프와 Bar 형태의 그래프가 모두 존재하는 복합 그래프로 만들어주세요
• [x] Area 그래프의 기준값은 value_area 값을 이용해주세요
• [x] Bar 그래프의 기준값은 value_bar 값을 이용해주세요
• [x] 차트의 Y축에 대략적인 수치를 표현해주세요(예시 이미지 참고)
• [x] 특정 데이터 구역에 마우스 호버시 id, value_area, value_bar 데이터를 툴팁 형태로 제공해주세요

전반적인 구조

• ChartBoard 컴포넌트 : 데이터, 필터링, 옵션을 저장 및 전달
• ChartFilterWithOption 컴포넌트(아직 분리를 못했습니다.) : 유저 상호작용으로 ChartBoard 컴포넌트의 필터, 옵션 등을 담은 useRef를 업데이트
• ChartCanvas 컴포넌트 : ChartBoard가 넘겨준 필터링된 데이터와 옵션 등을 활용해 차트 그리기

Chart.js 라이브러리

선택이유

• 요구 사항인 필터링, 복합 차트, 호버링 등이 내장 됨.
• 반응형 디자인 자동 적용
• 타입 지원이 잘 되어있음
• 바로 따라할 수 있는 공식 가이드 영상이 방대함

스크린샷