[Chart] Pie chart 구현 및 기능 논의

[MarkLeemee]

구현 사항

• Pie chart transition 및 legend 기본 렌더링
• hover 시, storek, tootip 노출
• 항시 size를 입력받거나, px 단위의 default size가 정해진 기존 방식에서 모체 및 범례 등 사용 환경에 맞춰 사이즈 조절하여 렌더링되는 방식
• 단, legend와 tooltip은 정보는 브라우저 환경 사이즈에 맞춰 렌더링

추가 논의 필요 사항

---

1. legend의 위치 및 list가 과하게 많은 경우

1-1. 덮어 씌기 + 전체 다 노출 (rechart 방식)

(갯수가 많아질 경우 chart의 크기가 줄어든다.)
(middle로 설정한 상태. chart의 위치와 크기와는 별개로 그냥 노출시킨다.)

• rechart의 경우 사이즈나 위치, 갯수를 고려하지 않고 그냥 다 노출
• 해당 chart를 맞는 용도로 사용하지 않았다고 판단 하는 듯

1-2. pagination 혹은 scroll

• antd의 경우 특정 영역을 넘치는 경우 legend pagination 구현

2. 기본 architecture 구현 방식

2-1. legend, tooltip 등 react component를 만들어서 필요한 state를 구현하여 전달하는 방식 (예전 방식)

• react state를 활용하기에 상태 변화 및 렌더링 컨트롤이 쉬워짐
• 별도 state를 만들고 관리하여야 하며 react component를 활용하는 방식이기에 VD, lifecycle 등을 신경써야 함

2-2. 기본(default) element와 styled만 구현 후, 설정이나 인터렉션이 필요한 경우 d3 selection으로 접근하여 컨트롤 (현 코드 방식)

• 기본 layout을 초기에 손쉽게 구상
• 각 인터렉션 이벤트들을 모듈화 시키면 더 효율적

2-3. 최초 box(혹은 svg)만 구성 후 나머지 요소들은 생성하여 appending 하는 방식

• 요소 생성을 모듈화 시켜 놓으면 사실 2번 방식이란 큰 차이가 없기에 가장 좋은 방식이지 않을까 싶음

3.props 전달 방식

3-1. 각개 props 형식

• 기능 및 옵션의 종류가 많아지면 가시성 및 관리가 어려워짐
• rechart의 경우 chart, x축, y축, bar, legend 등 각각을 component 단위로 import 해오기에, 각 component에 각 props를 직접 내려주기에 해당 방식이 가능해짐

import {PieChart, XAxis, YAxis, Tooltip, Area, ... } from 'rechart'
<PieChart {...option} >
  <XAxis ... />
  <YAxis ... />
  <Tooltip ... />
  <Area ... />
  <Bar .../>
  // ...
</ Chart>

3-2. Object 형식

• 라희님이 만든 단순하게 others를 묶는 느낌이 아닌, 하나의 스키마와 데이터 셋을 구성하는 느낌
• antd의 경우 <Chart {...configObj} /> 형식으로 하나의 chart component에 옵션 obj를 풀어서 전달

const configObj = {
  data: [...fetchData],
  angleField: 'value',
  radius: 1,
  innerRadius: 0.6,
  label: {
    type: 'inner',
    offset: '-50%',
    content: '{value}',
    style: {
      textAlign: 'center',
      fontSize: 14,
      // ...
    },
    // ...
  },
 tooltip: {
  // ...
 },
  interactions: [
    {
      type: 'element-selected',
      // ...
    },
    // ...
  ],
  statistic: {
    title: false,
    content: 'AntV\nG2Plot',
    content: {
      style: {
        whiteSpace: 'pre-wrap',
        overflow: 'hidden',
        textOverflow: 'ellipsis',
        // ....
      },
      // ...
    },
    // ...
  },
  // ...
};

<PieChart {...configObj} />