// 普通饼状图 https://g2.antv.antgroup.com/examples/general/pie/#pie

import { Chart } from '@antv/g2';
import { useEffect } from 'react';
import { crateContainer } from '../../common';

interface ListData {
  [key: string]: any;
}

interface config {
  container: string; // 容器id
  width?: number;
  height?: number;
  customColor?: boolean;
  colorMap?: any;
  autoFit?: boolean;
  xAxisLabel: string;
  yAxisLabel: string;
  legend?: boolean;
}

interface ChartData {
  listData: ListData[];
  config: config;
}
type Props = { chartData: ChartData };
const BasicPie: React.FC<Props> = ({ chartData }) => {
  const container = crateContainer(chartData.config.container);
  useEffect(() => {
    const { listData, config } = chartData;
    const chart = new Chart({
      container: config.container,
      theme: 'classic',
      autoFit: config.autoFit,
      width: config.width,
      height: config.height,
      legend: config.legend,
    });
    chart.coordinate({ type: 'theta' });
    // 声明可视化
    const interval = chart.interval(); // 创建一个 Interval 标记
    interval
      .data(listData) // 绑定数据
      .encode({
        y: config.yAxisLabel, // 编码 y 通道
      })
      .encode('color', config.xAxisLabel)
      .style('stroke', 'white') // 间隔颜色
      .transform({ type: 'stackY' })
      .label({
        // 扇形标识
        text: config.xAxisLabel,
        radius: 0.8,
        style: { fontSize: 10, fontWeight: 'bold' },
      })
      .label({
        text: (d: ListData) => d[config.yAxisLabel], // 扇形数值
        radius: 0.8,
        style: {
          fontSize: 9,
          dy: 12,
        },
      })
      .animate('enter', { type: 'waveIn' }); // 渲染动画

    if (config.customColor) {
      interval.encode('color', config.xAxisLabel).scale('color', {
        relations: config.colorMap,
      }); // 通道颜色
    }
    // 渲染可视化
    setTimeout(() => {
      chart.render();
    }, 100);
  }, [chartData]);

  return container;
};

export default BasicPie;