@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.
- package/dist/orbcharts-plugins-basic.es.js +10246 -9523
- package/dist/orbcharts-plugins-basic.umd.js +10 -10
- package/dist/src/base/BaseBarStack.d.ts +5 -1
- package/dist/src/base/BaseBars.d.ts +5 -1
- package/dist/src/base/BaseBarsTriangle.d.ts +5 -1
- package/dist/src/base/BaseDots.d.ts +33 -0
- package/dist/src/base/BaseGroupAxis.d.ts +35 -0
- package/dist/src/base/BaseLines.d.ts +3 -1
- package/dist/src/base/BaseValueAxis.d.ts +36 -0
- package/dist/src/grid/defaults.d.ts +3 -3
- package/dist/src/grid/gridObservables.d.ts +18 -4
- package/dist/src/grid/index.d.ts +1 -1
- package/dist/src/grid/plugins/Dots.d.ts +1 -3
- package/dist/src/grid/plugins/GroupAux.d.ts +3 -0
- package/dist/src/grid/plugins/GroupAxis.d.ts +1 -3
- package/dist/src/grid/plugins/ValueAxis.d.ts +1 -3
- package/dist/src/grid/plugins/ValueStackAxis.d.ts +1 -3
- package/dist/src/grid/types.d.ts +1 -1
- package/dist/src/multiGrid/defaults.d.ts +9 -2
- package/dist/src/multiGrid/index.d.ts +8 -1
- package/dist/src/multiGrid/multiGridObservables.d.ts +12 -0
- package/dist/src/multiGrid/plugins/MultiBarStack.d.ts +1 -0
- package/dist/src/multiGrid/plugins/MultiBars.d.ts +1 -0
- package/dist/src/multiGrid/plugins/MultiBarsTriangle.d.ts +1 -0
- package/dist/src/multiGrid/plugins/MultiDots.d.ts +1 -0
- package/dist/src/multiGrid/plugins/MultiGroupAxis.d.ts +1 -0
- package/dist/src/multiGrid/plugins/MultiLines.d.ts +1 -0
- package/dist/src/multiGrid/plugins/MultiValueAxis.d.ts +1 -0
- package/dist/src/multiGrid/plugins/OverlappingValueAxes.d.ts +1 -0
- package/dist/src/multiGrid/types.d.ts +31 -0
- package/package.json +2 -2
- package/src/base/BaseBarStack.ts +375 -198
- package/src/base/BaseBars.ts +297 -191
- package/src/base/BaseBarsTriangle.ts +344 -229
- package/src/base/BaseDots.ts +634 -0
- package/src/base/BaseGroupAxis.ts +497 -0
- package/src/base/BaseLines.ts +180 -50
- package/src/base/BaseValueAxis.ts +475 -0
- package/src/grid/defaults.ts +3 -3
- package/src/grid/gridObservables.ts +147 -14
- package/src/grid/index.ts +1 -1
- package/src/grid/plugins/BarStack.ts +4 -0
- package/src/grid/plugins/Bars.ts +4 -0
- package/src/grid/plugins/BarsTriangle.ts +4 -0
- package/src/grid/plugins/Dots.ts +19 -410
- package/src/grid/plugins/{GroupArea.ts → GroupAux.ts} +24 -24
- package/src/grid/plugins/GroupAxis.ts +16 -348
- package/src/grid/plugins/Lines.ts +2 -0
- package/src/grid/plugins/ScalingArea.ts +9 -6
- package/src/grid/plugins/ValueAxis.ts +13 -337
- package/src/grid/plugins/ValueStackAxis.ts +35 -336
- package/src/grid/types.ts +1 -1
- package/src/index.ts +1 -0
- package/src/multiGrid/defaults.ts +120 -14
- package/src/multiGrid/index.ts +9 -2
- package/src/multiGrid/multiGridObservables.ts +279 -0
- package/src/multiGrid/plugins/MultiBarStack.ts +60 -0
- package/src/multiGrid/plugins/MultiBars.ts +59 -0
- package/src/multiGrid/plugins/MultiBarsTriangle.ts +58 -0
- package/src/multiGrid/plugins/MultiDots.ts +58 -0
- package/src/multiGrid/plugins/MultiGridLegend.ts +9 -10
- package/src/multiGrid/plugins/MultiGroupAxis.ts +53 -0
- package/src/multiGrid/plugins/MultiLines.ts +58 -0
- package/src/multiGrid/plugins/MultiValueAxis.ts +53 -0
- package/src/multiGrid/plugins/OverlappingValueAxes.ts +165 -0
- package/src/multiGrid/types.ts +39 -0
- package/tsconfig.dev.json +17 -0
- package/tsconfig.prod.json +14 -0
- package/vite.config.js +5 -0
- package/dist/src/grid/plugins/GroupArea.d.ts +0 -3
- package/dist/src/multiGrid/plugins/BarsAndLines.d.ts +0 -1
- package/dist/src/multiGrid/plugins/FirstGroupScaleAxis.d.ts +0 -0
- package/dist/src/multiGrid/plugins/TwoValueScaleAxes.d.ts +0 -0
- package/src/multiGrid/plugins/BarStackAndLines.ts +0 -0
- package/src/multiGrid/plugins/BarsAndLines.ts +0 -126
- package/src/multiGrid/plugins/BarsTriangleAndLines.ts +0 -0
- package/src/multiGrid/plugins/FirstGroupScaleAxis.ts +0 -0
- package/src/multiGrid/plugins/TwoValueScaleAxes.ts +0 -0
- /package/dist/src/{multiGrid/plugins/BarStackAndLines.d.ts → base/BaseGroupArea.d.ts} +0 -0
- /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.
|
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.
|
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
|
-
|
50
|
-
:
|
51
|
-
|
52
|
-
|
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
|
+
})
|