엘리스 데이터 분석 웹 프로젝트3

• 저번까지 한 일

  지표의 세부 버튼 클릭 시 점수에 따른 음영효과 및 투명도 주기
  폴리곤이 중복되는 현상 방지

• 이번에 할 일

  1. 카카오맵에서 마우스 호버 시 나타나는 정보 수정
  2. 상세페이지 추가 및 마우스 클릭시 상세페이지로 이동 설정
  3. 상세페이지 그래프 추가 및 레이아웃 설정

먼저 마우스 호버 시 나타나는 정보는 기존에 '평균0점대비 몇점입니다' 라고 보여줬지만 해당 시/도의 점수와 지표의 순위를 보여주는 형식으로 바꿨다.

=> 이렇게 표시되도록 변경하였다.

또한 상세페이지는 메인페이지와 같은 지표를 활용하여 해당 버튼 클릭시 통계 그래프를 보여주는 식의 구성을 하였는데 전국과 해당 지역을 나눠서 보여준다.

=> sub가 해당 지역의 통계 데이터이다.

차트는 recharts 라이브러리를 이용해서 간결하게 그릴수 있었는데 클릭한 버튼의 데이터 타입이 1개~4개로 되어있어서 이걸 나누는데 약간의 생각할 시간이 필요했다.

결국 해결한 방법은 전국을 17개의 시/도로 나눈것을 활용하여 for문을 이용해 해결하였다.

const splitMainDataByType = useCallback(() => {
    let arr = [];
    for (let i = 0; i < data[btnIdx].length; i += 17) {
      arr.push(data[btnIdx].slice(i, i + 17));
    }
    setMainData(arr);
  }, [btnIdx, data]);

mainData라는 상태변수를 두어 초기값을 빈배열로 주고,
받아온 데이터([[의사수 데이터], [병원 수 데이터], ... ,[]])의 요소중
클릭한 버튼의 value(0~3)를 이용해 인덱싱하여 뽑아오는 함수를 작성하였다.

버튼을 클릭할때 마다 해당 버튼의 value값을 이용해 받아온 데이터에서 value인덱스에 맞는 데이터만 추출하게 되고,
추출된 데이터는 이 함수에서 17개씩 배열로 묶어 최종적으로 2중 배열의 형태가 반환되어진다.

그렇게 반환되어진 배열을 .map함수를 이용해 그래프 컴포넌트에 data props로 주어 각각의 데이터에 대해 그래프가 그려지게 된다.

...
<ButtonContainer>
    ...
    <Button
     color="primary"
     variant="contained"
     value="3"
     style={{ marginRight: "5px" }}
     onClick={handleClick}
     >
    진료횟수
  </Button>
</ButtonContainer>
<GraphContainer>
  {mainData.map((location, index) => (
    <Grid
      item
      xs
      style={{
        height: "40vh",
        background: "white",
        paddingBottom: "3rem",
        margin: "1rem",
      }}
     >
      ...
   <DeatilGraph key={btnIdx + index} data={location} />
   </Grid>
  ))}
</GraphContainer>

이렇게 해서 위의 메인 그래프와 같은 그래프가 그려지게된다.
또한 1줄에 최대 2개의 그래프를 표현해주고 싶어서 css 속성을 알아보던중 grid 속성이 있어서 적용해주었다

먼저 styled component를 이용하여 GraphContainer라는 div를 만들어주고 속성을 다음과 같이 주니 해결되었다.

display: grid;
grid-template-columns: repeat(auto-fit, minmax(50%, auto));

grid-template-columns를 해석하자면 auto-fit은 여백이 있으면 여백을 채워주고 minmax(45%,auto)는 너비는 최소 50%, 최대는 auto(자동)로 설정해준다.

원래 flex로 하려했는데 잘 안되어서 grid를 사용했더니 한방에 해결이 되었다.

이제 Map컴포넌트의 리팩토링과 배포, 짜잘한 css 다듬기가 남았다.