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

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 (84) hide show
  1. package/LICENSE +200 -200
  2. package/dist/orbcharts-plugins-basic.es.js +5477 -5426
  3. package/dist/orbcharts-plugins-basic.umd.js +8 -8
  4. package/dist/src/base/BaseBarStack.d.ts +1 -1
  5. package/dist/src/base/BaseBars.d.ts +1 -1
  6. package/dist/src/base/BaseBarsTriangle.d.ts +1 -1
  7. package/dist/src/base/BaseDots.d.ts +1 -1
  8. package/dist/src/base/BaseLineAreas.d.ts +1 -1
  9. package/dist/src/base/BaseLines.d.ts +1 -1
  10. package/dist/src/multiGrid/defaults.d.ts +2 -1
  11. package/dist/src/multiGrid/index.d.ts +1 -0
  12. package/dist/src/multiGrid/plugins/MultiLineAreas.d.ts +1 -0
  13. package/dist/src/multiGrid/types.d.ts +4 -4
  14. package/package.json +42 -42
  15. package/src/base/BaseBarStack.ts +881 -879
  16. package/src/base/BaseBars.ts +750 -748
  17. package/src/base/BaseBarsTriangle.ts +659 -657
  18. package/src/base/BaseDots.ts +639 -637
  19. package/src/base/BaseGroupAxis.ts +496 -496
  20. package/src/base/BaseLegend.ts +636 -636
  21. package/src/base/BaseLineAreas.ts +621 -624
  22. package/src/base/BaseLines.ts +692 -695
  23. package/src/base/BaseValueAxis.ts +479 -479
  24. package/src/base/types.ts +2 -2
  25. package/src/grid/defaults.ts +121 -121
  26. package/src/grid/gridObservables.ts +263 -263
  27. package/src/grid/index.ts +15 -15
  28. package/src/grid/plugins/BarStack.ts +37 -37
  29. package/src/grid/plugins/Bars.ts +37 -37
  30. package/src/grid/plugins/BarsDiverging.ts +39 -39
  31. package/src/grid/plugins/BarsTriangle.ts +34 -34
  32. package/src/grid/plugins/Dots.ts +35 -35
  33. package/src/grid/plugins/GridLegend.ts +58 -58
  34. package/src/grid/plugins/GroupAux.ts +643 -643
  35. package/src/grid/plugins/GroupAxis.ts +30 -30
  36. package/src/grid/plugins/LineAreas.ts +36 -36
  37. package/src/grid/plugins/Lines.ts +35 -35
  38. package/src/grid/plugins/ScalingArea.ts +174 -174
  39. package/src/grid/plugins/ValueAxis.ts +31 -31
  40. package/src/grid/plugins/ValueStackAxis.ts +70 -70
  41. package/src/grid/types.ts +120 -120
  42. package/src/index.ts +9 -9
  43. package/src/multiGrid/defaults.ts +147 -140
  44. package/src/multiGrid/index.ts +11 -10
  45. package/src/multiGrid/multiGridObservables.ts +289 -278
  46. package/src/multiGrid/plugins/MultiBarStack.ts +60 -60
  47. package/src/multiGrid/plugins/MultiBars.ts +59 -59
  48. package/src/multiGrid/plugins/MultiBarsTriangle.ts +58 -58
  49. package/src/multiGrid/plugins/MultiDots.ts +58 -58
  50. package/src/multiGrid/plugins/MultiGridLegend.ts +88 -88
  51. package/src/multiGrid/plugins/MultiGroupAxis.ts +53 -53
  52. package/src/multiGrid/plugins/MultiLineAreas.ts +59 -0
  53. package/src/multiGrid/plugins/MultiLines.ts +58 -58
  54. package/src/multiGrid/plugins/MultiValueAxis.ts +53 -53
  55. package/src/multiGrid/plugins/OverlappingValueAxes.ts +164 -165
  56. package/src/multiGrid/types.ts +67 -67
  57. package/src/noneData/defaults.ts +61 -61
  58. package/src/noneData/index.ts +3 -3
  59. package/src/noneData/plugins/Container.ts +10 -10
  60. package/src/noneData/plugins/Tooltip.ts +304 -304
  61. package/src/noneData/types.ts +26 -26
  62. package/src/series/defaults.ts +99 -99
  63. package/src/series/index.ts +6 -6
  64. package/src/series/plugins/Bubbles.ts +551 -549
  65. package/src/series/plugins/Pie.ts +600 -598
  66. package/src/series/plugins/PieEventTexts.ts +194 -194
  67. package/src/series/plugins/PieLabels.ts +288 -285
  68. package/src/series/plugins/SeriesLegend.ts +58 -58
  69. package/src/series/seriesUtils.ts +50 -50
  70. package/src/series/types.ts +67 -67
  71. package/src/tree/defaults.ts +22 -22
  72. package/src/tree/index.ts +3 -3
  73. package/src/tree/plugins/TreeLegend.ts +58 -58
  74. package/src/tree/plugins/TreeMap.ts +302 -300
  75. package/src/tree/types.ts +23 -23
  76. package/src/utils/commonUtils.ts +21 -21
  77. package/src/utils/d3Graphics.ts +124 -124
  78. package/src/utils/d3Utils.ts +73 -73
  79. package/src/utils/observables.ts +14 -14
  80. package/src/utils/orbchartsUtils.ts +100 -100
  81. package/tsconfig.dev.json +16 -16
  82. package/tsconfig.json +13 -13
  83. package/tsconfig.prod.json +13 -13
  84. package/vite.config.js +49 -49
@@ -1,300 +1,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 }: {
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$,
285
- fullChartParams: observer.fullChartParams$
286
- }).pipe(
287
- takeUntil(destroy$),
288
- switchMap(async d => d)
289
- ).subscribe(data => {
290
- highlight({
291
- selection: data.cellSelection,
292
- ids: data.highlight,
293
- fullChartParams: data.fullChartParams
294
- })
295
- })
296
-
297
- return () => {
298
- destroy$.next(undefined)
299
- }
300
- })
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
+ })
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
+