Merge pull request #3613 from VisActor/perf/bundle-size-opt

Perf/bundle size opt
VisActor · Dec 26, 2024 · 760e794 · 760e794
2 parents 3942d90 + 76cb8f2
commit 760e794
Show file tree

Hide file tree

Showing 15 changed files with 148 additions and 263 deletions.
diff --git a/packages/vchart/src/component/marker/base-marker.ts b/packages/vchart/src/component/marker/base-marker.ts
@@ -13,7 +13,8 @@ import type {
   IDataPosCallback,
   IMarkerAttributeContext,
   IMarkerSpec,
-  IMarkerSupportSeries
+  IMarkerSupportSeries,
+  IMarkProcessOptions
 } from './interface';
 import type { IGraphic, IGroup } from '@visactor/vrender-core';
 import { calcLayoutNumber } from '../../util/space';
@@ -22,6 +23,9 @@ import { getFirstSeries } from '../../util';
 import { arrayParser } from '../../data/parser/array';
 import { getSpecInfo } from '../util';
 import type { IOptionWithCoordinates } from '../../data/transforms/interface';
+import { registerDataSetInstanceTransform } from '../../data/register';
+import { markerAggregation } from '../../data/transforms/aggregation';
+import { markerFilter } from '../../data/transforms/marker-filter';
 
 export abstract class BaseMarker<T extends IMarkerSpec> extends BaseComponent<T> {
   layoutType: ILayoutType | 'none' = 'none';
@@ -56,6 +60,7 @@ export abstract class BaseMarker<T extends IMarkerSpec> extends BaseComponent<T>
   protected abstract _initDataView(): void;
   protected abstract _createMarkerComponent(): IGroup;
   protected abstract _markerLayout(): void;
+  protected abstract _computeOptions(): IMarkProcessOptions;
   // 该方法需要子组件复写
   static _getMarkerCoordinateType(markerSpec: any): string {
     return 'cartesian';
@@ -269,4 +274,30 @@ export abstract class BaseMarker<T extends IMarkerSpec> extends BaseComponent<T>
     }
     return result;
   }
+
+  _initCommonDataView() {
+    const { options } = this._computeOptions();
+
+    const seriesData = this._getRelativeDataView();
+    registerDataSetInstanceTransform(this._option.dataSet, 'markerAggregation', markerAggregation);
+    registerDataSetInstanceTransform(this._option.dataSet, 'markerFilter', markerFilter);
+    const data = new DataView(this._option.dataSet, { name: `${this.type}_${this.id}_data` });
+    data.parse([seriesData], {
+      type: 'dataview'
+    });
+    data.transform({
+      type: 'markerAggregation',
+      options
+    });
+
+    data.transform({
+      type: 'markerFilter',
+      options: this._getAllRelativeSeries()
+    });
+
+    data.target.on('change', () => {
+      this._markerLayout();
+    });
+    this._markerData = data;
+  }
 }
diff --git a/packages/vchart/src/component/marker/mark-area/base-mark-area.ts b/packages/vchart/src/component/marker/mark-area/base-mark-area.ts
@@ -1,24 +1,18 @@
-import { DataView } from '@visactor/vdataset';
 import type { IMarkArea, IMarkAreaSpec } from './interface';
-import { markerAggregation } from '../../../data/transforms/aggregation';
 import {
   computeClipRange,
   transformLabelAttributes,
   transformState,
   transformStyle,
   getMarkAreaProcessInfo
 } from '../utils';
-import { registerDataSetInstanceTransform } from '../../../data/register';
 import type { MarkArcAreaAttrs, MarkAreaAttrs } from '@visactor/vrender-components';
 // eslint-disable-next-line no-duplicate-imports
 import type { MarkArea as MarkAreaComponent, MarkArcArea as MarkArcAreaComponent } from '@visactor/vrender-components';
 import { transformToGraphic } from '../../../util/style';
 import { BaseMarker } from '../base-marker';
 import { LayoutZIndex } from '../../../constant/layout';
 import type { IGroup } from '@visactor/vrender-core';
