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

[jiheon788]

구현 내용

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

참고 사항

차트 라이브러리 : Recharts

• 처음에 가장 점유율이 높은 ChartJS 사용해 기능 구현하였으나 다음 구현 목록 중 조건별 커스터마이징을 생각하였을 때 구현이 까다로움을 느꼈습니다.
• ChartJS 바로 다음 순위였던 Recharts의 경우 컴포넌트 단위로 관리되어 조건별 커스터마이징이 간편하다 느껴 마이그레이션을 진행하였습니다.
• 둘다 사용해보며 느낀점:
  • Recharts의 문서가 너무 친절하다.
  • 구현도 Chartjs에 비해 간단함, 또한 컴포넌트 단위로 관리되어 좀더 리액트스럽게 코드관리가 가능

제 개인의견이며, 저의 부족으로 이렇게 느낀것일 수도 있습니다.

참고 링크

• 차트라이브러리 종합 순위
• ChartJS의 조건별 커스터마이징
• Recharts의 조건별 커스터마이징

EDA 문서 작성

• 기능 구현하기 전 데이터를 파악하기 위해 EDA를 진행 후 문서화하였습니다. (간단한 시각화와 시계열 특성 분석)
• docs/EDA.md에서 확인가능합니다.
• docs 폴더를 새로 만들었습니다. 메인 README를 제외, 기타 문서들을 여기서 관리하고자 합니다.

기타

• 하드 코딩 줄이기 위해 상수폴더에 색상 팔레트 작성 (색상은 플렉시스 공심홈페이지 참고)

Sample

[bokjunwoo]

지헌님이 작성해주신 EDA를 통해 많은 부분을 배워갑니다🔥