@orbcharts/plugins-basic 3.0.0-alpha.46 → 3.0.0-alpha.48
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/dist/orbcharts-plugins-basic.es.js +5377 -5491
- package/dist/orbcharts-plugins-basic.umd.js +8 -8
- package/package.json +2 -2
- package/src/multiGrid/plugins/MultiBarStack.ts +41 -37
- package/src/multiGrid/plugins/MultiBars.ts +40 -36
- package/src/multiGrid/plugins/MultiBarsTriangle.ts +40 -36
- package/src/multiGrid/plugins/MultiDots.ts +36 -31
- package/src/multiGrid/plugins/MultiGroupAxis.ts +32 -28
- package/src/multiGrid/plugins/MultiLineAreas.ts +37 -32
- package/src/multiGrid/plugins/MultiLines.ts +36 -31
- package/src/multiGrid/plugins/MultiValueAxis.ts +32 -28
- package/src/multiGrid/plugins/OverlappingValueAxes.ts +37 -33
- package/src/series/plugins/Pie.ts +76 -56
- package/src/series/plugins/PieEventTexts.ts +30 -26
- package/src/series/plugins/PieLabels.ts +34 -30
@@ -24,39 +24,43 @@ export const MultiValueAxis = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_VA
|
|
24
24
|
|
25
25
|
const multiGridPlugin$ = multiGridPluginObservables(observer)
|
26
26
|
|
27
|
-
multiGridPlugin
|
28
|
-
|
29
|
-
|
27
|
+
multiGridPlugin$
|
28
|
+
.pipe(
|
29
|
+
takeUntil(destroy$)
|
30
|
+
)
|
31
|
+
.subscribe(data => {
|
32
|
+
// 每次重新計算時,清除之前的訂閱
|
33
|
+
unsubscribeFnArr.forEach(fn => fn())
|
30
34
|
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
35
|
+
selection.selectAll(`g.${gridClassName}`)
|
36
|
+
.data(data)
|
37
|
+
.join('g')
|
38
|
+
.attr('class', gridClassName)
|
39
|
+
.each((d, i, g) => {
|
36
40
|
|
37
|
-
|
41
|
+
const gridSelection = d3.select(g[i])
|
38
42
|
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
43
|
+
const isSeriesSeprate$ = d.dataFormatter$.pipe(
|
44
|
+
takeUntil(destroy$),
|
45
|
+
map(d => d.grid.separateSeries),
|
46
|
+
distinctUntilChanged(),
|
47
|
+
shareReplay(1)
|
48
|
+
)
|
45
49
|
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
50
|
+
unsubscribeFnArr[i] = createBaseValueAxis(pluginName, {
|
51
|
+
selection: gridSelection,
|
52
|
+
computedData$: d.computedData$,
|
53
|
+
fullParams$: observer.fullParams$,
|
54
|
+
fullDataFormatter$: d.dataFormatter$,
|
55
|
+
fullChartParams$: observer.fullChartParams$,
|
56
|
+
gridAxesTransform$: d.gridAxesTransform$,
|
57
|
+
gridAxesReverseTransform$: d.gridAxesReverseTransform$,
|
58
|
+
gridAxesSize$: d.gridAxesSize$,
|
59
|
+
gridContainerPosition$: d.gridContainerPosition$,
|
60
|
+
isSeriesSeprate$,
|
61
|
+
})
|
57
62
|
})
|
58
|
-
|
59
|
-
})
|
63
|
+
})
|
60
64
|
|
61
65
|
return () => {
|
62
66
|
destroy$.next(undefined)
|
@@ -123,44 +123,48 @@ export const OverlappingValueAxes = defineMultiGridPlugin(pluginName, DEFAULT_OV
|
|
123
123
|
})
|
124
124
|
)
|
125
125
|
|
126
|
-
multiGridPlugin
|
127
|
-
|
128
|
-
|
126
|
+
multiGridPlugin$
|
127
|
+
.pipe(
|
128
|
+
takeUntil(destroy$)
|
129
|
+
)
|
130
|
+
.subscribe(data => {
|
131
|
+
// 每次重新計算時,清除之前的訂閱
|
132
|
+
unsubscribeFnArr.forEach(fn => fn())
|
129
133
|
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
|
134
|
+
selection.selectAll(`g.${gridClassName}`)
|
135
|
+
.data(data)
|
136
|
+
.join('g')
|
137
|
+
.attr('class', gridClassName)
|
138
|
+
.each((d, i, g) => {
|
139
|
+
if (i > 1) {
|
140
|
+
return
|
141
|
+
}
|
138
142
|
|
139
|
-
|
143
|
+
const gridSelection = d3.select(g[i])
|
140
144
|
|
141
|
-
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
|
145
|
+
const isSeriesSeprate$ = d.dataFormatter$.pipe(
|
146
|
+
takeUntil(destroy$),
|
147
|
+
map(d => d.grid.separateSeries),
|
148
|
+
distinctUntilChanged(),
|
149
|
+
shareReplay(1)
|
150
|
+
)
|
147
151
|
|
148
|
-
|
149
|
-
|
150
|
-
|
151
|
-
|
152
|
-
|
153
|
-
|
154
|
-
|
155
|
-
|
156
|
-
|
157
|
-
|
158
|
-
|
159
|
-
|
160
|
-
|
152
|
+
unsubscribeFnArr[i] = createBaseValueAxis(pluginName, {
|
153
|
+
selection: gridSelection,
|
154
|
+
computedData$: d.computedData$,
|
155
|
+
fullParams$: observer.fullParams$.pipe(
|
156
|
+
map(fullParams => i === 0 ? fullParams.firstAxis : fullParams.secondAxis)
|
157
|
+
),
|
158
|
+
fullDataFormatter$: d.dataFormatter$,
|
159
|
+
fullChartParams$: observer.fullChartParams$,
|
160
|
+
gridAxesTransform$: d.gridAxesTransform$,
|
161
|
+
gridAxesReverseTransform$: d.gridAxesReverseTransform$,
|
162
|
+
gridAxesSize$: d.gridAxesSize$,
|
163
|
+
gridContainerPosition$: d.gridContainerPosition$,
|
164
|
+
isSeriesSeprate$,
|
165
|
+
})
|
161
166
|
})
|
162
|
-
|
163
|
-
})
|
167
|
+
})
|
164
168
|
|
165
169
|
return () => {
|
166
170
|
destroy$.next(undefined)
|
@@ -38,6 +38,7 @@ function makeTweenPieRenderDataFn ({ enter, exit, data, lastTweenData, fullParam
|
|
38
38
|
}): (t: number) => PieDatum[] {
|
39
39
|
// 無更新資料項目則只計算資料變化 (新資料 * t + 舊資料 * (1 - t))
|
40
40
|
if (!enter.size() && !exit.size()) {
|
41
|
+
// console.log('case1')
|
41
42
|
return (t: number) => {
|
42
43
|
const tweenData: PieDatum[] = data.map((_d, _i) => {
|
43
44
|
const lastDatum = lastTweenData[_i] ?? {
|
@@ -62,6 +63,7 @@ function makeTweenPieRenderDataFn ({ enter, exit, data, lastTweenData, fullParam
|
|
62
63
|
}
|
63
64
|
// 有更新資料則重新繪圖
|
64
65
|
} else {
|
66
|
+
// console.log('case2')
|
65
67
|
return (t: number) => {
|
66
68
|
return makePieRenderData(
|
67
69
|
data,
|
@@ -282,12 +284,12 @@ function createEachPie (pluginName: string, context: {
|
|
282
284
|
).subscribe(data => {
|
283
285
|
context.containerSelection.interrupt('graphicMove')
|
284
286
|
// console.log('graphic', data)
|
285
|
-
|
287
|
+
const update: d3.Selection<SVGPathElement, PieDatum, any, any> = context.containerSelection
|
286
288
|
.selectAll<SVGPathElement, PieDatum>('path')
|
287
289
|
.data(data.pieData, d => d.id)
|
288
|
-
|
289
|
-
|
290
|
-
|
290
|
+
const enter = update.enter()
|
291
|
+
const exit = update.exit()
|
292
|
+
|
291
293
|
const makeTweenPieRenderData = makeTweenPieRenderDataFn({
|
292
294
|
enter,
|
293
295
|
exit,
|
@@ -296,11 +298,11 @@ function createEachPie (pluginName: string, context: {
|
|
296
298
|
fullParams: data.fullParams
|
297
299
|
})
|
298
300
|
|
299
|
-
// --
|
300
|
-
|
301
|
+
// -- 使用補間動畫 --
|
302
|
+
context.containerSelection
|
301
303
|
.transition('graphicMove')
|
302
304
|
.duration(data.fullChartParams.transitionDuration)
|
303
|
-
.ease(getD3TransitionEase(data.fullChartParams.transitionEase))
|
305
|
+
// .ease(getD3TransitionEase(data.fullChartParams.transitionEase))
|
304
306
|
.tween('move', (self, t) => {
|
305
307
|
return (t) => {
|
306
308
|
tweenData = makeTweenPieRenderData(t)
|
@@ -312,18 +314,20 @@ function createEachPie (pluginName: string, context: {
|
|
312
314
|
pathClassName
|
313
315
|
})
|
314
316
|
|
315
|
-
|
316
|
-
|
317
|
-
|
318
|
-
|
319
|
-
|
320
|
-
|
321
|
-
|
322
|
-
|
323
|
-
|
324
|
-
|
325
|
-
|
326
|
-
|
317
|
+
// @Q@ 想盡量減清效能負擔所以取消掉
|
318
|
+
// context.event$.next({
|
319
|
+
// type: 'series',
|
320
|
+
// pluginName,
|
321
|
+
// eventName: 'transitionMove',
|
322
|
+
// event: undefined,
|
323
|
+
// highlightTarget: data.highlightTarget,
|
324
|
+
// datum: null,
|
325
|
+
// series: [],
|
326
|
+
// seriesIndex: -1,
|
327
|
+
// seriesLabel: '',
|
328
|
+
// data: data.computedData
|
329
|
+
// })
|
330
|
+
|
327
331
|
// const callbackData = makeEnterDurationCallbackData(data.computedData, )
|
328
332
|
// enterDurationCallback(callbackData, t)
|
329
333
|
}
|
@@ -392,7 +396,22 @@ function createEachPie (pluginName: string, context: {
|
|
392
396
|
subscriber.next(pathSelection)
|
393
397
|
}
|
394
398
|
})
|
395
|
-
})
|
399
|
+
}).pipe(
|
400
|
+
shareReplay(1)
|
401
|
+
)
|
402
|
+
|
403
|
+
// pathSelection$.subscribe(data => {
|
404
|
+
// console.log('pathSelection', data)
|
405
|
+
// })
|
406
|
+
// context.SeriesDataMap$.subscribe(data => {
|
407
|
+
// console.log('SeriesDataMap', data)
|
408
|
+
// })
|
409
|
+
// context.computedData$.subscribe(data => {
|
410
|
+
// console.log('computedData', data)
|
411
|
+
// })
|
412
|
+
// highlightTarget$.subscribe(data => {
|
413
|
+
// console.log('highlightTarget', data)
|
414
|
+
// })
|
396
415
|
|
397
416
|
combineLatest({
|
398
417
|
pathSelection: pathSelection$,
|
@@ -509,45 +528,46 @@ export const Pie = defineSeriesPlugin(pluginName, DEFAULT_PIE_PARAMS)(({ selecti
|
|
509
528
|
|
510
529
|
const unsubscribeFnArr: (() => void)[] = []
|
511
530
|
|
512
|
-
|
513
|
-
|
514
|
-
|
515
|
-
|
516
|
-
|
517
|
-
|
518
|
-
|
519
|
-
|
520
|
-
|
521
|
-
|
522
|
-
|
523
|
-
|
524
|
-
|
525
|
-
|
526
|
-
|
527
|
-
|
528
|
-
|
529
|
-
|
530
|
-
|
531
|
-
|
532
|
-
|
533
|
-
|
534
|
-
|
535
|
-
|
531
|
+
seriesCenterSelection$
|
532
|
+
.pipe(
|
533
|
+
takeUntil(destroy$)
|
534
|
+
)
|
535
|
+
.subscribe(seriesCenterSelection => {
|
536
|
+
// 每次重新計算時,清除之前的訂閱
|
537
|
+
unsubscribeFnArr.forEach(fn => fn())
|
538
|
+
|
539
|
+
// observer.fullParams$.subscribe(data => {
|
540
|
+
// console.log('observer.fullParams$', data)
|
541
|
+
// })
|
542
|
+
|
543
|
+
seriesCenterSelection.each((d, containerIndex, g) => {
|
544
|
+
// console.log('containerIndex', containerIndex)
|
545
|
+
const containerSelection = d3.select(g[containerIndex])
|
546
|
+
|
547
|
+
const containerComputedLayoutData$ = observer.computedLayoutData$.pipe(
|
548
|
+
takeUntil(destroy$),
|
549
|
+
map(data => data[containerIndex] ?? data[0])
|
550
|
+
)
|
551
|
+
|
552
|
+
const containerPosition$ = observer.seriesContainerPosition$.pipe(
|
553
|
+
takeUntil(destroy$),
|
554
|
+
map(data => data[containerIndex] ?? data[0])
|
555
|
+
)
|
556
|
+
|
557
|
+
unsubscribeFnArr[containerIndex] = createEachPie(pluginName, {
|
558
|
+
containerSelection: containerSelection,
|
559
|
+
computedData$: observer.computedData$,
|
560
|
+
containerComputedLayoutData$: containerComputedLayoutData$,
|
561
|
+
SeriesDataMap$: observer.SeriesDataMap$,
|
562
|
+
fullParams$: observer.fullParams$,
|
563
|
+
fullChartParams$: observer.fullChartParams$,
|
564
|
+
seriesHighlight$: observer.seriesHighlight$,
|
565
|
+
seriesContainerPosition$: containerPosition$,
|
566
|
+
event$: subject.event$,
|
567
|
+
})
|
536
568
|
|
537
|
-
unsubscribeFnArr[containerIndex] = createEachPie(pluginName, {
|
538
|
-
containerSelection: containerSelection,
|
539
|
-
computedData$: observer.computedData$,
|
540
|
-
containerComputedLayoutData$: containerComputedLayoutData$,
|
541
|
-
SeriesDataMap$: observer.SeriesDataMap$,
|
542
|
-
fullParams$: observer.fullParams$,
|
543
|
-
fullChartParams$: observer.fullChartParams$,
|
544
|
-
seriesHighlight$: observer.seriesHighlight$,
|
545
|
-
seriesContainerPosition$: containerPosition$,
|
546
|
-
event$: subject.event$,
|
547
569
|
})
|
548
|
-
|
549
570
|
})
|
550
|
-
})
|
551
571
|
|
552
572
|
return () => {
|
553
573
|
destroy$.next(undefined)
|
@@ -218,38 +218,42 @@ export const PieEventTexts = defineSeriesPlugin(pluginName, DEFAULT_PIE_EVENT_TE
|
|
218
218
|
|
219
219
|
const unsubscribeFnArr: (() => void)[] = []
|
220
220
|
|
221
|
-
seriesCenterSelection
|
222
|
-
|
223
|
-
|
221
|
+
seriesCenterSelection$
|
222
|
+
.pipe(
|
223
|
+
takeUntil(destroy$)
|
224
|
+
)
|
225
|
+
.subscribe(seriesCenterSelection => {
|
226
|
+
// 每次重新計算時,清除之前的訂閱
|
227
|
+
unsubscribeFnArr.forEach(fn => fn())
|
224
228
|
|
225
|
-
|
226
|
-
|
227
|
-
|
229
|
+
seriesCenterSelection.each((d, containerIndex, g) => {
|
230
|
+
|
231
|
+
const containerSelection = d3.select(g[containerIndex])
|
228
232
|
|
229
|
-
|
230
|
-
|
231
|
-
|
232
|
-
|
233
|
+
const containerComputedLayoutData$ = observer.computedLayoutData$.pipe(
|
234
|
+
takeUntil(destroy$),
|
235
|
+
map(data => data[containerIndex] ?? data[0])
|
236
|
+
)
|
233
237
|
|
234
|
-
|
235
|
-
|
236
|
-
|
237
|
-
|
238
|
+
const containerPosition$ = observer.seriesContainerPosition$.pipe(
|
239
|
+
takeUntil(destroy$),
|
240
|
+
map(data => data[containerIndex] ?? data[0])
|
241
|
+
)
|
238
242
|
|
239
|
-
|
240
|
-
|
241
|
-
|
242
|
-
|
243
|
-
|
244
|
-
|
245
|
-
|
246
|
-
|
247
|
-
|
248
|
-
|
249
|
-
|
243
|
+
unsubscribeFnArr[containerIndex] = createEachPieEventTexts(pluginName, {
|
244
|
+
containerSelection: containerSelection,
|
245
|
+
computedData$: observer.computedData$,
|
246
|
+
containerComputedLayoutData$: containerComputedLayoutData$,
|
247
|
+
SeriesDataMap$: observer.SeriesDataMap$,
|
248
|
+
fullParams$: observer.fullParams$,
|
249
|
+
fullChartParams$: observer.fullChartParams$,
|
250
|
+
seriesHighlight$: observer.seriesHighlight$,
|
251
|
+
seriesContainerPosition$: containerPosition$,
|
252
|
+
event$: subject.event$,
|
253
|
+
})
|
250
254
|
|
255
|
+
})
|
251
256
|
})
|
252
|
-
})
|
253
257
|
|
254
258
|
return () => {
|
255
259
|
destroy$.next(undefined)
|
@@ -296,38 +296,42 @@ export const PieLabels = defineSeriesPlugin(pluginName, DEFAULT_PIE_LABELS_PARAM
|
|
296
296
|
|
297
297
|
const unsubscribeFnArr: (() => void)[] = []
|
298
298
|
|
299
|
-
seriesCenterSelection
|
300
|
-
|
301
|
-
|
302
|
-
|
303
|
-
|
304
|
-
|
305
|
-
|
306
|
-
|
307
|
-
|
308
|
-
|
309
|
-
|
310
|
-
|
311
|
-
|
312
|
-
|
313
|
-
|
314
|
-
|
315
|
-
|
316
|
-
|
317
|
-
|
318
|
-
|
319
|
-
|
320
|
-
|
321
|
-
|
322
|
-
|
323
|
-
|
324
|
-
|
325
|
-
|
326
|
-
|
327
|
-
|
299
|
+
seriesCenterSelection$
|
300
|
+
.pipe(
|
301
|
+
takeUntil(destroy$)
|
302
|
+
)
|
303
|
+
.subscribe(seriesCenterSelection => {
|
304
|
+
// 每次重新計算時,清除之前的訂閱
|
305
|
+
unsubscribeFnArr.forEach(fn => fn())
|
306
|
+
|
307
|
+
seriesCenterSelection.each((d, containerIndex, g) => {
|
308
|
+
|
309
|
+
const containerSelection = d3.select(g[containerIndex])
|
310
|
+
|
311
|
+
const containerComputedLayoutData$ = observer.computedLayoutData$.pipe(
|
312
|
+
takeUntil(destroy$),
|
313
|
+
map(data => data[containerIndex] ?? data[0])
|
314
|
+
)
|
315
|
+
|
316
|
+
const containerPosition$ = observer.seriesContainerPosition$.pipe(
|
317
|
+
takeUntil(destroy$),
|
318
|
+
map(data => data[containerIndex] ?? data[0])
|
319
|
+
)
|
320
|
+
|
321
|
+
unsubscribeFnArr[containerIndex] = createEachPieLabel(pluginName, {
|
322
|
+
containerSelection: containerSelection,
|
323
|
+
// computedData$: observer.computedData$,
|
324
|
+
containerComputedLayoutData$: containerComputedLayoutData$,
|
325
|
+
// SeriesDataMap$: observer.SeriesDataMap$,
|
326
|
+
fullParams$: observer.fullParams$,
|
327
|
+
fullChartParams$: observer.fullChartParams$,
|
328
|
+
seriesHighlight$: observer.seriesHighlight$,
|
329
|
+
seriesContainerPosition$: containerPosition$,
|
330
|
+
event$: subject.event$,
|
331
|
+
})
|
328
332
|
|
333
|
+
})
|
329
334
|
})
|
330
|
-
})
|
331
335
|
|
332
336
|
return () => {
|
333
337
|
destroy$.next(undefined)
|