perf: base-chart should not create spec transformer

packages/vchart/__tests__/unit/chart/bar.test.ts

@@ -117,7 +117,7 @@ describe('Bar chart test', () => {
         getSpecInfo: () => info
       } as any
     );
-    chart.created();
+    chart.created(transformer);
     chart.init();
 
     // spec

packages/vchart/__tests__/unit/chart/histogram.test.ts

@@ -75,7 +75,7 @@ describe('histogram chart test', () => {
         getSpecInfo: () => info
       } as any
     );
-    chart.created();
+    chart.created(transformer);
     chart.init();
 
     // spec

packages/vchart/__tests__/unit/chart/line.test.ts

@@ -60,7 +60,7 @@ describe('line chart test', () => {
         getSpecInfo: () => info
       } as any
     );
-    chart.created();
+    chart.created(transformer);
     chart.init();
 
     // spec
@@ -125,7 +125,7 @@ describe('line chart test', () => {
       getTheme: () => ThemeManager.getCurrentTheme(true),
       getSpecInfo: () => info
     } as any);
-    chart.created();
+    chart.created(transformer);
     chart.init();
 
     // spec

packages/vchart/__tests__/unit/chart/linearProgress.test.ts

@@ -64,7 +64,7 @@ describe('linearProgress chart test', () => {
         getSpecInfo: () => info
       } as any
     );
-    chart.created();
+    chart.created(transformer);
     chart.init();
 
     // spec

packages/vchart/__tests__/unit/chart/rangeColumn.test.ts

@@ -77,7 +77,7 @@ describe('rangeColumn chart test', () => {
         getSpecInfo: () => info
       } as any
     );
-    chart.created();
+    chart.created(transformer);
     chart.init();
 
     // spec

packages/vchart/__tests__/unit/chart/treemap.test.ts

@@ -80,7 +80,7 @@ describe('treemap chart test', () => {
         getSpecInfo: () => info
       } as any
     );
-    chart.created();
+    chart.created(transformer);
     chart.init();
 
     const series: TreemapSeries = chart.getAllSeries()[0] as TreemapSeries;

packages/vchart/__tests__/unit/chart/word-cloud.test.ts

@@ -84,7 +84,7 @@ describe('wordCloud chart test', () => {
       getTheme: () => ThemeManager.getCurrentTheme(true),
       getSpecInfo: () => info
     } as any);
-    chart.created();
+    chart.created(transformer);
     chart.init();
 
     // spec

packages/vchart/__tests__/unit/data/fields.test.ts

@@ -78,7 +78,7 @@ describe('data fields test', () => {
       getTheme: () => ThemeManager.getCurrentTheme(true),
       getSpecInfo: () => info
     } as any);
-    chart.created();
+    chart.created(transformer);
     chart.init();
 
     const lastData = chart.getAllSeries()[0].getRawData()?.latestData;
@@ -159,7 +159,7 @@ describe('data fields test', () => {
       getTheme: () => ThemeManager.getCurrentTheme(true),
       getSpecInfo: () => info
     } as any);
-    chart.created();
+    chart.created(transformer);
     chart.init();
 
     const lastData = chart.getAllSeries()[0].getRawData()?.latestData;

packages/vchart/__tests__/unit/morph/morph.test.ts

@@ -139,7 +139,7 @@ describe('Bar chart test', () => {
         getSpecInfo: () => info
       } as any
     );
