import * as React from "react";
import { Card } from "antd";
import { Column } from "@ant-design/charts";
import styles from "./index.module.css";

interface CardConfig {
  title?: string;
  chartData?: Array<Record<string, any>>;
  chartHeight?: number;
}

const DEFAULT_DATA: CardConfig = {
  title: "",
  chartData: [],
  chartHeight: 500,
};

export interface CardGroupBarChartProps {
  cardConfig?: CardConfig;
}

const CardGroupBarChart: React.FunctionComponent<CardGroupBarChartProps> = (
  props: CardGroupBarChartProps
): JSX.Element => {
  const { cardConfig = DEFAULT_DATA } = props;

  const { title, chartData, chartHeight } = cardConfig;

  return (
    <Card title={title} className={styles.cardGroupBarChart}>
      <Column
        data={chartData!}
        xField="category"
        yField="value"
        seriesField="type"
        isGroup
        width={10}
        height={chartHeight}
        label={{
          // 可手动配置 label 数据标签位置
          position: "middle",
          // 可配置附加的布局方法
          layout: [
            // 柱形图数据标签位置自动调整
            { type: "interval-adjust-position" },
            // 数据标签防遮挡
            { type: "interval-hide-overlap" },
            // 数据标签文颜色自动调整
            { type: "adjust-color" },
          ],
        }}
      />
    </Card>
  );
};

export default CardGroupBarChart;