首页 每月数据增加显示KPI

src/components/LineWithKPI.jsx

@@ -1,6 +1,6 @@
 import { observer } from 'mobx-react';
-import { DualAxes } from '@ant-design/plots';
-import { merge, pick, cloneDeep } from '../utils/commons';
+import { Line } from '@ant-design/plots';
+import { merge, isEmpty } from '../utils/commons';
 import { dataFieldAlias } from '../libs/ht';
 
 const uniqueByKey = (array, key, pickLast) => {
@@ -26,46 +26,28 @@ const uniqueByKey = (array, key, pickLast) => {
 export default observer((props) => {
   const { config, dataSource, ...extProps } = props;
   const kpiKey = dataFieldAlias[config.yField]?.nestkey?.v;
-  const _data = uniqueByKey(dataSource, config.xField, true); // debug:
-  const mergeConfig = merge(
-    //   color: ['#1979C9', '#F4664A', '#FAAD14'],
-
-    // padding: 'auto',
-    // xField: 'groupDateVal',
-    // yField: 'SumML',
-    // seriesField: 'groupsLabel',
-    {
-      ...pick(config, ['padding', 'xField', 'seriesField']),
-      yField: [config.yField, kpiKey],
-      legend: false,
-      xAxis: {
-        type: 'cat',
-      },
-      meta: { ...cloneDeep(dataFieldAlias) },
-      geometryOptions: [
-        {
-          geometry: 'line',
-          smooth: true,
-          point: {
-            size: 4,
-            shape: 'cicle',
-          },
-        },
-        {
-          geometry: 'line',
-          smooth: true,
-          point: {
-            size: 4,
-            shape: 'cicle',
-          },
-          lineStyle: {
-            lineWidth: 1,
-            lineDash: [5, 5],
-          },
-          color: '#F4664A',
-        },
-      ],
+  const _data = dataSource.reduce((r, v) => {
+    r.push(v);
+    if ( ! isEmpty(v[kpiKey])) { // 有设目标才多显示一条虚线 颜色: #F4664A
+      r.push({...v, [config.yField]: v[kpiKey], [config.seriesField]: dataFieldAlias[kpiKey].label});
     }
-  );
-  return <DualAxes {...mergeConfig} data={[_data, _data]} />;
+    return r;
+  }, []);
+  const mergeLineConfig = merge({
+    color: ['#598cf3', '#F4664A', '#FAAD14'],
+    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={_data} />;
 });

src/components/Waterfall.jsx

@@ -5,7 +5,7 @@ import { merge } from '../utils/commons';
 
 export default observer((props) => {
   const { dataSource, line, title, ...extProps } = props;
-  const yMax = (Math.max(line?.value || 0, ...dataSource.map((ele) => ele[extProps.yField])))*1;
+  const yMax = (Math.max(line?.value || 0, (dataSource.reduce((r, ele) => r+ele[extProps.yField], 0))))*1;
   const annotationsLine = line
     ? [
         {

src/stores/Trade.js

@@ -15,7 +15,7 @@ class Trade {
   fetchSummaryData(queryData) {
     this.summaryData.loading = true;
     queryData.groupType = 'overview';
-    // queryData.groupDateType = 'year';
+    queryData.groupDateType = 'year';
     this.fetchTradeData(queryData).then((json) => {
       if (json.errcode === 0) {
         runInAction(() => {

src/views/Home.jsx

@@ -7,7 +7,7 @@ import { useNavigate } from 'react-router-dom';
 import StatisticCard from '../components/StatisticCard';
 import Bullet from '../components/BulletWithSort';
 import Waterfall from '../components/Waterfall';
-import LineMix from '../components/LineWithKPI';
+import LineWithKPI from '../components/LineWithKPI';
 import DataFieldRadio from '../components/DataFieldRadio';
 import { datePartOptions } from './../components/DateGroupRadio/date';
 import SearchForm from './../components/search/SearchForm';
@@ -206,8 +206,8 @@ export default observer(() => {
           <Radio.Group options={datePartOptions} optionType="button" onChange={handleChangeDateType} value={dateField} />
         </Space>
         <Spin spinning={timeData.loading}>
-          <Line {...lineConfig} data={timeData.dataSource} />
-          {/* <LineMix dataSource={timeData.dataSource} config={lineConfig} /> */}
+          {/* <Line {...lineConfig} data={timeData.dataSource} /> */}
+          <LineWithKPI dataSource={timeData.dataSource} config={lineConfig} />
         </Spin>
       </section>
       <section>