dashboard/src/components/LineWithKPI.jsx

import { observer } from 'mobx-react';
import { Line } from '@ant-design/plots';
import { merge, isEmpty, groupBy } from '../utils/commons';
import { dataFieldAlias } from '../libs/ht';

const uniqueByKey = (array, key, pickLast) => {
  const seen = new Map();
  const isPickLast = pickLast === true;

  return array.filter(item => {
    const k = item[key];
    const storedItem = seen.get(k);

    if(storedItem) {
      if(isPickLast) {
        seen.set(k, item); // update with last item
      }
      return false;
    }

    seen.set(k, item);
    return true;
  });
};

export default observer((props) => {
  const { dataSource, ...config } = props;
  const kpiKey = dataFieldAlias[config.yField]?.nestkey?.v;
  const seriesData = groupBy(dataSource, ele => ele[config.seriesField]);
  const pickKey4KPI = Object.keys(seriesData)[0];
  const KPIData = (seriesData?.[pickKey4KPI] || []).reduce((r, v) => {
    if ( ! isEmpty(v[kpiKey])) { // 有设目标才多显示一条虚线 颜色: #F4664A
      r.push({...v, [config.yField]: v[kpiKey], [config.seriesField]: dataFieldAlias[kpiKey].label, extraLine: true,});
    }
    return r;
  }, []);
  const dataColors = ['#598cf3', '#69deae', '#FAAD14'];
  const colorSets = Object.keys(seriesData).sort().reduce((obj, k, i) => ({...obj, [k]: dataColors[i]}), {});
  const mergeLineConfig = merge({
    // color: ['#598cf3', '#69deae', '#F4664A', '#FAAD14'],
    color: (item) => {
      const thisSeries = item[config.seriesField];
      return thisSeries.includes('目标') ? '#F4664A' : colorSets[thisSeries];
    },
    lineStyle: (data) => {
      // console.log(data);
      if (data[config.seriesField].includes('目标')) {
        return {
          lineDash: [4, 4],
          opacity: 0.5,
        };
      }

      return {
        opacity: 1,
      };
    },
  }, config);
  return <Line {...mergeLineConfig} data={[...dataSource, ...KPIData]} />;
});