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

Sign up to get free protection for your applications and to get access to all the features.
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
+