Perf/parse theme of visible components

common/changes/@visactor/vchart/perf-parse-theme-of-visible-components_2025-02-05-11-53.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "refactor: optimize the process of theme\n\n",
+      "type": "none",
+      "packageName": "@visactor/vchart"
+    }
+  ],
+  "packageName": "@visactor/vchart",
+  "email": "[email protected]"
+}

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

@@ -2,12 +2,12 @@ import { GlobalScale } from '../../../src/scale/global-scale';
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-nocheck
 import { EventDispatcher } from '../../../src/event/event-dispatcher';
-import type { BarSeries, IChartSpec } from '../../../src';
+import type { BarSeries } from '../../../src';
 // eslint-disable-next-line no-duplicate-imports
-import { BarChart, ThemeManager } from '../../../src';
+import { BarChart } from '../../../src';
 import { DataSet } from '@visactor/vdataset';
 import { createCanvas, removeDom } from '../../util/dom';
-import { initChartDataSet } from '../../util/context';
+import { getTheme, initChartDataSet } from '../../util/context';
 import { getTestCompiler } from '../../util/factory/compiler';
 
 // 保证引入执行 Build-in
@@ -92,7 +92,7 @@ describe('Bar chart test', () => {
     const transformer = new BarChart.transformerConstructor({
       type: 'bar',
       seriesType: 'bar',
-      getTheme: () => ThemeManager.getCurrentTheme(true),
+      getTheme: getTheme,
       mode: 'desktop-browser'
     });
     const info = transformer.initChartSpec(spec as any);
@@ -113,7 +113,7 @@ describe('Bar chart test', () => {
         mode: 'desktop-browser',
         getCompiler: getTestCompiler,
         globalScale: new GlobalScale([], { getAllSeries: () => [] as any[] } as any),
-        getTheme: () => ThemeManager.getCurrentTheme(true),
+        getTheme: getTheme,
         getSpecInfo: () => info
       } as any
     );

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

@@ -1,12 +1,12 @@
 import { EventDispatcher } from '../../../src/event/event-dispatcher';
 import type { BarSeries } from '../../../src';
 // eslint-disable-next-line no-duplicate-imports
-import { HistogramChart, ThemeManager } from '../../../src';
+import { HistogramChart } from '../../../src';
 import { DataSet, DataView, csvParser } from '@visactor/vdataset';
 import { createCanvas, removeDom } from '../../util/dom';
 import { getTestCompiler } from '../../util/factory/compiler';
 import { GlobalScale } from '../../../src/scale/global-scale';
-import { initChartDataSet } from '../../util/context';
+import { getTheme, initChartDataSet } from '../../util/context';
 
 // 保证引入执行 Build-in
 const dataSet = new DataSet();
@@ -53,7 +53,7 @@ describe('histogram chart test', () => {
     const transformer = new HistogramChart.transformerConstructor({
       type: 'histogram',
       seriesType: 'bar',
-      getTheme: () => ThemeManager.getCurrentTheme(true),
+      getTheme: getTheme,
       mode: 'desktop-browser'
     });
     const info = transformer.initChartSpec(spec as any);
@@ -71,7 +71,7 @@ describe('histogram chart test', () => {
         mode: 'desktop-browser',
         getCompiler: getTestCompiler,
         globalScale: new GlobalScale([], { getAllSeries: () => [] as any[] } as any),
-        getTheme: () => ThemeManager.getCurrentTheme(true),
+        getTheme: getTheme,
         getSpecInfo: () => info
       } as any
     );

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

@@ -2,12 +2,12 @@ import type { ILineChartSpec } from '../../../src/chart/line/interface';
 import { GlobalScale } from '../../../src/scale/global-scale';
 import type { LineSeries } from '../../../src/series/line/line';
 import { DataSet, DataView, csvParser } from '@visactor/vdataset';
-import { LineChart } from '../../../src/chart/line/line';
+import { LineChart, registerLineChart } from '../../../src/chart/line/line';
 import { EventDispatcher } from '../../../src/event/event-dispatcher';
 import { getTestCompiler } from '../../util/factory/compiler';
-import { initChartDataSet } from '../../util/context';
-import VChart, { ThemeManager } from '../../../src';
+import { getTheme, initChartDataSet } from '../../util/context';
 
+registerLineChart();
 const dataSet = new DataSet();
 initChartDataSet(dataSet);
 dataSet.registerParser('csv', csvParser);
@@ -34,7 +34,7 @@ describe('line chart test', () => {
     const transformer = new LineChart.transformerConstructor({
       type: 'line',
       seriesType: 'line',
-      getTheme: () => ThemeManager.getCurrentTheme(true),
+      getTheme: getTheme,
       mode: 'desktop-browser'
     });
     const info = transformer.initChartSpec(spec as any);
@@ -55,7 +55,7 @@ describe('line chart test', () => {
         mode: 'desktop-browser',
         getCompiler: getTestCompiler,
         globalScale: new GlobalScale([], { getAllSeries: () => [] as any[] } as any),
-        getTheme: () => ThemeManager.getCurrentTheme(true),
+        getTheme: getTheme,
         onError: () => {},
         getSpecInfo: () => info
       } as any
@@ -103,7 +103,7 @@ describe('line chart test', () => {
     const transformer = new LineChart.transformerConstructor({
       type: 'line',
       seriesType: 'line',
-      getTheme: () => ThemeManager.getCurrentTheme(true),
+      getTheme: getTheme,
       mode: 'desktop-browser'
     });
     const info = transformer.initChartSpec(spec as any);
@@ -122,7 +122,7 @@ describe('line chart test', () => {
       mode: 'mobile-browser',
       getCompiler: getTestCompiler,
       globalScale: new GlobalScale([], { getAllSeries: () => [] as any[] } as any),
-      getTheme: () => ThemeManager.getCurrentTheme(true),
+      getTheme: getTheme,
       getSpecInfo: () => info
     } as any);
     chart.created(transformer);

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

@@ -2,10 +2,10 @@ import { DataSet, csvParser } from '@visactor/vdataset';
 import { EventDispatcher } from '../../../src/event/event-dispatcher';
 import type { LinearProgressSeries } from '../../../src';
 // eslint-disable-next-line no-duplicate-imports
-import { LinearProgressChart, ThemeManager } from '../../../src';
+import { LinearProgressChart } from '../../../src';
 import { getTestCompiler } from '../../util/factory/compiler';
 import { GlobalScale } from '../../../src/scale/global-scale';
-import { initChartDataSet } from '../../util/context';
+import { getTheme, initChartDataSet } from '../../util/context';
 
 // 保证引入执行 Build-in
 const dataSet = new DataSet();
@@ -41,7 +41,7 @@ describe('linearProgress chart test', () => {
     const transformer = new LinearProgressChart.transformerConstructor({
       type: 'linearProgress',
       seriesType: 'linearProgress',
-      getTheme: () => ThemeManager.getCurrentTheme(true),
+      getTheme: getTheme,
       mode: 'desktop-browser'
     });
     const info = transformer.initChartSpec(spec as any);
@@ -59,7 +59,7 @@ describe('linearProgress chart test', () => {
         mode: 'desktop-browser',
         getCompiler: getTestCompiler,
         globalScale: new GlobalScale([], { getAllSeries: () => [] as any[] } as any),
-        getTheme: () => ThemeManager.getCurrentTheme(true),
+        getTheme: getTheme,
         animation: false,
         getSpecInfo: () => info
       } as any

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

@@ -1,10 +1,10 @@
 import { DataSet, DataView, csvParser } from '@visactor/vdataset';
-import { RangeColumnChart, ThemeManager } from '../../../src';
+import { RangeColumnChart } from '../../../src';
 import type { RangeColumnSeries } from '../../../src/series/range-column/range-column';
 import { EventDispatcher } from '../../../src/event/event-dispatcher';
 import { getTestCompiler } from '../../util/factory/compiler';
 import { GlobalScale } from '../../../src/scale/global-scale';
-import { initChartDataSet } from '../../util/context';
+import { getTheme, initChartDataSet } from '../../util/context';
 
 // 保证引入执行 Build-in
 const dataSet = new DataSet();
@@ -51,7 +51,7 @@ describe('rangeColumn chart test', () => {
     const transformer = new RangeColumnChart.transformerConstructor({
       type: 'rangeColumn',
       seriesType: 'rangeColumn',
-      getTheme: () => ThemeManager.getCurrentTheme(true),
+      getTheme: getTheme,
       mode: 'desktop-browser'
     });
     const info = transformer.initChartSpec(spec as any);
@@ -72,7 +72,7 @@ describe('rangeColumn chart test', () => {
         mode: 'desktop-browser',
         getCompiler: getTestCompiler,
         globalScale: new GlobalScale([], { getAllSeries: () => [] as any[] } as any),
-        getTheme: () => ThemeManager.getCurrentTheme(true),
+        getTheme: getTheme,
         animation: false,
         getSpecInfo: () => info
       } as any

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

@@ -2,7 +2,7 @@ import { GlobalScale } from '../../../src/scale/global-scale';
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-nocheck
 import { EventDispatcher } from '../../../src/event/event-dispatcher';
-import { ThemeManager, default as VChart } from '../../../src';
+import { default as VChart } from '../../../src';
 import { DataSet, csvParser } from '@visactor/vdataset';
 import { createCanvas, removeDom } from '../../util/dom';
 import { getTestCompiler } from '../../util/factory/compiler';
@@ -12,7 +12,7 @@ import type { ITreemapChartSpec } from '../../../src/chart/treemap';
 import { TreemapChart } from '../../../src/chart/treemap';
 import type { TreemapSeries } from '../../../src/series/treemap/treemap';
 import { DEFAULT_HIERARCHY_DEPTH } from '../../../src/constant/hierarchy';
-import { initChartDataSet } from '../../util/context';
+import { getTheme, initChartDataSet } from '../../util/context';
 
 // 保证引入执行 Build-in
 const dataSet = new DataSet();
@@ -54,7 +54,7 @@ describe('treemap chart test', () => {
     const transformer = new TreemapChart.transformerConstructor({
       type: 'treemap',
       seriesType: 'treemap',
-      getTheme: () => ThemeManager.getCurrentTheme(true),
+      getTheme: getTheme,
       mode: 'desktop-browser'
     });
     const info = transformer.initChartSpec(spec as any);
@@ -75,7 +75,7 @@ describe('treemap chart test', () => {
         mode: 'desktop-browser',
         getCompiler: getTestCompiler,
         globalScale: new GlobalScale([], { getAllSeries: () => [] as any[] } as any),
-        getTheme: () => ThemeManager.getCurrentTheme(true),
+        getTheme: getTheme,
         onError: () => {},
         getSpecInfo: () => info
       } as any

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

@@ -4,14 +4,14 @@ import { GlobalScale } from '../../../src/scale/global-scale';
 import { EventDispatcher } from '../../../src/event/event-dispatcher';
 import type { IWordCloudChartSpec } from '../../../src';
 // eslint-disable-next-line no-duplicate-imports
-import { ThemeManager, default as VChart } from '../../../src';
+import { default as VChart } from '../../../src';
 import { DataSet, csvParser } from '@visactor/vdataset';
 import { WordCloudChart } from '../../../src/chart/word-cloud/word-cloud';
 import type { WordCloudSeries } from '../../../src/series/word-cloud/word-cloud';
 import { dataWordCloud } from '../../data/data-wordcloud';
 import { createCanvas, removeDom } from '../../util/dom';
 import { getTestCompiler } from '../../util/factory/compiler';
-import { initChartDataSet } from '../../util/context';
+import { getTheme, initChartDataSet } from '../../util/context';
 
 // 保证引入执行 Build-in
 const dataSet = new DataSet();
@@ -62,7 +62,7 @@ describe('wordCloud chart test', () => {
     const transformer = new WordCloudChart.transformerConstructor({
       type: 'wordCloud',
       seriesType: 'wordCloud',
-      getTheme: () => ThemeManager.getCurrentTheme(true),
+      getTheme: getTheme,
       mode: 'desktop-browser'
     });
     const info = transformer.initChartSpec(spec);
@@ -81,7 +81,7 @@ describe('wordCloud chart test', () => {
       mode: 'desktop-browser',
       getCompiler: getTestCompiler,
       globalScale: new GlobalScale([], { getAllSeries: () => [] as any[] } as any),
-      getTheme: () => ThemeManager.getCurrentTheme(true),
+      getTheme: getTheme,
       getSpecInfo: () => info
     } as any);
     chart.created(transformer);

packages/vchart/__tests__/unit/component/cartesian/axis/linear-axis.test.ts

@@ -6,11 +6,11 @@ import { DataSet, csvParser } from '@visactor/vdataset';
 import { dimensionStatistics } from '../../../../../src/data/transforms/dimension-statistics';
 import type { CartesianLinearAxis } from '../../../../../src/index';
 // eslint-disable-next-line no-duplicate-imports
-import { CartesianAxis, ThemeManager } from '../../../../../src/index';
+import { CartesianAxis } from '../../../../../src/index';
 import { ComponentTypeEnum, type IComponent, type IComponentOption } from '../../../../../src/component/interface';
 import { EventDispatcher } from '../../../../../src/event/event-dispatcher';
 import { getTestCompiler } from '../../../../util/factory/compiler';
-import { initChartDataSet } from '../../../../util/context';
+import { getTheme, initChartDataSet } from '../../../../util/context';
 import type { StringOrNumber } from '../../../../../src/typings/common';
 import { getCartesianAxisInfo } from '../../../../../src/component/axis/cartesian/util';
 import { wilkinsonExtended } from '@visactor/vscale';
@@ -97,7 +97,7 @@ const ctx: IComponentOption = {
     return { width: 500, height: 500 } as any;
   },
   globalScale: new GlobalScale([], { getAllSeries: () => [] as any[] } as any),
-  getTheme: () => ThemeManager.getCurrentTheme(true),
+  getTheme: getTheme,
   getComponentByUserId: function (user_id: string | number): IComponent | undefined {
     throw new Error('Function not implemented.');
   },
@@ -131,7 +131,7 @@ test('config linearAxis.nice default [true] ', () => {
   });
   const transformer = new CartesianAxis.transformerConstructor({
     type: 'cartesianAxis-linear',
-    getTheme: () => ThemeManager.getCurrentTheme(true),
+    getTheme: getTheme,
     mode: 'desktop-browser'
   });
   spec = transformer.transformSpec(spec, {}).spec;
@@ -158,7 +158,7 @@ test('config linearAxis.nice default [true] ', () => {
   });
   const transformer = new CartesianAxis.transformerConstructor({
     type: 'cartesianAxis-linear',
-    getTheme: () => ThemeManager.getCurrentTheme(true),
+    getTheme: getTheme,
     mode: 'desktop-browser'
   });
   spec = transformer.transformSpec(spec, {}).spec;
@@ -185,7 +185,7 @@ test('nice === false  ', () => {
   });
   const transformer = new CartesianAxis.transformerConstructor({
     type: 'cartesianAxis-linear',
-    getTheme: () => ThemeManager.getCurrentTheme(true),
+    getTheme: getTheme,
     mode: 'desktop-browser'
   });
   spec = transformer.transformSpec(spec, {}).spec;
@@ -213,7 +213,7 @@ test('zero === false && nice === false  ', () => {
   });
   const transformer = new CartesianAxis.transformerConstructor({
     type: 'cartesianAxis-linear',
-    getTheme: () => ThemeManager.getCurrentTheme(true),
+    getTheme: getTheme,
     mode: 'desktop-browser'
   });
   spec = transformer.transformSpec(spec, {}).spec;
@@ -243,7 +243,7 @@ test('zero === true && range is specific  ', () => {
   });
   const transformer = new CartesianAxis.transformerConstructor({
     type: 'cartesianAxis-linear',
-    getTheme: () => ThemeManager.getCurrentTheme(true),
+    getTheme: getTheme,
     mode: 'desktop-browser'
   });
   config = transformer.transformSpec(config, {}).spec;
@@ -343,7 +343,7 @@ test('expand', () => {
   });
   const transformer = new CartesianAxis.transformerConstructor({
     type: 'cartesianAxis-linear',
-    getTheme: () => ThemeManager.getCurrentTheme(true),
+    getTheme: getTheme,
     mode: 'desktop-browser'
   });
   config = transformer.transformSpec(config, {}).spec;
@@ -420,7 +420,7 @@ test('extend', () => {
   });
   const transformer = new CartesianAxis.transformerConstructor({
     type: 'cartesianAxis-linear',
-    getTheme: () => ThemeManager.getCurrentTheme(true),
+    getTheme: getTheme,
     mode: 'desktop-browser'
   });
   config = transformer.transformSpec(config, {}).spec;
@@ -475,7 +475,7 @@ test('niceDomain should work when domain is 0, and user does not set min or max'
   });
   const transformer = new CartesianAxis.transformerConstructor({
     type: 'cartesianAxis-linear',
-    getTheme: () => ThemeManager.getCurrentTheme(true),
+    getTheme: getTheme,
     mode: 'desktop-browser'
   });
   spec = transformer.transformSpec(spec, {}).spec;
@@ -507,7 +507,7 @@ test('niceDomain should not work when user set min or max', () => {
   });
   const transformer = new CartesianAxis.transformerConstructor({
     type: 'cartesianAxis-linear',
-    getTheme: () => ThemeManager.getCurrentTheme(true),
+    getTheme: getTheme,
     mode: 'desktop-browser'
   });
   spec = transformer.transformSpec(spec, {}).spec;
@@ -542,7 +542,7 @@ test('dynamic tickCount', () => {
   });
   const transformer = new CartesianAxis.transformerConstructor({
     type: 'cartesianAxis-linear',
-    getTheme: () => ThemeManager.getCurrentTheme(true),
+    getTheme: getTheme,
     mode: 'desktop-browser'
   });
   spec = transformer.transformSpec(spec, {}).spec;
@@ -600,7 +600,7 @@ test('dynamic tickCount', () => {
   });
   const transformer = new CartesianAxis.transformerConstructor({
     type: 'cartesianAxis-linear',
-    getTheme: () => ThemeManager.getCurrentTheme(true),
+    getTheme: getTheme,
     mode: 'desktop-browser'
   });
   spec = transformer.transformSpec(spec, {}).spec;
@@ -641,7 +641,7 @@ test('dynamic tickCount with wilkson', () => {
   });
   const transformer = new CartesianAxis.transformerConstructor({
     type: 'cartesianAxis-linear',
-    getTheme: () => ThemeManager.getCurrentTheme(true),
+    getTheme: getTheme,
     mode: 'desktop-browser'
   });
   spec = transformer.transformSpec(spec, {}).spec;