-import { markerFilter } from '../../../data/transforms/marker-filter';
-import type { IMarkProcessOptions } from '../interface';
-
 export abstract class BaseMarkArea extends BaseMarker<IMarkAreaSpec> implements IMarkArea {
   static specKey = 'markArea';
   specKey = 'markArea';
@@ -30,7 +24,6 @@ export abstract class BaseMarkArea extends BaseMarker<IMarkAreaSpec> implements
     attr: MarkAreaAttrs | MarkArcAreaAttrs
   ): MarkAreaComponent | MarkArcAreaComponent;
   protected abstract _computePointsAttr(): any;
-  protected abstract _computeOptions(): IMarkProcessOptions;
 
   static _getMarkerCoordinateType(markerSpec: any): string {
     const { doAngleProcess, doRadiusProcess, doRadAngProcess } = getMarkAreaProcessInfo(markerSpec);
@@ -159,28 +152,6 @@ export abstract class BaseMarkArea extends BaseMarker<IMarkAreaSpec> implements
       return null;
     }
 
-    const { options } = this._computeOptions();
-
-    const seriesData = this._getRelativeDataView();
-    registerDataSetInstanceTransform(this._option.dataSet, 'markerAggregation', markerAggregation);
-    registerDataSetInstanceTransform(this._option.dataSet, 'markerFilter', markerFilter);
-    const data = new DataView(this._option.dataSet, { name: `${this.type}_${this.id}_data` });
-    data.parse([seriesData], {
-      type: 'dataview'
-    });
-    data.transform({
-      type: 'markerAggregation',
-      options
-    });
-
-    data.transform({
-      type: 'markerFilter',
-      options: this._getAllRelativeSeries()
-    });
-
-    data.target.on('change', () => {
-      this._markerLayout();
-    });
-    this._markerData = data;
+    this._initCommonDataView();
   }
 }
diff --git a/packages/vchart/src/component/marker/mark-line/base-mark-line.ts b/packages/vchart/src/component/marker/mark-line/base-mark-line.ts
@@ -15,7 +15,7 @@ import type { MarkLine as MarkLineComponent, MarkArcLine as MarkArcLineComponent
 import { transformToGraphic } from '../../../util/style';
 import { BaseMarker } from '../base-marker';
 import type { IGroup } from '@visactor/vrender-core';
-import type { IMarkProcessOptions, IMarkerSymbol } from '../interface';
+import type { IMarkerSymbol } from '../interface';
 import { markerRegression } from '../../../data/transforms/regression';
 import { LayoutZIndex } from '../../../constant/layout';
 import { markerFilter } from '../../../data/transforms/marker-filter';
@@ -30,7 +30,6 @@ export abstract class BaseMarkLine extends BaseMarker<IMarkLineSpec> implements
     attr: MarkLineAttrs | MarkArcLineAttrs
   ): MarkLineComponent | MarkArcLineComponent;
   protected abstract _computePointsAttr(): any;
