From af37a1b6bec7c15404c90ae47033c91cf4d965d6 Mon Sep 17 00:00:00 2001 From: xile611 Date: Fri, 26 Jul 2024 15:02:14 +0800 Subject: [PATCH 1/3] fix: fix issue of `updateSpec` when visible of grid in axis change, fix #3004 --- .../__tests__/unit/core/update-spec.test.ts | 155 ++++++++++++++++++ .../vchart/src/component/axis/base-axis.ts | 14 ++ 2 files changed, 169 insertions(+) diff --git a/packages/vchart/__tests__/unit/core/update-spec.test.ts b/packages/vchart/__tests__/unit/core/update-spec.test.ts index e36ef1befc..061ba59e8a 100644 --- a/packages/vchart/__tests__/unit/core/update-spec.test.ts +++ b/packages/vchart/__tests__/unit/core/update-spec.test.ts @@ -1253,4 +1253,159 @@ describe('vchart updateSpec of different about label', () => { reTransformSpec: false }); }); + + it('should remake when visible of axis grid change', () => { + 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' } + ] + } + ], + label: { + visible: true + }, + xField: 'x', + yField: 'y', + seriesField: 'from', + axes: [ + { + orient: 'bottom', + type: 'band' as const + }, + { + orient: 'left', + type: 'linear' as const, + grid: { + visible: true + } + } + ] + }; + vchart = new VChart(spec, { + dom + }); + vchart.renderSync(); + const updateRes = (vchart as any)._updateSpec( + { + ...spec, + axes: [ + { + orient: 'bottom', + type: 'band' as const + }, + { + orient: 'left', + type: 'linear' as const, + grid: { + visible: false + } + } + ] + }, + false + ); + + expect(updateRes).toEqual({ + change: false, + changeTheme: false, + reCompile: false, + reMake: true, + reRender: true, + reSize: false, + reTransformSpec: false + }); + }); + + it('should recompile when `alternateColor` of axis grid change', () => { + 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' } + ] + } + ], + label: { + visible: true + }, + xField: 'x', + yField: 'y', + seriesField: 'from', + axes: [ + { + orient: 'bottom', + type: 'band' as const + }, + { + orient: 'left', + type: 'linear' as const, + grid: { + visible: true + } + } + ] + }; + vchart = new VChart(spec, { + dom + }); + vchart.renderSync(); + const updateRes = (vchart as any)._updateSpec( + { + ...spec, + axes: [ + { + orient: 'bottom', + type: 'band' as const + }, + { + orient: 'left', + type: 'linear' as const, + grid: { + visible: true, + alternateColor: ['pink', 'green'] + } + } + ] + }, + false + ); + + expect(updateRes).toEqual({ + change: false, + changeTheme: false, + reCompile: true, + reMake: false, + reRender: true, + reSize: false, + reTransformSpec: false + }); + }); }); diff --git a/packages/vchart/src/component/axis/base-axis.ts b/packages/vchart/src/component/axis/base-axis.ts index 6e2ea1f417..f31991b6d9 100644 --- a/packages/vchart/src/component/axis/base-axis.ts +++ b/packages/vchart/src/component/axis/base-axis.ts @@ -406,6 +406,10 @@ export abstract class AxisComponent { + return prevSpec?.[k]?.visible !== spec?.[k]?.visible; + }); + + if (!result.reMake && !isEqual(prevSpec, spec)) { + result.reCompile = true; + return result; + } + return result; } From e9de61b11e6eb4fe90aebf608090e857f09e5477 Mon Sep 17 00:00:00 2001 From: xile611 Date: Fri, 26 Jul 2024 15:06:33 +0800 Subject: [PATCH 2/3] docs: update changlog of rush --- .../vchart/fix-update-of-axis_2024-07-26-07-06.json | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 common/changes/@visactor/vchart/fix-update-of-axis_2024-07-26-07-06.json diff --git a/common/changes/@visactor/vchart/fix-update-of-axis_2024-07-26-07-06.json b/common/changes/@visactor/vchart/fix-update-of-axis_2024-07-26-07-06.json new file mode 100644 index 0000000000..aafd60f585 --- /dev/null +++ b/common/changes/@visactor/vchart/fix-update-of-axis_2024-07-26-07-06.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "comment": "fix: fix issue of `updateSpec` when visible of grid in axis change, fix #3004\n\n", + "type": "none", + "packageName": "@visactor/vchart" + } + ], + "packageName": "@visactor/vchart", + "email": "dingling112@gmail.com" +} \ No newline at end of file From 2cfb9501c015a328697d7b3c1ff00b189fb67d56 Mon Sep 17 00:00:00 2001 From: xile611 Date: Fri, 26 Jul 2024 15:15:10 +0800 Subject: [PATCH 3/3] fix: fix update type of chart when axis update --- packages/vchart/__tests__/unit/core/update-spec.test.ts | 4 ++-- packages/vchart/src/component/axis/base-axis.ts | 5 ----- 2 files changed, 2 insertions(+), 7 deletions(-) diff --git a/packages/vchart/__tests__/unit/core/update-spec.test.ts b/packages/vchart/__tests__/unit/core/update-spec.test.ts index 061ba59e8a..f52e8a5f24 100644 --- a/packages/vchart/__tests__/unit/core/update-spec.test.ts +++ b/packages/vchart/__tests__/unit/core/update-spec.test.ts @@ -1331,7 +1331,7 @@ describe('vchart updateSpec of different about label', () => { }); }); - it('should recompile when `alternateColor` of axis grid change', () => { + it('should reRender when `alternateColor` of axis grid change', () => { const spec = { type: 'area', data: [ @@ -1401,7 +1401,7 @@ describe('vchart updateSpec of different about label', () => { expect(updateRes).toEqual({ change: false, changeTheme: false, - reCompile: true, + reCompile: false, reMake: false, reRender: true, reSize: false, diff --git a/packages/vchart/src/component/axis/base-axis.ts b/packages/vchart/src/component/axis/base-axis.ts index f31991b6d9..1c76178c5a 100644 --- a/packages/vchart/src/component/axis/base-axis.ts +++ b/packages/vchart/src/component/axis/base-axis.ts @@ -423,11 +423,6 @@ export abstract class AxisComponent