Feat/upgrade vrender to optimiaz pie

docs/package.json

@@ -19,8 +19,8 @@
     "@visactor/vchart-theme": "~1.6.6",
     "@visactor/vmind": "1.2.4-alpha.5",
     "@visactor/vutils": "~1.0.23",
-    "@visactor/vrender": "~1.1.8-alpha.0",
-    "@visactor/vrender-kits": "~1.1.8-alpha.0",
+    "@visactor/vrender": "1.1.8",
+    "@visactor/vrender-kits": "1.1.8",
     "@visactor/vtable": "1.19.0-alpha.0",
     "@visactor/vtable-editors": "1.19.0-alpha.0",
     "@visactor/vtable-gantt": "1.19.0-alpha.0",

packages/openinula-vchart/package.json

@@ -30,8 +30,8 @@
   "dependencies": {
     "@visactor/vchart": "workspace:2.1.5",
     "@visactor/vutils": "~1.0.23",
-    "@visactor/vrender-core": "~1.1.8-alpha.0",
-    "@visactor/vrender-kits": "~1.1.8-alpha.0",
+    "@visactor/vrender-core": "1.1.8",
+    "@visactor/vrender-kits": "1.1.8",
     "react-is": "^18.2.0"
   },
   "devDependencies": {

packages/react-vchart/package.json

@@ -36,8 +36,8 @@
     "@visactor/vchart": "workspace:2.1.5",
     "@visactor/vchart-extension": "workspace:2.1.5",
     "@visactor/vutils": "~1.0.23",
-    "@visactor/vrender-core": "~1.1.8-alpha.0",
-    "@visactor/vrender-kits": "~1.1.8-alpha.0",
+    "@visactor/vrender-core": "1.1.8",
+    "@visactor/vrender-kits": "1.1.8",
     "react-is": "^18.2.0"
   },
   "devDependencies": {

packages/vchart-extension/package.json

@@ -26,10 +26,10 @@
     "start": "ts-node __tests__/runtime/browser/scripts/initVite.ts && vite serve __tests__/runtime/browser"
   },
   "dependencies": {
-    "@visactor/vrender-core": "~1.1.8-alpha.0",
-    "@visactor/vrender-kits": "~1.1.8-alpha.0",
-    "@visactor/vrender-components": "~1.1.8-alpha.0",
-    "@visactor/vrender-animate": "~1.1.8-alpha.0",
+    "@visactor/vrender-core": "1.1.8",
+    "@visactor/vrender-kits": "1.1.8",
+    "@visactor/vrender-components": "1.1.8",
+    "@visactor/vrender-animate": "1.1.8",
     "@visactor/vchart": "workspace:2.1.5",
     "@visactor/vutils": "~1.0.23",
     "@visactor/vdataset": "~1.0.23",

packages/vchart/__tests__/runtime/browser/index.html

@@ -63,7 +63,12 @@
     <!-- 添加新的控制脚本 -->
     <script type="module">
       const params = new URLSearchParams(window.location.search);
-      const currentView = params.get('view') === 'dashboard' ? 'dashboard' : 'default';
+      const currentView =
+        params.get('view') === 'dashboard'
+          ? 'dashboard'
+          : params.get('view') === 'pie-performance'
+          ? 'pie-performance'
+          : 'default';
       const button = document.getElementById('toggleScriptBtn');
 
       let scriptSrc;
@@ -74,10 +79,14 @@
         scriptSrc = './index.page.dashboard.ts';
         nextViewUrl = './index.html'; // 切换回默认视图
         buttonText = '切换到默认视图 (单图)';
+      } else if (currentView === 'pie-performance') {
+        scriptSrc = './test-page/performance-pie-small.ts';
+        nextViewUrl = './index.html';
+        buttonText = '切换到默认视图 (单图)';
       } else {
         scriptSrc = './index.page.ts'; // 默认加载这个脚本
-        nextViewUrl = './index.html?view=dashboard'; // 切换到仪表盘视图
-        buttonText = '切换到仪表盘视图 (6图)';
+        nextViewUrl = './index.html?view=pie-performance';
+        buttonText = '切换到饼图性能页';
       }
 
       // 设置按钮文本

