@orbcharts/plugins-basic 3.0.0-alpha.33 → 3.0.0-alpha.35

Sign up to get free protection for your applications and to get access to all the features.
Files changed (80) hide show
  1. package/dist/orbcharts-plugins-basic.es.js +10246 -9523
  2. package/dist/orbcharts-plugins-basic.umd.js +10 -10
  3. package/dist/src/base/BaseBarStack.d.ts +5 -1
  4. package/dist/src/base/BaseBars.d.ts +5 -1
  5. package/dist/src/base/BaseBarsTriangle.d.ts +5 -1
  6. package/dist/src/base/BaseDots.d.ts +33 -0
  7. package/dist/src/base/BaseGroupAxis.d.ts +35 -0
  8. package/dist/src/base/BaseLines.d.ts +3 -1
  9. package/dist/src/base/BaseValueAxis.d.ts +36 -0
  10. package/dist/src/grid/defaults.d.ts +3 -3
  11. package/dist/src/grid/gridObservables.d.ts +18 -4
  12. package/dist/src/grid/index.d.ts +1 -1
  13. package/dist/src/grid/plugins/Dots.d.ts +1 -3
  14. package/dist/src/grid/plugins/GroupAux.d.ts +3 -0
  15. package/dist/src/grid/plugins/GroupAxis.d.ts +1 -3
  16. package/dist/src/grid/plugins/ValueAxis.d.ts +1 -3
  17. package/dist/src/grid/plugins/ValueStackAxis.d.ts +1 -3
  18. package/dist/src/grid/types.d.ts +1 -1
  19. package/dist/src/multiGrid/defaults.d.ts +9 -2
  20. package/dist/src/multiGrid/index.d.ts +8 -1
  21. package/dist/src/multiGrid/multiGridObservables.d.ts +12 -0
  22. package/dist/src/multiGrid/plugins/MultiBarStack.d.ts +1 -0
  23. package/dist/src/multiGrid/plugins/MultiBars.d.ts +1 -0
  24. package/dist/src/multiGrid/plugins/MultiBarsTriangle.d.ts +1 -0
  25. package/dist/src/multiGrid/plugins/MultiDots.d.ts +1 -0
  26. package/dist/src/multiGrid/plugins/MultiGroupAxis.d.ts +1 -0
  27. package/dist/src/multiGrid/plugins/MultiLines.d.ts +1 -0
  28. package/dist/src/multiGrid/plugins/MultiValueAxis.d.ts +1 -0
  29. package/dist/src/multiGrid/plugins/OverlappingValueAxes.d.ts +1 -0
  30. package/dist/src/multiGrid/types.d.ts +31 -0
  31. package/package.json +2 -2
  32. package/src/base/BaseBarStack.ts +375 -198
  33. package/src/base/BaseBars.ts +297 -191
  34. package/src/base/BaseBarsTriangle.ts +344 -229
  35. package/src/base/BaseDots.ts +634 -0
  36. package/src/base/BaseGroupAxis.ts +497 -0
  37. package/src/base/BaseLines.ts +180 -50
  38. package/src/base/BaseValueAxis.ts +475 -0
  39. package/src/grid/defaults.ts +3 -3
  40. package/src/grid/gridObservables.ts +147 -14
  41. package/src/grid/index.ts +1 -1
  42. package/src/grid/plugins/BarStack.ts +4 -0
  43. package/src/grid/plugins/Bars.ts +4 -0
  44. package/src/grid/plugins/BarsTriangle.ts +4 -0
  45. package/src/grid/plugins/Dots.ts +19 -410
  46. package/src/grid/plugins/{GroupArea.ts → GroupAux.ts} +24 -24
  47. package/src/grid/plugins/GroupAxis.ts +16 -348
  48. package/src/grid/plugins/Lines.ts +2 -0
  49. package/src/grid/plugins/ScalingArea.ts +9 -6
  50. package/src/grid/plugins/ValueAxis.ts +13 -337
  51. package/src/grid/plugins/ValueStackAxis.ts +35 -336
  52. package/src/grid/types.ts +1 -1
  53. package/src/index.ts +1 -0
  54. package/src/multiGrid/defaults.ts +120 -14
  55. package/src/multiGrid/index.ts +9 -2
  56. package/src/multiGrid/multiGridObservables.ts +279 -0
  57. package/src/multiGrid/plugins/MultiBarStack.ts +60 -0
  58. package/src/multiGrid/plugins/MultiBars.ts +59 -0
  59. package/src/multiGrid/plugins/MultiBarsTriangle.ts +58 -0
  60. package/src/multiGrid/plugins/MultiDots.ts +58 -0
  61. package/src/multiGrid/plugins/MultiGridLegend.ts +9 -10
  62. package/src/multiGrid/plugins/MultiGroupAxis.ts +53 -0
  63. package/src/multiGrid/plugins/MultiLines.ts +58 -0
  64. package/src/multiGrid/plugins/MultiValueAxis.ts +53 -0
  65. package/src/multiGrid/plugins/OverlappingValueAxes.ts +165 -0
  66. package/src/multiGrid/types.ts +39 -0
  67. package/tsconfig.dev.json +17 -0
  68. package/tsconfig.prod.json +14 -0
  69. package/vite.config.js +5 -0
  70. package/dist/src/grid/plugins/GroupArea.d.ts +0 -3
  71. package/dist/src/multiGrid/plugins/BarsAndLines.d.ts +0 -1
  72. package/dist/src/multiGrid/plugins/FirstGroupScaleAxis.d.ts +0 -0
  73. package/dist/src/multiGrid/plugins/TwoValueScaleAxes.d.ts +0 -0
  74. package/src/multiGrid/plugins/BarStackAndLines.ts +0 -0
  75. package/src/multiGrid/plugins/BarsAndLines.ts +0 -126
  76. package/src/multiGrid/plugins/BarsTriangleAndLines.ts +0 -0
  77. package/src/multiGrid/plugins/FirstGroupScaleAxis.ts +0 -0
  78. package/src/multiGrid/plugins/TwoValueScaleAxes.ts +0 -0
  79. /package/dist/src/{multiGrid/plugins/BarStackAndLines.d.ts → base/BaseGroupArea.d.ts} +0 -0
  80. /package/{dist/src/multiGrid/plugins/BarsTriangleAndLines.d.ts → src/base/BaseGroupArea.ts} +0 -0
