From 76d1a7bbfc2415a9a29731370b758e2ddd4d3d6d Mon Sep 17 00:00:00 2001 From: xile611 Date: Wed, 10 Jul 2024 17:23:17 +0800 Subject: [PATCH] fix: label should not update when label is set in series, related #2928 --- .../__tests__/unit/core/update-spec.test.ts | 245 ++++++++++++++++++ packages/vchart/jest.config.js | 2 +- packages/vchart/src/chart/base/base-chart.ts | 5 + packages/vchart/src/component/label/label.ts | 4 +- 4 files changed, 254 insertions(+), 2 deletions(-) diff --git a/packages/vchart/__tests__/unit/core/update-spec.test.ts b/packages/vchart/__tests__/unit/core/update-spec.test.ts index 54b44c086..f0f7a5d0e 100644 --- a/packages/vchart/__tests__/unit/core/update-spec.test.ts +++ b/packages/vchart/__tests__/unit/core/update-spec.test.ts @@ -1,5 +1,6 @@ import type { IBarChartSpec } from '../../../src'; import { default as VChart } from '../../../src'; +import { series } from '../../../src/theme/builtin/common/series'; import { createDiv, removeDom } from '../../util/dom'; describe('vchart updateSpec test', () => { @@ -1003,4 +1004,248 @@ describe('vchart updateSpec of same spec', () => { reTransformSpec: false }); }); + + it('should not remake when label is in series', () => { + const spec = { + type: 'bar', + data: [ + { + id: 'barData', + values: [ + { + name: 'Apple', + value: 214480 + }, + { + name: 'Google', + value: 155506 + } + ] + } + ], + direction: 'horizontal', + series: [ + { + type: 'bar', + xField: 'value', + yField: 'name', + label: { + visible: true + } + } + ], + axes: [ + { + orient: 'bottom', + visible: false + } + ] + }; + vchart = new VChart(spec, { + dom + }); + vchart.renderSync(); + const updateRes = (vchart as any)._updateSpec(spec, false); + + expect(updateRes).toEqual({ + change: false, + reCompile: false, + reMake: false, + reRender: true, + reSize: false, + reTransformSpec: false + }); + }); + + it('should not remake when label is in chart', () => { + const spec = { + data: [ + { + id: 'barData', + values: [ + { + name: 'Apple', + value: 214480 + }, + { + name: 'Google', + value: 155506 + } + ] + } + ], + direction: 'horizontal', + type: 'bar', + xField: 'value', + yField: 'name', + label: { + visible: true + }, + axes: [ + { + orient: 'bottom', + visible: false + } + ] + }; + vchart = new VChart(spec, { + dom + }); + vchart.renderSync(); + const updateRes = (vchart as any)._updateSpec(spec, false); + + expect(updateRes).toEqual({ + change: false, + reCompile: false, + reMake: false, + reRender: true, + reSize: false, + reTransformSpec: false + }); + }); +}); + +describe('vchart updateSpec of different about label', () => { + 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 remake when label is in series update', () => { + const spec = { + type: 'bar', + data: [ + { + id: 'barData', + values: [ + { + name: 'Apple', + value: 214480 + }, + { + name: 'Google', + value: 155506 + } + ] + } + ], + direction: 'horizontal', + series: [ + { + type: 'bar', + xField: 'value', + yField: 'name', + label: { + visible: true + } + } + ], + axes: [ + { + orient: 'bottom', + visible: false + } + ] + }; + vchart = new VChart(spec, { + dom + }); + vchart.renderSync(); + const updateRes = (vchart as any)._updateSpec( + { + ...spec, + series: [ + { + type: 'bar', + xField: 'value', + yField: 'name', + label: { + visible: true, + position: 'center' + } + } + ] + }, + false + ); + + expect(updateRes).toEqual({ + change: false, + reCompile: false, + reMake: true, + reRender: true, + reSize: false, + reTransformSpec: false + }); + }); + + it('should remake when label is in chart update', () => { + const spec = { + data: [ + { + id: 'barData', + values: [ + { + name: 'Apple', + value: 214480 + }, + { + name: 'Google', + value: 155506 + } + ] + } + ], + direction: 'horizontal', + type: 'bar', + xField: 'value', + yField: 'name', + label: { + visible: true + }, + axes: [ + { + orient: 'bottom', + visible: false + } + ] + }; + vchart = new VChart(spec, { + dom + }); + vchart.renderSync(); + const updateRes = (vchart as any)._updateSpec( + { + ...spec, + label: { + visible: true, + position: 'top' + } + }, + false + ); + + expect(updateRes).toEqual({ + change: false, + reCompile: false, + reMake: true, + reRender: true, + reSize: false, + reTransformSpec: false + }); + }); }); diff --git a/packages/vchart/jest.config.js b/packages/vchart/jest.config.js index 81fc85213..9cf1a2bc7 100644 --- a/packages/vchart/jest.config.js +++ b/packages/vchart/jest.config.js @@ -17,7 +17,7 @@ module.exports = { } }, verbose: true, - collectCoverage: true, + // collectCoverage: true, coverageReporters: ['json-summary', 'lcov', 'text'], coveragePathIgnorePatterns: ['node_modules', '__tests__', 'interface.ts', '.d.ts', 'typings'], collectCoverageFrom: [ diff --git a/packages/vchart/src/chart/base/base-chart.ts b/packages/vchart/src/chart/base/base-chart.ts index ed5895794..ddc0f363b 100644 --- a/packages/vchart/src/chart/base/base-chart.ts +++ b/packages/vchart/src/chart/base/base-chart.ts @@ -874,9 +874,14 @@ export class BaseChart extends CompilableBase implements I }; } = {}; this._components.forEach(c => { + if (c.type === ComponentTypeEnum.label || c.type === ComponentTypeEnum.totalLabel) { + // label配置都会被解析到series中，所以不适合放在这里进行比对 + return; + } const compSpecKey = c.specKey || c.type; // 每一个组件获取对应的speck const cmpSpec = this._spec[compSpecKey] ?? {}; + if (isArray(cmpSpec)) { componentCache[compSpecKey] = componentCache[compSpecKey] || { specCount: cmpSpec.length, diff --git a/packages/vchart/src/component/label/label.ts b/packages/vchart/src/component/label/label.ts index 21b664214..82b2156cc 100644 --- a/packages/vchart/src/component/label/label.ts +++ b/packages/vchart/src/component/label/label.ts @@ -78,13 +78,15 @@ export class Label extends BaseLabelComponent { const hasVisibleLabel = seriesIndexes.some(seriesIndex => { const seriesInfo = chartSpecInfo.series[seriesIndex]; const { markLabelSpec = {} } = seriesInfo; + return Object.values(markLabelSpec).some( labelSpecList => Array.isArray(labelSpecList) && isLabelVisible(labelSpecList) ); }); if (hasVisibleLabel) { specInfo.push({ - spec: chartSpec, + spec: {}, + type: ComponentTypeEnum.label, specInfoPath: ['component', this.specKey, i], regionIndexes: [i]