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

[bokjunwoo]

📊 시계열 차트 만들기

• [x] 주어진 JSON 데이터의 key값(시간)을 기반으로 시계열 차트를 만들어주세요
• [x] 하나의 차트안에 Area 형태의 그래프와 Bar 형태의 그래프가 모두 존재하는 복합 그래프로 만들어주세요
• [x] Area 그래프의 기준값은 value_area 값을 이용해주세요
• [x] Bar 그래프의 기준값은 value_bar 값을 이용해주세요
• [x] 차트의 Y축에 대략적인 수치를 표현해주세요

🖱 호버 기능 구현

• [x] 특정 데이터 구역에 마우스 호버시 id, value_area, value_bar 데이터를 툴팁 형태로 제공해주세요

차트 라이브러리

차트라이브러리는 Recharts를 이용하여 구현했습니다. Recharts를 선택한 이유는 다음과 같습니다.

1. 높은 다운로드 수로 실제 사용성이 입증되었다는 점
2. 공식문서에서 예제 코드가 많아 빠르게 학습이 가능하다는 점
3. <Tooltip /> 컴포넌트를 통해 호버 시 툴팁 기능을 커스텀을 쉽게 가능하게 하는 점, 또한 다양한 커스터마이징 기능을 제공 하는 점

참고사항

• 호버기능 구현을 위해 <Tooltip /> 에서 제공하는 커스텀 기능을 이용해 CustomTooltip 컴포넌트를 구현했습니다
• 제공받은 JSON 데이터를 Recharts의 사용 형식에 맞게 변환 하는 함수를 따로 분리해 관심사를 나눴습니다.

프리뷰