@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.
@@ -24,39 +24,43 @@ export const MultiValueAxis = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_VA
24
24
 
25
25
  const multiGridPlugin$ = multiGridPluginObservables(observer)
26
26
 
27
- multiGridPlugin$.subscribe(data => {
28
- // 每次重新計算時,清除之前的訂閱
29
- unsubscribeFnArr.forEach(fn => fn())
27
+ multiGridPlugin$
28
+ .pipe(
29
+ takeUntil(destroy$)
30
+ )
31
+ .subscribe(data => {
32
+ // 每次重新計算時,清除之前的訂閱
33
+ unsubscribeFnArr.forEach(fn => fn())
30
34
 
31
- selection.selectAll(`g.${gridClassName}`)
32
- .data(data)
33
- .join('g')
34
- .attr('class', gridClassName)
35
- .each((d, i, g) => {
35
+ selection.selectAll(`g.${gridClassName}`)
36
+ .data(data)
37
+ .join('g')
38
+ .attr('class', gridClassName)
39
+ .each((d, i, g) => {
36
40
 
37
- const gridSelection = d3.select(g[i])
41
+ const gridSelection = d3.select(g[i])
38
42
 
39
- const isSeriesSeprate$ = d.dataFormatter$.pipe(
40
- takeUntil(destroy$),
41
- map(d => d.grid.separateSeries),
42
- distinctUntilChanged(),
43
- shareReplay(1)
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
- unsubscribeFnArr[i] = createBaseValueAxis(pluginName, {
47
- selection: gridSelection,
48
- computedData$: d.computedData$,
49
- fullParams$: observer.fullParams$,
50
- fullDataFormatter$: d.dataFormatter$,
51
- fullChartParams$: observer.fullChartParams$,
52
- gridAxesTransform$: d.gridAxesTransform$,
53
- gridAxesReverseTransform$: d.gridAxesReverseTransform$,
54
- gridAxesSize$: d.gridAxesSize$,
55
- gridContainerPosition$: d.gridContainerPosition$,
56
- isSeriesSeprate$,
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$.subscribe(data => {
127
- // 每次重新計算時,清除之前的訂閱
128
- unsubscribeFnArr.forEach(fn => fn())
126
+ multiGridPlugin$
127
+ .pipe(
128
+ takeUntil(destroy$)
129
+ )
130
+ .subscribe(data => {
131
+ // 每次重新計算時,清除之前的訂閱
132
+ unsubscribeFnArr.forEach(fn => fn())
129
133
 
130
- selection.selectAll(`g.${gridClassName}`)
131
- .data(data)
132
- .join('g')
133
- .attr('class', gridClassName)
134
- .each((d, i, g) => {
135
- if (i > 1) {
136
- return
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
- const gridSelection = d3.select(g[i])
143
+ const gridSelection = d3.select(g[i])
140
144
 
141
- const isSeriesSeprate$ = d.dataFormatter$.pipe(
142
- takeUntil(destroy$),
143
- map(d => d.grid.separateSeries),
144
- distinctUntilChanged(),
145
- shareReplay(1)
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
- unsubscribeFnArr[i] = createBaseValueAxis(pluginName, {
149
- selection: gridSelection,
150
- computedData$: d.computedData$,
151
- fullParams$: observer.fullParams$.pipe(
152
- map(fullParams => i === 0 ? fullParams.firstAxis : fullParams.secondAxis)
153
- ),
154
- fullDataFormatter$: d.dataFormatter$,
155
- fullChartParams$: observer.fullChartParams$,
156
- gridAxesTransform$: d.gridAxesTransform$,
157
- gridAxesReverseTransform$: d.gridAxesReverseTransform$,
158
- gridAxesSize$: d.gridAxesSize$,
159
- gridContainerPosition$: d.gridContainerPosition$,
160
- isSeriesSeprate$,
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
- let update: d3.Selection<SVGPathElement, PieDatum, any, any> = context.containerSelection
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
- let enter = update.enter()
289
- let exit = update.exit()
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
- // -- enter資料使用補間動畫 --
300
- enter
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
- context.event$.next({
316
- type: 'series',
317
- pluginName,
318
- eventName: 'transitionMove',
319
- event: undefined,
320
- highlightTarget: data.highlightTarget,
321
- datum: null,
322
- series: [],
323
- seriesIndex: -1,
324
- seriesLabel: '',
325
- data: data.computedData
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
- // @Q@ 在seriesCenterSelection$之後才訂閱會造成fullParams$訂閱不到最初次的值,還需找時間研究先workaround
513
- observer.fullParams$.subscribe()
514
-
515
- seriesCenterSelection$.subscribe(seriesCenterSelection => {
516
- // 每次重新計算時,清除之前的訂閱
517
- unsubscribeFnArr.forEach(fn => fn())
518
-
519
- // observer.fullParams$.subscribe(data => {
520
- // console.log('observer.fullParams$', data)
521
- // })
522
-
523
- seriesCenterSelection.each((d, containerIndex, g) => {
524
- // console.log('containerIndex', containerIndex)
525
- const containerSelection = d3.select(g[containerIndex])
526
-
527
- const containerComputedLayoutData$ = observer.computedLayoutData$.pipe(
528
- takeUntil(destroy$),
529
- map(data => data[containerIndex] ?? data[0])
530
- )
531
-
532
- const containerPosition$ = observer.seriesContainerPosition$.pipe(
533
- takeUntil(destroy$),
534
- map(data => data[containerIndex] ?? data[0])
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$.subscribe(seriesCenterSelection => {
222
- // 每次重新計算時,清除之前的訂閱
223
- unsubscribeFnArr.forEach(fn => fn())
221
+ seriesCenterSelection$
222
+ .pipe(
223
+ takeUntil(destroy$)
224
+ )
225
+ .subscribe(seriesCenterSelection => {
226
+ // 每次重新計算時,清除之前的訂閱
227
+ unsubscribeFnArr.forEach(fn => fn())
224
228
 
225
- seriesCenterSelection.each((d, containerIndex, g) => {
226
-
227
- const containerSelection = d3.select(g[containerIndex])
229
+ seriesCenterSelection.each((d, containerIndex, g) => {
230
+
231
+ const containerSelection = d3.select(g[containerIndex])
228
232
 
229
- const containerComputedLayoutData$ = observer.computedLayoutData$.pipe(
230
- takeUntil(destroy$),
231
- map(data => data[containerIndex] ?? data[0])
232
- )
233
+ const containerComputedLayoutData$ = observer.computedLayoutData$.pipe(
234
+ takeUntil(destroy$),
235
+ map(data => data[containerIndex] ?? data[0])
236
+ )
233
237
 
234
- const containerPosition$ = observer.seriesContainerPosition$.pipe(
235
- takeUntil(destroy$),
236
- map(data => data[containerIndex] ?? data[0])
237
- )
238
+ const containerPosition$ = observer.seriesContainerPosition$.pipe(
239
+ takeUntil(destroy$),
240
+ map(data => data[containerIndex] ?? data[0])
241
+ )
238
242
 
239
- unsubscribeFnArr[containerIndex] = createEachPieEventTexts(pluginName, {
240
- containerSelection: containerSelection,
241
- computedData$: observer.computedData$,
242
- containerComputedLayoutData$: containerComputedLayoutData$,
243
- SeriesDataMap$: observer.SeriesDataMap$,
244
- fullParams$: observer.fullParams$,
245
- fullChartParams$: observer.fullChartParams$,
246
- seriesHighlight$: observer.seriesHighlight$,
247
- seriesContainerPosition$: containerPosition$,
248
- event$: subject.event$,
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$.subscribe(seriesCenterSelection => {
300
- // 每次重新計算時,清除之前的訂閱
301
- unsubscribeFnArr.forEach(fn => fn())
302
-
303
- seriesCenterSelection.each((d, containerIndex, g) => {
304
-
305
- const containerSelection = d3.select(g[containerIndex])
306
-
307
- const containerComputedLayoutData$ = observer.computedLayoutData$.pipe(
308
- takeUntil(destroy$),
309
- map(data => data[containerIndex] ?? data[0])
310
- )
311
-
312
- const containerPosition$ = observer.seriesContainerPosition$.pipe(
313
- takeUntil(destroy$),
314
- map(data => data[containerIndex] ?? data[0])
315
- )
316
-
317
- unsubscribeFnArr[containerIndex] = createEachPieLabel(pluginName, {
318
- containerSelection: containerSelection,
319
- // computedData$: observer.computedData$,
320
- containerComputedLayoutData$: containerComputedLayoutData$,
321
- // SeriesDataMap$: observer.SeriesDataMap$,
322
- fullParams$: observer.fullParams$,
323
- fullChartParams$: observer.fullChartParams$,
324
- seriesHighlight$: observer.seriesHighlight$,
325
- seriesContainerPosition$: containerPosition$,
326
- event$: subject.event$,
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)