@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,263 +1,263 @@
1
- import * as d3 from 'd3'
2
- import {
3
- Observable,
4
- Subject,
5
- of,
6
- takeUntil,
7
- filter,
8
- map,
9
- switchMap,
10
- combineLatest,
11
- merge,
12
- shareReplay,
13
- distinctUntilChanged
14
- } from 'rxjs'
15
- import type {
16
- ChartParams,
17
- HighlightTarget,
18
- DataFormatterGrid,
19
- ComputedDataGrid,
20
- ComputedDatumGrid,
21
- TransformData,
22
- ContainerPosition,
23
- Layout } from '@orbcharts/core'
24
- import { createAxisQuantizeScale } from '@orbcharts/core'
25
- import { getClassName, getUniID } from '../utils/orbchartsUtils'
26
-
27
- export const gridSelectionsObservable = ({ selection, pluginName, clipPathID, existSeriesLabels$, gridContainer$, gridAxesTransform$, gridGraphicTransform$ }: {
28
- selection: d3.Selection<any, unknown, any, unknown>
29
- pluginName: string
30
- clipPathID: string
31
- // computedData$: Observable<ComputedDataGrid>
32
- existSeriesLabels$: Observable<string[]>
33
- gridContainer$: Observable<ContainerPosition[]>
34
- gridAxesTransform$: Observable<TransformData>
35
- gridGraphicTransform$: Observable<TransformData>
36
- }) => {
37
- const seriesClassName = getClassName(pluginName, 'series')
38
- const axesClassName = getClassName(pluginName, 'axes')
39
- const graphicClassName = getClassName(pluginName, 'graphic')
40
-
41
- const seriesSelection$ = existSeriesLabels$.pipe(
42
- map((existSeriesLabels, i) => {
43
- return selection
44
- .selectAll<SVGGElement, string>(`g.${seriesClassName}`)
45
- .data(existSeriesLabels, d => d)
46
- .join(
47
- enter => {
48
- return enter
49
- .append('g')
50
- .classed(seriesClassName, true)
51
- .each((d, i, g) => {
52
- const axesSelection = d3.select(g[i])
53
- .selectAll<SVGGElement, ComputedDatumGrid[]>(`g.${axesClassName}`)
54
- .data([i])
55
- .join(
56
- enter => {
57
- return enter
58
- .append('g')
59
- .classed(axesClassName, true)
60
- .attr('clip-path', `url(#${clipPathID})`)
61
- .each((d, i, g) => {
62
- const defsSelection = d3.select(g[i])
63
- .selectAll<SVGDefsElement, any>('defs')
64
- .data([i])
65
- .join('defs')
66
-
67
- const graphicGSelection = d3.select(g[i])
68
- .selectAll<SVGGElement, any>('g')
69
- .data([i])
70
- .join('g')
71
- .classed(graphicClassName, true)
72
- })
73
- },
74
- update => update,
75
- exit => exit.remove()
76
- )
77
- })
78
- },
79
- update => update,
80
- exit => exit.remove()
81
- )
82
- }),
83
- switchMap(selection => combineLatest({
84
- seriesSelection: of(selection),
85
- gridContainer: gridContainer$
86
- })),
87
- map(data => {
88
- data.seriesSelection
89
- .transition()
90
- .attr('transform', (d, i) => {
91
- const gridContainer = data.gridContainer[i] ?? data.gridContainer[0]
92
- const translate = gridContainer.translate
93
- const scale = gridContainer.scale
94
- return `translate(${translate[0]}, ${translate[1]}) scale(${scale[0]}, ${scale[1]})`
95
- })
96
- return data.seriesSelection
97
- }),
98
- shareReplay(1)
99
- )
100
-
101
- // combineLatest({
102
- // seriesSelection: seriesSelection$,
103
- // gridContainer: gridContainer$
104
- // }).pipe(
105
- // switchMap(async d => d)
106
- // ).subscribe(data => {
107
- // data.seriesSelection
108
- // .transition()
109
- // .attr('transform', (d, i) => {
110
- // const translate = data.gridContainer[i].translate
111
- // const scale = data.gridContainer[i].scale
112
- // return `translate(${translate[0]}, ${translate[1]}) scale(${scale[0]}, ${scale[1]})`
113
- // })
114
- // })
115
-
116
-
117
- const axesSelection$ = combineLatest({
118
- seriesSelection: seriesSelection$,
119
- gridAxesTransform: gridAxesTransform$
120
- }).pipe(
121
- switchMap(async d => d),
122
- map(data => {
123
- return data.seriesSelection
124
- .select<SVGGElement>(`g.${axesClassName}`)
125
- .style('transform', data.gridAxesTransform.value)
126
- }),
127
- shareReplay(1)
128
- )
129
- const defsSelection$ = axesSelection$.pipe(
130
- map(axesSelection => {
131
- return axesSelection.select<SVGDefsElement>('defs')
132
- }),
133
- shareReplay(1)
134
- )
135
- const graphicGSelection$ = combineLatest({
136
- axesSelection: axesSelection$,
137
- gridGraphicTransform: gridGraphicTransform$
138
- }).pipe(
139
- switchMap(async d => d),
140
- map(data => {
141
- const graphicGSelection = data.axesSelection
142
- .select<SVGGElement>(`g.${graphicClassName}`)
143
- graphicGSelection
144
- .transition()
145
- .duration(50)
146
- .style('transform', data.gridGraphicTransform.value)
147
- return graphicGSelection
148
- }),
149
- shareReplay(1)
150
- )
151
-
152
- return {
153
- seriesSelection$,
154
- axesSelection$,
155
- defsSelection$,
156
- graphicGSelection$
157
- }
158
- }
159
-
160
- // 由事件取得group data的function
161
- export const gridGroupPositionFnObservable = ({ fullDataFormatter$, gridAxesSize$, computedData$, fullChartParams$ }: {
162
- fullDataFormatter$: Observable<DataFormatterGrid>
163
- gridAxesSize$: Observable<{
164
- width: number;
165
- height: number;
166
- }>
167
- computedData$: Observable<ComputedDataGrid>
168
- // GroupDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
169
- fullChartParams$: Observable<ChartParams>
170
- }): Observable<(event: any) => { groupIndex: number; groupLabel: string }> => {
171
- const destroy$ = new Subject()
172
-
173
- // 顯示範圍內的group labels
174
- const scaleRangeGroupLabels$: Observable<string[]> = new Observable(subscriber => {
175
- combineLatest({
176
- dataFormatter: fullDataFormatter$,
177
- computedData: computedData$
178
- }).pipe(
179
- takeUntil(destroy$),
180
- // 轉換後會退訂前一個未完成的訂閱事件,因此可以取到「同時間」最後一次的訂閱事件
181
- switchMap(async (d) => d),
182
- ).subscribe(data => {
183
- const groupMin = 0
184
- const groupMax = data.computedData[0] ? data.computedData[0].length - 1 : 0
185
- const groupScaleDomainMin = data.dataFormatter.grid.groupAxis.scaleDomain[0] === 'auto'
186
- ? groupMin - data.dataFormatter.grid.groupAxis.scalePadding
187
- : data.dataFormatter.grid.groupAxis.scaleDomain[0] as number - data.dataFormatter.grid.groupAxis.scalePadding
188
- const groupScaleDomainMax = data.dataFormatter.grid.groupAxis.scaleDomain[1] === 'auto'
189
- ? groupMax + data.dataFormatter.grid.groupAxis.scalePadding
190
- : data.dataFormatter.grid.groupAxis.scaleDomain[1] as number + data.dataFormatter.grid.groupAxis.scalePadding
191
-
192
- // const groupingAmount = data.computedData[0]
193
- // ? data.computedData[0].length
194
- // : 0
195
-
196
- let _labels = data.dataFormatter.grid.gridData.seriesDirection === 'row'
197
- ? (data.computedData[0] ?? []).map(d => d.groupLabel)
198
- : data.computedData.map(d => d[0].groupLabel)
199
-
200
- const _axisLabels =
201
- // new Array(groupingAmount).fill(0)
202
- // .map((d, i) => {
203
- // return _labels[i] != null
204
- // ? _labels[i]
205
- // : String(i) // 沒有label則用序列號填充
206
- // })
207
- _labels
208
- .filter((d, i) => {
209
- return i >= groupScaleDomainMin && i <= groupScaleDomainMax
210
- })
211
- subscriber.next(_axisLabels)
212
- })
213
- })
214
-
215
- return new Observable<(event: any) => { groupIndex: number; groupLabel: string }>(subscriber => {
216
- combineLatest({
217
- dataFormatter: fullDataFormatter$,
218
- axisSize: gridAxesSize$,
219
- fullChartParams: fullChartParams$,
220
- scaleRangeGroupLabels: scaleRangeGroupLabels$
221
- }).pipe(
222
- takeUntil(destroy$),
223
- // 轉換後會退訂前一個未完成的訂閱事件,因此可以取到「同時間」最後一次的訂閱事件
224
- switchMap(async (d) => d),
225
- ).subscribe(data => {
226
-
227
- const reverse = data.dataFormatter.grid.valueAxis.position === 'right'
228
- || data.dataFormatter.grid.valueAxis.position === 'bottom'
229
- ? true : false
230
-
231
- // 比例尺座標對應非連續資料索引
232
- const groupIndexScale = createAxisQuantizeScale({
233
- axisLabels: data.scaleRangeGroupLabels,
234
- axisWidth: data.axisSize.width,
235
- reverse
236
- })
237
-
238
- // 依比例尺位置計算座標
239
- const axisValuePredicate = (event: any) => {
240
- return data.dataFormatter.grid.groupAxis.position === 'bottom'
241
- || data.dataFormatter.grid.groupAxis.position === 'top'
242
- ? event.offsetX - data.fullChartParams.padding.left
243
- : event.offsetY - data.fullChartParams.padding.top
244
- }
245
-
246
- // 比例尺座標取得groupData的function
247
- const createEventGroupData: (event: any) => { groupIndex: number; groupLabel: string } = (event: any) => {
248
- const axisValue = axisValuePredicate(event)
249
- const groupIndex = groupIndexScale(axisValue)
250
- return {
251
- groupIndex,
252
- groupLabel: data.scaleRangeGroupLabels[groupIndex] ?? ''
253
- }
254
- }
255
-
256
- subscriber.next(createEventGroupData)
257
-
258
- return function unsubscribe () {
259
- destroy$.next(undefined)
260
- }
261
- })
262
- })
263
- }
1
+ import * as d3 from 'd3'
2
+ import {
3
+ Observable,
4
+ Subject,
5
+ of,
6
+ takeUntil,
7
+ filter,
8
+ map,
9
+ switchMap,
10
+ combineLatest,
11
+ merge,
12
+ shareReplay,
13
+ distinctUntilChanged
14
+ } from 'rxjs'
15
+ import type {
16
+ ChartParams,
17
+ HighlightTarget,
18
+ DataFormatterGrid,
19
+ ComputedDataGrid,
20
+ ComputedDatumGrid,
21
+ TransformData,
22
+ ContainerPosition,
23
+ Layout } from '@orbcharts/core'
24
+ import { createAxisQuantizeScale } from '@orbcharts/core'
25
+ import { getClassName, getUniID } from '../utils/orbchartsUtils'
26
+
27
+ export const gridSelectionsObservable = ({ selection, pluginName, clipPathID, existSeriesLabels$, gridContainer$, gridAxesTransform$, gridGraphicTransform$ }: {
28
+ selection: d3.Selection<any, unknown, any, unknown>
29
+ pluginName: string
30
+ clipPathID: string
31
+ // computedData$: Observable<ComputedDataGrid>
32
+ existSeriesLabels$: Observable<string[]>
33
+ gridContainer$: Observable<ContainerPosition[]>
34
+ gridAxesTransform$: Observable<TransformData>
35
+ gridGraphicTransform$: Observable<TransformData>
36
+ }) => {
37
+ const seriesClassName = getClassName(pluginName, 'series')
38
+ const axesClassName = getClassName(pluginName, 'axes')
39
+ const graphicClassName = getClassName(pluginName, 'graphic')
40
+
41
+ const seriesSelection$ = existSeriesLabels$.pipe(
42
+ map((existSeriesLabels, i) => {
43
+ return selection
44
+ .selectAll<SVGGElement, string>(`g.${seriesClassName}`)
45
+ .data(existSeriesLabels, d => d)
46
+ .join(
47
+ enter => {
48
+ return enter
49
+ .append('g')
50
+ .classed(seriesClassName, true)
51
+ .each((d, i, g) => {
52
+ const axesSelection = d3.select(g[i])
53
+ .selectAll<SVGGElement, ComputedDatumGrid[]>(`g.${axesClassName}`)
54
+ .data([i])
55
+ .join(
56
+ enter => {
57
+ return enter
58
+ .append('g')
59
+ .classed(axesClassName, true)
60
+ .attr('clip-path', `url(#${clipPathID})`)
61
+ .each((d, i, g) => {
62
+ const defsSelection = d3.select(g[i])
63
+ .selectAll<SVGDefsElement, any>('defs')
64
+ .data([i])
65
+ .join('defs')
66
+
67
+ const graphicGSelection = d3.select(g[i])
68
+ .selectAll<SVGGElement, any>('g')
69
+ .data([i])
70
+ .join('g')
71
+ .classed(graphicClassName, true)
72
+ })
73
+ },
74
+ update => update,
75
+ exit => exit.remove()
76
+ )
77
+ })
78
+ },
79
+ update => update,
80
+ exit => exit.remove()
81
+ )
82
+ }),
83
+ switchMap(selection => combineLatest({
84
+ seriesSelection: of(selection),
85
+ gridContainer: gridContainer$
86
+ })),
87
+ map(data => {
88
+ data.seriesSelection
89
+ .transition()
90
+ .attr('transform', (d, i) => {
91
+ const gridContainer = data.gridContainer[i] ?? data.gridContainer[0]
92
+ const translate = gridContainer.translate
93
+ const scale = gridContainer.scale
94
+ return `translate(${translate[0]}, ${translate[1]}) scale(${scale[0]}, ${scale[1]})`
95
+ })
96
+ return data.seriesSelection
97
+ }),
98
+ shareReplay(1)
99
+ )
100
+
101
+ // combineLatest({
102
+ // seriesSelection: seriesSelection$,
103
+ // gridContainer: gridContainer$
104
+ // }).pipe(
105
+ // switchMap(async d => d)
106
+ // ).subscribe(data => {
107
+ // data.seriesSelection
108
+ // .transition()
109
+ // .attr('transform', (d, i) => {
110
+ // const translate = data.gridContainer[i].translate
111
+ // const scale = data.gridContainer[i].scale
112
+ // return `translate(${translate[0]}, ${translate[1]}) scale(${scale[0]}, ${scale[1]})`
113
+ // })
114
+ // })
115
+
116
+
117
+ const axesSelection$ = combineLatest({
118
+ seriesSelection: seriesSelection$,
119
+ gridAxesTransform: gridAxesTransform$
120
+ }).pipe(
121
+ switchMap(async d => d),
122
+ map(data => {
123
+ return data.seriesSelection
124
+ .select<SVGGElement>(`g.${axesClassName}`)
125
+ .style('transform', data.gridAxesTransform.value)
126
+ }),
127
+ shareReplay(1)
128
+ )
129
+ const defsSelection$ = axesSelection$.pipe(
130
+ map(axesSelection => {
131
+ return axesSelection.select<SVGDefsElement>('defs')
132
+ }),
133
+ shareReplay(1)
134
+ )
135
+ const graphicGSelection$ = combineLatest({
136
+ axesSelection: axesSelection$,
137
+ gridGraphicTransform: gridGraphicTransform$
138
+ }).pipe(
139
+ switchMap(async d => d),
140
+ map(data => {
141
+ const graphicGSelection = data.axesSelection
142
+ .select<SVGGElement>(`g.${graphicClassName}`)
143
+ graphicGSelection
144
+ .transition()
145
+ .duration(50)
146
+ .style('transform', data.gridGraphicTransform.value)
147
+ return graphicGSelection
148
+ }),
149
+ shareReplay(1)
150
+ )
151
+
152
+ return {
153
+ seriesSelection$,
154
+ axesSelection$,
155
+ defsSelection$,
156
+ graphicGSelection$
157
+ }
158
+ }
159
+
160
+ // 由事件取得group data的function
161
+ export const gridGroupPositionFnObservable = ({ fullDataFormatter$, gridAxesSize$, computedData$, fullChartParams$ }: {
162
+ fullDataFormatter$: Observable<DataFormatterGrid>
163
+ gridAxesSize$: Observable<{
164
+ width: number;
165
+ height: number;
166
+ }>
167
+ computedData$: Observable<ComputedDataGrid>
168
+ // GroupDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
169
+ fullChartParams$: Observable<ChartParams>
170
+ }): Observable<(event: any) => { groupIndex: number; groupLabel: string }> => {
171
+ const destroy$ = new Subject()
172
+
173
+ // 顯示範圍內的group labels
174
+ const scaleRangeGroupLabels$: Observable<string[]> = new Observable(subscriber => {
175
+ combineLatest({
176
+ dataFormatter: fullDataFormatter$,
177
+ computedData: computedData$
178
+ }).pipe(
179
+ takeUntil(destroy$),
180
+ // 轉換後會退訂前一個未完成的訂閱事件,因此可以取到「同時間」最後一次的訂閱事件
181
+ switchMap(async (d) => d),
182
+ ).subscribe(data => {
183
+ const groupMin = 0
184
+ const groupMax = data.computedData[0] ? data.computedData[0].length - 1 : 0
185
+ const groupScaleDomainMin = data.dataFormatter.grid.groupAxis.scaleDomain[0] === 'auto'
186
+ ? groupMin - data.dataFormatter.grid.groupAxis.scalePadding
187
+ : data.dataFormatter.grid.groupAxis.scaleDomain[0] as number - data.dataFormatter.grid.groupAxis.scalePadding
188
+ const groupScaleDomainMax = data.dataFormatter.grid.groupAxis.scaleDomain[1] === 'auto'
189
+ ? groupMax + data.dataFormatter.grid.groupAxis.scalePadding
190
+ : data.dataFormatter.grid.groupAxis.scaleDomain[1] as number + data.dataFormatter.grid.groupAxis.scalePadding
191
+
192
+ // const groupingAmount = data.computedData[0]
193
+ // ? data.computedData[0].length
194
+ // : 0
195
+
196
+ let _labels = data.dataFormatter.grid.gridData.seriesDirection === 'row'
197
+ ? (data.computedData[0] ?? []).map(d => d.groupLabel)
198
+ : data.computedData.map(d => d[0].groupLabel)
199
+
200
+ const _axisLabels =
201
+ // new Array(groupingAmount).fill(0)
202
+ // .map((d, i) => {
203
+ // return _labels[i] != null
204
+ // ? _labels[i]
205
+ // : String(i) // 沒有label則用序列號填充
206
+ // })
207
+ _labels
208
+ .filter((d, i) => {
209
+ return i >= groupScaleDomainMin && i <= groupScaleDomainMax
210
+ })
211
+ subscriber.next(_axisLabels)
212
+ })
213
+ })
214
+
215
+ return new Observable<(event: any) => { groupIndex: number; groupLabel: string }>(subscriber => {
216
+ combineLatest({
217
+ dataFormatter: fullDataFormatter$,
218
+ axisSize: gridAxesSize$,
219
+ fullChartParams: fullChartParams$,
220
+ scaleRangeGroupLabels: scaleRangeGroupLabels$
221
+ }).pipe(
222
+ takeUntil(destroy$),
223
+ // 轉換後會退訂前一個未完成的訂閱事件,因此可以取到「同時間」最後一次的訂閱事件
224
+ switchMap(async (d) => d),
225
+ ).subscribe(data => {
226
+
227
+ const reverse = data.dataFormatter.grid.valueAxis.position === 'right'
228
+ || data.dataFormatter.grid.valueAxis.position === 'bottom'
229
+ ? true : false
230
+
231
+ // 比例尺座標對應非連續資料索引
232
+ const groupIndexScale = createAxisQuantizeScale({
233
+ axisLabels: data.scaleRangeGroupLabels,
234
+ axisWidth: data.axisSize.width,
235
+ reverse
236
+ })
237
+
238
+ // 依比例尺位置計算座標
239
+ const axisValuePredicate = (event: any) => {
240
+ return data.dataFormatter.grid.groupAxis.position === 'bottom'
241
+ || data.dataFormatter.grid.groupAxis.position === 'top'
242
+ ? event.offsetX - data.fullChartParams.padding.left
243
+ : event.offsetY - data.fullChartParams.padding.top
244
+ }
245
+
246
+ // 比例尺座標取得groupData的function
247
+ const createEventGroupData: (event: any) => { groupIndex: number; groupLabel: string } = (event: any) => {
248
+ const axisValue = axisValuePredicate(event)
249
+ const groupIndex = groupIndexScale(axisValue)
250
+ return {
251
+ groupIndex,
252
+ groupLabel: data.scaleRangeGroupLabels[groupIndex] ?? ''
253
+ }
254
+ }
255
+
256
+ subscriber.next(createEventGroupData)
257
+
258
+ return function unsubscribe () {
259
+ destroy$.next(undefined)
260
+ }
261
+ })
262
+ })
263
+ }
package/src/grid/index.ts CHANGED
@@ -1,15 +1,15 @@
1
- export * from './defaults'
2
- export * from './types'
3
- export { Lines } from './plugins/Lines'
4
- export { LineAreas } from './plugins/LineAreas'
5
- export { Bars } from './plugins/Bars'
6
- export { BarsDiverging } from './plugins/BarsDiverging'
7
- export { BarStack } from './plugins/BarStack'
8
- export { BarsTriangle } from './plugins/BarsTriangle'
9
- export { Dots } from './plugins/Dots'
10
- export { GridLegend } from './plugins/GridLegend'
11
- export { GroupAxis } from './plugins/GroupAxis'
12
- export { ValueAxis } from './plugins/ValueAxis'
13
- export { ValueStackAxis } from './plugins/ValueStackAxis'
14
- export { ScalingArea } from './plugins/ScalingArea'
15
- export { GroupAux } from './plugins/GroupAux'
1
+ export * from './defaults'
2
+ export * from './types'
3
+ export { Lines } from './plugins/Lines'
4
+ export { LineAreas } from './plugins/LineAreas'
5
+ export { Bars } from './plugins/Bars'
6
+ export { BarsDiverging } from './plugins/BarsDiverging'
7
+ export { BarStack } from './plugins/BarStack'
8
+ export { BarsTriangle } from './plugins/BarsTriangle'
9
+ export { Dots } from './plugins/Dots'
10
+ export { GridLegend } from './plugins/GridLegend'
11
+ export { GroupAxis } from './plugins/GroupAxis'
12
+ export { ValueAxis } from './plugins/ValueAxis'
13
+ export { ValueStackAxis } from './plugins/ValueStackAxis'
14
+ export { ScalingArea } from './plugins/ScalingArea'
15
+ export { GroupAux } from './plugins/GroupAux'
@@ -1,38 +1,38 @@
1
- import {
2
- Subject,
3
- Observable } from 'rxjs'
4
- import { defineGridPlugin } from '@orbcharts/core'
5
- import { DEFAULT_BAR_STACK_PARAMS } from '../defaults'
6
- import { createBaseBarStack } from '../../base/BaseBarStack'
7
-
8
- const pluginName = 'BarStack'
9
-
10
-
11
- export const BarStack = defineGridPlugin(pluginName, DEFAULT_BAR_STACK_PARAMS)(({ selection, name, subject, observer }) => {
12
- const destroy$ = new Subject()
13
-
14
- const unsubscribeBaseBars = createBaseBarStack(pluginName, {
15
- selection,
16
- computedData$: observer.computedData$,
17
- visibleComputedData$: observer.visibleComputedData$,
18
- existSeriesLabels$: observer.existSeriesLabels$,
19
- SeriesDataMap$: observer.SeriesDataMap$,
20
- GroupDataMap$: observer.GroupDataMap$,
21
- fullParams$: observer.fullParams$,
22
- fullDataFormatter$: observer.fullDataFormatter$,
23
- fullChartParams$: observer.fullChartParams$,
24
- gridAxesTransform$: observer.gridAxesTransform$,
25
- gridGraphicTransform$: observer.gridGraphicTransform$,
26
- gridGraphicReverseScale$: observer.gridGraphicReverseScale$,
27
- gridAxesSize$: observer.gridAxesSize$,
28
- gridHighlight$: observer.gridHighlight$,
29
- gridContainer$: observer.gridContainer$,
30
- isSeriesPositionSeprate$: observer.isSeriesPositionSeprate$,
31
- event$: subject.event$,
32
- })
33
-
34
- return () => {
35
- destroy$.next(undefined)
36
- unsubscribeBaseBars()
37
- }
1
+ import {
2
+ Subject,
3
+ Observable } from 'rxjs'
4
+ import { defineGridPlugin } from '@orbcharts/core'
5
+ import { DEFAULT_BAR_STACK_PARAMS } from '../defaults'
6
+ import { createBaseBarStack } from '../../base/BaseBarStack'
7
+
8
+ const pluginName = 'BarStack'
9
+
10
+
11
+ export const BarStack = defineGridPlugin(pluginName, DEFAULT_BAR_STACK_PARAMS)(({ selection, name, subject, observer }) => {
12
+ const destroy$ = new Subject()
13
+
14
+ const unsubscribeBaseBars = createBaseBarStack(pluginName, {
15
+ selection,
16
+ computedData$: observer.computedData$,
17
+ visibleComputedData$: observer.visibleComputedData$,
18
+ existSeriesLabels$: observer.existSeriesLabels$,
19
+ SeriesDataMap$: observer.SeriesDataMap$,
20
+ GroupDataMap$: observer.GroupDataMap$,
21
+ fullParams$: observer.fullParams$,
22
+ fullDataFormatter$: observer.fullDataFormatter$,
23
+ fullChartParams$: observer.fullChartParams$,
24
+ gridAxesTransform$: observer.gridAxesTransform$,
25
+ gridGraphicTransform$: observer.gridGraphicTransform$,
26
+ gridGraphicReverseScale$: observer.gridGraphicReverseScale$,
27
+ gridAxesSize$: observer.gridAxesSize$,
28
+ gridHighlight$: observer.gridHighlight$,
29
+ gridContainer$: observer.gridContainer$,
30
+ isSeriesPositionSeprate$: observer.isSeriesPositionSeprate$,
31
+ event$: subject.event$,
32
+ })
33
+
34
+ return () => {
35
+ destroy$.next(undefined)
36
+ unsubscribeBaseBars()
37
+ }
38
38
  })