-    scatterChart.created();
+    scatterChart.created(transformer);
     scatterChart.init();
 
     const barTransformer = new BarChart.transformerConstructor({
@@ -171,7 +171,7 @@ describe('Bar chart test', () => {
         getSpecInfo: () => barInfo
       } as any
     );
-    barChart.created();
+    barChart.created(barTransformer);
     barChart.init();
 
     const barSeries = barChart.getAllSeries()[0];
@@ -216,7 +216,7 @@ describe('Bar chart test', () => {
         getSpecInfo: () => info
       } as any
     );
-    scatterChart.created();
+    scatterChart.created(transformer);
     scatterChart.init();
 
     const ASeries = scatterChart.getAllSeries()[0];

packages/vchart/__tests__/unit/scale/global-scale.test.ts

@@ -314,7 +314,7 @@ describe('global-scale test', () => {
         getTheme: () => ThemeManager.getCurrentTheme(true)
       } as any
     );
-    chart.created();
+    chart.created(transformer);
     chart.init();
 
     // spec
@@ -464,7 +464,7 @@ describe('global-scale test', () => {
         getTheme: () => ThemeManager.getCurrentTheme(true)
       } as any
     );
-    chart.created();
+    chart.created(transformer);
     chart.init();
 
     // spec

packages/vchart/src/chart/area/area-transformer.ts

@@ -6,20 +6,19 @@ export class AreaChartSpecTransformer<
   T extends IAreaChartSpec = IAreaChartSpec
 > extends CartesianChartSpecTransformer<T> {
   protected _getDefaultSeriesSpec(spec: T): any {
-    return {
-      ...super._getDefaultSeriesSpec(spec),
-      point: spec.point,
-      line: spec.line,
-      area: spec.area,
-      seriesMark: spec.seriesMark,
-      activePoint: spec.activePoint,
-      sampling: spec.sampling,
-      samplingFactor: spec.samplingFactor,
-      pointDis: spec.pointDis,
-      pointDisMul: spec.pointDisMul,
-      markOverlap: spec.markOverlap,
-      areaLabel: spec.areaLabel
-    };
+    return super._getDefaultSeriesSpec(spec, [
+      'point',
+      'line',
+      'area',
+      'seriesMark',
+      'activePoint',
+      'sampling',
+      'samplingFactor',
+      'pointDis',
+      'pointDisMul',
+      'markOverlap',
+      'areaLabel'
+    ]);
   }
 
   transformSpec(spec: T): void {

packages/vchart/src/chart/bar/3d/bar-3d-transformer.ts

@@ -6,12 +6,12 @@ export class Bar3dChartSpecTransformer<T extends IBar3dChartSpec = IBar3dChartSp
   AdaptiveSpec<T, 'type' | 'series'>
 > {
   protected _getDefaultSeriesSpec(spec: AdaptiveSpec<T, 'type' | 'series'>): any {
-    return {
-      ...super._getDefaultSeriesSpec(spec),
-      barWidth: spec.barWidth,
-      barMaxWidth: spec.barMaxWidth,
-      barMinWidth: spec.barMinWidth,
-      barGapInGroup: spec.barGapInGroup
-    };
+    const seriesSpec = super._getDefaultSeriesSpec(spec);
+    seriesSpec.barWidth = spec.barWidth;
+    seriesSpec.barMaxWidth = spec.barMaxWidth;
+    seriesSpec.barMinWidth = spec.barMinWidth;
+    seriesSpec.barGapInGroup = spec.barGapInGroup;
+
+    return seriesSpec;
   }
 }

packages/vchart/src/chart/bar/bar-transformer.ts

@@ -1,4 +1,4 @@
-import { isArray, isNumber, isObject } from '@visactor/vutils';
+import { isObject } from '@visactor/vutils';
 import type { IBarSeriesSpec } from '../../series';
 import { CartesianChartSpecTransformer } from '../cartesian';
 import { setDefaultCrosshairForCartesianChart } from '../util';
@@ -7,18 +7,17 @@ import type { ICartesianBandAxisSpec } from '../../component';
 
 export class BarChartSpecTransformer<T extends IBarChartSpec = IBarChartSpec> extends CartesianChartSpecTransformer<T> {
   protected _getDefaultSeriesSpec(spec: T): any {
-    return {
-      ...super._getDefaultSeriesSpec(spec),
-      barWidth: spec.barWidth,
-      barMaxWidth: spec.barMaxWidth,
-      barMinWidth: spec.barMinWidth,
-      barGapInGroup: spec.barGapInGroup,
-      barMinHeight: spec.barMinHeight,
-      sampling: spec.sampling,
-      samplingFactor: spec.samplingFactor,
-      barBackground: spec.barBackground,
-      stackCornerRadius: spec.stackCornerRadius
-    } as IBarSeriesSpec;
+    return super._getDefaultSeriesSpec(spec, [
+      'barWidth',
+      'barMaxWidth',
+      'barMinWidth',
+      'barGapInGroup',
+      'barMinHeight',
+      'sampling',
+      'samplingFactor',
+      'barBackground',
+      'stackCornerRadius'
+    ]) as IBarSeriesSpec;
   }
 
   transformSpec(spec: T): void {

packages/vchart/src/chart/base/base-chart-transformer.ts

@@ -57,27 +57,35 @@ export class BaseChartSpecTransformer<T extends IChartSpec> implements IChartSpe
     }
   }
 
-  /**
-   * 转换 model spec。包含以下步骤：
-   * - model 层级的主题合并
-   * - model 层级的在初始化阶段的 spec 修改，如添加 label spec
-   */
-  transformModelSpec(chartSpec: T): IChartSpecInfo {
-    const transform = (constructor: IModelConstructor, specInfo: IModelSpecInfo, chartSpecInfo?: IChartSpecInfo) => {
+  generateTransform(chartSpec: T, isRuntime?: boolean) {
+    return (constructor: IModelConstructor, specInfo: IModelSpecInfo, chartSpecInfo?: IChartSpecInfo) => {
       const { spec, specPath, specInfoPath, type } = specInfo;
       const transformer = new constructor.transformerConstructor({
         ...this._option,
         type
       });
       // 调用 model 自己的 transformer 进行转换
       const transformResult = transformer.transformSpec(spec, chartSpec, chartSpecInfo);
-      setProperty(chartSpec, specPath, transformResult.spec);
-      setProperty(chartSpecInfo, specInfoPath ?? specPath, {
+      const chartSpecInfoValue = {
         ...specInfo,
         ...transformResult
-      });
+      };
+      if (isRuntime) {
+        chartSpecInfoValue.theme = transformer.getTheme(spec, chartSpec);
+      } else {
+        setProperty(chartSpec, specPath, transformResult.spec);
+      }
+      setProperty(chartSpecInfo, specInfoPath ?? specPath, chartSpecInfoValue);
     };
-    return this.createSpecInfo(chartSpec, transform);
+  }
+
+  /**
+   * 转换 model spec。包含以下步骤：
+   * - model 层级的主题合并
+   * - model 层级的在初始化阶段的 spec 修改，如添加 label spec
+   */
+  transformModelSpec(chartSpec: T): IChartSpecInfo {
+    return this.createSpecInfo(chartSpec, this.generateTransform(chartSpec, false));
   }
 
   /** 遍历图表 spec 中包含的所有的 model，进行 spec 转换并生成图表 spec info */
@@ -93,20 +101,7 @@ export class BaseChartSpecTransformer<T extends IChartSpec> implements IChartSpe
     ) => void
   ): IChartSpecInfo {
     if (!transform) {
-      transform = (constructor: IModelConstructor, specInfo: IModelSpecInfo, chartSpecInfo?: IChartSpecInfo) => {
-        const { spec, specPath, specInfoPath, type } = specInfo;
-        const transformer = new constructor.transformerConstructor({
-          ...this._option,
-          type
-        });
-        const transformResult = transformer.transformSpec(spec, chartSpec, chartSpecInfo);
-
-        setProperty(chartSpecInfo, specInfoPath ?? specPath, {
-          ...specInfo,
-          ...transformResult,
-          theme: transformer.getTheme(spec, chartSpec)
-        });
-      };
+      transform = this.generateTransform(chartSpec, true);
     }
 
     const currentChartSpecInfo: IChartSpecInfo = {};
@@ -165,7 +160,7 @@ export class BaseChartSpecTransformer<T extends IChartSpec> implements IChartSpe
     return true;
   }
 
-  protected _getDefaultSeriesSpec(chartSpec: any) {
+  protected _getDefaultSeriesSpec(chartSpec: any, pickKeys?: string[], pickKeys2?: string[]) {
     const series: any = {
       dataKey: chartSpec.dataKey,
 
@@ -202,6 +197,23 @@ export class BaseChartSpecTransformer<T extends IChartSpec> implements IChartSpe
 
       interactions: chartSpec.interactions
     };
+
+    const seriesType = this.seriesType;
+    if (seriesType) {
+      series.type = seriesType;
+      series[seriesType] = (chartSpec as any)[seriesType];
+    }
+
+    if (pickKeys && pickKeys.length) {
+      pickKeys.forEach(k => {
+        series[k] = chartSpec[k];
+      });
+    }
+    if (pickKeys2 && pickKeys2.length) {
+      pickKeys2.forEach(k => {
+        series[k] = chartSpec[k];
+      });
+    }
     return series;
   }
 
@@ -271,7 +283,7 @@ export class BaseChartSpecTransformer<T extends IChartSpec> implements IChartSpe
         polarAxis = cmp;
       } else if (cmp.type === ComponentTypeEnum.geoCoordinate) {
         geoCoordinate = cmp;
-      } else if (alwaysCheck || chartSpec[cmp.specKey ?? cmp.type]) {
+      } else if (alwaysCheck || (chartSpec as any)[cmp.specKey ?? cmp.type]) {
         if (cmp.type === ComponentTypeEnum.tooltip) {
           tooltip = cmp;
         } else {
@@ -340,7 +352,7 @@ export class BaseChartSpecTransformer<T extends IChartSpec> implements IChartSpe
         }
         Object.keys(defaultSeriesSpec).forEach(k => {
           if (!(k in s)) {
-            s[k] = defaultSeriesSpec[k];
+            (s as any)[k] = defaultSeriesSpec[k];
           }
         });
       });