// 普通柱状图 https://g2.antv.antgroup.com/examples/general/interval/#column

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

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

interface config {
  container: string; // 容器id
  width?: number; // 图表宽度
  height?: number; // 图表高度
  customColor?: boolean; // 通道颜色
  colorMap?: any; // 自定义颜色
  autoFit?: boolean; // 是否填充容器
  xAxisLabel: string; // X轴标识
  yAxisLabel: string; // Y轴标识
  legend?: boolean; // 图例隐藏
}

interface ChartData {
  listData: ListData[]; // 图表数据
  config: config; // 图表配置
}

type Props = { chartData: ChartData };
const BasicColumn: 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,
    });

    // 声明可视化
    const interval = chart.interval(); // 创建一个 Interval 标记
    interval
      .data(listData) // 绑定数据
      .encode({
        x: config.xAxisLabel, // 编码 x 通道
        y: config.yAxisLabel, // 编码 y 通道
      });

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

  return container;
};

export default BasicColumn;