프로젝트의 주제

• 주어진 데이터를 기반으로 시계열 차트 만들기

프로젝트의 요구사항

• 시계열 차트 만들기
  • 주어진 JSON 데이터의 key값(시간)을 기반으로 시계열 차트를 만들어주세요
  • 하나의 차트안에 Area 형태의 그래프와 Bar 형태의 그래프가 모두 존재하는 복합 그래프로 만들어주세요
  • Area 그래프의 기준값은 value_area 값을 이용해주세요
  • Bar 그래프의 기준값은 value_bar 값을 이용해주세요
  • 차트의 Y축에 대략적인 수치를 표현해주세요(예시 이미지 참고)
• 호버 기능 구현
  • 특정 데이터 구역에 마우스 호버시 id, value_area, value_bar 데이터를 툴팁 형태로 제공해주세요
• 필터링 기능 구현
  • 필터링 기능을 구현해주세요, 필터링은 특정 데이터를 하이라이트 하는 방식으로 구현해주세요
  • 필터링 기능은 버튼 형태로 ID값(지역이름)을 이용해주세요
  • 필터링 시 버튼에서 선택한 ID값과 동일한 ID값을 가진 데이터 구역만 하이라이트 처리를 해주세요
  • 특정 데이터 구역을 클릭 시에도 필터링 기능과 동일한 형태로 동일한 ID값을 가진 데이터 구역을 하이라이트해주세요
• 다양한 차트 라이브러리 중 어떤것을 사용할 지 논의했다.
  • 차트를 커스터마이징하기 좋으며, 기본적으로 제공하는 UI가 훌륭한 chart.js를 선택했다.
• 처음 주어진 세 개의 요구사항을 관련도를 생각하여 시계열 차트와 호버 기능, 필터링 기능 이라는 두 개의 큰 단위의 이슈로 나누었다.

프로젝트에서 도입된 주요 기술

chart 유틸함수

• chart.js에서는 Chart를 생성할 때 options와 data를 props로 받는다.
• 이때 이 options와 data의 코드길이가 상당하기에 따로 utils에 빼서 관리하였다.

data

• 복합그래프를 그리기 위해선 data의 dataset에 배열로 2개의 data객체를 주면 된다.
  • 이때 들어가는 속성들은 type, label, data, backgroundColor, yAxisID가 있는데 여기서 data와 backgroundColor가 중요하다.
• data는 결국 다시 배열로 제공해야 하는데 이 부분은 제공되는 api로부터 받아야 한다.
• 따라서 Root페이지에서 loader(react-router-dom의 기능)를 이용해 받은 데이터를 utils함수에 전달하고 이렇게 해서 다시 받은 responseData[xLabel][yLabel] 의 데이터들을 이용해 Chart의 data에 전달해 주어야 한다.
• 즉 순서는 loader → utils → responseData[xLabel][yLabel] → Chart data={data} 이다.
• 또한 backgroundColor는 utils에 chartColor라는 함수를 만들어 filter가 특정 key일때와 아닐때를 구분해야한다.
• 이 키는 api로 받은 데이터의 id값으로 대신하고 따라서 순서는
  • api로부터 받은 데이터(id포함)를 Chart의 dataset 내부에서 유틸함수를 이용해 컬러를 조절한다.
  • 이때 컬러는 필터에서 현재 선택된 값을 비교하여
    • 선택된게 있는지 확인하고 있으면 그것만 색깔을 주고 나머지는 반투명한 색을
    • 아니라면 전부 색깔을 준다.

options

• options에는 filter hook과 연결하여 차트를 클릭했을 때 filter가 작동할 수 있도록 해당 함수를 onClick에 바인딩해야한다.
• 그 외의 속성에는 responsive, plugins, scale이 있다.

useFilterChart hook

• filter hook은 크게 두가지로 나눌 수 있다.
• 필터버튼을 누르는 경우
• 차트를 클릭하는 경우
• 따라서 두가지의 함수를 만들어주어 return해야한다.

query parameter와 history API를 이용한 필터링

• 앞선 과제에서 썼던 query parameter방식을 여기서도 쓴다.
• 방식은
  • 우선 new URLSearchParams(location.search).get('id') || 'ALL' 를 이용해 현재의 상태를 useState에 set해놓고 그 해당 setState를 필터버튼과 차트클릭 두가지의 함수에서 각각 사용해주면 된다.
  • 이때

    export const changeParams = (paramName: string, paramValue: string) => {
      const queryParams = new URLSearchParams(window.location.search);
      queryParams.set(paramName, paramValue);
      const newUrl = `${window.location.origin}?${queryParams.toString()}`;
      window.history.pushState({ path: newUrl }, '', newUrl);
    };

    • 를 이용해 실제 params를 바꿔주고
    • setState를 통해 state도 바꿔준다.
• 이후 이렇게 바뀐 params는 실제 차트에서 사용하고
• state는 Filter버튼의 색깔을 바꿔주는데 사용한다.

끝으로

• 이번 과제는 짧고 굵은 느낌이었다.
• 전체적으로 props를 이용해 얼마나 데이터들을 잘 이동시키고 효율적으로 렌더링하는지가 중요했고
• chart라이브러리의 숙련도를 테스트하고 끌어올리는 과제였던 것 같다.
• react를 다룬다면 props를 정말 자유자재로 다루어야겠다고 느꼈다.