prims-web/src/app/components/ChartsGraph/index.jsx

import {memo} from "react";
import {Table} from "antd";
import { Column ,Pie ,Line} from '@ant-design/plots';
import {Area} from "@ant-design/charts";

export const ChartsGraph = memo(({
  type,
  viewer
})=>{
  const {columns,resultList,dimensionColumns,metricColumns} = viewer;
  const queryColumns = (columns||[]).map(item=> (
    {
      title: item.name,
      dataIndex: item.nameEn,
      key: item.nameEn,
    }
  ))
  const dimensionObj = dimensionColumns && dimensionColumns[0];
  const dimension = dimensionObj?.nameEn
  const dimensionType = dimensionObj?.showType;
  const metric = dimensionColumns && metricColumns[0]?.nameEn;
  const data = (resultList||[]).map(item=> ({
    dimension: item[dimension],
    metric: item[metric],
    category:item[dimensionColumns[1]?.nameEn]
  }))
  // console.log(data)
  const DemoColumn = () => {
    const config = {
      data,
      xField: (d)=>dimensionType==="DATE" ? new Date(d.dimension).toLocaleDateString():d.dimension,
      stack:false,
      yField: 'metric',
      colorField: 'category',
      axis: {y: { labelFormatter: '~s' }},
      containerStyle:{height:'50vh'},
      legend: false,
    };
    return <Column {...config} />;
  };

  const DemoArea = () => {
    const config = {
      data: data,
      xField: (d)=>dimensionType==="DATE" ? new Date(d.dimension).toLocaleDateString():d.dimension,
      yField: 'metric',
      colorField: 'category',
      shapeField: 'smooth',
      group: true,
      stack:false,
      axis: {
        x: { title: 'Date' },
        y: { labelFormatter: '~s' },
      },
      legend: {
        color: { size: 72, autoWrap: true, maxRows: 3, cols: 6 },
      },
    };
    return <Area {...config} />;
  };

  const DemoPie = () => {
    const config = {
      data,
      angleField: 'metric',
      colorField: 'category',
      label: {
        text: 'category',
        style: {
          fontWeight: 'bold',
        },
      },
      legend: {
        color: {
          title: false,
          position: 'right',
          rowPadding: 5,
        },
      },
      containerStyle:{
        height:'50vh'
      },
    };
    return <Pie {...config} />;
  };

  const DemoLine = () => {
    const config = {
      data,
      xField: 'dimension',
      yField: 'metric',
      sizeField: 'metric',
      shapeField: 'trail',
      legend: { size: false },
      colorField: 'category',
      containerStyle:{
        height:'50vh'
      },
    };
    return <Line {...config} />;
  };

  switch (type) {
    case 'bar_chart': return DemoColumn();
    case 'pie_chart': return DemoPie();
    case 'line_chart': return DemoLine();
    case 'area_chart' : return DemoArea();
    default:
      return (
        <Table
          columns={queryColumns}
          dataSource={resultList}
        />
      )
  }
})