-  protected abstract _computeOptions(): IMarkProcessOptions;
 
   static _getMarkerCoordinateType(markerSpec: any): string {
     const { doAngleProcess, doRadiusProcess, doAngRadRad1Process, doRadAngAng1Process, doRadAngProcess } =

diff --git a/packages/vchart/src/component/marker/mark-point/base-mark-point.ts b/packages/vchart/src/component/marker/mark-point/base-mark-point.ts
@@ -1,6 +1,4 @@
-import { DataView } from '@visactor/vdataset';
 import type { IMarkPoint, IMarkPointSpec } from './interface';
-import { markerAggregation } from '../../../data/transforms/aggregation';
 import {
   computeClipRange,
   computeOffsetFromRegion,
@@ -10,7 +8,6 @@ import {
   transformState,
   transformStyle
 } from '../utils';
-import { registerDataSetInstanceTransform } from '../../../data/register';
 import type { MarkPointAttrs } from '@visactor/vrender-components';
 // eslint-disable-next-line no-duplicate-imports
 import { MarkPoint as MarkPointComponent } from '@visactor/vrender-components';
@@ -19,8 +16,6 @@ import { transformToGraphic } from '../../../util/style';
 import { BaseMarker } from '../base-marker';
 import { LayoutZIndex } from '../../../constant/layout';
 import type { IGroup } from '@visactor/vrender-core';
-import { markerFilter } from '../../../data/transforms/marker-filter';
-import type { IMarkProcessOptions } from '../interface';
 
 export abstract class BaseMarkPoint extends BaseMarker<IMarkPointSpec> implements IMarkPoint {
   static specKey = 'markPoint';
@@ -30,7 +25,6 @@ export abstract class BaseMarkPoint extends BaseMarker<IMarkPointSpec> implement
   protected declare _markerComponent: MarkPointComponent;
 
   protected abstract _computePointsAttr(): any;
-  protected abstract _computeOptions(): IMarkProcessOptions;
 
   static _getMarkerCoordinateType(markerSpec: any): string {
     const { doPolarProcess, doGeoProcess } = getMarkPointProcessInfo(markerSpec);
@@ -202,27 +196,6 @@ export abstract class BaseMarkPoint extends BaseMarker<IMarkPointSpec> implement
       return;
     }
 
-    registerDataSetInstanceTransform(this._option.dataSet, 'markerAggregation', markerAggregation);
-    registerDataSetInstanceTransform(this._option.dataSet, 'markerFilter', markerFilter);
-
-    const { options } = this._computeOptions();
-
-    const data = new DataView(this._option.dataSet, { name: `${this.type}_${this.id}_data` });
-    data.parse([this._getRelativeDataView()], {
-      type: 'dataview'
-    });
-    data.transform({
-      type: 'markerAggregation',
-      options
-    });
-
-    data.transform({
-      type: 'markerFilter',
-      options: this._getAllRelativeSeries()
-    });
-    data.target.on('change', () => {
-      this._markerLayout();
-    });
-    this._markerData = data;
+    this._initCommonDataView();
   }
 }
diff --git a/packages/vchart/src/series/circle-packing/circle-packing.ts b/packages/vchart/src/series/circle-packing/circle-packing.ts
@@ -19,7 +19,7 @@ import { MarkTypeEnum } from '../../mark/interface/type';
 import { STATE_VALUE_ENUM } from '../../compile/mark/interface';
 import { DEFAULT_DATA_KEY } from '../../constant/data';
 import { AttributeLevel } from '../../constant/attribute';
-import { DEFAULT_HIERARCHY_DEPTH, DEFAULT_HIERARCHY_ROOT } from '../../constant/hierarchy';
+import { DEFAULT_HIERARCHY_ROOT } from '../../constant/hierarchy';
 import type { CirclePackingNodeElement } from '@visactor/vgrammar-hierarchy';
 import { flatten } from '../../data/transforms/flatten';
 import { CirclePackingTooltipHelper } from './tooltip-helper';
@@ -34,6 +34,7 @@ import { Drillable } from '../../interaction/drill/drillable';
 import { registerArcMark } from '../../mark/arc';
 import { registerTextMark } from '../../mark/text';
 import { circlePackingSeriesMark } from './constant';
+import { appendHierarchyFields } from '../util/hierarchy';
 
 export class CirclePackingSeries<
   T extends ICirclePackingSeriesSpec = ICirclePackingSeriesSpec
@@ -251,25 +252,7 @@ export class CirclePackingSeries<
   }
 
   getStatisticFields() {
-    const fields = super.getStatisticFields();
-    return fields.concat([
-      {
-        key: this._categoryField,
-        operations: ['values']
-      },
-      {
-        key: this._valueField,
-        operations: ['max', 'min']
-      },
-      {
-        key: DEFAULT_HIERARCHY_DEPTH,
-        operations: ['max', 'min', 'values']
-      },
-      {
-        key: DEFAULT_HIERARCHY_ROOT,
-        operations: ['values']
-      }
-    ]);
+    return appendHierarchyFields(super.getStatisticFields(), this._categoryField, this._valueField);
   }
 
   protected initTooltip() {

diff --git a/packages/vchart/src/series/polar/polar.ts b/packages/vchart/src/series/polar/polar.ts
@@ -11,6 +11,7 @@ import type { IPolarSeriesSpec } from './interface';
 import type { Datum, StringOrNumber } from '../../typings';
 import { sortDataInAxisHelper } from '../util/utils';
 import { ChartEvent } from '../../constant/event';
+import type { StatisticOperations } from '../../data/transforms/interface';
 
 export abstract class PolarSeries<T extends IPolarSeriesSpec = IPolarSeriesSpec>
   extends BaseSeries<T>
@@ -165,7 +166,7 @@ export abstract class PolarSeries<T extends IPolarSeriesSpec = IPolarSeriesSpec>
   }
 
   getStatisticFields() {
-    const fields: { key: string; operations: Array<'max' | 'min' | 'values'> }[] = [];
+    const fields: { key: string; operations: StatisticOperations }[] = [];
     if (this.radiusAxisHelper?.getScale) {
       this._radiusField.forEach(f => {
         const result: { key: string; operations: Array<'max' | 'min' | 'values'> } = { key: f, operations: [] };

diff --git a/packages/vchart/src/series/radar/radar.ts b/packages/vchart/src/series/radar/radar.ts
@@ -19,7 +19,6 @@ import { registerLineMark } from '../../mark/line';
 import { registerSymbolMark } from '../../mark/symbol';
 import { radarSeriesMark } from './constant';
 import { Factory } from '../../core/factory';
-import { registerMarkOverlapTransform } from '@visactor/vgrammar-core';
 import { LineLikeSeriesSpecTransformer } from '../mixin/line-mixin-transformer';
 import { registerPolarBandAxis, registerPolarLinearAxis } from '../../component/axis/polar';
 
@@ -246,7 +245,6 @@ mixin(RadarSeries, LineLikeSeriesMixin);
 
 export const registerRadarSeries = () => {
   Factory.registerSeries(RadarSeries.type, RadarSeries);
-  registerMarkOverlapTransform();
   registerAreaMark();
   registerLineMark();
   registerSymbolMark();

diff --git a/packages/vchart/src/series/range-column/range-column.ts b/packages/vchart/src/series/range-column/range-column.ts
@@ -79,65 +79,35 @@ export class RangeColumnSeries<T extends IRangeColumnSeriesSpec = IRangeColumnSe
 
   initMarkStyle(): void {
     super.initMarkStyle();
+    this._initLabelMarkPos(this._minLabelMark, this._spec.label?.minLabel, 0, 'end');
+    this._initLabelMarkPos(this._maxLabelMark, this._spec.label?.maxLabel, 1, 'start');
+  }
 
-    const minLabelMark = this._minLabelMark;
-    const minLabelSpec = this._spec.label?.minLabel;
-    if (minLabelMark) {
-      this.setMarkStyle(minLabelMark, {
-        fill: minLabelSpec?.style?.fill ?? this.getColorAttribute(),
-        text: (datum: Datum) => {
-          const min =
-            this._spec.direction === Direction.horizontal ? datum[this._spec.xField[0]] : datum[this._spec.yField[0]];
-          if (minLabelSpec?.formatMethod) {
-            return minLabelSpec.formatMethod(min, datum);
-          }
-          return min;
-        }
-      });
-      const position = minLabelSpec?.position ?? 'end';
-      const offset = minLabelSpec?.offset ?? (this._direction === 'vertical' ? -20 : -25);
-      setRectLabelPos(
-        this,
-        minLabelMark,
-        position,
-        offset,
-        (datum: Datum) => this._barMark.getAttribute('x', datum) as number,
-        (datum: Datum) => {
-          return this._direction === 'vertical'
-            ? (this._barMark.getAttribute('x', datum) as number) +
-                (this._barMark.getAttribute('width', datum) as number)
-            : (this._barMark.getAttribute('x1', datum) as number);
-        },
-        (datum: Datum) => this._barMark.getAttribute('y', datum) as number,
-        (datum: Datum) => {
-          return this._direction === 'vertical'
-            ? (this._barMark.getAttribute('y1', datum) as number)
-            : (this._barMark.getAttribute('y', datum) as number) +
-                (this._barMark.getAttribute('height', datum) as number);
-        },
-        () => this._direction
-      );
-    }
-
-    const maxLabelMark = this._maxLabelMark;
-    const maxLabelSpec = this._spec.label?.maxLabel;
-    if (maxLabelMark) {
-      this.setMarkStyle(maxLabelMark, {
-        fill: maxLabelSpec?.style?.fill ?? this.getColorAttribute(),
+  _initLabelMarkPos(
+    labelMark: ITextMark,
+    labelSpec: IRangeColumnSeriesSpec['label']['minLabel'],
+    fieldIndex: number,
+    defaultPosition: string
+  ): void {
+    if (labelMark) {
+      this.setMarkStyle(labelMark, {
+        fill: labelSpec?.style?.fill ?? this.getColorAttribute(),
         text: (datum: Datum) => {
-          const max =
-            this._spec.direction === Direction.horizontal ? datum[this._spec.xField[1]] : datum[this._spec.yField[1]];
-          if (maxLabelSpec?.formatMethod) {
-            return maxLabelSpec.formatMethod(max, datum);
+          const val =
+            this._spec.direction === Direction.horizontal
+              ? datum[this._spec.xField[fieldIndex]]
+              : datum[this._spec.yField[fieldIndex]];
+          if (labelSpec?.formatMethod) {
+            return labelSpec.formatMethod(val, datum);
           }
-          return max;
+          return val;
         }
       });
-      const position = maxLabelSpec?.position ?? 'start';
-      const offset = maxLabelSpec?.offset ?? (this._direction === 'vertical' ? -20 : -25);
+      const position = labelSpec?.position ?? defaultPosition;
+      const offset = labelSpec?.offset ?? (this._direction === 'vertical' ? -20 : -25);
       setRectLabelPos(
         this,
-        maxLabelMark,
+        labelMark,
         position,
         offset,
         (datum: Datum) => this._barMark.getAttribute('x', datum) as number,

diff --git a/packages/vchart/src/series/scatter/scatter.ts b/packages/vchart/src/series/scatter/scatter.ts
@@ -382,28 +382,8 @@ export class ScatterSeries<T extends IScatterSeriesSpec = IScatterSeriesSpec> ex
   }
 
   handlePan(e: any) {
-    this.getMarksWithoutRoot().forEach(mark => {
-      const vGrammarMark = mark.getProduct();
-
-      if (!vGrammarMark || !vGrammarMark.elements || !vGrammarMark.elements.length) {
-        return;
-      }
-      const elements = vGrammarMark.elements;
-
-      elements.forEach((el: IElement, i: number) => {
-        const graphicItem = el.getGraphicItem();
-        const datum = el.getDatum();
-        const newPosition = this.dataToPosition(datum);
-        if (newPosition && graphicItem) {
-          graphicItem.translateTo(newPosition.x, newPosition.y);
-        }
-      });
-    });
-    const vgrammarLabel = this._labelMark?.getComponent()?.getProduct();
-
-    if (vgrammarLabel) {
-      (vgrammarLabel as any).evaluate(null, null);
-    }
+    // TODO 现在处理好像一模一样
+    this.handleZoom(e);
   }
 
   getDefaultShapeType() {