@@ -0,0 +1,279 @@
1
+ import type { Observable } from 'rxjs'
2
+ import {
3
+ Subject,
4
+ takeUntil,
5
+ of,
6
+ map,
7
+ switchMap,
8
+ combineLatest,
9
+ distinctUntilChanged,
10
+ shareReplay
11
+ } from 'rxjs'
12
+ import type { ContextObserverMultiGrid, ComputedDataGrid, DataFormatterGrid, ContextObserverGridDetail } from '@orbcharts/core'
13
+ // import { DATA_FORMATTER_MULTI_GRID_GRID_DEFAULT } from '@orbcharts/core/src/defaults'
14
+
15
+ // interface GridPluginParams {
16
+ // gridIndex: number
17
+ // }
18
+
19
+ // interface GridPluginObservables extends ContextObserverGridDetail {
20
+ // gridComputedData$: Observable<ComputedDataGrid>
21
+ // gridDataFormatter$: Observable<DataFormatterGrid>
22
+ // }
23
+
24
+ // // 對應grid資料的plugin所需Observable(必須有gridIndex)
25
+ // export const gridPluginObservables = (observer: ContextObserverMultiGrid<GridPluginParams>): GridPluginObservables => {
26
+ // const gridIndex$ = observer.fullParams$.pipe(
27
+ // map(fullParams => fullParams.gridIndex),
28
+ // distinctUntilChanged(),
29
+ // shareReplay(1)
30
+ // )
31
+
32
+ // const gridComputedData$: Observable<ComputedDataGrid> = combineLatest({
33
+ // computedData: observer.computedData$,
34
+ // gridIndex: gridIndex$,
35
+ // }).pipe(
36
+ // map((data) => {
37
+ // return data.computedData[data.gridIndex] ?? data.computedData[0]
38
+ // })
39
+ // )
40
+
41
+ // const gridDataFormatter$: Observable<DataFormatterGrid> = combineLatest({
42
+ // fullDataFormatter: observer.fullDataFormatter$,
43
+ // gridIndex: gridIndex$,
44
+ // }).pipe(
45
+ // map((data) => {
46
+ // const defaultGrid = data.fullDataFormatter.gridList[0] // ?? DATA_FORMATTER_MULTI_GRID_GRID_DEFAULT
47
+
48
+ // return {
49
+ // type: 'grid',
50
+ // grid: {
51
+ // ...data.fullDataFormatter.gridList[data.gridIndex] ?? defaultGrid
52
+ // },
53
+ // container: {
54
+ // ...data.fullDataFormatter.container
55
+ // }
56
+ // }
57
+ // })
58
+ // )
59
+
60
+ // const gridDetail$ = combineLatest({
61
+ // multiGridEachDetail: observer.multiGridEachDetail$,
62
+ // gridIndex: gridIndex$,
63
+ // }).pipe(
64
+ // switchMap(async d => d),
65
+ // map(data => {
66
+ // return data.multiGridEachDetail[data.gridIndex] ?? data.multiGridEachDetail[0]
67
+ // }),
68
+ // shareReplay(1)
69
+ // )
70
+
71
+ // const isSeriesPositionSeprate$ = gridDetail$.pipe(
72
+ // switchMap(d => d.isSeriesPositionSeprate$)
73
+ // )
74
+
75
+ // const gridContainer$ = gridDetail$.pipe(
76
+ // switchMap(d => d.gridContainer$)
77
+ // )
78
+
79
+ // const gridAxesTransform$ = gridDetail$.pipe(
80
+ // switchMap(d => d.gridAxesTransform$)
81
+ // )
82
+
83
+ // const gridAxesReverseTransform$ = gridDetail$.pipe(
84
+ // switchMap(d => d.gridAxesReverseTransform$)
85
+ // )
86
+
87
+ // const gridAxesSize$ = gridDetail$.pipe(
88
+ // switchMap(d => d.gridAxesSize$)
89
+ // )
90
+
91
+ // const gridGraphicTransform$ = gridDetail$.pipe(
92
+ // switchMap(d => d.gridGraphicTransform$)
93
+ // )
94
+
95
+ // const gridGraphicReverseScale$ = gridDetail$.pipe(
96
+ // switchMap(d => d.gridGraphicReverseScale$)
97
+ // )
98
+
99
+ // const gridHighlight$ = gridDetail$.pipe(
100
+ // switchMap(d => d.gridHighlight$)
101
+ // )
102
+
103
+ // const existedSeriesLabels$ = gridDetail$.pipe(
104
+ // switchMap(d => d.existedSeriesLabels$)
105
+ // )
106
+
107
+ // const SeriesDataMap$ = gridDetail$.pipe(
108
+ // switchMap(d => d.SeriesDataMap$)
109
+ // )
110
+
111
+ // const GroupDataMap$ = gridDetail$.pipe(
112
+ // switchMap(d => d.GroupDataMap$)
113
+ // )
114
+
115
+ // const visibleComputedData$ = gridDetail$.pipe(
116
+ // switchMap(d => d.visibleComputedData$)
117
+ // )
118
+
119
+
120
+
121
+ // return {
122
+ // gridComputedData$,
123
+ // gridDataFormatter$,
124
+ // gridAxesTransform$,
125
+ // gridGraphicTransform$,
126
+ // gridGraphicReverseScale$,
127
+ // gridAxesReverseTransform$,
128
+ // gridAxesSize$,
129
+ // gridHighlight$,
130
+ // existedSeriesLabels$,
131
+ // SeriesDataMap$,
132
+ // GroupDataMap$,
133
+ // visibleComputedData$,
134
+ // isSeriesPositionSeprate$,
135
+ // gridContainer$
136
+ // }
137
+ // }
138
+
139
+ // 可設定多個gridIndex的params
140
+ interface MultiGridPluginParams {
141
+ gridIndexes: number[]
142
+ }
143
+
144
+ interface MultiGridDetailObservables extends ContextObserverGridDetail {
145
+ gridComputedData$: Observable<ComputedDataGrid>
146
+ gridDataFormatter$: Observable<DataFormatterGrid>
147
+ }
148
+
149
+
150
+ // 對應grid資料的plugin所需Observable(必須有gridIndexes)
151
+ export const multiGridDetailObservables = (observer: ContextObserverMultiGrid<MultiGridPluginParams>): Observable<MultiGridDetailObservables[]> => {
152
+ const gridIndexes$ = observer.fullParams$.pipe(
153
+ map(fullParams => fullParams.gridIndexes),
154
+ distinctUntilChanged(),
155
+ shareReplay(1)
156
+ )
157
+ const destroy$ = new Subject()
158
+
159
+ return gridIndexes$.pipe(
160
+ map(gridIndexes => {
161
+ return gridIndexes.map(gridIndex => {
162
+ // 每次重新計算時,清除之前的訂閱
163
+ destroy$.next(undefined)
164
+
165
+ const gridIndex$ = of(gridIndex).pipe(
166
+ takeUntil(destroy$),
167
+ shareReplay(1)
168
+ )
169
+
170
+ const gridComputedData$: Observable<ComputedDataGrid> = combineLatest({
171
+ computedData: observer.computedData$,
172
+ gridIndex: gridIndex$,
173
+ }).pipe(
174
+ takeUntil(destroy$),
175
+ map((data) => {
176
+ return data.computedData[data.gridIndex] ?? data.computedData[0]
177
+ })
178
+ )
179
+
180
+ const gridDataFormatter$: Observable<DataFormatterGrid> = combineLatest({
181
+ fullDataFormatter: observer.fullDataFormatter$,
182
+ gridIndex: gridIndex$,
183
+ }).pipe(
184
+ takeUntil(destroy$),
185
+ map((data) => {
186
+ const defaultGrid = data.fullDataFormatter.gridList[0] // ?? DATA_FORMATTER_MULTI_GRID_GRID_DEFAULT
187
+
188
+ return {
189
+ type: 'grid',
190
+ grid: {
191
+ ...data.fullDataFormatter.gridList[data.gridIndex] ?? defaultGrid
192
+ },
193
+ container: {
194
+ ...data.fullDataFormatter.container
195
+ }
196
+ }
197
+ })
198
+ )
199
+
200
+ const gridDetail$ = combineLatest({
201
+ multiGridEachDetail: observer.multiGridEachDetail$,
202
+ gridIndex: gridIndex$,
203
+ }).pipe(
204
+ takeUntil(destroy$),
205
+ switchMap(async d => d),
206
+ map(data => {
207
+ return data.multiGridEachDetail[data.gridIndex] ?? data.multiGridEachDetail[0]
208
+ }),
209
+ shareReplay(1)
210
+ )
211
+
212
+ const isSeriesPositionSeprate$ = gridDetail$.pipe(
213
+ switchMap(d => d.isSeriesPositionSeprate$)
214
+ )
215
+
216
+ const gridContainer$ = gridDetail$.pipe(
217
+ switchMap(d => d.gridContainer$)
218
+ )
219
+
220
+ const gridAxesTransform$ = gridDetail$.pipe(
221
+ switchMap(d => d.gridAxesTransform$)
222
+ )
223
+
224
+ const gridAxesReverseTransform$ = gridDetail$.pipe(
225
+ switchMap(d => d.gridAxesReverseTransform$)
226
+ )
227
+
228
+ const gridAxesSize$ = gridDetail$.pipe(
229
+ switchMap(d => d.gridAxesSize$)
230
+ )
231
+
232
+ const gridGraphicTransform$ = gridDetail$.pipe(
233
+ switchMap(d => d.gridGraphicTransform$)
234
+ )
235
+
236
+ const gridGraphicReverseScale$ = gridDetail$.pipe(
237
+ switchMap(d => d.gridGraphicReverseScale$)
238
+ )
239
+
240
+ const gridHighlight$ = gridDetail$.pipe(
241
+ switchMap(d => d.gridHighlight$)
242
+ )
243
+
244
+ const existedSeriesLabels$ = gridDetail$.pipe(
245
+ switchMap(d => d.existedSeriesLabels$)
246
+ )
247
+
248
+ const SeriesDataMap$ = gridDetail$.pipe(
249
+ switchMap(d => d.SeriesDataMap$)
250
+ )
251
+
252
+ const GroupDataMap$ = gridDetail$.pipe(
253
+ switchMap(d => d.GroupDataMap$)
254
+ )
255
+
256
+ const visibleComputedData$ = gridDetail$.pipe(
257
+ switchMap(d => d.visibleComputedData$)
258
+ )
259
+
260
+ return {
261
+ gridComputedData$,
262
+ gridDataFormatter$,
263
+ gridAxesTransform$,
264
+ gridGraphicTransform$,
265
+ gridGraphicReverseScale$,
266
+ gridAxesReverseTransform$,
267
+ gridAxesSize$,
268
+ gridHighlight$,
269
+ existedSeriesLabels$,
270
+ SeriesDataMap$,
271
+ GroupDataMap$,
272
+ visibleComputedData$,
273
+ isSeriesPositionSeprate$,
274
+ gridContainer$
275
+ }
276
+ })
277
+ })
278
+ )
279
+ }
@@ -0,0 +1,60 @@
1
+ import * as d3 from 'd3'
2
+ import {
3
+ Subject } from 'rxjs'
4
+ import {
5
+ defineMultiGridPlugin } from '@orbcharts/core'
6
+ import { DEFAULT_MULTI_BAR_STACK_PARAMS } from '../defaults'
7
+ import { createBaseBarStack } from '../../base/BaseBarStack'
8
+ import { multiGridDetailObservables } from '../multiGridObservables'
9
+ import { getClassName, getUniID } from '../../utils/orbchartsUtils'
10
+
11
+ const pluginName = 'MultiBarStack'
12
+
13
+ const gridClassName = getClassName(pluginName, 'grid')
14
+
15
+ export const MultiBarStack = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_BAR_STACK_PARAMS)(({ selection, name, subject, observer }) => {
16
+ const destroy$ = new Subject()
17
+
18
+ const unsubscribeFnArr: (() => void)[] = []
19
+
20
+ const multiGridPlugin$ = multiGridDetailObservables(observer)
21
+
22
+ multiGridPlugin$.subscribe(data => {
23
+ // 每次重新計算時,清除之前的訂閱
24
+ unsubscribeFnArr.forEach(fn => fn())
25
+
26
+ selection.selectAll(`g.${gridClassName}`)
27
+ .data(data)
28
+ .join('g')
29
+ .attr('class', gridClassName)
30
+ .each((d, i, g) => {
31
+
32
+ const gridSelection = d3.select(g[i])
33
+
34
+ unsubscribeFnArr[i] = createBaseBarStack(pluginName, {
35
+ selection: gridSelection,
36
+ computedData$: d.gridComputedData$,
37
+ visibleComputedData$: d.visibleComputedData$,
38
+ existedSeriesLabels$: d.existedSeriesLabels$,
39
+ SeriesDataMap$: d.SeriesDataMap$,
40
+ GroupDataMap$: d.GroupDataMap$,
41
+ fullParams$: observer.fullParams$,
42
+ fullDataFormatter$: d.gridDataFormatter$,
43
+ fullChartParams$: observer.fullChartParams$,
44
+ gridAxesTransform$: d.gridAxesTransform$,
45
+ gridGraphicTransform$: d.gridGraphicTransform$,
46
+ gridGraphicReverseScale$: d.gridGraphicReverseScale$,
47
+ gridAxesSize$: d.gridAxesSize$,
48
+ gridHighlight$: d.gridHighlight$,
49
+ gridContainer$: d.gridContainer$,
50
+ isSeriesPositionSeprate$: d.isSeriesPositionSeprate$,
51
+ event$: subject.event$ as Subject<any>,
52
+ })
53
+ })
54
+ })
55
+
56
+ return () => {
57
+ destroy$.next(undefined)
58
+ unsubscribeFnArr.forEach(fn => fn())
59
+ }
60
+ })
@@ -0,0 +1,59 @@
1
+ import * as d3 from 'd3'
2
+ import {
3
+ Subject } from 'rxjs'
4
+ import {
5
+ defineMultiGridPlugin } from '@orbcharts/core'
6
+ import { DEFAULT_MULTI_BARS_PARAMS } from '../defaults'
7
+ import { createBaseBars } from '../../base/BaseBars'
8
+ import { multiGridDetailObservables } from '../multiGridObservables'
9
+ import { getClassName, getUniID } from '../../utils/orbchartsUtils'
10
+
11
+ const pluginName = 'MultiBars'
12
+
13
+ const gridClassName = getClassName(pluginName, 'grid')
14
+
15
+ export const MultiBars = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_BARS_PARAMS)(({ selection, name, subject, observer }) => {
16
+ const destroy$ = new Subject()
17
+
18
+ const unsubscribeFnArr: (() => void)[] = []
19
+
20
+ const multiGridPlugin$ = multiGridDetailObservables(observer)
21
+
22
+ multiGridPlugin$.subscribe(data => {
23
+ // 每次重新計算時,清除之前的訂閱
24
+ unsubscribeFnArr.forEach(fn => fn())
25
+
26
+ selection.selectAll(`g.${gridClassName}`)
27
+ .data(data)
28
+ .join('g')
29
+ .attr('class', gridClassName)
30
+ .each((d, i, g) => {
31
+
32
+ const gridSelection = d3.select(g[i])
33
+
34
+ unsubscribeFnArr[i] = createBaseBars(pluginName, {
35
+ selection: gridSelection,
36
+ computedData$: d.gridComputedData$,
37
+ visibleComputedData$: d.visibleComputedData$,
38
+ existedSeriesLabels$: d.existedSeriesLabels$,
39
+ SeriesDataMap$: d.SeriesDataMap$,
40
+ GroupDataMap$: d.GroupDataMap$,
41
+ fullParams$: observer.fullParams$,
42
+ fullChartParams$: observer.fullChartParams$,
43
+ gridAxesTransform$: d.gridAxesTransform$,
44
+ gridGraphicTransform$: d.gridGraphicTransform$,
45
+ gridGraphicReverseScale$: d.gridGraphicReverseScale$,
46
+ gridAxesSize$: d.gridAxesSize$,
47
+ gridHighlight$: d.gridHighlight$,
48
+ gridContainer$: d.gridContainer$,
49
+ isSeriesPositionSeprate$: d.isSeriesPositionSeprate$,
50
+ event$: subject.event$ as Subject<any>,
51
+ })
52
+ })
53
+ })
54
+
55
+ return () => {
56
+ destroy$.next(undefined)
57
+ unsubscribeFnArr.forEach(fn => fn())
58
+ }
59
+ })
@@ -0,0 +1,58 @@
1
+ import * as d3 from 'd3'
2
+ import {
3
+ Subject } from 'rxjs'
4
+ import {
5
+ defineMultiGridPlugin } from '@orbcharts/core'
6
+ import { DEFAULT_MULTI_BARS_TRIANGLE_PARAMS } from '../defaults'
7
+ import { createBaseBarsTriangle } from '../../base/BaseBarsTriangle'
8
+ import { multiGridDetailObservables } from '../multiGridObservables'
9
+ import { getClassName, getUniID } from '../../utils/orbchartsUtils'
10
+
11
+ const pluginName = 'MultiBarsTriangle'
12
+
13
+ const gridClassName = getClassName(pluginName, 'grid')
14
+
15
+ export const MultiBarsTriangle = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_BARS_TRIANGLE_PARAMS)(({ selection, name, subject, observer }) => {
16
+ const destroy$ = new Subject()
17
+
18
+ const unsubscribeFnArr: (() => void)[] = []
19
+
20
+ const multiGridPlugin$ = multiGridDetailObservables(observer)
21
+
22
+ multiGridPlugin$.subscribe(data => {
23
+ // 每次重新計算時,清除之前的訂閱
24
+ unsubscribeFnArr.forEach(fn => fn())
25
+
26
+ selection.selectAll(`g.${gridClassName}`)
27
+ .data(data)
28
+ .join('g')
29
+ .attr('class', gridClassName)
30
+ .each((d, i, g) => {
31
+
32
+ const gridSelection = d3.select(g[i])
33
+
34
+ unsubscribeFnArr[i] = createBaseBarsTriangle(pluginName, {
35
+ selection: gridSelection,
36
+ computedData$: d.gridComputedData$,
37
+ visibleComputedData$: d.visibleComputedData$,
38
+ existedSeriesLabels$: d.existedSeriesLabels$,
39
+ SeriesDataMap$: d.SeriesDataMap$,
40
+ GroupDataMap$: d.GroupDataMap$,
41
+ fullParams$: observer.fullParams$,
42
+ fullChartParams$: observer.fullChartParams$,
43
+ gridAxesTransform$: d.gridAxesTransform$,
44
+ gridGraphicTransform$: d.gridGraphicTransform$,
45
+ gridAxesSize$: d.gridAxesSize$,
46
+ gridHighlight$: d.gridHighlight$,
47
+ gridContainer$: d.gridContainer$,
48
+ isSeriesPositionSeprate$: d.isSeriesPositionSeprate$,
49
+ event$: subject.event$ as Subject<any>,
50
+ })
51
+ })
52
+ })
53
+
54
+ return () => {
55
+ destroy$.next(undefined)
56
+ unsubscribeFnArr.forEach(fn => fn())
57
+ }
58
+ })
@@ -0,0 +1,58 @@
1
+ import * as d3 from 'd3'
2
+ import {
3
+ Subject } from 'rxjs'
4
+ import {
5
+ defineMultiGridPlugin } from '@orbcharts/core'
6
+ import { DEFAULT_MULTI_DOTS_PARAMS } from '../defaults'
7
+ import { createBaseDots } from '../../base/BaseDots'
8
+ import { multiGridDetailObservables } from '../multiGridObservables'
9
+ import { getClassName, getUniID } from '../../utils/orbchartsUtils'
10
+
11
+ const pluginName = 'MultiDots'
12
+
13
+ const gridClassName = getClassName(pluginName, 'grid')
14
+
15
+ export const MultiDots = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_DOTS_PARAMS)(({ selection, name, subject, observer }) => {
16
+ const destroy$ = new Subject()
17
+
18
+ const unsubscribeFnArr: (() => void)[] = []
19
+
20
+ const multiGridPlugin$ = multiGridDetailObservables(observer)
21
+
22
+ multiGridPlugin$.subscribe(data => {
23
+ // 每次重新計算時,清除之前的訂閱
24
+ unsubscribeFnArr.forEach(fn => fn())
25
+
26
+ selection.selectAll(`g.${gridClassName}`)
27
+ .data(data)
28
+ .join('g')
29
+ .attr('class', gridClassName)
30
+ .each((d, i, g) => {
31
+
32
+ const gridSelection = d3.select(g[i])
33
+
34
+ unsubscribeFnArr[i] = createBaseDots(pluginName, {
35
+ selection: gridSelection,
36
+ computedData$: d.gridComputedData$,
37
+ visibleComputedData$: d.visibleComputedData$,
38
+ existedSeriesLabels$: d.existedSeriesLabels$,
39
+ SeriesDataMap$: d.SeriesDataMap$,
40
+ GroupDataMap$: d.GroupDataMap$,
41
+ fullParams$: observer.fullParams$,
42
+ fullChartParams$: observer.fullChartParams$,
43
+ gridAxesTransform$: d.gridAxesTransform$,
44
+ gridGraphicTransform$: d.gridGraphicTransform$,
45
+ gridGraphicReverseScale$: d.gridGraphicReverseScale$,
46
+ gridAxesSize$: d.gridAxesSize$,
47
+ gridHighlight$: d.gridHighlight$,
48
+ gridContainer$: d.gridContainer$,
49
+ event$: subject.event$ as Subject<any>,
50
+ })
51
+ })
52
+ })
53
+
54
+ return () => {
55
+ destroy$.next(undefined)
56
+ unsubscribeFnArr.forEach(fn => fn())
57
+ }
58
+ })
@@ -7,7 +7,7 @@ import {
7
7
  Observable,
8
8
  Subject } from 'rxjs'
