@orbcharts/core 3.0.0-beta.1 → 3.0.0-beta.2
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.
- package/LICENSE +200 -200
- package/dist/orbcharts-core.es.js +4 -3
- package/dist/orbcharts-core.umd.js +1 -1
- package/lib/core-types.ts +7 -7
- package/package.json +42 -42
- package/src/AbstractChart.ts +57 -57
- package/src/GridChart.ts +24 -24
- package/src/MultiGridChart.ts +24 -24
- package/src/MultiValueChart.ts +24 -24
- package/src/RelationshipChart.ts +24 -24
- package/src/SeriesChart.ts +24 -24
- package/src/TreeChart.ts +24 -24
- package/src/base/createBaseChart.ts +505 -505
- package/src/base/createBasePlugin.ts +153 -153
- package/src/base/validators/chartOptionsValidator.ts +23 -23
- package/src/base/validators/chartParamsValidator.ts +133 -133
- package/src/base/validators/elementValidator.ts +13 -13
- package/src/base/validators/pluginsValidator.ts +14 -14
- package/src/defaults.ts +232 -232
- package/src/defineGridPlugin.ts +3 -3
- package/src/defineMultiGridPlugin.ts +3 -3
- package/src/defineMultiValuePlugin.ts +3 -3
- package/src/defineNoneDataPlugin.ts +4 -4
- package/src/defineRelationshipPlugin.ts +3 -3
- package/src/defineSeriesPlugin.ts +3 -3
- package/src/defineTreePlugin.ts +3 -3
- package/src/grid/computedDataFn.ts +129 -129
- package/src/grid/contextObserverCallback.ts +155 -155
- package/src/grid/dataFormatterValidator.ts +101 -101
- package/src/grid/dataValidator.ts +12 -12
- package/src/index.ts +20 -20
- package/src/multiGrid/computedDataFn.ts +123 -123
- package/src/multiGrid/contextObserverCallback.ts +41 -41
- package/src/multiGrid/dataFormatterValidator.ts +115 -115
- package/src/multiGrid/dataValidator.ts +12 -12
- package/src/multiValue/computedDataFn.ts +176 -176
- package/src/multiValue/contextObserverCallback.ts +12 -12
- package/src/multiValue/dataFormatterValidator.ts +9 -9
- package/src/multiValue/dataValidator.ts +9 -9
- package/src/relationship/computedDataFn.ts +125 -125
- package/src/relationship/contextObserverCallback.ts +12 -12
- package/src/relationship/dataFormatterValidator.ts +9 -9
- package/src/relationship/dataValidator.ts +9 -9
- package/src/series/computedDataFn.ts +88 -88
- package/src/series/contextObserverCallback.ts +100 -100
- package/src/series/dataFormatterValidator.ts +41 -41
- package/src/series/dataValidator.ts +12 -12
- package/src/tree/computedDataFn.ts +130 -130
- package/src/tree/contextObserverCallback.ts +61 -61
- package/src/tree/dataFormatterValidator.ts +13 -13
- package/src/tree/dataValidator.ts +13 -13
- package/src/utils/commonUtils.ts +55 -55
- package/src/utils/d3Utils.ts +108 -108
- package/src/utils/errorMessage.ts +42 -42
- package/src/utils/gridObservables.ts +614 -611
- package/src/utils/index.ts +9 -9
- package/src/utils/multiGridObservables.ts +366 -366
- package/src/utils/observables.ts +219 -219
- package/src/utils/orbchartsUtils.ts +352 -352
- package/src/utils/seriesObservables.ts +175 -175
- package/src/utils/treeObservables.ts +94 -94
- package/src/utils/validator.ts +125 -125
- package/tsconfig.base.json +13 -13
- package/tsconfig.json +2 -2
- package/vite-env.d.ts +6 -6
- package/vite.config.js +22 -22
@@ -1,367 +1,367 @@
|
|
1
|
-
import {
|
2
|
-
combineLatest,
|
3
|
-
distinctUntilChanged,
|
4
|
-
filter,
|
5
|
-
of,
|
6
|
-
map,
|
7
|
-
merge,
|
8
|
-
takeUntil,
|
9
|
-
shareReplay,
|
10
|
-
switchMap,
|
11
|
-
Subject,
|
12
|
-
Observable,
|
13
|
-
combineLatestAll} from 'rxjs'
|
14
|
-
import type {
|
15
|
-
AxisPosition,
|
16
|
-
ChartType,
|
17
|
-
ChartParams,
|
18
|
-
ComputedDataTypeMap,
|
19
|
-
ComputedDataGrid,
|
20
|
-
ContextObserverMultiGridDetail,
|
21
|
-
DataTypeMap,
|
22
|
-
DataFormatterTypeMap,
|
23
|
-
DataFormatterGrid,
|
24
|
-
DataFormatterMultiGridContainer,
|
25
|
-
EventMultiGrid,
|
26
|
-
GridContainerPosition,
|
27
|
-
HighlightTarget,
|
28
|
-
Layout,
|
29
|
-
TransformData } from '../../lib/core-types'
|
30
|
-
import {
|
31
|
-
highlightObservable,
|
32
|
-
seriesDataMapObservable,
|
33
|
-
groupDataMapObservable } from './observables'
|
34
|
-
import {
|
35
|
-
gridAxesTransformObservable,
|
36
|
-
gridGraphicTransformObservable,
|
37
|
-
gridGraphicReverseScaleObservable,
|
38
|
-
gridAxesReverseTransformObservable,
|
39
|
-
gridAxesSizeObservable,
|
40
|
-
gridSeriesLabelsObservable,
|
41
|
-
gridComputedLayoutDataObservable,
|
42
|
-
gridVisibleComputedDataObservable,
|
43
|
-
gridVisibleComputedLayoutDataObservable,
|
44
|
-
// isSeriesSeprateObservable,
|
45
|
-
computedStackedDataObservables } from './gridObservables'
|
46
|
-
import { DATA_FORMATTER_MULTI_GRID_GRID_DEFAULT } from '../defaults'
|
47
|
-
import { calcGridContainerLayout } from './orbchartsUtils'
|
48
|
-
|
49
|
-
// 每一個grid計算出來的所有Observable
|
50
|
-
export const multiGridEachDetailObservable = ({ fullDataFormatter$, computedData$, layout$, fullChartParams$, event$ }: {
|
51
|
-
fullDataFormatter$: Observable<DataFormatterTypeMap<'multiGrid'>>
|
52
|
-
computedData$: Observable<ComputedDataTypeMap<'multiGrid'>>
|
53
|
-
layout$: Observable<Layout>
|
54
|
-
fullChartParams$: Observable<ChartParams>
|
55
|
-
event$: Subject<EventMultiGrid>
|
56
|
-
}): Observable<ContextObserverMultiGridDetail[]> => {
|
57
|
-
|
58
|
-
const destroy$ = new Subject()
|
59
|
-
|
60
|
-
// highlight全部grid
|
61
|
-
const allGridHighlight$ = highlightObservable({
|
62
|
-
datumList$: computedData$.pipe(
|
63
|
-
map(d => d.flat().flat()),
|
64
|
-
shareReplay(1)
|
65
|
-
),
|
66
|
-
fullChartParams$: fullChartParams$,
|
67
|
-
event$: event$
|
68
|
-
}).pipe(
|
69
|
-
shareReplay(1)
|
70
|
-
)
|
71
|
-
|
72
|
-
const multiGridContainer$ = multiGridContainerObservable({
|
73
|
-
computedData$: computedData$,
|
74
|
-
fullDataFormatter$: fullDataFormatter$,
|
75
|
-
layout$: layout$,
|
76
|
-
}).pipe(
|
77
|
-
shareReplay(1)
|
78
|
-
)
|
79
|
-
|
80
|
-
return combineLatest({
|
81
|
-
fullDataFormatter: fullDataFormatter$,
|
82
|
-
computedData: computedData$,
|
83
|
-
multiGridContainer: multiGridContainer$
|
84
|
-
}).pipe(
|
85
|
-
switchMap(async (d) => d),
|
86
|
-
// distinctUntilChanged((a, b) => {
|
87
|
-
// // 只有當computedData的長度改變時,才重新計算
|
88
|
-
// return a.computedData.length === b.computedData.length
|
89
|
-
// }),
|
90
|
-
map(data => {
|
91
|
-
// 每次重新計算時,清除之前的訂閱
|
92
|
-
destroy$.next(undefined)
|
93
|
-
|
94
|
-
const defaultGrid = data.fullDataFormatter.gridList[0] ?? DATA_FORMATTER_MULTI_GRID_GRID_DEFAULT
|
95
|
-
|
96
|
-
return data.computedData.map((gridComputedData, gridIndex) => {
|
97
|
-
|
98
|
-
// -- 取得該grid的data和dataFormatter
|
99
|
-
const grid = data.fullDataFormatter.gridList[gridIndex] ?? defaultGrid
|
100
|
-
const gridDataFormatter: DataFormatterGrid = {
|
101
|
-
type: 'grid',
|
102
|
-
visibleFilter: data.fullDataFormatter.visibleFilter as any,
|
103
|
-
grid: {
|
104
|
-
...grid
|
105
|
-
},
|
106
|
-
container: {
|
107
|
-
...data.fullDataFormatter.container
|
108
|
-
}
|
109
|
-
}
|
110
|
-
const gridDataFormatter$ = of(gridDataFormatter).pipe(
|
111
|
-
takeUntil(destroy$),
|
112
|
-
shareReplay(1)
|
113
|
-
)
|
114
|
-
const gridComputedData$ = of(gridComputedData).pipe(
|
115
|
-
takeUntil(destroy$),
|
116
|
-
shareReplay(1)
|
117
|
-
)
|
118
|
-
|
119
|
-
// const isSeriesSeprate$ = isSeriesSeprateObservable({
|
120
|
-
// computedData$: gridComputedData$,
|
121
|
-
// fullDataFormatter$: gridDataFormatter$,
|
122
|
-
// }).pipe(
|
123
|
-
// takeUntil(destroy$),
|
124
|
-
// shareReplay(1)
|
125
|
-
// )
|
126
|
-
|
127
|
-
// const gridContainerPosition$ = gridContainerPositionObservable({
|
128
|
-
// computedData$: gridComputedData$,
|
129
|
-
// fullDataFormatter$: gridDataFormatter$,
|
130
|
-
// layout$
|
131
|
-
// }).pipe(
|
132
|
-
// shareReplay(1)
|
133
|
-
// )
|
134
|
-
|
135
|
-
const isSeriesSeprate$ = gridDataFormatter$.pipe(
|
136
|
-
map(d => d.grid.separateSeries),
|
137
|
-
distinctUntilChanged(),
|
138
|
-
shareReplay(1)
|
139
|
-
)
|
140
|
-
|
141
|
-
const gridContainerPosition$ = of(data.multiGridContainer[gridIndex]).pipe(
|
142
|
-
takeUntil(destroy$),
|
143
|
-
shareReplay(1)
|
144
|
-
)
|
145
|
-
|
146
|
-
const gridAxesTransform$ = gridAxesTransformObservable({
|
147
|
-
fullDataFormatter$: gridDataFormatter$,
|
148
|
-
layout$: layout$
|
149
|
-
}).pipe(
|
150
|
-
takeUntil(destroy$),
|
151
|
-
shareReplay(1)
|
152
|
-
)
|
153
|
-
|
154
|
-
|
155
|
-
const gridAxesReverseTransform$ = gridAxesReverseTransformObservable({
|
156
|
-
gridAxesTransform$
|
157
|
-
}).pipe(
|
158
|
-
takeUntil(destroy$),
|
159
|
-
shareReplay(1)
|
160
|
-
)
|
161
|
-
|
162
|
-
const gridGraphicTransform$ = gridGraphicTransformObservable({
|
163
|
-
computedData$: gridComputedData$,
|
164
|
-
fullDataFormatter$: gridDataFormatter$,
|
165
|
-
layout$: layout$
|
166
|
-
}).pipe(
|
167
|
-
takeUntil(destroy$),
|
168
|
-
shareReplay(1)
|
169
|
-
)
|
170
|
-
|
171
|
-
const gridGraphicReverseScale$ = gridGraphicReverseScaleObservable({
|
172
|
-
gridContainerPosition$: gridContainerPosition$,
|
173
|
-
gridAxesTransform$: gridAxesTransform$,
|
174
|
-
gridGraphicTransform$: gridGraphicTransform$,
|
175
|
-
})
|
176
|
-
|
177
|
-
const gridAxesSize$ = gridAxesSizeObservable({
|
178
|
-
fullDataFormatter$: gridDataFormatter$,
|
179
|
-
layout$: layout$
|
180
|
-
}).pipe(
|
181
|
-
takeUntil(destroy$),
|
182
|
-
shareReplay(1)
|
183
|
-
)
|
184
|
-
|
185
|
-
const datumList$ = gridComputedData$.pipe(
|
186
|
-
map(d => d.flat())
|
187
|
-
).pipe(
|
188
|
-
takeUntil(destroy$),
|
189
|
-
shareReplay(1)
|
190
|
-
)
|
191
|
-
|
192
|
-
// const gridHighlight$ = highlightObservable({
|
193
|
-
// datumList$,
|
194
|
-
// fullChartParams$: fullChartParams$,
|
195
|
-
// event$: event$
|
196
|
-
// }).pipe(
|
197
|
-
// shareReplay(1)
|
198
|
-
// )
|
199
|
-
|
200
|
-
const seriesLabels$ = gridSeriesLabelsObservable({
|
201
|
-
computedData$: gridComputedData$,
|
202
|
-
}).pipe(
|
203
|
-
takeUntil(destroy$),
|
204
|
-
shareReplay(1)
|
205
|
-
)
|
206
|
-
|
207
|
-
const SeriesDataMap$ = seriesDataMapObservable({
|
208
|
-
datumList$: datumList$
|
209
|
-
}).pipe(
|
210
|
-
takeUntil(destroy$),
|
211
|
-
shareReplay(1)
|
212
|
-
)
|
213
|
-
|
214
|
-
const GroupDataMap$ = groupDataMapObservable({
|
215
|
-
datumList$: datumList$
|
216
|
-
}).pipe(
|
217
|
-
takeUntil(destroy$),
|
218
|
-
shareReplay(1)
|
219
|
-
)
|
220
|
-
|
221
|
-
const visibleComputedData$ = gridVisibleComputedDataObservable({
|
222
|
-
computedData$: gridComputedData$,
|
223
|
-
}).pipe(
|
224
|
-
takeUntil(destroy$),
|
225
|
-
shareReplay(1)
|
226
|
-
)
|
227
|
-
|
228
|
-
const computedLayoutData$ = gridComputedLayoutDataObservable({
|
229
|
-
computedData$: gridComputedData$,
|
230
|
-
fullDataFormatter$: gridDataFormatter$,
|
231
|
-
layout$: layout$,
|
232
|
-
}).pipe(
|
233
|
-
takeUntil(destroy$),
|
234
|
-
shareReplay(1)
|
235
|
-
)
|
236
|
-
|
237
|
-
const visibleComputedLayoutData$ = gridVisibleComputedLayoutDataObservable({
|
238
|
-
computedLayoutData$: computedLayoutData$,
|
239
|
-
}).pipe(
|
240
|
-
takeUntil(destroy$),
|
241
|
-
shareReplay(1)
|
242
|
-
)
|
243
|
-
|
244
|
-
const computedStackedData$ = computedStackedDataObservables({
|
245
|
-
computedData$: gridComputedData$,
|
246
|
-
isSeriesSeprate$: isSeriesSeprate$
|
247
|
-
}).pipe(
|
248
|
-
shareReplay(1)
|
249
|
-
)
|
250
|
-
|
251
|
-
return {
|
252
|
-
isSeriesSeprate$,
|
253
|
-
gridContainerPosition$,
|
254
|
-
gridAxesTransform$,
|
255
|
-
gridAxesReverseTransform$,
|
256
|
-
gridGraphicTransform$,
|
257
|
-
gridGraphicReverseScale$,
|
258
|
-
gridAxesSize$,
|
259
|
-
gridHighlight$: allGridHighlight$,
|
260
|
-
seriesLabels$,
|
261
|
-
SeriesDataMap$,
|
262
|
-
GroupDataMap$,
|
263
|
-
dataFormatter$: gridDataFormatter$,
|
264
|
-
computedData$: gridComputedData$,
|
265
|
-
computedLayoutData$,
|
266
|
-
visibleComputedData$,
|
267
|
-
visibleComputedLayoutData$,
|
268
|
-
computedStackedData$
|
269
|
-
}
|
270
|
-
})
|
271
|
-
})
|
272
|
-
)
|
273
|
-
}
|
274
|
-
|
275
|
-
|
276
|
-
// 所有container位置(對應series)
|
277
|
-
export const multiGridContainerObservable = ({ computedData$, fullDataFormatter$, layout$ }: {
|
278
|
-
computedData$: Observable<ComputedDataTypeMap<'multiGrid'>>
|
279
|
-
fullDataFormatter$: Observable<DataFormatterTypeMap<'multiGrid'>>
|
280
|
-
layout$: Observable<Layout>
|
281
|
-
}): Observable<GridContainerPosition[][]> => {
|
282
|
-
|
283
|
-
return combineLatest({
|
284
|
-
computedData: computedData$,
|
285
|
-
fullDataFormatter: fullDataFormatter$,
|
286
|
-
layout: layout$,
|
287
|
-
}).pipe(
|
288
|
-
switchMap(async (d) => d),
|
289
|
-
map(data => {
|
290
|
-
|
291
|
-
const defaultGrid = data.fullDataFormatter.gridList[0] ?? DATA_FORMATTER_MULTI_GRID_GRID_DEFAULT
|
292
|
-
const slotAmount = data.computedData.reduce((acc, gridData, gridIndex) => {
|
293
|
-
const grid = data.fullDataFormatter.gridList[gridIndex] ?? defaultGrid
|
294
|
-
const gridSlotAmount = grid.separateSeries
|
295
|
-
? gridData.length
|
296
|
-
: data.fullDataFormatter.separateGrid
|
297
|
-
? 1
|
298
|
-
: 0 // 如果grid和series都不分開,則slotAmount不增加(在相同的slot)
|
299
|
-
return acc + gridSlotAmount
|
300
|
-
}, 0) || 1
|
301
|
-
|
302
|
-
const gridContainerLayout = calcGridContainerLayout(data.layout, data.fullDataFormatter.container, slotAmount)
|
303
|
-
|
304
|
-
let accGridSlotIndex = 0
|
305
|
-
const gridContainerPositionArr = data.computedData.map((gridData, gridIndex) => {
|
306
|
-
const grid = data.fullDataFormatter.gridList[gridIndex] ?? defaultGrid
|
307
|
-
const seriesContainerArr = gridData.map((seriesData, seriesIndex) => {
|
308
|
-
const container = gridContainerLayout[accGridSlotIndex]
|
309
|
-
if (grid.separateSeries) {
|
310
|
-
accGridSlotIndex += 1
|
311
|
-
}
|
312
|
-
return container
|
313
|
-
})
|
314
|
-
if (!grid.separateSeries && data.fullDataFormatter.separateGrid) {
|
315
|
-
accGridSlotIndex += 1
|
316
|
-
}
|
317
|
-
return seriesContainerArr
|
318
|
-
})
|
319
|
-
// console.log('gridContainerPositionArr', gridContainerPositionArr)
|
320
|
-
|
321
|
-
// let accGridSlotIndex = 0
|
322
|
-
|
323
|
-
// const gridContainerPositionArr = data.computedData.map((gridData, gridIndex) => {
|
324
|
-
// const grid = data.fullDataFormatter.gridList[gridIndex] ?? defaultGrid
|
325
|
-
|
326
|
-
// if (grid.separateSeries) {
|
327
|
-
// // -- 依seriesSlotIndexes計算 --
|
328
|
-
// const seriesContainerArr = gridData.map((seriesData, seriesIndex) => {
|
329
|
-
// const currentSlotIndex = accGridSlotIndex + seriesIndex
|
330
|
-
// const columnIndex = currentSlotIndex % data.fullDataFormatter.container.columnAmount
|
331
|
-
// const rowIndex = Math.floor(currentSlotIndex / data.fullDataFormatter.container.columnAmount)
|
332
|
-
// const { translate, scale } = calcGridContainerPosition(data.layout, data.fullDataFormatter.container, rowIndex, columnIndex)
|
333
|
-
// return {
|
334
|
-
// slotIndex: currentSlotIndex,
|
335
|
-
// rowIndex,
|
336
|
-
// columnIndex,
|
337
|
-
// translate,
|
338
|
-
// scale,
|
339
|
-
// }
|
340
|
-
// })
|
341
|
-
// accGridSlotIndex += seriesContainerArr.length
|
342
|
-
// return seriesContainerArr
|
343
|
-
// } else {
|
344
|
-
// // -- 依grid的slotIndex計算 --
|
345
|
-
// const columnIndex = accGridSlotIndex % data.fullDataFormatter.container.columnAmount
|
346
|
-
// const rowIndex = Math.floor(accGridSlotIndex / data.fullDataFormatter.container.columnAmount)
|
347
|
-
// const seriesContainerArr = gridData.map((seriesData, seriesIndex) => {
|
348
|
-
// const { translate, scale } = calcGridContainerPosition(data.layout, data.fullDataFormatter.container, rowIndex, columnIndex)
|
349
|
-
// return {
|
350
|
-
// slotIndex: accGridSlotIndex,
|
351
|
-
// rowIndex,
|
352
|
-
// columnIndex,
|
353
|
-
// translate,
|
354
|
-
// scale,
|
355
|
-
// }
|
356
|
-
// })
|
357
|
-
// if (data.fullDataFormatter.separateGrid) {
|
358
|
-
// accGridSlotIndex += 1
|
359
|
-
// }
|
360
|
-
// return seriesContainerArr
|
361
|
-
// }
|
362
|
-
// })
|
363
|
-
|
364
|
-
return gridContainerPositionArr
|
365
|
-
}),
|
366
|
-
)
|
1
|
+
import {
|
2
|
+
combineLatest,
|
3
|
+
distinctUntilChanged,
|
4
|
+
filter,
|
5
|
+
of,
|
6
|
+
map,
|
7
|
+
merge,
|
8
|
+
takeUntil,
|
9
|
+
shareReplay,
|
10
|
+
switchMap,
|
11
|
+
Subject,
|
12
|
+
Observable,
|
13
|
+
combineLatestAll} from 'rxjs'
|
14
|
+
import type {
|
15
|
+
AxisPosition,
|
16
|
+
ChartType,
|
17
|
+
ChartParams,
|
18
|
+
ComputedDataTypeMap,
|
19
|
+
ComputedDataGrid,
|
20
|
+
ContextObserverMultiGridDetail,
|
21
|
+
DataTypeMap,
|
22
|
+
DataFormatterTypeMap,
|
23
|
+
DataFormatterGrid,
|
24
|
+
DataFormatterMultiGridContainer,
|
25
|
+
EventMultiGrid,
|
26
|
+
GridContainerPosition,
|
27
|
+
HighlightTarget,
|
28
|
+
Layout,
|
29
|
+
TransformData } from '../../lib/core-types'
|
30
|
+
import {
|
31
|
+
highlightObservable,
|
32
|
+
seriesDataMapObservable,
|
33
|
+
groupDataMapObservable } from './observables'
|
34
|
+
import {
|
35
|
+
gridAxesTransformObservable,
|
36
|
+
gridGraphicTransformObservable,
|
37
|
+
gridGraphicReverseScaleObservable,
|
38
|
+
gridAxesReverseTransformObservable,
|
39
|
+
gridAxesSizeObservable,
|
40
|
+
gridSeriesLabelsObservable,
|
41
|
+
gridComputedLayoutDataObservable,
|
42
|
+
gridVisibleComputedDataObservable,
|
43
|
+
gridVisibleComputedLayoutDataObservable,
|
44
|
+
// isSeriesSeprateObservable,
|
45
|
+
computedStackedDataObservables } from './gridObservables'
|
46
|
+
import { DATA_FORMATTER_MULTI_GRID_GRID_DEFAULT } from '../defaults'
|
47
|
+
import { calcGridContainerLayout } from './orbchartsUtils'
|
48
|
+
|
49
|
+
// 每一個grid計算出來的所有Observable
|
50
|
+
export const multiGridEachDetailObservable = ({ fullDataFormatter$, computedData$, layout$, fullChartParams$, event$ }: {
|
51
|
+
fullDataFormatter$: Observable<DataFormatterTypeMap<'multiGrid'>>
|
52
|
+
computedData$: Observable<ComputedDataTypeMap<'multiGrid'>>
|
53
|
+
layout$: Observable<Layout>
|
54
|
+
fullChartParams$: Observable<ChartParams>
|
55
|
+
event$: Subject<EventMultiGrid>
|
56
|
+
}): Observable<ContextObserverMultiGridDetail[]> => {
|
57
|
+
|
58
|
+
const destroy$ = new Subject()
|
59
|
+
|
60
|
+
// highlight全部grid
|
61
|
+
const allGridHighlight$ = highlightObservable({
|
62
|
+
datumList$: computedData$.pipe(
|
63
|
+
map(d => d.flat().flat()),
|
64
|
+
shareReplay(1)
|
65
|
+
),
|
66
|
+
fullChartParams$: fullChartParams$,
|
67
|
+
event$: event$
|
68
|
+
}).pipe(
|
69
|
+
shareReplay(1)
|
70
|
+
)
|
71
|
+
|
72
|
+
const multiGridContainer$ = multiGridContainerObservable({
|
73
|
+
computedData$: computedData$,
|
74
|
+
fullDataFormatter$: fullDataFormatter$,
|
75
|
+
layout$: layout$,
|
76
|
+
}).pipe(
|
77
|
+
shareReplay(1)
|
78
|
+
)
|
79
|
+
|
80
|
+
return combineLatest({
|
81
|
+
fullDataFormatter: fullDataFormatter$,
|
82
|
+
computedData: computedData$,
|
83
|
+
multiGridContainer: multiGridContainer$
|
84
|
+
}).pipe(
|
85
|
+
switchMap(async (d) => d),
|
86
|
+
// distinctUntilChanged((a, b) => {
|
87
|
+
// // 只有當computedData的長度改變時,才重新計算
|
88
|
+
// return a.computedData.length === b.computedData.length
|
89
|
+
// }),
|
90
|
+
map(data => {
|
91
|
+
// 每次重新計算時,清除之前的訂閱
|
92
|
+
destroy$.next(undefined)
|
93
|
+
|
94
|
+
const defaultGrid = data.fullDataFormatter.gridList[0] ?? DATA_FORMATTER_MULTI_GRID_GRID_DEFAULT
|
95
|
+
|
96
|
+
return data.computedData.map((gridComputedData, gridIndex) => {
|
97
|
+
|
98
|
+
// -- 取得該grid的data和dataFormatter
|
99
|
+
const grid = data.fullDataFormatter.gridList[gridIndex] ?? defaultGrid
|
100
|
+
const gridDataFormatter: DataFormatterGrid = {
|
101
|
+
type: 'grid',
|
102
|
+
visibleFilter: data.fullDataFormatter.visibleFilter as any,
|
103
|
+
grid: {
|
104
|
+
...grid
|
105
|
+
},
|
106
|
+
container: {
|
107
|
+
...data.fullDataFormatter.container
|
108
|
+
}
|
109
|
+
}
|
110
|
+
const gridDataFormatter$ = of(gridDataFormatter).pipe(
|
111
|
+
takeUntil(destroy$),
|
112
|
+
shareReplay(1)
|
113
|
+
)
|
114
|
+
const gridComputedData$ = of(gridComputedData).pipe(
|
115
|
+
takeUntil(destroy$),
|
116
|
+
shareReplay(1)
|
117
|
+
)
|
118
|
+
|
119
|
+
// const isSeriesSeprate$ = isSeriesSeprateObservable({
|
120
|
+
// computedData$: gridComputedData$,
|
121
|
+
// fullDataFormatter$: gridDataFormatter$,
|
122
|
+
// }).pipe(
|
123
|
+
// takeUntil(destroy$),
|
124
|
+
// shareReplay(1)
|
125
|
+
// )
|
126
|
+
|
127
|
+
// const gridContainerPosition$ = gridContainerPositionObservable({
|
128
|
+
// computedData$: gridComputedData$,
|
129
|
+
// fullDataFormatter$: gridDataFormatter$,
|
130
|
+
// layout$
|
131
|
+
// }).pipe(
|
132
|
+
// shareReplay(1)
|
133
|
+
// )
|
134
|
+
|
135
|
+
const isSeriesSeprate$ = gridDataFormatter$.pipe(
|
136
|
+
map(d => d.grid.separateSeries),
|
137
|
+
distinctUntilChanged(),
|
138
|
+
shareReplay(1)
|
139
|
+
)
|
140
|
+
|
141
|
+
const gridContainerPosition$ = of(data.multiGridContainer[gridIndex]).pipe(
|
142
|
+
takeUntil(destroy$),
|
143
|
+
shareReplay(1)
|
144
|
+
)
|
145
|
+
|
146
|
+
const gridAxesTransform$ = gridAxesTransformObservable({
|
147
|
+
fullDataFormatter$: gridDataFormatter$,
|
148
|
+
layout$: layout$
|
149
|
+
}).pipe(
|
150
|
+
takeUntil(destroy$),
|
151
|
+
shareReplay(1)
|
152
|
+
)
|
153
|
+
|
154
|
+
|
155
|
+
const gridAxesReverseTransform$ = gridAxesReverseTransformObservable({
|
156
|
+
gridAxesTransform$
|
157
|
+
}).pipe(
|
158
|
+
takeUntil(destroy$),
|
159
|
+
shareReplay(1)
|
160
|
+
)
|
161
|
+
|
162
|
+
const gridGraphicTransform$ = gridGraphicTransformObservable({
|
163
|
+
computedData$: gridComputedData$,
|
164
|
+
fullDataFormatter$: gridDataFormatter$,
|
165
|
+
layout$: layout$
|
166
|
+
}).pipe(
|
167
|
+
takeUntil(destroy$),
|
168
|
+
shareReplay(1)
|
169
|
+
)
|
170
|
+
|
171
|
+
const gridGraphicReverseScale$ = gridGraphicReverseScaleObservable({
|
172
|
+
gridContainerPosition$: gridContainerPosition$,
|
173
|
+
gridAxesTransform$: gridAxesTransform$,
|
174
|
+
gridGraphicTransform$: gridGraphicTransform$,
|
175
|
+
})
|
176
|
+
|
177
|
+
const gridAxesSize$ = gridAxesSizeObservable({
|
178
|
+
fullDataFormatter$: gridDataFormatter$,
|
179
|
+
layout$: layout$
|
180
|
+
}).pipe(
|
181
|
+
takeUntil(destroy$),
|
182
|
+
shareReplay(1)
|
183
|
+
)
|
184
|
+
|
185
|
+
const datumList$ = gridComputedData$.pipe(
|
186
|
+
map(d => d.flat())
|
187
|
+
).pipe(
|
188
|
+
takeUntil(destroy$),
|
189
|
+
shareReplay(1)
|
190
|
+
)
|
191
|
+
|
192
|
+
// const gridHighlight$ = highlightObservable({
|
193
|
+
// datumList$,
|
194
|
+
// fullChartParams$: fullChartParams$,
|
195
|
+
// event$: event$
|
196
|
+
// }).pipe(
|
197
|
+
// shareReplay(1)
|
198
|
+
// )
|
199
|
+
|
200
|
+
const seriesLabels$ = gridSeriesLabelsObservable({
|
201
|
+
computedData$: gridComputedData$,
|
202
|
+
}).pipe(
|
203
|
+
takeUntil(destroy$),
|
204
|
+
shareReplay(1)
|
205
|
+
)
|
206
|
+
|
207
|
+
const SeriesDataMap$ = seriesDataMapObservable({
|
208
|
+
datumList$: datumList$
|
209
|
+
}).pipe(
|
210
|
+
takeUntil(destroy$),
|
211
|
+
shareReplay(1)
|
212
|
+
)
|
213
|
+
|
214
|
+
const GroupDataMap$ = groupDataMapObservable({
|
215
|
+
datumList$: datumList$
|
216
|
+
}).pipe(
|
217
|
+
takeUntil(destroy$),
|
218
|
+
shareReplay(1)
|
219
|
+
)
|
220
|
+
|
221
|
+
const visibleComputedData$ = gridVisibleComputedDataObservable({
|
222
|
+
computedData$: gridComputedData$,
|
223
|
+
}).pipe(
|
224
|
+
takeUntil(destroy$),
|
225
|
+
shareReplay(1)
|
226
|
+
)
|
227
|
+
|
228
|
+
const computedLayoutData$ = gridComputedLayoutDataObservable({
|
229
|
+
computedData$: gridComputedData$,
|
230
|
+
fullDataFormatter$: gridDataFormatter$,
|
231
|
+
layout$: layout$,
|
232
|
+
}).pipe(
|
233
|
+
takeUntil(destroy$),
|
234
|
+
shareReplay(1)
|
235
|
+
)
|
236
|
+
|
237
|
+
const visibleComputedLayoutData$ = gridVisibleComputedLayoutDataObservable({
|
238
|
+
computedLayoutData$: computedLayoutData$,
|
239
|
+
}).pipe(
|
240
|
+
takeUntil(destroy$),
|
241
|
+
shareReplay(1)
|
242
|
+
)
|
243
|
+
|
244
|
+
const computedStackedData$ = computedStackedDataObservables({
|
245
|
+
computedData$: gridComputedData$,
|
246
|
+
isSeriesSeprate$: isSeriesSeprate$
|
247
|
+
}).pipe(
|
248
|
+
shareReplay(1)
|
249
|
+
)
|
250
|
+
|
251
|
+
return {
|
252
|
+
isSeriesSeprate$,
|
253
|
+
gridContainerPosition$,
|
254
|
+
gridAxesTransform$,
|
255
|
+
gridAxesReverseTransform$,
|
256
|
+
gridGraphicTransform$,
|
257
|
+
gridGraphicReverseScale$,
|
258
|
+
gridAxesSize$,
|
259
|
+
gridHighlight$: allGridHighlight$,
|
260
|
+
seriesLabels$,
|
261
|
+
SeriesDataMap$,
|
262
|
+
GroupDataMap$,
|
263
|
+
dataFormatter$: gridDataFormatter$,
|
264
|
+
computedData$: gridComputedData$,
|
265
|
+
computedLayoutData$,
|
266
|
+
visibleComputedData$,
|
267
|
+
visibleComputedLayoutData$,
|
268
|
+
computedStackedData$
|
269
|
+
}
|
270
|
+
})
|
271
|
+
})
|
272
|
+
)
|
273
|
+
}
|
274
|
+
|
275
|
+
|
276
|
+
// 所有container位置(對應series)
|
277
|
+
export const multiGridContainerObservable = ({ computedData$, fullDataFormatter$, layout$ }: {
|
278
|
+
computedData$: Observable<ComputedDataTypeMap<'multiGrid'>>
|
279
|
+
fullDataFormatter$: Observable<DataFormatterTypeMap<'multiGrid'>>
|
280
|
+
layout$: Observable<Layout>
|
281
|
+
}): Observable<GridContainerPosition[][]> => {
|
282
|
+
|
283
|
+
return combineLatest({
|
284
|
+
computedData: computedData$,
|
285
|
+
fullDataFormatter: fullDataFormatter$,
|
286
|
+
layout: layout$,
|
287
|
+
}).pipe(
|
288
|
+
switchMap(async (d) => d),
|
289
|
+
map(data => {
|
290
|
+
|
291
|
+
const defaultGrid = data.fullDataFormatter.gridList[0] ?? DATA_FORMATTER_MULTI_GRID_GRID_DEFAULT
|
292
|
+
const slotAmount = data.computedData.reduce((acc, gridData, gridIndex) => {
|
293
|
+
const grid = data.fullDataFormatter.gridList[gridIndex] ?? defaultGrid
|
294
|
+
const gridSlotAmount = grid.separateSeries
|
295
|
+
? gridData.length
|
296
|
+
: data.fullDataFormatter.separateGrid
|
297
|
+
? 1
|
298
|
+
: 0 // 如果grid和series都不分開,則slotAmount不增加(在相同的slot)
|
299
|
+
return acc + gridSlotAmount
|
300
|
+
}, 0) || 1
|
301
|
+
|
302
|
+
const gridContainerLayout = calcGridContainerLayout(data.layout, data.fullDataFormatter.container, slotAmount)
|
303
|
+
|
304
|
+
let accGridSlotIndex = 0
|
305
|
+
const gridContainerPositionArr = data.computedData.map((gridData, gridIndex) => {
|
306
|
+
const grid = data.fullDataFormatter.gridList[gridIndex] ?? defaultGrid
|
307
|
+
const seriesContainerArr = gridData.map((seriesData, seriesIndex) => {
|
308
|
+
const container = gridContainerLayout[accGridSlotIndex]
|
309
|
+
if (grid.separateSeries) {
|
310
|
+
accGridSlotIndex += 1
|
311
|
+
}
|
312
|
+
return container
|
313
|
+
})
|
314
|
+
if (!grid.separateSeries && data.fullDataFormatter.separateGrid) {
|
315
|
+
accGridSlotIndex += 1
|
316
|
+
}
|
317
|
+
return seriesContainerArr
|
318
|
+
})
|
319
|
+
// console.log('gridContainerPositionArr', gridContainerPositionArr)
|
320
|
+
|
321
|
+
// let accGridSlotIndex = 0
|
322
|
+
|
323
|
+
// const gridContainerPositionArr = data.computedData.map((gridData, gridIndex) => {
|
324
|
+
// const grid = data.fullDataFormatter.gridList[gridIndex] ?? defaultGrid
|
325
|
+
|
326
|
+
// if (grid.separateSeries) {
|
327
|
+
// // -- 依seriesSlotIndexes計算 --
|
328
|
+
// const seriesContainerArr = gridData.map((seriesData, seriesIndex) => {
|
329
|
+
// const currentSlotIndex = accGridSlotIndex + seriesIndex
|
330
|
+
// const columnIndex = currentSlotIndex % data.fullDataFormatter.container.columnAmount
|
331
|
+
// const rowIndex = Math.floor(currentSlotIndex / data.fullDataFormatter.container.columnAmount)
|
332
|
+
// const { translate, scale } = calcGridContainerPosition(data.layout, data.fullDataFormatter.container, rowIndex, columnIndex)
|
333
|
+
// return {
|
334
|
+
// slotIndex: currentSlotIndex,
|
335
|
+
// rowIndex,
|
336
|
+
// columnIndex,
|
337
|
+
// translate,
|
338
|
+
// scale,
|
339
|
+
// }
|
340
|
+
// })
|
341
|
+
// accGridSlotIndex += seriesContainerArr.length
|
342
|
+
// return seriesContainerArr
|
343
|
+
// } else {
|
344
|
+
// // -- 依grid的slotIndex計算 --
|
345
|
+
// const columnIndex = accGridSlotIndex % data.fullDataFormatter.container.columnAmount
|
346
|
+
// const rowIndex = Math.floor(accGridSlotIndex / data.fullDataFormatter.container.columnAmount)
|
347
|
+
// const seriesContainerArr = gridData.map((seriesData, seriesIndex) => {
|
348
|
+
// const { translate, scale } = calcGridContainerPosition(data.layout, data.fullDataFormatter.container, rowIndex, columnIndex)
|
349
|
+
// return {
|
350
|
+
// slotIndex: accGridSlotIndex,
|
351
|
+
// rowIndex,
|
352
|
+
// columnIndex,
|
353
|
+
// translate,
|
354
|
+
// scale,
|
355
|
+
// }
|
356
|
+
// })
|
357
|
+
// if (data.fullDataFormatter.separateGrid) {
|
358
|
+
// accGridSlotIndex += 1
|
359
|
+
// }
|
360
|
+
// return seriesContainerArr
|
361
|
+
// }
|
362
|
+
// })
|
363
|
+
|
364
|
+
return gridContainerPositionArr
|
365
|
+
}),
|
366
|
+
)
|
367
367
|
}
|