@orbcharts/plugins-basic 3.0.0-alpha.68 → 3.0.0-alpha.70

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (79) hide show
  1. package/LICENSE +200 -200
  2. package/dist/orbcharts-plugins-basic.es.js +4838 -4760
  3. package/dist/orbcharts-plugins-basic.umd.js +15 -14
  4. package/dist/src/utils/d3Graphics.d.ts +10 -0
  5. package/package.json +42 -42
  6. package/src/base/BaseBarStack.ts +779 -779
  7. package/src/base/BaseBars.ts +764 -764
  8. package/src/base/BaseBarsTriangle.ts +672 -672
  9. package/src/base/BaseDots.ts +513 -513
  10. package/src/base/BaseGroupAxis.ts +675 -652
  11. package/src/base/BaseLegend.ts +642 -642
  12. package/src/base/BaseLineAreas.ts +628 -628
  13. package/src/base/BaseLines.ts +704 -704
  14. package/src/base/BaseValueAxis.ts +578 -578
  15. package/src/base/types.ts +2 -2
  16. package/src/grid/defaults.ts +128 -128
  17. package/src/grid/gridObservables.ts +543 -543
  18. package/src/grid/index.ts +15 -15
  19. package/src/grid/plugins/BarStack.ts +43 -43
  20. package/src/grid/plugins/Bars.ts +44 -44
  21. package/src/grid/plugins/BarsPN.ts +41 -41
  22. package/src/grid/plugins/BarsTriangle.ts +42 -42
  23. package/src/grid/plugins/Dots.ts +37 -37
  24. package/src/grid/plugins/GridLegend.ts +59 -59
  25. package/src/grid/plugins/GroupAux.ts +1014 -991
  26. package/src/grid/plugins/GroupAxis.ts +36 -36
  27. package/src/grid/plugins/LineAreas.ts +40 -40
  28. package/src/grid/plugins/Lines.ts +40 -40
  29. package/src/grid/plugins/ScalingArea.ts +176 -174
  30. package/src/grid/plugins/ValueAxis.ts +36 -36
  31. package/src/grid/plugins/ValueStackAxis.ts +38 -38
  32. package/src/grid/types.ts +123 -123
  33. package/src/index.ts +9 -9
  34. package/src/multiGrid/defaults.ts +158 -158
  35. package/src/multiGrid/index.ts +13 -13
  36. package/src/multiGrid/multiGridObservables.ts +49 -49
  37. package/src/multiGrid/plugins/MultiBarStack.ts +78 -78
  38. package/src/multiGrid/plugins/MultiBars.ts +77 -77
  39. package/src/multiGrid/plugins/MultiBarsTriangle.ts +77 -77
  40. package/src/multiGrid/plugins/MultiDots.ts +65 -65
  41. package/src/multiGrid/plugins/MultiGridLegend.ts +89 -89
  42. package/src/multiGrid/plugins/MultiGroupAxis.ts +70 -70
  43. package/src/multiGrid/plugins/MultiLineAreas.ts +77 -77
  44. package/src/multiGrid/plugins/MultiLines.ts +77 -77
  45. package/src/multiGrid/plugins/MultiValueAxis.ts +69 -69
  46. package/src/multiGrid/plugins/MultiValueStackAxis.ts +69 -69
  47. package/src/multiGrid/plugins/OverlappingValueAxes.ts +170 -170
  48. package/src/multiGrid/plugins/OverlappingValueStackAxes.ts +169 -169
  49. package/src/multiGrid/types.ts +72 -72
  50. package/src/noneData/defaults.ts +102 -102
  51. package/src/noneData/index.ts +3 -3
  52. package/src/noneData/plugins/Container.ts +10 -10
  53. package/src/noneData/plugins/Tooltip.ts +327 -327
  54. package/src/noneData/types.ts +26 -26
  55. package/src/series/defaults.ts +149 -149
  56. package/src/series/index.ts +9 -9
  57. package/src/series/plugins/Bubbles.ts +545 -545
  58. package/src/series/plugins/Pie.ts +584 -584
  59. package/src/series/plugins/PieEventTexts.ts +262 -262
  60. package/src/series/plugins/PieLabels.ts +604 -598
  61. package/src/series/plugins/Rose.ts +481 -481
  62. package/src/series/plugins/RoseLabels.ts +571 -565
  63. package/src/series/plugins/SeriesLegend.ts +59 -59
  64. package/src/series/seriesObservables.ts +145 -145
  65. package/src/series/seriesUtils.ts +51 -51
  66. package/src/series/types.ts +87 -87
  67. package/src/tree/defaults.ts +23 -23
  68. package/src/tree/index.ts +3 -3
  69. package/src/tree/plugins/TreeLegend.ts +59 -59
  70. package/src/tree/plugins/TreeMap.ts +305 -305
  71. package/src/tree/types.ts +23 -23
  72. package/src/utils/commonUtils.ts +21 -21
  73. package/src/utils/d3Graphics.ts +174 -124
  74. package/src/utils/d3Utils.ts +73 -73
  75. package/src/utils/observables.ts +14 -14
  76. package/src/utils/orbchartsUtils.ts +100 -100
  77. package/tsconfig.base.json +13 -13
  78. package/tsconfig.json +2 -2
  79. package/vite.config.js +22 -22
