diff --git a/common/changes/@visactor/vchart/fix-indicator-switch-visible_2025-01-26-06-34.json b/common/changes/@visactor/vchart/fix-indicator-switch-visible_2025-01-26-06-34.json new file mode 100644 index 0000000000..02fead7bca --- /dev/null +++ b/common/changes/@visactor/vchart/fix-indicator-switch-visible_2025-01-26-06-34.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "comment": "fix: indicator should show when switch `visible`, fix #3675\n\n", + "type": "none", + "packageName": "@visactor/vchart" + } + ], + "packageName": "@visactor/vchart", + "email": "dingling112@gmail.com" +} \ No newline at end of file diff --git a/packages/vchart/__tests__/unit/core/update-spec.test.ts b/packages/vchart/__tests__/unit/core/update-spec.test.ts index 42adbfaaaf..3d84b9853d 100644 --- a/packages/vchart/__tests__/unit/core/update-spec.test.ts +++ b/packages/vchart/__tests__/unit/core/update-spec.test.ts @@ -2246,3 +2246,172 @@ describe('vchart updateSpec of different title', () => { }); }); }); + +describe('vchart updateSpec of different indicator', () => { + 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 `visible` of indicator change to `false`', () => { + const spec = { + type: 'area', + data: [ + { + id: 'area', + values: [ + { x: '1990', y: 110, from: 'video ad' }, + { x: '1995', y: 160, from: 'video ad' }, + { x: '2000', y: 230, from: 'video ad' }, + { x: '2005', y: 300, from: 'video ad' }, + { x: '2010', y: 448, from: 'video ad' }, + { x: '2015', y: 500, from: 'video ad' }, + { x: '1990', y: 120, from: 'email marketing' }, + { x: '1995', y: 150, from: 'email marketing' }, + { x: '2000', y: 200, from: 'email marketing' }, + { x: '2005', y: 210, from: 'email marketing' }, + { x: '2010', y: 300, from: 'email marketing' }, + { x: '2015', y: 320, from: 'email marketing' } + ] + } + ], + title: { + visible: true, + text: 'test' + }, + xField: 'x', + yField: 'y', + seriesField: 'from', + indicator: { + title: { + visible: true, + style: { + text: 'bbb' + } + }, + content: [ + { + visible: true, + style: { + fontSize: 20, + text: '2222' + } + } + ] + } + }; + vchart = new VChart(spec, { + dom + }); + vchart.renderSync(); + const updateRes = (vchart as any)._updateSpec( + { + ...spec, + indicator: { + ...spec.indicator, + visible: false + } + }, + false + ); + + expect(updateRes).toEqual({ + changeBackground: false, + change: true, + changeTheme: false, + reCompile: true, + reMake: false, + reRender: true, + reSize: false, + reTransformSpec: false + }); + }); + + it('should reMake when `visible` of indicator change from `false` to `true`', () => { + const spec = { + type: 'area', + data: [ + { + id: 'area', + values: [ + { x: '1990', y: 110, from: 'video ad' }, + { x: '1995', y: 160, from: 'video ad' }, + { x: '2000', y: 230, from: 'video ad' }, + { x: '2005', y: 300, from: 'video ad' }, + { x: '2010', y: 448, from: 'video ad' }, + { x: '2015', y: 500, from: 'video ad' }, + { x: '1990', y: 120, from: 'email marketing' }, + { x: '1995', y: 150, from: 'email marketing' }, + { x: '2000', y: 200, from: 'email marketing' }, + { x: '2005', y: 210, from: 'email marketing' }, + { x: '2010', y: 300, from: 'email marketing' }, + { x: '2015', y: 320, from: 'email marketing' } + ] + } + ], + title: { + visible: true, + text: 'test' + }, + xField: 'x', + yField: 'y', + seriesField: 'from', + indicator: { + title: { + visible: false, + style: { + text: 'bbb' + } + }, + content: [ + { + visible: true, + style: { + fontSize: 20, + text: '2222' + } + } + ] + } + }; + vchart = new VChart(spec, { + dom + }); + vchart.renderSync(); + const updateRes = (vchart as any)._updateSpec( + { + ...spec, + indicator: { + ...spec.indicator, + visible: true + } + }, + false + ); + + expect(updateRes).toEqual({ + changeBackground: false, + change: true, + changeTheme: false, + reCompile: true, + reMake: false, + reRender: true, + reSize: false, + reTransformSpec: false + }); + }); +}); diff --git a/packages/vchart/src/chart/base/base-chart.ts b/packages/vchart/src/chart/base/base-chart.ts index 58e69de75c..a96c91f953 100644 --- a/packages/vchart/src/chart/base/base-chart.ts +++ b/packages/vchart/src/chart/base/base-chart.ts @@ -876,7 +876,8 @@ export class BaseChart extends CompilableBase implements I const checkVisibleComponents: Record = { [ComponentTypeEnum.title]: true, [ComponentTypeEnum.brush]: true, - [ComponentTypeEnum.mapLabel]: true + [ComponentTypeEnum.mapLabel]: true, + [ComponentTypeEnum.indicator]: true }; this._components.forEach(c => {