todo: sales KPI Charts

src/components/LineWithKPI.jsx

@@ -34,7 +34,28 @@ export default observer((props) => {
     }
     return r;
   }, []);
-  const dataColors = ['#598cf3', '#69deae', '#FAAD14'];
+  const dataColors = [
+    "#5B8FF9",
+    "#CDDDFD",
+    "#5AD8A6",
+    "#CDF3E4",
+    "#5D7092",
+    "#CED4DE",
+    "#F6BD16",
+    "#FCEBB9",
+    "#6F5EF9",
+    "#D3CEFD",
+    "#6DC8EC",
+    "#D3EEF9",
+    "#945FB9",
+    "#DECFEA",
+    "#FF9845",
+    "#FFE0C7",
+    "#1E9493",
+    "#BBDEDE",
+    "#FF99C3",
+    "#FFE0ED"
+  ];
   const colorSets = Object.keys(seriesData).sort().reduce((obj, k, i) => ({...obj, [k]: dataColors[i]}), {});
   const mergeLineConfig = merge({
     // color: ['#598cf3', '#69deae', '#F4664A', '#FAAD14'],

src/components/MixTBWithKPI.jsx

@@ -47,8 +47,11 @@ export default observer((props) => {
       yField,
       seriesField,
       point: {
-        size: 4,
+        // size: 4,
         shape: 'cicle',
+        style: (item) => {
+          return { r: item[config.seriesField].endsWith('目标') ? 0 : 4 };
+        },
       },
       xAxis: false,
       yAxis: false,
@@ -68,6 +71,8 @@ export default observer((props) => {
           return {
             lineDash: [4, 4],
             opacity: 0.5,
+            point: false,
+            r: 0.5,
           };
         }
 

src/views/Home.jsx

@@ -8,7 +8,6 @@ import StatisticCard from '../components/StatisticCard';
 import StatisticCard2 from '../components/StatisticCard2';
 import Bullet from '../components/BulletWithSort';
 import Waterfall from '../components/Waterfall';
-import LineWithKPI from '../components/LineWithKPI';
 import MixTBWithKPI from './../components/MixTBWithKPI';
 import Donut from './../components/Donut';
 import DataFieldRadio from '../components/DataFieldRadio';

src/views/Sale_KPI.jsx

@@ -9,8 +9,32 @@ import * as config from '../config';
 import { utils, writeFileXLSX } from 'xlsx';
 import SearchForm from './../components/search/SearchForm';
 import { dataFieldAlias } from '../libs/ht';
+import LineWithKPI from '../components/LineWithKPI';
+import { Line, DualAxes } from '@ant-design/plots';
 
 const { Text } = Typography;
+const dataColors = [
+  "#5B8FF9",
+  "#5AD8A6",
+  "#5D7092",
+  "#F6BD16",
+  "#6F5EF9",
+  "#6DC8EC",
+  "#945FB9",
+  "#FF9845",
+  "#1E9493",
+  "#FF99C3",
+  "#FF6B3B",
+  "#626681",
+  "#FFC100",
+  "#9FB40F",
+  "#76523B",
+  "#DAD5B5",
+  "#0E8E89",
+  "#E19348",
+  "#F383A2",
+  "#247FEA"
+];
 
 const Sale_KPI = () => {
   const { sale_store, date_picker_store: searchFormStore } = useContext(stores_Context);
@@ -18,6 +42,9 @@ const Sale_KPI = () => {
   const { groupType, loading, operator } = sale_store.salesTrade;
 
   const dataSource = [].concat(sale_store.salesTrade[groupType], operator);
+  const operatorMonthData = operator.reduce((r, ele)=> [...r, ...Object.values(ele.mData)], []).sort(comm.sortBy('groupDateVal'));
+  const operatorYearDataMapped = operator.reduce((r, ele) => ({...r, [ele.groupsLabel]: ele.yData}), {});
+  const operatorMonthKPIData = operatorMonthData.map(ele => ({...ele, SumML: ele.MLKPIvalue, groupsLabel: `${ele.groupsLabel} 目标`}));
 
   const pageRefresh = (queryData) => {
     const overviewFlag = queryData.DepartmentList.toLowerCase() === 'all' || queryData.DepartmentList.toLowerCase().includes(',');
@@ -98,6 +125,129 @@ const Sale_KPI = () => {
     },
     ...monthCol,
   ];
+  const colorSets = Object.keys(operatorYearDataMapped).reduce((obj, k, i) => ({...obj, [k]: dataColors[i]}), {});
+  const lineConfig = {
+    appendPadding: 10,
+    padding: 'auto',
+    height: 500,
+    xField: 'groupDateVal',
+    yField: 'SumML',
+    seriesField: 'groupsLabel',
+    xAxis: {
+      type: 'cat',
+      range: [0,1],
+    },
+    smooth: true,
+    point: false,
+    legend: {
+      position: 'top',
+      // flipPage: true,
+      maxRow: 3,
+      // offsetX: 8,
+      offsetY: 10,
+      // title: {
+      //   text: '总合计 ' + dataFieldAlias.SumML.formatter(sale_store.salesTrade[groupType]?.yData?.SumML || 0),
+      // },
+      // itemMarginBottom: 12, // 垂直间距
+      itemValue: {
+        formatter: (text, item) => {
+          console.log(text, item, ';;;;;;;;;;;;;;');
+          return dataFieldAlias.SumML.formatter(operatorYearDataMapped?.[item.value]?.SumML || 0);
+          // const items = operatorMonthData.filter((d) => d.groupsLabel === item.value);
+          // return items.length ? items.reduce((a, b) => a + b.SumML, 0) : ''; // 计算总数
+        },
+      },
+      custom: true,
+      items: Object.keys(operatorYearDataMapped).map((ele) => ({ id: ele, name: ele, value: ele, marker: { symbol: 'circle', style: { fill: colorSets[ele], color: colorSets[ele] } } })),
+    },
+    // tooltip: {}, // todo: custom
+    meta: {
+      ...comm.cloneDeep(dataFieldAlias),
+    },
+    color: (item) => {
+      const thisSeries = item.groupsLabel;
+      return colorSets[thisSeries];
+    //   return thisSeries.includes('目标') ? '#F4664A' : colorSets[thisSeries];
+    },
+    lineStyle: (data) => {
+      // console.log(data);
+      if (data.groupsLabel.includes('目标')) {
+        return {
+          lineWidth: 2,
+          lineDash: [4, 4],
+          opacity: 0.5,
+        };
+      }
+
+      return {
+        opacity: 1,
+      };
+    },
+    interactions: [{ type: 'legend-highlight' }, {type: 'legend-filter'}],
+  };
+  const dualConfig = {
+    appendPadding: 10,
+    padding: 'auto',
+    data: [operatorMonthData, operatorMonthData],
+    xField: 'groupDateVal',
+    yField: ['SumML', 'MLKPIvalue'],
+    meta: comm.merge(comm.cloneDeep(dataFieldAlias), {
+      SumML: { sync: 'MLKPIvalue' },
+      MLKPIvalue: { sync: true },
+    }),
+    yAxis: {
+      MLKPIvalue: false,
+    },
+    legend: {
+      position: 'top',
+      // flipPage: true,
+      maxRow: 4,
+      // offsetX: 8,
+      offsetY: 10,
+      // title: {
+      //   text: '总合计 ' + dataFieldAlias.SumML.formatter(sale_store.salesTrade[groupType]?.yData?.SumML || 0),
+      // },
+      // itemMarginBottom: 12, // 垂直间距
+      // itemValue: {
+      //   formatter: (text, item) => {
+      //     return dataFieldAlias.SumML.formatter(operatorYearDataMapped?.[item.value]?.SumML || 0);
+      //     const items = operatorMonthData.filter((d) => d.groupsLabel === item.value);
+      //     return items.length ? items.reduce((a, b) => a + b.SumML, 0) : ''; // 计算总数
+      //   },
+      // },
+    },
+    geometryOptions: [
+      {
+        geometry: 'line',
+        seriesField: 'groupsLabel',
+        smooth: true,
+        tooltip: {
+          customItems: (originalItems) => {
+            // process originalItems,
+            // console.log(originalItems);
+            const _items = originalItems.map((ele) => ({
+              ...ele,
+              value: dataFieldAlias[ele.name]?.formatter(Number(ele.value)),
+              name: dataFieldAlias[ele.name]?.alias || ele.name,
+            }));
+            return _items;
+          },
+        },
+      },
+      {
+        geometry: 'line',
+        seriesField: 'groupsLabel',
+        lineStyle: {
+          lineWidth: 1,
+          lineDash: [5, 5],
+        },
+        // point: {},
+        tooltip: false,
+      },
+    ],
+  };
+
+  // console.log(operatorYearData, 'lllll', dataSource[0]);
   return (
     <div>
       <Row gutter={16} style={{ margin: '-16px -8px' }}>
@@ -120,10 +270,17 @@ const Sale_KPI = () => {
           />
         </Col>
       </Row>
+      <Row>
+        <Col className="gutter-row" md={24}>
+          {/* <LineWithKPI dataSource={operatorMonthData} {...lineConfig} /> */}
+          <Line {...lineConfig} data={[...operatorMonthData, ...operatorMonthKPIData]} />
+          <DualAxes {...dualConfig} />
+        </Col>
+      </Row>
 
       <Row>
         <Col className="gutter-row" md={24}>
-          <Table
+          <Table sticky
             key={`salesTradeTable`}
             loading={loading}
             columns={columns}