@@ -1,305 +1,305 @@
1
- import * as d3 from 'd3'
2
- import {
3
- Subject,
4
- Observable,
5
- of,
6
- takeUntil,
7
- map,
8
- switchMap,
9
- combineLatest,
10
- debounceTime,
11
- distinctUntilChanged } from 'rxjs'
12
- import {
13
- defineTreePlugin } from '@orbcharts/core'
14
- import type { Layout, ComputedDataTree, DataFormatterTree, ChartParams } from '@orbcharts/core'
15
- import type { TreeMapParams } from '../types'
16
- import { DEFAULT_TREE_MAP_PARAMS } from '../defaults'
17
- import { getClassName, getColor } from '../../utils/orbchartsUtils'
18
-
19
- const pluginName = 'TreeMap'
20
- const treeClassName = getClassName(pluginName, 'tree')
21
- const tileClassName = getClassName(pluginName, 'tile')
22
-
23
- function renderTree ({ selection, treeData, fullParams, fullChartParams, textSizePx }: {
24
- selection: d3.Selection<any, any, any, any>
25
- treeData: d3.HierarchyRectangularNode<ComputedDataTree>[]
26
- fullParams: TreeMapParams
27
- fullChartParams: ChartParams
28
- textSizePx: number
29
- }) {
30
- const padding = textSizePx / 2
31
- const lineHeight = textSizePx // 行高
32
-
33
- const cell = selection.selectAll<SVGGElement, d3.HierarchyRectangularNode<ComputedDataTree>>(`g.${treeClassName}`)
34
- .data(treeData, d => d.data.id)
35
- .join('g')
36
- .attr('class', treeClassName)
37
-
38
- cell
39
- // .transition()
40
- // .duration(fullChartParams.transitionDuration)
41
- .attr('transform', (d) => !d.x0 || !d.y0 ? null : `translate(${d.x0},${d.y0})`)
42
- .each((d, i, nodes) => {
43
- const eachCell = d3.select(nodes[i])
44
-
45
- const tile = eachCell
46
- .selectAll<SVGRectElement, d3.HierarchyRectangularNode<ComputedDataTree>>(`rect.${tileClassName}`)
47
- .data([d], d => d.data.id)
48
- .join('rect')
49
- .attr("id", d => d.data.id)
50
- .attr("class", tileClassName)
51
- .attr('cursor', 'pointer')
52
- .attr("width", (d) => d.x1 - d.x0)
53
- .attr("height", (d) => d.y1 - d.y0)
54
- .attr('fill', d => d.data.color)
55
- .attr('data-name', d => d.data.label)
56
- .attr('data-category', d => d.data.categoryLabel)
57
- .attr('data-value', d => d.data.value)
58
-
59
- const label = eachCell
60
- .selectAll('g')
61
- .data([d])
62
- .join('g')
63
- .each((d, i, nodes) => {
64
- const eachLabel = d3.select(nodes[i])
65
- const text = eachLabel
66
- .selectAll('text')
67
- .data([d])
68
- .join('text')
69
- .text(d => d.data.label)
70
- .attr('dominant-baseline', 'hanging')
71
- .attr("x", padding)
72
- .attr("y", padding)
73
- .attr('font-size', fullChartParams.styles.textSize)
74
- .each(function(d) {
75
- // -- tspan(自動斷行) --
76
- const textElement = d3.select(this);
77
- const words = d.data.label.split(/\s+/).reverse() // 以空隔分割字串
78
- let word;
79
- let line: string[] = []
80
- const x = textElement.attr("x")
81
- let y = textElement.attr("y")
82
- let dy = 0
83
- let tspan = textElement
84
- .text(null)
85
- .append("tspan")
86
- .attr('cursor', 'pointer')
87
- .attr('fill', getColor(fullParams.labelColorType, fullChartParams))
88
- .attr('font-size', fullChartParams.styles.textSize)
89
- .attr("x", x)
90
- .attr("y", y)
91
-
92
- while (word = words.pop()) {
93
- line.push(word)
94
- tspan.text(line.join(" "))
95
- if (tspan.node().getComputedTextLength() > (d.x1 - d.x0 - padding)) {
96
- line.pop()
97
- tspan.text(line.join(" "))
98
- line = [word]
99
- dy += lineHeight
100
- tspan = textElement
101
- .append("tspan")
102
- .attr('cursor', 'pointer')
103
- .attr('fill', getColor(fullParams.labelColorType, fullChartParams))
104
- .attr('font-size', fullChartParams.styles.textSize)
105
- .attr("x", x)
106
- .attr("y", y)
107
- .attr("dy", dy + "px")
108
- .text(word)
109
- }
110
- }
111
- })
112
- })
113
-
114
- })
115
-
116
- return cell
117
- }
118
-
119
- function highlight ({ selection, ids, fullChartParams }: {
120
- selection: d3.Selection<any, d3.HierarchyRectangularNode<ComputedDataTree>, any, any>
121
- ids: string[]
122
- fullChartParams: ChartParams
123
- }) {
124
- selection.interrupt('highlight')
125
-
126
- if (!ids.length) {
127
- // remove highlight
128
- selection
129
- .transition('highlight')
130
- .duration(200)
131
- .style('opacity', 1)
132
- return
133
- }
134
-
135
- selection
136
- .each((d, i, n) => {
137
- if (ids.includes(d.data.id)) {
138
- d3.select(n[i])
139
- .style('opacity', 1)
140
- } else {
141
- d3.select(n[i])
142
- .style('opacity', fullChartParams.styles.unhighlightedOpacity)
143
- }
144
- })
145
- }
146
-
147
- export const TreeMap = defineTreePlugin(pluginName, DEFAULT_TREE_MAP_PARAMS)(({ selection, name, subject, observer }) => {
148
- const destroy$ = new Subject()
149
-
150
- const treeData$ = combineLatest({
151
- layout: observer.layout$,
152
- visibleComputedData: observer.visibleComputedData$,
153
- fullParams: observer.fullParams$,
154
- fullDataFormatter: observer.fullDataFormatter$,
155
- fullChartParams: observer.fullChartParams$
156
- }).pipe(
157
- takeUntil(destroy$),
158
- switchMap(async d => d),
159
- map(data => {
160
- const treemap = d3.treemap()
161
- .size([data.layout.width, data.layout.height])
162
- .paddingInner(data.fullParams.paddingInner)
163
- .paddingOuter(data.fullParams.paddingOuter)
164
- .round(true)
165
- .tile(d3.treemapSquarify.ratio(data.fullParams.squarifyRatio))
166
-
167
- const root = d3.hierarchy(data.visibleComputedData)
168
- .sum(d => d.value)
169
- .sort(data.fullParams.sort as (a: any, b: any) => number)
170
-
171
- //call treemap
172
- treemap(root)
173
-
174
- const treeData: d3.HierarchyRectangularNode<ComputedDataTree>[] = root.leaves() as any
175
-
176
- return treeData
177
- })
178
- )
179
-
180
- const cellSelection$ = combineLatest({
181
- selection: of(selection),
182
- treeData: treeData$,
183
- fullParams: observer.fullParams$,
184
- fullChartParams: observer.fullChartParams$,
185
- textSizePx: observer.textSizePx$
186
- }).pipe(
187
- takeUntil(destroy$),
188
- switchMap(async d => d),
189
- map(data => {
190
- return renderTree({
191
- selection,
192
- treeData: data.treeData,
193
- fullParams: data.fullParams,
194
- fullChartParams: data.fullChartParams,
195
- textSizePx: data.textSizePx
196
- })
197
- })
198
- )
199
-
200
- const highlightTarget$ = observer.fullChartParams$.pipe(
201
- takeUntil(destroy$),
202
- map(d => d.highlightTarget),
203
- distinctUntilChanged()
204
- )
205
-
206
- combineLatest({
207
- cellSelection: cellSelection$,
208
- computedData: observer.computedData$,
209
- treeData: treeData$,
210
- fullParams: observer.fullParams$,
211
- fullChartParams: observer.fullChartParams$,
212
- highlightTarget: highlightTarget$,
213
- CategoryDataMap: observer.CategoryDataMap$,
214
- }).pipe(
215
- takeUntil(destroy$),
216
- switchMap(async d => d)
217
- ).subscribe(data => {
218
- data.cellSelection
219
- .on('mouseover', (event, datum) => {
220
- event.stopPropagation()
221
-
222
- subject.event$.next({
223
- type: 'tree',
224
- eventName: 'mouseover',
225
- pluginName,
226
- highlightTarget: data.highlightTarget,
227
- datum: datum.data,
228
- category: data.CategoryDataMap.get(datum.data.categoryLabel)!,
229
- categoryIndex: datum.data.categoryIndex,
230
- categoryLabel: datum.data.categoryLabel,
231
- event,
232
- data: data.computedData
233
- })
234
- })
235
- .on('mousemove', (event, datum) => {
236
- event.stopPropagation()
237
-
238
- subject.event$.next({
239
- type: 'tree',
240
- eventName: 'mousemove',
241
- pluginName,
242
- highlightTarget: data.highlightTarget,
243
- datum: datum.data,
244
- category: data.CategoryDataMap.get(datum.data.categoryLabel)!,
245
- categoryIndex: datum.data.categoryIndex,
246
- categoryLabel: datum.data.categoryLabel,
247
- event,
248
- data: data.computedData
249
- })
250
- })
251
- .on('mouseout', (event, datum) => {
252
- event.stopPropagation()
253
-
254
- subject.event$.next({
255
- type: 'tree',
256
- eventName: 'mouseout',
257
- pluginName,
258
- highlightTarget: data.highlightTarget,
259
- datum: datum.data,
260
- category: data.CategoryDataMap.get(datum.data.categoryLabel)!,
261
- categoryIndex: datum.data.categoryIndex,
262
- categoryLabel: datum.data.categoryLabel,
263
- event,
264
- data: data.computedData
265
- })
266
- })
267
- .on('click', (event, datum) => {
268
- event.stopPropagation()
269
-
270
- subject.event$.next({
271
- type: 'tree',
272
- eventName: 'click',
273
- pluginName,
274
- highlightTarget: data.highlightTarget,
275
- datum: datum.data,
276
- category: data.CategoryDataMap.get(datum.data.categoryLabel)!,
277
- categoryIndex: datum.data.categoryIndex,
278
- categoryLabel: datum.data.categoryLabel,
279
- event,
280
- data: data.computedData
281
- })
282
- })
283
- })
284
-
285
- combineLatest({
286
- cellSelection: cellSelection$,
287
- highlight: observer.treeHighlight$.pipe(
288
- map(data => data.map(d => d.id))
289
- ),
290
- fullChartParams: observer.fullChartParams$
291
- }).pipe(
292
- takeUntil(destroy$),
293
- switchMap(async d => d)
294
- ).subscribe(data => {
295
- highlight({
296
- selection: data.cellSelection,
297
- ids: data.highlight,
298
- fullChartParams: data.fullChartParams
299
- })
300
- })
301
-
302
- return () => {
303
- destroy$.next(undefined)
304
- }
305
- })
1
+ import * as d3 from 'd3'
2
+ import {
3
+ Subject,
4
+ Observable,
5
+ of,
6
+ takeUntil,
7
+ map,
8
+ switchMap,
9
+ combineLatest,
10
+ debounceTime,
11
+ distinctUntilChanged } from 'rxjs'
12
+ import {
13
+ defineTreePlugin } from '@orbcharts/core'
14
+ import type { Layout, ComputedDataTree, DataFormatterTree, ChartParams } from '@orbcharts/core'
15
+ import type { TreeMapParams } from '../types'
16
+ import { DEFAULT_TREE_MAP_PARAMS } from '../defaults'
17
+ import { getClassName, getColor } from '../../utils/orbchartsUtils'
18
+
19
+ const pluginName = 'TreeMap'
20
+ const treeClassName = getClassName(pluginName, 'tree')
21
+ const tileClassName = getClassName(pluginName, 'tile')
22
+
23
+ function renderTree ({ selection, treeData, fullParams, fullChartParams, textSizePx }: {
24
+ selection: d3.Selection<any, any, any, any>
25
+ treeData: d3.HierarchyRectangularNode<ComputedDataTree>[]
26
+ fullParams: TreeMapParams
27
+ fullChartParams: ChartParams
28
+ textSizePx: number
29
+ }) {
30
+ const padding = textSizePx / 2
31
+ const lineHeight = textSizePx // 行高
32
+
33
+ const cell = selection.selectAll<SVGGElement, d3.HierarchyRectangularNode<ComputedDataTree>>(`g.${treeClassName}`)
34
+ .data(treeData, d => d.data.id)
35
+ .join('g')
36
+ .attr('class', treeClassName)
37
+
38
+ cell
39
+ // .transition()
40
+ // .duration(fullChartParams.transitionDuration)
41
+ .attr('transform', (d) => !d.x0 || !d.y0 ? null : `translate(${d.x0},${d.y0})`)
42
+ .each((d, i, nodes) => {
43
+ const eachCell = d3.select(nodes[i])
44
+
45
+ const tile = eachCell
46
+ .selectAll<SVGRectElement, d3.HierarchyRectangularNode<ComputedDataTree>>(`rect.${tileClassName}`)
47
+ .data([d], d => d.data.id)
48
+ .join('rect')
49
+ .attr("id", d => d.data.id)
50
+ .attr("class", tileClassName)
51
+ .attr('cursor', 'pointer')
52
+ .attr("width", (d) => d.x1 - d.x0)
53
+ .attr("height", (d) => d.y1 - d.y0)
54
+ .attr('fill', d => d.data.color)
55
+ .attr('data-name', d => d.data.label)
56
+ .attr('data-category', d => d.data.categoryLabel)
57
+ .attr('data-value', d => d.data.value)
58
+
59
+ const label = eachCell
60
+ .selectAll('g')
61
+ .data([d])
62
+ .join('g')
63
+ .each((d, i, nodes) => {
64
+ const eachLabel = d3.select(nodes[i])
65
+ const text = eachLabel
66
+ .selectAll('text')
67
+ .data([d])
68
+ .join('text')
69
+ .text(d => d.data.label)
70
+ .attr('dominant-baseline', 'hanging')
71
+ .attr("x", padding)
72
+ .attr("y", padding)
73
+ .attr('font-size', fullChartParams.styles.textSize)
74
+ .each(function(d) {
75
+ // -- tspan(自動斷行) --
76
+ const textElement = d3.select(this);
77
+ const words = d.data.label.split(/\s+/).reverse() // 以空隔分割字串
78
+ let word;
79
+ let line: string[] = []
80
+ const x = textElement.attr("x")
81
+ let y = textElement.attr("y")
82
+ let dy = 0
83
+ let tspan = textElement
84
+ .text(null)
85
+ .append("tspan")
86
+ .attr('cursor', 'pointer')
87
+ .attr('fill', getColor(fullParams.labelColorType, fullChartParams))
88
+ .attr('font-size', fullChartParams.styles.textSize)
89
+ .attr("x", x)
90
+ .attr("y", y)
91
+
92
+ while (word = words.pop()) {
93
+ line.push(word)
94
+ tspan.text(line.join(" "))
95
+ if (tspan.node().getComputedTextLength() > (d.x1 - d.x0 - padding)) {
96
+ line.pop()
97
+ tspan.text(line.join(" "))
98
+ line = [word]
99
+ dy += lineHeight
100
+ tspan = textElement
101
+ .append("tspan")
102
+ .attr('cursor', 'pointer')
103
+ .attr('fill', getColor(fullParams.labelColorType, fullChartParams))
104
+ .attr('font-size', fullChartParams.styles.textSize)
105
+ .attr("x", x)
106
+ .attr("y", y)
107
+ .attr("dy", dy + "px")
108
+ .text(word)
109
+ }
110
+ }
111
+ })
112
+ })
113
+
114
+ })
115
+
116
+ return cell
117
+ }
118
+
119
+ function highlight ({ selection, ids, fullChartParams }: {
120
+ selection: d3.Selection<any, d3.HierarchyRectangularNode<ComputedDataTree>, any, any>
121
+ ids: string[]
122
+ fullChartParams: ChartParams
123
+ }) {
124
+ selection.interrupt('highlight')
125
+
126
+ if (!ids.length) {
127
+ // remove highlight
128
+ selection
129
+ .transition('highlight')
130
+ .duration(200)
131
+ .style('opacity', 1)
132
+ return
133
+ }
134
+
135
+ selection
136
+ .each((d, i, n) => {
137
+ if (ids.includes(d.data.id)) {
138
+ d3.select(n[i])
139
+ .style('opacity', 1)
140
+ } else {
141
+ d3.select(n[i])
142
+ .style('opacity', fullChartParams.styles.unhighlightedOpacity)
143
+ }
144
+ })
145
+ }
146
+
147
+ export const TreeMap = defineTreePlugin(pluginName, DEFAULT_TREE_MAP_PARAMS)(({ selection, name, subject, observer }) => {
148
+ const destroy$ = new Subject()
149
+
150
+ const treeData$ = combineLatest({
151
+ layout: observer.layout$,
152
+ visibleComputedData: observer.visibleComputedData$,
153
+ fullParams: observer.fullParams$,
154
+ fullDataFormatter: observer.fullDataFormatter$,
155
+ fullChartParams: observer.fullChartParams$
156
+ }).pipe(
157
+ takeUntil(destroy$),
158
+ switchMap(async d => d),
159
+ map(data => {
160
+ const treemap = d3.treemap()
161
+ .size([data.layout.width, data.layout.height])
162
+ .paddingInner(data.fullParams.paddingInner)
163
+ .paddingOuter(data.fullParams.paddingOuter)
164
+ .round(true)
165
+ .tile(d3.treemapSquarify.ratio(data.fullParams.squarifyRatio))
166
+
167
+ const root = d3.hierarchy(data.visibleComputedData)
168
+ .sum(d => d.value)
169
+ .sort(data.fullParams.sort as (a: any, b: any) => number)
170
+
171
+ //call treemap
172
+ treemap(root)
173
+
174
+ const treeData: d3.HierarchyRectangularNode<ComputedDataTree>[] = root.leaves() as any
175
+
176
+ return treeData
177
+ })
178
+ )
179
+
180
+ const cellSelection$ = combineLatest({
181
+ selection: of(selection),
182
+ treeData: treeData$,
183
+ fullParams: observer.fullParams$,
184
+ fullChartParams: observer.fullChartParams$,
185
+ textSizePx: observer.textSizePx$
186
+ }).pipe(
187
+ takeUntil(destroy$),
188
+ switchMap(async d => d),
189
+ map(data => {
190
+ return renderTree({
191
+ selection,
192
+ treeData: data.treeData,
193
+ fullParams: data.fullParams,
194
+ fullChartParams: data.fullChartParams,
195
+ textSizePx: data.textSizePx
196
+ })
197
+ })
198
+ )
199
+
200
+ const highlightTarget$ = observer.fullChartParams$.pipe(
201
+ takeUntil(destroy$),
202
+ map(d => d.highlightTarget),
203
+ distinctUntilChanged()
204
+ )
205
+
206
+ combineLatest({
207
+ cellSelection: cellSelection$,
208
+ computedData: observer.computedData$,
209
+ treeData: treeData$,
210
+ fullParams: observer.fullParams$,
211
+ fullChartParams: observer.fullChartParams$,
212
+ highlightTarget: highlightTarget$,
213
+ CategoryDataMap: observer.CategoryDataMap$,
214
+ }).pipe(
215
+ takeUntil(destroy$),
216
+ switchMap(async d => d)
217
+ ).subscribe(data => {
218
+ data.cellSelection
219
+ .on('mouseover', (event, datum) => {
220
+ event.stopPropagation()
221
+
222
+ subject.event$.next({
223
+ type: 'tree',
224
+ eventName: 'mouseover',
225
+ pluginName,
226
+ highlightTarget: data.highlightTarget,
227
+ datum: datum.data,
228
+ category: data.CategoryDataMap.get(datum.data.categoryLabel)!,
229
+ categoryIndex: datum.data.categoryIndex,
230
+ categoryLabel: datum.data.categoryLabel,
231
+ event,
232
+ data: data.computedData
233
+ })
234
+ })
235
+ .on('mousemove', (event, datum) => {
236
+ event.stopPropagation()
237
+
238
+ subject.event$.next({
239
+ type: 'tree',
240
+ eventName: 'mousemove',
241
+ pluginName,
242
+ highlightTarget: data.highlightTarget,
243
+ datum: datum.data,
244
+ category: data.CategoryDataMap.get(datum.data.categoryLabel)!,
245
+ categoryIndex: datum.data.categoryIndex,
246
+ categoryLabel: datum.data.categoryLabel,
247
+ event,
248
+ data: data.computedData
249
+ })
250
+ })
251
+ .on('mouseout', (event, datum) => {
252
+ event.stopPropagation()
253
+
254
+ subject.event$.next({
255
+ type: 'tree',
256
+ eventName: 'mouseout',
257
+ pluginName,
258
+ highlightTarget: data.highlightTarget,
259
+ datum: datum.data,
260
+ category: data.CategoryDataMap.get(datum.data.categoryLabel)!,
261
+ categoryIndex: datum.data.categoryIndex,
262
+ categoryLabel: datum.data.categoryLabel,
263
+ event,
264
+ data: data.computedData
265
+ })
266
+ })
267
+ .on('click', (event, datum) => {
268
+ event.stopPropagation()
269
+
270
+ subject.event$.next({
271
+ type: 'tree',
272
+ eventName: 'click',
273
+ pluginName,
274
+ highlightTarget: data.highlightTarget,
275
+ datum: datum.data,
276
+ category: data.CategoryDataMap.get(datum.data.categoryLabel)!,
277
+ categoryIndex: datum.data.categoryIndex,
278
+ categoryLabel: datum.data.categoryLabel,
279
+ event,
280
+ data: data.computedData
281
+ })
282
+ })
283
+ })
284
+
285
+ combineLatest({
286
+ cellSelection: cellSelection$,
287
+ highlight: observer.treeHighlight$.pipe(
288
+ map(data => data.map(d => d.id))
289
+ ),
290
+ fullChartParams: observer.fullChartParams$
291
+ }).pipe(
292
+ takeUntil(destroy$),
293
+ switchMap(async d => d)
294
+ ).subscribe(data => {
295
+ highlight({
296
+ selection: data.cellSelection,
297
+ ids: data.highlight,
298
+ fullChartParams: data.fullChartParams
299
+ })
300
+ })
301
+
302
+ return () => {
303
+ destroy$.next(undefined)
304
+ }
305
+ })
package/src/tree/types.ts CHANGED
@@ -1,23 +1,23 @@
1
- import type { ColorType, ComputedDataTree } from '@orbcharts/core'
2
-
3
- export interface TreeMapParams {
4
- paddingInner: number
5
- paddingOuter: number
6
- labelColorType: ColorType
7
- squarifyRatio: number
8
- sort: (a: ComputedDataTree, b: ComputedDataTree) => number
9
- }
10
-
11
- export interface TreeLegendParams {
12
- position: 'top' | 'bottom' | 'left' | 'right'
13
- justify: 'start' | 'center' | 'end'
14
- padding: number
15
- backgroundFill: ColorType
16
- backgroundStroke: ColorType
17
- gap: number
18
- listRectWidth: number
19
- listRectHeight: number
20
- listRectRadius: number
21
- textColorType: ColorType
22
- }
23
-
1
+ import type { ColorType, ComputedDataTree } from '@orbcharts/core'
2
+
3
+ export interface TreeMapParams {
4
+ paddingInner: number
5
+ paddingOuter: number
6
+ labelColorType: ColorType
7
+ squarifyRatio: number
8
+ sort: (a: ComputedDataTree, b: ComputedDataTree) => number
9
+ }
10
+
11
+ export interface TreeLegendParams {
12
+ position: 'top' | 'bottom' | 'left' | 'right'
13
+ justify: 'start' | 'center' | 'end'
14
+ padding: number
15
+ backgroundFill: ColorType
16
+ backgroundStroke: ColorType
17
+ gap: number
18
+ listRectWidth: number
19
+ listRectHeight: number
20
+ listRectRadius: number
21
+ textColorType: ColorType
22
+ }
23
+