[TIL] 2022-05-30

모아데이터 기업 과제 첫 날

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

victory 사용하기

설치

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

docs

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

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

코드 분석

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

json 데이터 가공

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

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

1. startDate 와 endDate가 같은 경우 (=오늘, 혹은 datepicker로 선택한 날)

• 같은 경우는 날짜가 같으므로 시간에 따라 그래프를 출력하면 된다.

2. startDate 와 endDate가 다른 경우

• 다른 경우는 날짜에 따라 그래프를 출력하면 된다.
• 날짜의 경우, 하루의 총 걸음 수 데이터를 가져와야 하는데, 각 날짜의 마지막 데이터의 steps가 총 걸음 수이다.
• startDate 와 endDate를 반복문으로 돌리면서 데이터가 없는 날짜는 새로 추가한다.

위의 조건을 바탕으로 내가 구현한 코드 설명은 아래와 같다.

1. 날짜가 같은 경우

• 해당 날짜로 filter 하기
• 데이터가 누적되기 때문에 역순으로 sort 하기(가장 최근 데이터가 맨 앞에 와있기 때문)
• 차트에서 필요한 값은 날짜와 step 데이터이므로 새로 객체를 만들어 리턴해준다.
  • 이때 날짜 값은 같은 날이므로 시간만 사용

2. 날짜가 다른 경우

• startDate와 endDate 사이에 저장된 데이터가 있으면 가져오기
• startDate와 endDate 사이의 날짜 리스트 만들기
• 위에서 만든 날짜 리스트를 map 돌리면서 해당 날짜가 저장된 데이터에 있으면 가장 위의 데이터를 가져와서 저장한다.
  • step 데이터는 누적이므로 가장 나중에 저장된 값이 총 합이다.
• 날짜가 저장된 데이터에 없으면 step 값을 0으로 넣어준다.
• 2의 경우 1과 달리 sort를 안해줘도 된다. (날짜 리스트를 반복문 돌리면서 이미 정렬되어 있기 때문)

그러면 아래와 같이 차트가 완성된다.

• 전체
  

• 일주일
  

• 하루
  

startDate와 endDate만 바꾸면 차트가 실시간으로 바뀐다.
내일은 차트 스타일 적용과 개인과제를 진행해야겠다.