담당 개발 부분

• 회원 상세 페이지 걸음수 차트

과제 수행 일지

• velog로 모아보기

2022-05-30

나는 주어진 걸음수 json 데이터를 이용해서 막대 그래프를 그리는 부분을 맡았다.저번 매드업 과제에서 차트를 다뤄봤지만, 막대 그래프는 해본 적이 없어 경험해보고자 이 부분을 담당했다.차트는 victor를 이용하기로 했다.

victory 사용하기

설치

• npm i --save victory로 설치를 한다.

docs

• 저번 과제도 victory의 공식 문서를 바탕으로 진행했으므로, 이번 과제도 동일하게 진행할 예정이다.

• docs에 나온 예제 그대로 적용을 하면 오른쪽 화면과 같이 그래프가 그려진다!

코드 분석

• [VictoryChart](<https://formidable.com/open-source/victory/docs/victory-chart>)
  • VictoryCharts는 차트의 레이아웃을 제어한다.
  • 하위 항목이 제공되지 않으면 빈 기본 축 집합을 렌더링 한다.
• [VictoryAxis](<https://formidable.com/open-source/victory/docs/victory-axis#victoryaxis>)
  • VictoryAxis은 단독으로 사용하거나 VictoryChart와 함께 구성할 수 있는 단일 축을 렌더링한다.
  • dependentAxis
    • 축이 'y'에 해당하는지 여부를 지정한다.
    • 기본값은 dependentAxis={false}
• VictoryBar
  • 데이터 집합을 막대로 표시한다.
  • VictoryChart와 결합하여 bar chart를 만들 수 있다.

json 데이터 가공

이 코드들을 바탕으로 진행하기 전, json 데이터를 출력하기 위해 어떻게 진행할 지 결정해야 한다.

우선 날짜가 버튼 선택으로 하루, 일주일, 한 달 단위로 선택할 수 있으므로 startDate와 endDate를 받고, 여러 조건에 따라 데이터를 출력하면 된다.