From 01df4b06d6cb7b0ec858bf89182ba81d43e72053 Mon Sep 17 00:00:00 2001 From: hxada Date: Thu, 4 Jul 2024 13:53:11 +0800 Subject: [PATCH 1/6] feature(treemap): add custom cursor properties for treemap --- src/chart/treemap/TreemapSeries.ts | 19 ++- src/chart/treemap/TreemapView.ts | 5 +- test/treemap-cursor.html | 195 +++++++++++++++++++++++++++++ 3 files changed, 212 insertions(+), 7 deletions(-) create mode 100644 test/treemap-cursor.html diff --git a/src/chart/treemap/TreemapSeries.ts b/src/chart/treemap/TreemapSeries.ts index 571475e714..97fa8d698f 100644 --- a/src/chart/treemap/TreemapSeries.ts +++ b/src/chart/treemap/TreemapSeries.ts @@ -37,7 +37,9 @@ import { SeriesLabelOption, DefaultEmphasisFocus, AriaOptionMixin, - BlurScope + BlurScope, + OptionDataItemObject, + OptionDataValueNumeric, } from '../../util/types'; import GlobalModel from '../../model/Global'; import { LayoutRect } from '../../util/layout'; @@ -133,8 +135,11 @@ export interface TreemapSeriesLevelOption extends TreemapSeriesVisualOption, decal?: DecalObject[] | 'none' } -export interface TreemapSeriesNodeItemOption extends TreemapSeriesVisualOption, - TreemapStateOption, StatesOptionMixin { +export interface TreemapSeriesNodeItemOption extends + TreemapSeriesVisualOption, + TreemapStateOption, + OptionDataItemObject, + StatesOptionMixin { id?: OptionId name?: OptionName @@ -144,7 +149,9 @@ export interface TreemapSeriesNodeItemOption extends TreemapSeriesVisualOption, color?: ColorString[] | 'none' - decal?: DecalObject[] | 'none' + decal?: DecalObject[] | 'none', + + cursor?:string } export interface TreemapSeriesOption @@ -212,7 +219,7 @@ export interface TreemapSeriesOption levels?: TreemapSeriesLevelOption[] - data?: TreemapSeriesNodeItemOption[] + data?: (OptionDataValueNumeric | OptionDataValueNumeric[] | TreemapSeriesNodeItemOption)[] } class TreemapSeriesModel extends SeriesModel { @@ -362,7 +369,7 @@ class TreemapSeriesModel extends SeriesModel { // Create a virtual root. const root: TreemapSeriesNodeItemOption = { name: option.name, - children: option.data + children: option.data.map(item => item as TreemapSeriesNodeItemOption) }; completeTreeValue(root); diff --git a/src/chart/treemap/TreemapView.ts b/src/chart/treemap/TreemapView.ts index bc59c28544..0ad1377e28 100644 --- a/src/chart/treemap/TreemapView.ts +++ b/src/chart/treemap/TreemapView.ts @@ -667,7 +667,7 @@ class TreemapView extends ChartView { ? this._rootToNode({node: node}) : this._zoomToNode({node: node}); } - }); + }); } /** @@ -877,6 +877,9 @@ function renderNode( // Only for enabling highlight/downplay. data.setItemGraphicEl(thisNode.dataIndex, group); + const cursorStyle = nodeModel.getShallow('cursor'); + cursorStyle && content.attr('cursor', cursorStyle); + enableHoverFocus(group, focusOrIndices, blurScope); } diff --git a/test/treemap-cursor.html b/test/treemap-cursor.html new file mode 100644 index 0000000000..c37be4589f --- /dev/null +++ b/test/treemap-cursor.html @@ -0,0 +1,195 @@ + + + + + + + + + + + + + + +
+
+ + + + From c47adb2db8dc606d0c452a9c8d0645a6bffe6765 Mon Sep 17 00:00:00 2001 From: hxada Date: Thu, 4 Jul 2024 14:03:01 +0800 Subject: [PATCH 2/6] Delete irrelevant code --- test/treemap-cursor.html | 2 -- 1 file changed, 2 deletions(-) diff --git a/test/treemap-cursor.html b/test/treemap-cursor.html index c37be4589f..2a415d4ccb 100644 --- a/test/treemap-cursor.html +++ b/test/treemap-cursor.html @@ -47,8 +47,6 @@ }); chart.setOption({ - cursor:'crosshair', - series: [ { name: '矩形树图', From f67bf25910e53a113107748409c2635cfc895d8c Mon Sep 17 00:00:00 2001 From: huanxi Date: Fri, 26 Jul 2024 12:28:30 +0800 Subject: [PATCH 3/6] Fix: Ensure TreemapSeriesNodeItemOption type for root --- src/chart/treemap/TreemapSeries.ts | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/chart/treemap/TreemapSeries.ts b/src/chart/treemap/TreemapSeries.ts index 97fa8d698f..f892936a43 100644 --- a/src/chart/treemap/TreemapSeries.ts +++ b/src/chart/treemap/TreemapSeries.ts @@ -151,7 +151,7 @@ export interface TreemapSeriesNodeItemOption extends decal?: DecalObject[] | 'none', - cursor?:string + cursor?: string } export interface TreemapSeriesOption @@ -367,10 +367,7 @@ class TreemapSeriesModel extends SeriesModel { */ getInitialData(option: TreemapSeriesOption, ecModel: GlobalModel) { // Create a virtual root. - const root: TreemapSeriesNodeItemOption = { - name: option.name, - children: option.data.map(item => item as TreemapSeriesNodeItemOption) - }; + const root = { name: option.name, children: option.data } as TreemapSeriesNodeItemOption; completeTreeValue(root); From ae37a3e2490dab3685742f995a085e8b31caea50 Mon Sep 17 00:00:00 2001 From: adaelixir Date: Fri, 26 Jul 2024 14:25:14 +0800 Subject: [PATCH 4/6] FIX: Remove Code Changes Not Related to Cursor Settings --- src/chart/treemap/TreemapSeries.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/chart/treemap/TreemapSeries.ts b/src/chart/treemap/TreemapSeries.ts index f892936a43..9441238d28 100644 --- a/src/chart/treemap/TreemapSeries.ts +++ b/src/chart/treemap/TreemapSeries.ts @@ -38,8 +38,6 @@ import { DefaultEmphasisFocus, AriaOptionMixin, BlurScope, - OptionDataItemObject, - OptionDataValueNumeric, } from '../../util/types'; import GlobalModel from '../../model/Global'; import { LayoutRect } from '../../util/layout'; @@ -138,7 +136,6 @@ export interface TreemapSeriesLevelOption extends TreemapSeriesVisualOption, export interface TreemapSeriesNodeItemOption extends TreemapSeriesVisualOption, TreemapStateOption, - OptionDataItemObject, StatesOptionMixin { id?: OptionId name?: OptionName @@ -219,7 +216,7 @@ export interface TreemapSeriesOption levels?: TreemapSeriesLevelOption[] - data?: (OptionDataValueNumeric | OptionDataValueNumeric[] | TreemapSeriesNodeItemOption)[] + data?: TreemapSeriesNodeItemOption[] } class TreemapSeriesModel extends SeriesModel { @@ -367,7 +364,10 @@ class TreemapSeriesModel extends SeriesModel { */ getInitialData(option: TreemapSeriesOption, ecModel: GlobalModel) { // Create a virtual root. - const root = { name: option.name, children: option.data } as TreemapSeriesNodeItemOption; + const root: TreemapSeriesNodeItemOption = { + name: option.name, + children: option.data + }; completeTreeValue(root); From 392f8cd100bf251474130b496a62dc6110234f62 Mon Sep 17 00:00:00 2001 From: adaelixir Date: Fri, 26 Jul 2024 14:29:46 +0800 Subject: [PATCH 5/6] FIX: Remove Code Changes Not Related to Cursor Settings --- src/chart/treemap/TreemapSeries.ts | 8 +++----- src/chart/treemap/TreemapView.ts | 12 ++++++------ 2 files changed, 9 insertions(+), 11 deletions(-) diff --git a/src/chart/treemap/TreemapSeries.ts b/src/chart/treemap/TreemapSeries.ts index 9441238d28..a38446ed85 100644 --- a/src/chart/treemap/TreemapSeries.ts +++ b/src/chart/treemap/TreemapSeries.ts @@ -37,7 +37,7 @@ import { SeriesLabelOption, DefaultEmphasisFocus, AriaOptionMixin, - BlurScope, + BlurScope } from '../../util/types'; import GlobalModel from '../../model/Global'; import { LayoutRect } from '../../util/layout'; @@ -133,10 +133,8 @@ export interface TreemapSeriesLevelOption extends TreemapSeriesVisualOption, decal?: DecalObject[] | 'none' } -export interface TreemapSeriesNodeItemOption extends - TreemapSeriesVisualOption, - TreemapStateOption, - StatesOptionMixin { +export interface TreemapSeriesNodeItemOption extends TreemapSeriesVisualOption, + TreemapStateOption, StatesOptionMixin { id?: OptionId name?: OptionName diff --git a/src/chart/treemap/TreemapView.ts b/src/chart/treemap/TreemapView.ts index 0ad1377e28..112a455b8e 100644 --- a/src/chart/treemap/TreemapView.ts +++ b/src/chart/treemap/TreemapView.ts @@ -661,12 +661,12 @@ class TreemapView extends ChartView { } (this._breadcrumb || (this._breadcrumb = new Breadcrumb(this.group))) - .render(seriesModel, api, targetInfo.node, (node) => { - if (this._state !== 'animating') { - helper.aboveViewRoot(seriesModel.getViewRoot(), node) - ? this._rootToNode({node: node}) - : this._zoomToNode({node: node}); - } + .render(seriesModel, api, targetInfo.node, (node) => { + if (this._state !== 'animating') { + helper.aboveViewRoot(seriesModel.getViewRoot(), node) + ? this._rootToNode({node: node}) + : this._zoomToNode({node: node}); + } }); } From 17c680b87558a1d7234bac3f829aea98ac6841d6 Mon Sep 17 00:00:00 2001 From: adaelixir Date: Fri, 26 Jul 2024 14:35:10 +0800 Subject: [PATCH 6/6] FIX: Remove Code Changes Not Related to Cursor Settings --- src/chart/treemap/TreemapView.ts | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/chart/treemap/TreemapView.ts b/src/chart/treemap/TreemapView.ts index 112a455b8e..a0b892e1ee 100644 --- a/src/chart/treemap/TreemapView.ts +++ b/src/chart/treemap/TreemapView.ts @@ -661,13 +661,13 @@ class TreemapView extends ChartView { } (this._breadcrumb || (this._breadcrumb = new Breadcrumb(this.group))) - .render(seriesModel, api, targetInfo.node, (node) => { - if (this._state !== 'animating') { - helper.aboveViewRoot(seriesModel.getViewRoot(), node) - ? this._rootToNode({node: node}) - : this._zoomToNode({node: node}); - } - }); + .render(seriesModel, api, targetInfo.node, (node) => { + if (this._state !== 'animating') { + helper.aboveViewRoot(seriesModel.getViewRoot(), node) + ? this._rootToNode({node: node}) + : this._zoomToNode({node: node}); + } + }); } /**