Fix/update of label

common/changes/@visactor/vchart/fix-update-of-label_2024-09-14-03-18.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "fix: fix the compare of label in series\n\n",
+      "type": "none",
+      "packageName": "@visactor/vchart"
+    }
+  ],
+  "packageName": "@visactor/vchart",
+  "email": "dingling112@gmail.com"
+}

packages/vchart/__tests__/unit/core/update-spec.test.ts

@@ -1,5 +1,6 @@
-import type { IBarChartSpec, ICommonChartSpec } from '../../../src';
+import type { IBarChartSpec, ICommonChartSpec, ILineChartSpec } from '../../../src';
 import { default as VChart } from '../../../src';
+import { totalLabel } from '../../../src/theme/builtin/common/component/total-label';
 import { series } from '../../../src/theme/builtin/common/series';
 import { createDiv, removeDom } from '../../util/dom';
 
@@ -996,6 +997,7 @@ describe('vchart updateSpec of same spec', () => {
     const updateRes = (vchart as any)._updateSpec(spec, false);
 
     expect(updateRes).toEqual({
+      changeBackground: false,
       change: false,
       reCompile: false,
       reMake: false,
@@ -1049,6 +1051,7 @@ describe('vchart updateSpec of same spec', () => {
     const updateRes = (vchart as any)._updateSpec(spec, false);
 
     expect(updateRes).toEqual({
+      changeBackground: false,
       change: false,
       changeTheme: false,
       reCompile: false,
@@ -1097,6 +1100,7 @@ describe('vchart updateSpec of same spec', () => {
     const updateRes = (vchart as any)._updateSpec(spec, false);
 
     expect(updateRes).toEqual({
+      changeBackground: false,
       change: false,
       changeTheme: false,
       reCompile: false,
@@ -1188,6 +1192,7 @@ describe('vchart updateSpec of same spec', () => {
     const updateRes = (vchart as any)._updateSpec(spec, false);
 
     expect(updateRes).toEqual({
+      changeBackground: false,
       change: false,
       changeTheme: false,
       reCompile: false,
@@ -1219,7 +1224,7 @@ describe('vchart updateSpec of different about label', () => {
     vchart.release();
   });
 
-  it('should remake when label is in series update', () => {
+  it('should reCompile when label config is in series update', () => {
     const spec = {
       type: 'bar',
       data: [
@@ -1278,17 +1283,18 @@ describe('vchart updateSpec of different about label', () => {
     );
 
     expect(updateRes).toEqual({
+      changeBackground: false,
       change: false,
       changeTheme: false,
-      reCompile: false,
-      reMake: true,
+      reCompile: true,
+      reMake: false,
       reRender: true,
       reSize: false,
       reTransformSpec: false
     });
   });
 
-  it('should remake when label is in chart update', () => {
+  it('should reCompile when visible of label is in chart update', () => {
     const spec = {
       data: [
         {
@@ -1336,9 +1342,10 @@ describe('vchart updateSpec of different about label', () => {
 
     expect(updateRes).toEqual({
       change: false,
+      changeBackground: false,
       changeTheme: false,
-      reCompile: false,
-      reMake: true,
+      reCompile: true,
+      reMake: false,
       reRender: true,
       reSize: false,
       reTransformSpec: false
@@ -1412,6 +1419,7 @@ describe('vchart updateSpec of different about label', () => {
     );
 
     expect(updateRes).toEqual({
+      changeBackground: false,
       change: false,
       changeTheme: false,
       reCompile: false,
@@ -1490,6 +1498,7 @@ describe('vchart updateSpec of different about label', () => {
     );
 
     expect(updateRes).toEqual({
+      changeBackground: false,
       change: false,
       changeTheme: false,
       reCompile: false,
@@ -1545,7 +1554,7 @@ describe('vchart updateSpec of different about label', () => {
     );
 
     expect(updateRes).toEqual({
-      changeBackground: undefined,
+      changeBackground: false,
       change: true,
       changeTheme: false,
       reCompile: true,
@@ -1601,6 +1610,7 @@ describe('vchart updateSpec of different about label', () => {
     );
 
     expect(updateRes).toEqual({
+      changeBackground: false,
       change: false,
       changeTheme: false,
       reCompile: false,
@@ -1704,7 +1714,7 @@ describe('vchart updateSpec should not throw error', () => {
 
     expect(updateRes).toEqual({
       change: false,
-      changeBackground: undefined,
+      changeBackground: false,
       changeTheme: false,
       reCompile: false,
       reMake: true,
@@ -1714,3 +1724,125 @@ describe('vchart updateSpec should not throw error', () => {
     });
   });
 });
+
+describe('vchart updateSpec of totalLabel', () => {
+  let container: HTMLElement;
+  let dom: HTMLElement;
+  let vchart: VChart;
+  beforeAll(() => {
+    container = createDiv();
+    dom = createDiv(container);
+    dom.id = 'container';
+    container.style.position = 'fixed';
+    container.style.width = '500px';
+    container.style.height = '500px';
+    container.style.top = '0px';
+    container.style.left = '0px';
+  });
+
+  afterAll(() => {
+    removeDom(container);
+    vchart.release();
+  });
+
+  it('should reCompile', () => {
+    const spec: ILineChartSpec = {
+      type: 'line',
+      data: {
+        values: [
+          { type: 'Nail polish', country: 'Africa', value: 4229 },
+          { type: 'Nail polish', country: 'EU', value: 4376 },
+          { type: 'Nail polish', country: 'China', value: 3054 },
+          { type: 'Nail polish', country: 'USA', value: 12814 },
+          { type: 'Eyebrow pencil', country: 'Africa', value: 3932 },
+          { type: 'Eyebrow pencil', country: 'EU', value: 3987 },
+          { type: 'Eyebrow pencil', country: 'China', value: 5067 },
+          { type: 'Eyebrow pencil', country: 'USA', value: 13012 },
+          { type: 'Rouge', country: 'Africa', value: 5221 },
+          { type: 'Rouge', country: 'EU', value: 3574 },
+          { type: 'Rouge', country: 'China', value: 7004 },
+          { type: 'Rouge', country: 'USA', value: 11624 },
+          { type: 'Lipstick', country: 'Africa', value: 9256 },
+          { type: 'Lipstick', country: 'EU', value: 4376 },
+          { type: 'Lipstick', country: 'China', value: 9054 },
+          { type: 'Lipstick', country: 'USA', value: 8814 },
+          { type: 'Eyeshadows', country: 'Africa', value: 3308 },
+          { type: 'Eyeshadows', country: 'EU', value: 4572 },
+          { type: 'Eyeshadows', country: 'China', value: 12043 },
+          { type: 'Eyeshadows', country: 'USA', value: 12998 },
+          { type: 'Eyeliner', country: 'Africa', value: 5432 },
+          { type: 'Eyeliner', country: 'EU', value: 3417 },
+          { type: 'Eyeliner', country: 'China', value: 15067 },
+          { type: 'Eyeliner', country: 'USA', value: 12321 },
+          { type: 'Foundation', country: 'Africa', value: 13701 },
+          { type: 'Foundation', country: 'EU', value: 5231 },
+          { type: 'Foundation', country: 'China', value: 10119 },
+          { type: 'Foundation', country: 'USA', value: 10342 },
+          { type: 'Lip gloss', country: 'Africa', value: 4008 },
+          { type: 'Lip gloss', country: 'EU', value: 4572 },
+          { type: 'Lip gloss', country: 'China', value: 12043 },
+          { type: 'Lip gloss', country: 'USA', value: 22998 },
+          { type: 'Mascara', country: 'Africa', value: 18712 },
+          { type: 'Mascara', country: 'EU', value: 6134 },
+          { type: 'Mascara', country: 'China', value: 10419 },
+          { type: 'Mascara', country: 'USA', value: 11261 }
+        ]
+      },
+      title: {
+        visible: true,
+        text: '100% stacked line chart of cosmetic products sales'
+      },
+      stack: true,
+      xField: 'type',
+      yField: 'value',
+      seriesField: 'country',
+      legends: [{ visible: true, position: 'middle', orient: 'bottom' }],
+      axes: [
+        {
+          orient: 'left',
+          label: {
+            formatMethod: (val: string | string[]) => {
+              return `${(+val * 100).toFixed(2)}%`;
+            }
+          }
+        }
+      ],
+      totalLabel: {
+        visible: true
+      },
+      point: {
+        visible: false
+      },
+      label: {
+        visible: true
+      }
+    };
+    vchart = new VChart(spec, {
+      dom
+    });
+    vchart.renderSync();
+    const updateRes = (vchart as any)._updateSpec(
+      {
+        ...spec,
+        totalLabel: {
+          ...spec.totalLabel,
+          style: {
+            fill: 'red'
+          }
+        }
+      },
+      false
+    );
+
+    expect(updateRes).toEqual({
+      changeBackground: false,
+      change: true,
+      changeTheme: false,
+      reCompile: true,
+      reMake: false,
+      reRender: true,
+      reSize: false,
+      reTransformSpec: false
+    });
+  });
+});

packages/vchart/__tests__/unit/function/register-function.test.ts

@@ -67,7 +67,7 @@ const spec = {
     visible: true,
     formatMethod: 'labelFormat'
   },
-  animation: true
+  animation: false
 };
 
 const spec2 = {
@@ -87,7 +87,7 @@ const spec2 = {
     visible: true,
     formatMethod: 'labelFormat'
   },
-  animation: true
+  animation: false
 };
 
 const spec3 = {
@@ -109,7 +109,7 @@ const spec3 = {
       fill: 'labelColor'
     }
   },
-  animation: true
+  animation: false
 };
 
 function labelFormat(key: string) {
@@ -142,7 +142,8 @@ describe('register function test', () => {
     VChart.registerFunction('labelFormat', labelFormat);
 
     chart = new VChart(spec as unknown as IBarChartSpec, {
-      renderCanvas: canvasDom
+      renderCanvas: canvasDom,
+      onError: () => {}
     });
 
     chart.renderSync();
@@ -165,7 +166,8 @@ describe('register function test', () => {
 
   test('instance function register', () => {
     chart2 = new VChart(spec2 as unknown as IBarChartSpec, {
-      renderCanvas: canvasDom
+      renderCanvas: canvasDom,
+      onError: () => {}
     });
 
     // 实例注册函数

packages/vchart/src/component/label/total-label.ts

@@ -63,6 +63,11 @@ export class TotalLabel extends BaseLabelComponent {
     this._initLabelComponent();
   }
 
+  reInit(spec?: any) {
+    super.reInit(spec);
+    this._initTextMark();
+  }
+
   protected _initTextMark() {
     const series = this._getSeries();
     if (series.getSpec().totalLabel?.visible) {

packages/vchart/src/core/vchart.ts

@@ -1038,6 +1038,7 @@ export class VChart implements IVChart {
     const lastSpec = this._spec;
 
     const result: IUpdateSpecResult = {
+      changeBackground: false,
       reTransformSpec: false,
       change: false,
       reMake: false,