// 多度量柱状图 https://g2.antv.antgroup.com/examples/analysis/group/#bar-multi-measure

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

// ListData类型约束不确定，不同的数据格式可能不同，根据config来配置图表与数据的对应关系
interface ListData {
  [key: string]: any;
}

type yAxisLabel = string[]; // 一条数据可能有多个需要展示的通道
interface config {
  container: string; // 容器id
  width?: number;
  height?: number;
  customColor?: boolean;
  colorMap?: any; // 一条数据的多个通道颜色可能不同，可用枚举表示，比如{xOne:'red',xTwo:'blue'}
  autoFit?: boolean;
  xAxisLabel: string;
  yAxisLabel: yAxisLabel;
  legend?: boolean;
}

interface ChartData {
  listData: ListData[];
  config: config;
}
type Props = { chartData: ChartData };
const MultiMeasureColumn: React.FC<Props> = ({ chartData }) => {
  const container = crateContainer(chartData.config.container);
  useEffect(() => {
    const { listData, config } = chartData;
    const chart = new Chart({
      container: config.container,
      theme: 'classic',
      width: config.width,
      height: config.height,
      legend: config.legend,
      autoFit: config.autoFit,
    });
    chart.data(listData);

    config.yAxisLabel.forEach((item) => {
      const interval = chart.interval();
      interval.encode({
        x: config.xAxisLabel, // 编码 x 通道
        y: item, // 编码 y 通道
        series: () => item,
        color: () => item,
      });
      if (config.customColor) {
        interval.scale('color', { range: config.colorMap }); // 指定值域
      }
    });
    setTimeout(() => {
      chart.render();
    }, 100);
  }, [chartData]);

  return container;
};

export default MultiMeasureColumn;