// 水平柱状图 https://g2.antv.antgroup.com/examples/general/interval/#bar

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;
  yAxisLabel: string;
  legend?: boolean;
}

interface ChartData {
  listData: ListData[];
  config: config;
}
type Props = { chartData: ChartData };
const LevelColumn: 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({ transform: [{ type: 'transpose' }] }); // 旋转xy轴

    const interval = chart.interval();
    interval
      .data(listData) // 绑定数据
      .transform({ type: 'sortX', reverse: true })
      .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 LevelColumn;