기능 구현을 위한 라이브러리

1-1 Nivo Chart 라이브러리

• 프로젝트의 핵심은 필요한 사용자가 필요한 정보를 그래프로 보여주는 것이라고 생각하고 차트 중심으로 라이브러리를 모색했다. 홈페이지의 막대 그래프와 차트 페이지의 라인 차트는 Nivo Chart 라이브러리를 사용하기로 결정했다.그 이유는
  • 리액트의 특징인 component로 구성 되어있다.
  • 사용자가 많은 편이라 래퍼런스가 많다. (chart.js에 이어 2위)
  • 다양한 종류의 차트를 지원한다.
  • 프로젝트에 스토리북을 설치하면 그래프를 커스터마이징 하여 브라우저에서 UI확인하기 편하다. (사이트에서도 기본적인 것은 커스텀 가능함)
  • 반응형을 지원한다.
  https://nivo.rocks/

Home | nivo

• y축의 숫자를 임의 지정하여 넣으려고 하니, Nivo 차트의 format 함수는 일반적으로 HTML 또는 JSX 요소를 지원하지 않으며, 문자열을 반환해야 함. 따라서 value 객체에서 필요한 데이터를 문자열로 변환해 반환해야 함.

format: value => {
 // 문자열일 경우
  return `${value.label}`;
}

//그 이외에는 
format: value => `${value}`

• 차트 특정 날짜에 마우스 호버 할 경우 해당 날짜의 모든 데이터를 tooltip에 표시하고 싶었고, nivo 공식문서에 있을지도 모르나 찾지 못해 tooltip을 커스텀하는 방법으로 적용. 이렇게 한 이유는 중복되는 값을 가진 경우 차트에서 한개의 라인으로만 표현이 되어 보완하기 위함.

// 마우스 호버 했을때 tooltip 커스텀 x축의 날짜 : 지역 미세먼지 수치
const CustomTooltip = ({ slice }) => {
  // legends/tooltip 공통 스타일 적용
  return (
    <div
      style={{
        background: 'white',
        padding: '10px',
        border: '1px solid #ccc',
      }}
    >
      <div style={{ textAlign: 'center', padding: '4px' }}>
        {slice.points[0].data.xFormatted}
      </div>
      {slice.points.map(point => (
        <div
          key={point.id}
          style={{ display: 'flex', alignItems: 'center', margin: '5px 0' }}
        >
          {/* 심볼을 SVG 원으로 표시 */}
          <svg
            width='12'
            height='12'
            style={{ marginRight: '10px', opacity: '0.75' }}
          >
            <circle cx='6' cy='6' r='6' fill={point.serieColor} />
          </svg>
          {/* 시리즈 이름과 값 */}
          <span>
            <b>{point.serieId} :</b> {point.data.yFormatted}
          </span>
        </div>
      ))}
    </div>
  );
};

const MainContainer = () => {
  return (
    <ChartContainer>
      <ResponsiveLine
        data={data}
        //...
        enableSlices='x' //  sliceTooltip prop을 활성화!
        sliceTooltip={CustomTooltip}
      />
    </ChartContainer>
  );
};

• y축의 숫자를 미세먼지 수치에 따라 컬러를 지정하고 싶음. nivo차트 속성중 axisLeft(y축) 를 사용하여 설정 가능. 직접적인 레이블 색상 변경은 불가. theming을 통해 축 전체 색상 변경은 가능하나 y축만 색상변경하는것은 확인중. 보류📍