@orbcharts/plugins-basic 3.0.0-alpha.43 → 3.0.0-alpha.44

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