chichoon / data_graph

Data Graph

배포 페이지

기능 소개

주어진 Mock Data를 그래프로 출력합니다.

막대형 그래프와 영역 그래프가 겹쳐져서 함께 출력됩니다.

하단의 버튼을 누르면 해당하는 지역 (id) 의 모든 그래프가 하이라이트 됩니다.

마찬가지로 막대 그래프를 클릭하면 같은 지역에 해당하는 그래프가 하이라이트 됩니다.

마우스를 올리면 툴팁을 출력합니다.

툴팁에서는 ID, value_bar, value_area 를 출력합니다.

사용한 라이브러리

그래프 출력, 그래프 이벤트 핸들링, 툴팁 출력은 Victory 라이브러리를 사용하였습니다.

스타일링은 Scss를 이용하였습니다.

고민한 사항

버튼에 이벤트 부착하기

export const SelectIdButtons = ({ ids, setSelectedId }: Props) => {
  function handleClickButtons(e: MouseEvent<HTMLButtonElement>) {
    setSelectedId((e.target as Element).attributes.getNamedItem('data-id')?.value ?? '');
  }

  return (
    <button className={styles.buttonWrapper} type='button' onClick={handleClickButtons}>
      <button type='button' data-id='none' className={styles.buttons}>
        없음
      </button>
      {ids.map((id) => (
        <button type='button' data-id={id} key={id} className={styles.buttons}>
          {id}
        </button>
      ))}
    </button>
  );
};

여러 버튼이 비슷한 동작을 하기 때문에 각각의 핸들러를 선언하기보다는 부모 컴포넌트에 단 하나의 핸들러를 부착하고, 이벤트를 위임받아 적절한 처리를 하도록 하였습니다.

이때 자식 버튼들을 구분하기 위해 data-id property를 사용하였습니다.

useData

useData는 데이터를 json 파일로부터 읽어들여 적절한 형태로 가공하는 관심사를 가진 훅입니다.

일련의 로직이 데이터 정제 및 가공에 관련되어 있다고 판단되어 커스텀 훅으로 묶어주게 되었습니다.