차트 그리기(Victory)

React에서 차트 그리기 위해 Victory 라이브러리를 사용했습니다.

설치

npm i victory
# or
yarn add victory

---

튜토리얼

공식문서에 있는 퍼센트 막대 차트 예제입니다.

const myDataset = [
  [
    { x: 'a', y: 1 },
    { x: 'b', y: 2 },
    { x: 'c', y: 3 },
    { x: 'd', y: 2 },
    { x: 'e', y: 1 },
  ],
  [
    { x: 'a', y: 2 },
    { x: 'b', y: 3 },
    { x: 'c', y: 4 },
    { x: 'd', y: 5 },
    { x: 'e', y: 5 },
  ],
  [
    { x: 'a', y: 1 },
    { x: 'b', y: 2 },
    { x: 'c', y: 3 },
    { x: 'd', y: 4 },
    { x: 'e', y: 4 },
  ],
]

const transformData = (dataset) => {
  const totals = dataset[0].map((data, i) => {
    return dataset.reduce((memo, curr) => {
      return memo + curr[i].y
    }, 0)
  })
  return dataset.map((data) => {
    return data.map((datum, i) => {
      return { x: datum.x, y: (datum.y / totals[i]) * 100 }
    })
  })
}

function Chart(){
  const dataset = transformData(myDataset)
  return (
    <div>
      <VictoryChart height={400} width={400} domainPadding={{ x: 30, y: 20 }}>
        <VictoryStack colorScale={['black', 'blue', 'tomato']}>
          {dataset.map((data, i) => {
            return <VictoryBar data={data} key={i} />
          })}
        </VictoryStack>
        <VictoryAxis dependentAxis tickFormat={(tick) => `${tick}%`} />
        <VictoryAxis tickFormat={['a', 'b', 'c', 'd', 'e']} />
      </VictoryChart>
    </div>
  )
}

먼저, 차트에 데이터를 x축, y축 데이터 형태로 전달해야 합니다. 그리고 퍼센트 막대 차트라서 퍼센트 데이터로 되어 있어야 합니다. transformData()가 퍼센트 막대 차트에 맞는 데이터로 가공해서 반환합니다.

여기서 사용하는 Victory 컴포넌트에 간단히 소개하겠습니다.

• VictoryChart: 차트를 그리기 위한 가장 상위 컴포넌트입니다.
  • width, height: 최대 넓이, 높이입니다. 고정된 크기가 아니라 view가 줄면 차트 크기도 줄어듭니다.
  • padding: default가 50으로 되어 있습니다.
  • domainPadding: 축과 막대 그래프들이 있는 간격입니다.
• VictoryStack: Bar를 감싸는 컴포넌트입니다.
  • colorScale: VitoryBar에 들어가는 data 하나 색깔입니다. 여기서는 3개 data 배열이 들어가니 색깔이 3개를 넣었습니다.
• VictoryBar: 막대그래프입니다.
• VictoryAxis: 축을 담당하는 컴포넌트입니다. 기본적으로 x축, y축을 그리기 위해 2개가 필요합니다.
• dependentAxis: y축에 해당하는 컴포넌트에 지정하는 속성입니다.
• tickFormat: 축 값들을 구분하는 라벨입니다.

위 차트는 결과물입니다.

---

프로젝트에서 사용중인 코드

프로젝트 코드는 여기서 확인할 수 있습니다. 아래는 그 결과물입니다.

공식문서에서 여러 옵션들 예제를 참고해 구현했습니다. 차트 범례는 VictoryLegend를 사용하지 않고 div태그로 따로 만들어서 사용했습니다. VictoryLegend로 구현했을 때 제가 원하는 위치로 이동이 자유롭지 않아서 직접 구현했습니다. 여기서 제일 고민했던 것은 어떻게 가독성 있게 원본 데이터를 차트에 맞는 데이터로 가공할 수 있을까였습니다. 함수형 프로그래밍을 사용했습니다. lodash에서 chain을 이용해 선언적으로 함수들을 사용했습니다. 그 결과는 프로젝트 코드를 제공하는 링크에서 transformData()를 보시면 됩니다.