packages/vchart/__tests__/runtime/browser/test-page/performance-pie-small.ts

@@ -0,0 +1,83 @@
+import { default as VChart, type ISpec } from '../../../../src/index';
+
+const WIDTH = 640;
+const HEIGHT = 360;
+const DATA_COUNT = 1000;
+
+const values = Array.from({ length: DATA_COUNT }, (_, index) => {
+  const itemIndex = index + 1;
+  const category = `R${itemIndex.toString().padStart(5, '0')}`;
+
+  return {
+    category: itemIndex % 17 === 0 ? `${category}-resize-label-long-text` : category,
+    value: (itemIndex * 37 + 1) % 997,
+    value2: (itemIndex * 53 + 18) % 991,
+    word: `word-${itemIndex.toString().padStart(5, '0')}`
+  };
+});
+
+const spec: ISpec = {
+  type: 'pie',
+  width: WIDTH,
+  height: HEIGHT,
+  autoFit: false,
+  animation: false,
+  background: '#ffffff',
+  color: ['#3370ff', '#00b8d9', '#34c724', '#ff7d00', '#7b67ee', '#f54a45'],
+  padding: { top: 24, right: 24, bottom: 52, left: 60 },
+  data: [{ id: 'main', values }],
+  tooltip: { visible: true },
+  categoryField: 'category',
+  valueField: 'value',
+  outerRadius: 0.82,
+  label: { visible: true, style: { fontSize: 10 }, position: 'outside' },
+  legends: { visible: true, orient: 'right' }
+};
+
+const chartContainer = document.getElementById('chartContainer') as HTMLElement;
+const chartDom = document.getElementById('chart') as HTMLElement;
+const controlPanel = document.getElementById('controlPanel') as HTMLElement;
+
+chartContainer.style.flexGrow = '0';
+chartContainer.style.width = `${WIDTH}px`;
+chartContainer.style.height = `${HEIGHT}px`;
+chartContainer.style.margin = '12px auto 0';
+chartDom.style.width = '100%';
+chartDom.style.height = '100%';
+
+const renderButton = document.createElement('button');
+renderButton.type = 'button';
+renderButton.textContent = '渲染 pie.small.100';
+
+const resetButton = document.createElement('button');
+resetButton.type = 'button';
+resetButton.textContent = '释放并重置';
+
+const status = document.createElement('span');
+status.style.marginLeft = '8px';
+status.textContent = '100 个数据点，等待录制后点击渲染';
+
+let chart: VChart | undefined;
+
+const reset = () => {
+  chart?.release();
+  chart = undefined;
+  chartDom.replaceChildren();
+  renderButton.disabled = false;
+  status.textContent = '已重置，可开始下一次录制';
+};
+
+renderButton.addEventListener('click', () => {
+  reset();
+  performance.mark('vchart-pie-small:create-start');
+  chart = new VChart(spec, { dom: chartDom, mode: 'desktop-browser', animation: false });
+  performance.mark('vchart-pie-small:render-start');
+  chart.renderSync();
+  performance.mark('vchart-pie-small:render-end');
+  renderButton.disabled = true;
+  window['vchart'] = chart;
+  status.textContent = '已渲染；使用“释放并重置”后可进行下一次录制';
+});
+
+resetButton.addEventListener('click', reset);
+controlPanel.append(renderButton, resetButton, status);

packages/vchart/__tests__/unit/component/legend/discrete-legend.test.ts