9
9
  import {
10
- defineMultiGridPlugin } from '@orbcharts/core'
10
+ defineMultiGridPlugin, mergeOptionsWithDefault } from '@orbcharts/core'
11
11
  import { DEFAULT_MULTI_GRID_LEGEND_PARAMS } from '../defaults'
12
12
  import { createBaseLegend } from '../../base/BaseLegend'
13
13
  import type { BaseLegendParams } from '../../base/BaseLegend'
@@ -18,7 +18,7 @@ export const MultiGridLegend = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_G
18
18
 
19
19
  const destroy$ = new Subject()
20
20
 
21
- const seriesLabels$ = observer.multiGrid$.pipe(
21
+ const seriesLabels$ = observer.multiGridEachDetail$.pipe(
22
22
  takeUntil(destroy$),
23
23
  map(multiGrid => {
24
24
  const seriesLabelsObservableArr = multiGrid.map((grid, gridIndex) => {
@@ -35,7 +35,7 @@ export const MultiGridLegend = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_G
35
35
 
36
36
  const seriesList$ = combineLatest({
37
37
  fullParams: observer.fullParams$,
38
- multiGrid: observer.multiGrid$,
38
+ multiGrid: observer.multiGridEachDetail$,
39
39
  computedData: observer.computedData$,
40
40
  }).pipe(
41
41
  takeUntil(destroy$),
@@ -45,13 +45,11 @@ export const MultiGridLegend = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_G
45
45
  return data.computedData
46
46
  .map((gridData, gridIndex) => {
47
47
  // 這個grid全部series要套用的圖例列點樣式
48
- const gridListStyle = data.fullParams.gridList[gridIndex]
49
- ? data.fullParams.gridList[gridIndex]
50
- : {
51
- listRectWidth: data.fullParams.listRectWidth,
52
- listRectHeight: data.fullParams.listRectHeight,
53
- listRectRadius: data.fullParams.listRectRadius,
54
- }
48
+ const gridListStyle = mergeOptionsWithDefault(data.fullParams.gridList[gridIndex] ?? {}, {
49
+ listRectWidth: data.fullParams.listRectWidth,
50
+ listRectHeight: data.fullParams.listRectHeight,
51
+ listRectRadius: data.fullParams.listRectRadius,
52
+ })
55
53
  // series
56
54
  return gridData.map(d => gridListStyle)
57
55
  })
@@ -65,6 +63,7 @@ export const MultiGridLegend = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_G
65
63
  seriesList: seriesList$
66
64
  }).pipe(
67
65
  takeUntil(destroy$),
66
+ switchMap(async d => d),
68
67
  map(d => {
69
68
  return {
70
69
  ...d.fullParams,
@@ -0,0 +1,53 @@
1
+ import * as d3 from 'd3'
2
+ import {
3
+ Subject } from 'rxjs'
4
+ import {
5
+ defineMultiGridPlugin } from '@orbcharts/core'
6
+ import { DEFAULT_MULTI_GROUP_AXIS_PARAMS } from '../defaults'
7
+ import { createBaseGroupAxis } from '../../base/BaseGroupAxis'
8
+ import { multiGridDetailObservables } from '../multiGridObservables'
9
+ import { getClassName, getUniID } from '../../utils/orbchartsUtils'
10
+
11
+ const pluginName = 'MultiGroupAxis'
12
+
13
+ const gridClassName = getClassName(pluginName, 'grid')
14
+
15
+ export const MultiGroupAxis = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_GROUP_AXIS_PARAMS)(({ selection, name, subject, observer }) => {
16
+ const destroy$ = new Subject()
17
+
18
+ const unsubscribeFnArr: (() => void)[] = []
19
+
20
+ const multiGridPlugin$ = multiGridDetailObservables(observer)
21
+
22
+ multiGridPlugin$.subscribe(data => {
23
+ // 每次重新計算時,清除之前的訂閱
24
+ unsubscribeFnArr.forEach(fn => fn())
25
+
26
+ selection.selectAll(`g.${gridClassName}`)
27
+ .data(data)
28
+ .join('g')
29
+ .attr('class', gridClassName)
30
+ .each((d, i, g) => {
31
+
32
+ const gridSelection = d3.select(g[i])
33
+
34
+ unsubscribeFnArr[i] = createBaseGroupAxis(pluginName, {
35
+ selection: gridSelection,
36
+ computedData$: d.gridComputedData$,
37
+ fullParams$: observer.fullParams$,
38
+ fullDataFormatter$: d.gridDataFormatter$,
39
+ fullChartParams$: observer.fullChartParams$,
40
+ gridAxesTransform$: d.gridAxesTransform$,
41
+ gridAxesReverseTransform$: d.gridAxesReverseTransform$,
42
+ gridAxesSize$: d.gridAxesSize$,
43
+ gridContainer$: d.gridContainer$,
44
+ isSeriesPositionSeprate$: d.isSeriesPositionSeprate$,
45
+ })
46
+ })
47
+ })
48
+
49
+ return () => {
50
+ destroy$.next(undefined)
51
+ unsubscribeFnArr.forEach(fn => fn())
52
+ }
53
+ })
@@ -0,0 +1,58 @@
1
+ import * as d3 from 'd3'
2
+ import {
3
+ Subject } from 'rxjs'
4
+ import {
5
+ defineMultiGridPlugin } from '@orbcharts/core'
6
+
7
+ import { DEFAULT_MULTI_LINES_PARAMS } from '../defaults'
8
+ import { createBaseLines } from '../../base/BaseLines'
9
+ import { multiGridDetailObservables } from '../multiGridObservables'
10
+ import { getClassName, getUniID } from '../../utils/orbchartsUtils'
11
+
12
+ const pluginName = 'MultiLines'
13
+
14
+ const gridClassName = getClassName(pluginName, 'grid')
15
+
16
+ export const MultiLines = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_LINES_PARAMS)(({ selection, name, subject, observer }) => {
17
+ const destroy$ = new Subject()
18
+
19
+ const unsubscribeFnArr: (() => void)[] = []
20
+
21
+ const multiGridPlugin$ = multiGridDetailObservables(observer)
22
+
23
+ multiGridPlugin$.subscribe(data => {
24
+ // 每次重新計算時,清除之前的訂閱
25
+ unsubscribeFnArr.forEach(fn => fn())
26
+
27
+ selection.selectAll(`g.${gridClassName}`)
28
+ .data(data)
29
+ .join('g')
30
+ .attr('class', gridClassName)
31
+ .each((d, i, g) => {
32
+
33
+ const gridSelection = d3.select(g[i])
34
+
35
+ unsubscribeFnArr[i] = createBaseLines(pluginName, {
36
+ selection: gridSelection,
37
+ computedData$: d.gridComputedData$,
38
+ existedSeriesLabels$: d.existedSeriesLabels$,
39
+ SeriesDataMap$: d.SeriesDataMap$,
40
+ GroupDataMap$: d.GroupDataMap$,
41
+ fullDataFormatter$: d.gridDataFormatter$,
42
+ fullParams$: observer.fullParams$,
43
+ fullChartParams$: observer.fullChartParams$,
44
+ gridAxesTransform$: d.gridAxesTransform$,
45
+ gridGraphicTransform$: d.gridGraphicTransform$,
46
+ gridAxesSize$: d.gridAxesSize$,
47
+ gridHighlight$: d.gridHighlight$,
48
+ gridContainer$: d.gridContainer$,
49
+ event$: subject.event$ as Subject<any>,
50
+ })
51
+ })
52
+ })
53
+
54
+ return () => {
55
+ destroy$.next(undefined)
56
+ unsubscribeFnArr.forEach(fn => fn())
57
+ }
58
+ })