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

[jhoon9494]

구현 기능

시계열 차트 만들기

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

호버 기능 구현

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

  사용 라이브러리

  ❌ react-chartjs-2

  처음에 사용했던 라이브러리 입니다. chart.js기반으로 가벼운 라이브러리라 사용해보려했으나, React와 함께 사용한 예제가 부족했고, 공식 문서를 통해 호버 시 툴팁을 적용하는 것에 어려움이 있어서 다른 라이브러리를 사용했습니다.

✅ recharts

차트 라이브러리에 대해 검색했을 때 추천이 많아서 다음 라이브러리로 사용했습니다. React 예제가 많았고, 무엇보다 공식 문서가 잘되어 있어서 적용하는데 큰 어려움이 없어서 좋았습니다. 각 차트가 Component로 제작되어 있어서 리액트처럼(?) 사용할 수 있다는 부분이 장점인 것 같습니다.

참고사항

• 받아온 차트 데이터에서 시작 날짜와 종료날짜를 구하여 제목에 표시했습니다.
• Router를 제거하려했으나, useParams()를 사용하여 filter를 구현할 수도 있을 것 같아서 남겨두었습니다.

SAMPLE