@@ -108,10 +108,7 @@ describe('Discrete legend getLegendAttributes layout callbacks', () => {
   });
 
   test('should keep a static `pager.layout` unchanged', () => {
-    const attrs = getLegendAttributes(
-      { type: 'discrete', pager: { layout: 'horizontal' } } as any,
-      rect as any
-    );
+    const attrs = getLegendAttributes({ type: 'discrete', pager: { layout: 'horizontal' } } as any, rect as any);
 
     expect(attrs.pager.layout).toBe('horizontal');
   });
@@ -144,10 +141,7 @@ describe('Discrete legend getLegendAttributes layout callbacks', () => {
   });
 
   test('should keep a static `pager.position` unchanged', () => {
-    const attrs = getLegendAttributes(
-      { type: 'discrete', pager: { position: 'middle' } } as any,
-      rect as any
-    );
+    const attrs = getLegendAttributes({ type: 'discrete', pager: { position: 'middle' } } as any, rect as any);
 
     expect(attrs.pager.position).toBe('middle');
   });

packages/vchart/package.json

@@ -128,11 +128,11 @@
     "@visactor/vdataset": "~1.0.23",
     "@visactor/vscale": "~1.0.23",
     "@visactor/vlayouts": "~1.0.23",
-    "@visactor/vrender": "~1.1.8-alpha.0",
-    "@visactor/vrender-core": "~1.1.8-alpha.0",
-    "@visactor/vrender-kits": "~1.1.8-alpha.0",
-    "@visactor/vrender-components": "~1.1.8-alpha.0",
-    "@visactor/vrender-animate": "~1.1.8-alpha.0",
+    "@visactor/vrender": "1.1.8",
+    "@visactor/vrender-core": "1.1.8",
+    "@visactor/vrender-kits": "1.1.8",
+    "@visactor/vrender-components": "1.1.8",
+    "@visactor/vrender-animate": "1.1.8",
     "@visactor/vutils-extension": "workspace:2.1.5"
   },
   "publishConfig": {

packages/vchart/src/core/vchart.ts

@@ -467,7 +467,7 @@ export class VChart implements IVChart {
     // 设置全局字体
     this._setFontFamilyTheme(this.getTheme('fontFamily') as string);
     this._initDataSet(this._option.dataSet);
-    this._autoSize = isTrueBrowseEnv ? (spec.autoFit ?? this._option.autoFit ?? true) : false;
+    this._autoSize = isTrueBrowseEnv ? spec.autoFit ?? this._option.autoFit ?? true : false;
     this._bindResizeEvent();
     this._bindViewEvent();
     this._initChartPlugin();
@@ -1526,8 +1526,8 @@ export class VChart implements IVChart {
           isObject(specTheme) && specTheme.type
             ? specTheme.type
             : isObject(optionTheme) && optionTheme.type
-              ? optionTheme.type
-              : this._currentThemeName
+            ? optionTheme.type
+            : this._currentThemeName
         ),
         getThemeObject(optionTheme),
         getThemeObject(specTheme)
@@ -1561,7 +1561,7 @@ export class VChart implements IVChart {
     }
 
     const lasAutoSize = this._autoSize;
-    this._autoSize = isTrueBrowser(this._option.mode) ? (this._spec.autoFit ?? this._option.autoFit ?? true) : false;
+    this._autoSize = isTrueBrowser(this._option.mode) ? this._spec.autoFit ?? this._option.autoFit ?? true : false;
     if (this._autoSize !== lasAutoSize) {
       resize = true;
     }

tools/story-player/package.json

@@ -56,10 +56,10 @@
     "vite": "3.2.6"
   },
   "dependencies": {
-    "@visactor/vrender-core": "~1.1.8-alpha.0",
-    "@visactor/vrender-kits": "~1.1.8-alpha.0",
+    "@visactor/vrender-core": "1.1.8",
+    "@visactor/vrender-kits": "1.1.8",
     "@visactor/vchart": "workspace:2.1.5",
-    "@visactor/vrender": "~1.1.8-alpha.0",
+    "@visactor/vrender": "1.1.8",
     "@visactor/vutils": "~1.0.23"
   }
 }