feat: 参考数据计算实现

wangxingkang · wangxingkang · commit a006641759e6 · 2025-06-05T15:24:30.000+08:00
diff --git a/docs/custom/demo/TrendArea/basic.tsx b/docs/custom/demo/TrendArea/basic.tsx
@@ -33,17 +33,11 @@ function Example() {
       ]}
       tooltip={{
         dimension: {
-          title: {
-            value: (datum) => {
-              return `${datum?.date}:00 ~ ${datum?.date + 1}:00`;
-            },
-          },
           content: {
             key: '出行次数',
             value: (datum) => {
               return datum?.value;
             },
-            valueFormatter: '{value:,.0f}',
           },
         },
       }}
diff --git a/docs/custom/demo/TrendArea/field.tsx b/docs/custom/demo/TrendArea/field.tsx
@@ -0,0 +1,54 @@
+import { TrendArea } from '@sensoro-design/chart';
+
+function Example() {
+  return (
+    <TrendArea
+      height={400}
+      title={{
+        text: '自定义 Field',
+      }}
+      mode="select"
+      selectTime={[3, 19]}
+      xField="hour"
+      yField="val"
+      data={[
+        { hour: 0, val: 5855 },
+        { hour: 1, val: 4114 },
+        { hour: 2, val: 3687 },
+        { hour: 3, val: 3170 },
+        { hour: 4, val: 2188 },
+        { hour: 5, val: 2376 },
+        { hour: 6, val: 9151 },
+        { hour: 7, val: 44498 },
+        { hour: 8, val: 54363 },
+        { hour: 9, val: 56162 },
+        { hour: 10, val: 79124 },
+        { hour: 11, val: 77276 },
+        { hour: 12, val: 96278 },
+        { hour: 13, val: 99344 },
+        { hour: 14, val: 80707 },
+        { hour: 15, val: 82922 },
+        { hour: 16, val: 83838 },
+        { hour: 17, val: 70549 },
+        { hour: 18, val: 65520 },
+        { hour: 19, val: 65382 },
+        { hour: 20, val: 44962 },
+        { hour: 21, val: 29611 },
+        { hour: 22, val: 12338 },
+        { hour: 23, val: 6522 },
+      ]}
+      tooltip={{
+        dimension: {
+          content: {
+            key: '出行次数',
+            value: (datum) => {
+              return datum?.value;
+            },
+          },
+        },
+      }}
+    />
+  );
+};
+
+export default Example;
diff --git a/docs/custom/demo/TrendArea/reference.tsx b/docs/custom/demo/TrendArea/reference.tsx
@@ -5,37 +5,7 @@ function Example() {
     <TrendArea
       height={400}
       selectTime={[3, 19]}
-      hideReference={false}
-      referenceSerie={{
-        data: {
-          values: [
-            { date: 0, value: 9855 },
-            { date: 1, value: 7114 },
-            { date: 2, value: 5687 },
-            { date: 3, value: 5170 },
-            { date: 4, value: 4188 },
-            { date: 5, value: 4376 },
-            { date: 6, value: 17151 },
-            { date: 7, value: 84498 },
-            { date: 8, value: 104363 },
-            { date: 9, value: 106162 },
-            { date: 10, value: 139124 },
-            { date: 11, value: 147276 },
-            { date: 12, value: 176278 },
-            { date: 13, value: 179344 },
-            { date: 14, value: 150707 },
-            { date: 15, value: 152922 },
-            { date: 16, value: 163838 },
-            { date: 17, value: 140549 },
-            { date: 18, value: 115520 },
-            { date: 19, value: 125382 },
-            { date: 20, value: 84962 },
-            { date: 21, value: 49611 },
-            { date: 22, value: 22338 },
-            { date: 23, value: 12522 },
-          ],
-        },
-      }}
+      showReference
       data={[
         { date: 0, value: 5855 },
         { date: 1, value: 4114 },
@@ -64,17 +34,11 @@ function Example() {
       ]}
       tooltip={{
         dimension: {
-          title: {
-            value: (datum) => {
-              return `${datum?.date}:00 ~ ${datum?.date + 1}:00`;
-            },
-          },
           content: {
             key: '出行次数',
             value: (datum) => {
               return datum?.value;
             },
-            valueFormatter: '{value:,.0f}',
           },
         },
       }}
diff --git a/docs/custom/demo/TrendArea/select.tsx b/docs/custom/demo/TrendArea/select.tsx
@@ -9,37 +9,7 @@ function Example() {
       }}
       mode="select"
       selectTime={[3, 19]}
-      hideReference={false}
-      referenceSerie={{
-        data: {
-          values: [
-            { date: 0, value: 9855 },
-            { date: 1, value: 7114 },
-            { date: 2, value: 5687 },
-            { date: 3, value: 5170 },
-            { date: 4, value: 4188 },
-            { date: 5, value: 4376 },
-            { date: 6, value: 17151 },
-            { date: 7, value: 84498 },
-            { date: 8, value: 104363 },
-            { date: 9, value: 106162 },
-            { date: 10, value: 139124 },
-            { date: 11, value: 147276 },
-            { date: 12, value: 176278 },
-            { date: 13, value: 179344 },
-            { date: 14, value: 150707 },
-            { date: 15, value: 152922 },
-            { date: 16, value: 163838 },
-            { date: 17, value: 140549 },
-            { date: 18, value: 115520 },
-            { date: 19, value: 125382 },
-            { date: 20, value: 84962 },
-            { date: 21, value: 49611 },
-            { date: 22, value: 22338 },
-            { date: 23, value: 12522 },
-          ],
-        },
-      }}
+      showReference
       data={[
         { date: 0, value: 5855 },
         { date: 1, value: 4114 },
@@ -68,17 +38,11 @@ function Example() {
       ]}
       tooltip={{
         dimension: {
-          title: {
-            value: (datum) => {
-              return `${datum?.date}:00 ~ ${datum?.date + 1}:00`;
-            },
-          },
           content: {
             key: '出行次数',
             value: (datum) => {
               return datum?.value;
             },
-            valueFormatter: '{value:,.0f}',
           },
         },
       }}
diff --git a/packages/chart/src/TrendArea/config.ts b/packages/chart/src/TrendArea/config.ts
@@ -1,8 +1,6 @@
 import type { CommonChartProps } from '@visactor/react-vchart';
 import type { IAreaSeriesSpec, ICartesianAxisSpec, IGradient } from './types';
 import { colorBlue2, colorBlue06, colorGreen2, colorGrey04 } from '@sensoro-design/chart-theme';
-import { take } from 'es-toolkit/array';
-import { hyphenPointPath } from '../config';
 
 export const defaultPoint: NonNullable<IAreaSeriesSpec['point']> = {
   style: {
@@ -17,19 +15,6 @@ export const defaultPoint: NonNullable<IAreaSeriesSpec['point']> = {
   },
 };
 
-export const defaultTooltip: CommonChartProps['tooltip'] = {
-  mark: {
-    visible: false,
-  },
-  dimension: {
-    shapeType: hyphenPointPath,
-    shapeFill: colorBlue2,
-    updateContent: (prev) => {
-      return take(prev!, 1);
-    },
-  },
-};
-
 export const defaultXAxes: ICartesianAxisSpec = {
   orient: 'bottom',
   type: 'band',
@@ -124,3 +109,30 @@ export const defaultSelectModeCrosshair: CommonChartProps['crosshair'] = [
     followTooltip: true,
   },
 ];
+
+export const defaultReferenceData = [
+  1,
+  0,
+  0,
+  0,
+  0,
+  0,
+  1,
+  7,
+  10,
+  10,
+  12,
+  13,
+  16,
+  16,
+  14,
+  16,
+  17,
+  16,
+  14,
+  10,
+  6,
+  4,
+  3,
+  1,
+];
diff --git a/packages/chart/src/TrendArea/index.tsx b/packages/chart/src/TrendArea/index.tsx
@@ -12,11 +12,17 @@ import {
   defaultCrosshair,
   defaultPoint,
   defaultSelectModeCrosshair,
-  defaultTooltip,
   defaultXAxes,
   defaultYAxes,
 } from './config';
-import { getMarkLineItem, getMarkLineLabel, getMarkPoint, getReferenceSerie } from './utils';
+import {
+  getDefaultTooltip,
+  getMarkLineItem,
+  getMarkLineLabel,
+  getMarkPoint,
+  getReferenceData,
+  getReferenceSerie,
+} from './utils';
 
 export type {
   TrendAreaProps,
@@ -31,7 +37,7 @@ export function TrendArea(props: TrendAreaProps) {
     yField = 'value',
     xAxes,
     yAxes,
-    hideReference = true,
+    showReference = false,
     referenceSerie,
     selectTime,
     daytime = defaultDaytime,
@@ -50,14 +56,45 @@ export function TrendArea(props: TrendAreaProps) {
   const referenceColor = color.find(item => item.isReference)?.color || colorGrey04;
   const xAxesData = merge(defaultXAxes, xAxes);
   const yAxesData = merge(defaultYAxes, yAxes);
-  const referenceSeries = merge(
-    getReferenceSerie({
+  const tooltipProps = merge(
+    getDefaultTooltip({
       xField,
       yField,
     }),
-    referenceSerie,
+    tooltip,
+  );
+
+  const referenceSeries = useMemo<IMarkAreaSpec[]>(
+    () => {
+      if (!data || !data.length || !showReference) {
+        return [];
+      }
+
+      const referenceData = getReferenceData({
+        data,
+        xField,
+        yField,
+      });
+
+      if (referenceData.length === 0) {
+        return [];
+      }
+
+      const defaultReferenceSerie = getReferenceSerie({
+        xField,
+        yField,
+      });
+
+      return [
+        merge(defaultReferenceSerie, referenceSerie, {
+          data: {
+            values: referenceData,
+          },
+        }),
+      ];
+    },
+    [xField, yField, referenceSerie, data, showReference],
   );
-  const tooltipProps = merge({}, defaultTooltip, tooltip);
 
   const { dataList, series, colors } = useMemo(
     () => {
@@ -177,11 +214,11 @@ export function TrendArea(props: TrendAreaProps) {
     if (isNotNil(selectVal)) {
       markLine.push(
         getMarkLineItem({
-          x: selectVal.date,
+          x: selectVal[xField],
           label: firstSelect ? getMarkLineLabel() : undefined,
         }),
         getMarkLineItem({
-          x: selectVal.date,
+          x: selectVal[xField],
           line: {
             style: {
               stroke: colorBlue06,
@@ -192,13 +229,13 @@ export function TrendArea(props: TrendAreaProps) {
         }),
       );
 
-      const isNotNight = selectVal.date >= daytime[0] && selectVal.date <= daytime[1];
+      const isNotNight = selectVal[xField] >= daytime[0] && selectVal[xField] <= daytime[1];
       const notNightColor = color.find(item => item.isNight === false && item.disabled === false)?.color || colorGreen2;
 
       markPoint.push(
         getMarkPoint({
-          x: selectVal.date,
-          y: selectVal.value,
+          x: selectVal[xField],
+          y: selectVal[yField],
           itemLine: {
             startSymbol: {
               visible: true,
@@ -236,7 +273,7 @@ export function TrendArea(props: TrendAreaProps) {
         const datum = (data || []).find(item => item[xField] === value);
 
         if (datum) {
-          if (getSelectVal()?.value === value) {
+          if (getSelectVal()?.[yField] === value) {
             setSelectVal(null);
           }
           else {
@@ -255,14 +292,15 @@ export function TrendArea(props: TrendAreaProps) {
 
   return (
     <CommonChart
-      color={hideReference ? colors : [referenceColor, ...colors!]}
+      color={!showReference ? colors : [referenceColor, ...colors!]}
       data={dataList}
-      series={hideReference ? series : [referenceSeries, ...series]}
+      series={[...referenceSeries, ...series] as IAreaSeriesSpec[]}
       axes={[yAxesData, xAxesData]}
       crosshair={mode === 'default' ? defaultCrosshair : defaultSelectModeCrosshair}
       tooltip={tooltipProps}
       markLine={markLine}
       markPoint={markPoint}
+      skipFunctionDiff
       onDimensionClick={handleDimensionClick}
       markArea={markAreaProps}
       {...rest}
diff --git a/packages/chart/src/TrendArea/types.ts b/packages/chart/src/TrendArea/types.ts
@@ -20,10 +20,10 @@ export interface TrendAreaProps extends Omit<CommonChartProps, 'data' | 'xField'
   xAxes?: Partial<ICartesianAxisSpec>;
   /** 坐标轴 Y 轴配置 */
   yAxes?: Partial<ICartesianAxisSpec>;
-  /** 隐藏参考面积图 */
-  hideReference?: boolean;
+  /** 显示参考面积图 */
+  showReference?: boolean;
   /** 参考面积图配置 */
-  referenceSerie?: Partial<IAreaSeriesSpec>;
+  referenceSerie?: Partial<Omit<IAreaSeriesSpec, 'data'>>;
   /** 白天判断 */
   daytime?: [number, number];
   /** 选择的时间 */
diff --git a/packages/chart/src/TrendArea/utils.ts b/packages/chart/src/TrendArea/utils.ts
