@orbcharts/plugins-basic 3.0.0-alpha.44 → 3.0.0-alpha.46
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 +7770 -7580
- package/dist/orbcharts-plugins-basic.umd.js +8 -8
- package/dist/src/base/BaseBarStack.d.ts +6 -4
- package/dist/src/base/BaseBars.d.ts +6 -4
- package/dist/src/base/BaseBarsTriangle.d.ts +7 -4
- package/dist/src/base/BaseDots.d.ts +5 -3
- package/dist/src/base/BaseGroupAxis.d.ts +3 -3
- package/dist/src/base/BaseLineAreas.d.ts +6 -3
- package/dist/src/base/BaseLines.d.ts +6 -3
- package/dist/src/base/BaseValueAxis.d.ts +3 -3
- package/dist/src/grid/gridObservables.d.ts +4 -4
- package/dist/src/multiGrid/multiGridObservables.d.ts +2 -6
- package/dist/src/series/plugins/PieEventTexts.d.ts +3 -1
- package/dist/src/series/seriesObservables.d.ts +21 -0
- package/dist/src/series/seriesUtils.d.ts +3 -3
- package/package.json +2 -2
- package/src/base/BaseBarStack.ts +105 -208
- package/src/base/BaseBars.ts +78 -64
- package/src/base/BaseBarsTriangle.ts +76 -63
- package/src/base/BaseDots.ts +41 -178
- package/src/base/BaseGroupAxis.ts +13 -13
- package/src/base/BaseLineAreas.ts +85 -81
- package/src/base/BaseLines.ts +82 -75
- package/src/base/BaseValueAxis.ts +14 -15
- package/src/grid/gridObservables.ts +22 -38
- package/src/grid/plugins/BarStack.ts +16 -3
- package/src/grid/plugins/Bars.ts +18 -4
- package/src/grid/plugins/BarsDiverging.ts +6 -4
- package/src/grid/plugins/BarsTriangle.ts +20 -4
- package/src/grid/plugins/Dots.ts +4 -2
- package/src/grid/plugins/GroupAux.ts +1 -2
- package/src/grid/plugins/GroupAxis.ts +15 -3
- package/src/grid/plugins/LineAreas.ts +5 -2
- package/src/grid/plugins/Lines.ts +5 -2
- package/src/grid/plugins/ScalingArea.ts +0 -1
- package/src/grid/plugins/ValueAxis.ts +15 -3
- package/src/grid/plugins/ValueStackAxis.ts +14 -5
- package/src/multiGrid/multiGridObservables.ts +14 -261
- package/src/multiGrid/plugins/MultiBarStack.ts +22 -8
- package/src/multiGrid/plugins/MultiBars.ts +21 -7
- package/src/multiGrid/plugins/MultiBarsTriangle.ts +22 -7
- package/src/multiGrid/plugins/MultiDots.ts +7 -5
- package/src/multiGrid/plugins/MultiGridLegend.ts +1 -1
- package/src/multiGrid/plugins/MultiGroupAxis.ts +19 -7
- package/src/multiGrid/plugins/MultiLineAreas.ts +9 -6
- package/src/multiGrid/plugins/MultiLines.ts +9 -6
- package/src/multiGrid/plugins/MultiValueAxis.ts +19 -7
- package/src/multiGrid/plugins/OverlappingValueAxes.ts +52 -47
- package/src/noneData/defaults.ts +3 -0
- package/src/series/defaults.ts +13 -3
- package/src/series/plugins/Bubbles.ts +139 -88
- package/src/series/plugins/Pie.ts +307 -352
- package/src/series/plugins/PieEventTexts.ts +102 -38
- package/src/series/plugins/PieLabels.ts +95 -48
- package/src/series/seriesObservables.ts +145 -0
- package/src/series/seriesUtils.ts +4 -4
- package/tsconfig.json +1 -1
package/src/base/BaseBarStack.ts
CHANGED
@@ -12,15 +12,18 @@ import type { BasePluginFn } from './types'
|
|
12
12
|
import type {
|
13
13
|
ComputedDatumGrid,
|
14
14
|
ComputedDataGrid,
|
15
|
+
ComputedLayoutDatumGrid,
|
16
|
+
ComputedLayoutDataGrid,
|
15
17
|
DataFormatterGrid,
|
16
18
|
EventGrid,
|
17
19
|
ChartParams,
|
18
|
-
|
20
|
+
GridContainerPosition,
|
19
21
|
Layout,
|
20
22
|
TransformData } from '@orbcharts/core'
|
21
23
|
import { getD3TransitionEase } from '../utils/d3Utils'
|
22
24
|
import { getClassName, getUniID } from '../utils/orbchartsUtils'
|
23
25
|
import { gridSelectionsObservable } from '../grid/gridObservables'
|
26
|
+
import { shareReplay } from 'rxjs/operators'
|
24
27
|
|
25
28
|
export interface BaseBarStackParams {
|
26
29
|
barWidth: number
|
@@ -31,8 +34,10 @@ export interface BaseBarStackParams {
|
|
31
34
|
interface BaseBarStackContext {
|
32
35
|
selection: d3.Selection<any, unknown, any, unknown>
|
33
36
|
computedData$: Observable<ComputedDataGrid>
|
37
|
+
computedLayoutData$: Observable<ComputedLayoutDataGrid>
|
34
38
|
visibleComputedData$: Observable<ComputedDatumGrid[][]>
|
35
|
-
|
39
|
+
visibleComputedLayoutData$: Observable<ComputedLayoutDataGrid>
|
40
|
+
seriesLabels$: Observable<string[]>
|
36
41
|
SeriesDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
|
37
42
|
GroupDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
|
38
43
|
fullParams$: Observable<BaseBarStackParams>
|
@@ -46,13 +51,13 @@ interface BaseBarStackContext {
|
|
46
51
|
height: number;
|
47
52
|
}>
|
48
53
|
gridHighlight$: Observable<ComputedDatumGrid[]>
|
49
|
-
|
50
|
-
|
54
|
+
gridContainerPosition$: Observable<GridContainerPosition[]>
|
55
|
+
isSeriesSeprate$: Observable<boolean>
|
51
56
|
event$: Subject<EventGrid>
|
52
57
|
}
|
53
58
|
|
54
59
|
|
55
|
-
interface GraphicDatum extends
|
60
|
+
interface GraphicDatum extends ComputedLayoutDatumGrid {
|
56
61
|
_barStartY: number // bar的起點y座標
|
57
62
|
_barHeight: number // bar的高度
|
58
63
|
}
|
@@ -70,7 +75,7 @@ interface RenderBarParams {
|
|
70
75
|
transformedBarRadius: [number, number][]
|
71
76
|
delayGroup: number
|
72
77
|
transitionItem: number
|
73
|
-
|
78
|
+
isSeriesSeprate: boolean
|
74
79
|
}
|
75
80
|
|
76
81
|
type ClipPathDatum = {
|
@@ -121,7 +126,7 @@ function calctransitionItem (barGroupAmount: number, totalDuration: number) {
|
|
121
126
|
return totalDuration * (1 - groupDelayProportionOfDuration) // delay後剩餘的時間
|
122
127
|
}
|
123
128
|
|
124
|
-
function renderRectBars ({ graphicGSelection, rectClassName, barData, zeroY, groupLabels, params, chartParams, barWidth, transformedBarRadius, delayGroup, transitionItem,
|
129
|
+
function renderRectBars ({ graphicGSelection, rectClassName, barData, zeroY, groupLabels, params, chartParams, barWidth, transformedBarRadius, delayGroup, transitionItem, isSeriesSeprate }: RenderBarParams) {
|
125
130
|
|
126
131
|
const barHalfWidth = barWidth! / 2
|
127
132
|
|
@@ -287,8 +292,10 @@ function highlight ({ selection, ids, fullChartParams }: {
|
|
287
292
|
export const createBaseBarStack: BasePluginFn<BaseBarStackContext> = (pluginName: string, {
|
288
293
|
selection,
|
289
294
|
computedData$,
|
295
|
+
computedLayoutData$,
|
290
296
|
visibleComputedData$,
|
291
|
-
|
297
|
+
visibleComputedLayoutData$,
|
298
|
+
seriesLabels$,
|
292
299
|
SeriesDataMap$,
|
293
300
|
GroupDataMap$,
|
294
301
|
fullParams$,
|
@@ -299,8 +306,8 @@ export const createBaseBarStack: BasePluginFn<BaseBarStackContext> = (pluginName
|
|
299
306
|
gridGraphicReverseScale$,
|
300
307
|
gridAxesSize$,
|
301
308
|
gridHighlight$,
|
302
|
-
|
303
|
-
|
309
|
+
gridContainerPosition$,
|
310
|
+
isSeriesSeprate$,
|
304
311
|
event$
|
305
312
|
}) => {
|
306
313
|
|
@@ -309,136 +316,6 @@ export const createBaseBarStack: BasePluginFn<BaseBarStackContext> = (pluginName
|
|
309
316
|
const clipPathID = getUniID(pluginName, 'clipPath-box')
|
310
317
|
const rectClassName = getClassName(pluginName, 'rect')
|
311
318
|
|
312
|
-
// const axisSelection: d3.Selection<SVGGElement, any, any, any> = selection
|
313
|
-
// .append('g')
|
314
|
-
// .attr('clip-path', `url(#${clipPathID})`)
|
315
|
-
// const defsSelection: d3.Selection<SVGDefsElement, ComputedDatumGrid, any, any> = axisSelection.append('defs')
|
316
|
-
// const graphicGSelection: d3.Selection<SVGGElement, any, any, any> = axisSelection.append('g')
|
317
|
-
// const barSelection$: Subject<d3.Selection<SVGRectElement, ComputedDatumGrid, SVGGElement, unknown>> = new Subject()
|
318
|
-
|
319
|
-
// gridAxesTransform$
|
320
|
-
// .pipe(
|
321
|
-
// takeUntil(destroy$),
|
322
|
-
// map(d => d.value),
|
323
|
-
// distinctUntilChanged()
|
324
|
-
// ).subscribe(d => {
|
325
|
-
// axisSelection
|
326
|
-
// .style('transform', d)
|
327
|
-
// })
|
328
|
-
|
329
|
-
// gridGraphicTransform$
|
330
|
-
// .pipe(
|
331
|
-
// takeUntil(destroy$),
|
332
|
-
// switchMap(async d => d.value),
|
333
|
-
// distinctUntilChanged()
|
334
|
-
// ).subscribe(d => {
|
335
|
-
// graphicGSelection
|
336
|
-
// .transition()
|
337
|
-
// .duration(50)
|
338
|
-
// .style('transform', d)
|
339
|
-
// })
|
340
|
-
|
341
|
-
// const seriesSelection$ = computedData$.pipe(
|
342
|
-
// takeUntil(destroy$),
|
343
|
-
// distinctUntilChanged((a, b) => {
|
344
|
-
// // 只有當series的數量改變時,才重新計算
|
345
|
-
// return a.length === b.length
|
346
|
-
// }),
|
347
|
-
// map((computedData, i) => {
|
348
|
-
// return selection
|
349
|
-
// .selectAll<SVGGElement, ComputedDatumGrid[]>(`g.${seriesClassName}`)
|
350
|
-
// .data(computedData, d => d[0] ? d[0].seriesIndex : i)
|
351
|
-
// .join(
|
352
|
-
// enter => {
|
353
|
-
// return enter
|
354
|
-
// .append('g')
|
355
|
-
// .classed(seriesClassName, true)
|
356
|
-
// .each((d, i, g) => {
|
357
|
-
// const axesSelection = d3.select(g[i])
|
358
|
-
// .selectAll<SVGGElement, ComputedDatumGrid[]>(`g.${axesClassName}`)
|
359
|
-
// .data([i])
|
360
|
-
// .join(
|
361
|
-
// enter => {
|
362
|
-
// return enter
|
363
|
-
// .append('g')
|
364
|
-
// .classed(axesClassName, true)
|
365
|
-
// .attr('clip-path', `url(#${clipPathID})`)
|
366
|
-
// .each((d, i, g) => {
|
367
|
-
// const defsSelection = d3.select(g[i])
|
368
|
-
// .selectAll<SVGDefsElement, any>('defs')
|
369
|
-
// .data([i])
|
370
|
-
// .join('defs')
|
371
|
-
|
372
|
-
// const graphicGSelection = d3.select(g[i])
|
373
|
-
// .selectAll<SVGGElement, any>('g')
|
374
|
-
// .data([i])
|
375
|
-
// .join('g')
|
376
|
-
// .classed(graphicClassName, true)
|
377
|
-
// })
|
378
|
-
// },
|
379
|
-
// update => update,
|
380
|
-
// exit => exit.remove()
|
381
|
-
// )
|
382
|
-
// })
|
383
|
-
// },
|
384
|
-
// update => update,
|
385
|
-
// exit => exit.remove()
|
386
|
-
// )
|
387
|
-
// })
|
388
|
-
// )
|
389
|
-
|
390
|
-
// combineLatest({
|
391
|
-
// seriesSelection: seriesSelection$,
|
392
|
-
// gridContainer: gridContainer$
|
393
|
-
// }).pipe(
|
394
|
-
// takeUntil(destroy$),
|
395
|
-
// switchMap(async d => d)
|
396
|
-
// ).subscribe(data => {
|
397
|
-
// data.seriesSelection
|
398
|
-
// .transition()
|
399
|
-
// .attr('transform', (d, i) => {
|
400
|
-
// const translate = data.gridContainer[i].translate
|
401
|
-
// const scale = data.gridContainer[i].scale
|
402
|
-
// return `translate(${translate[0]}, ${translate[1]}) scale(${scale[0]}, ${scale[1]})`
|
403
|
-
// })
|
404
|
-
// })
|
405
|
-
|
406
|
-
|
407
|
-
// const axesSelection$ = combineLatest({
|
408
|
-
// seriesSelection: seriesSelection$,
|
409
|
-
// gridAxesTransform: gridAxesTransform$
|
410
|
-
// }).pipe(
|
411
|
-
// takeUntil(destroy$),
|
412
|
-
// switchMap(async d => d),
|
413
|
-
// map(data => {
|
414
|
-
// return data.seriesSelection
|
415
|
-
// .select<SVGGElement>(`g.${axesClassName}`)
|
416
|
-
// .style('transform', data.gridAxesTransform.value)
|
417
|
-
// })
|
418
|
-
// )
|
419
|
-
// const defsSelection$ = axesSelection$.pipe(
|
420
|
-
// takeUntil(destroy$),
|
421
|
-
// map(axesSelection => {
|
422
|
-
// return axesSelection.select<SVGDefsElement>('defs')
|
423
|
-
// })
|
424
|
-
// )
|
425
|
-
// const graphicGSelection$ = combineLatest({
|
426
|
-
// axesSelection: axesSelection$,
|
427
|
-
// gridGraphicTransform: gridGraphicTransform$
|
428
|
-
// }).pipe(
|
429
|
-
// takeUntil(destroy$),
|
430
|
-
// switchMap(async d => d),
|
431
|
-
// map(data => {
|
432
|
-
// const graphicGSelection = data.axesSelection
|
433
|
-
// .select<SVGGElement>(`g.${graphicClassName}`)
|
434
|
-
// graphicGSelection
|
435
|
-
// .transition()
|
436
|
-
// .duration(50)
|
437
|
-
// .style('transform', data.gridGraphicTransform.value)
|
438
|
-
// return graphicGSelection
|
439
|
-
// })
|
440
|
-
// )
|
441
|
-
|
442
319
|
const {
|
443
320
|
seriesSelection$,
|
444
321
|
axesSelection$,
|
@@ -448,14 +325,14 @@ export const createBaseBarStack: BasePluginFn<BaseBarStackContext> = (pluginName
|
|
448
325
|
selection,
|
449
326
|
pluginName,
|
450
327
|
clipPathID,
|
451
|
-
|
452
|
-
|
328
|
+
seriesLabels$,
|
329
|
+
gridContainerPosition$,
|
453
330
|
gridAxesTransform$,
|
454
331
|
gridGraphicTransform$
|
455
332
|
})
|
456
333
|
|
457
334
|
|
458
|
-
const zeroY$ =
|
335
|
+
const zeroY$ = visibleComputedLayoutData$.pipe(
|
459
336
|
takeUntil(destroy$),
|
460
337
|
map(d => d[0] && d[0][0]
|
461
338
|
? d[0][0].axisY - d[0][0].axisYFromZero
|
@@ -468,7 +345,7 @@ export const createBaseBarStack: BasePluginFn<BaseBarStackContext> = (pluginName
|
|
468
345
|
// visibleComputedData: visibleComputedData$,
|
469
346
|
params: fullParams$,
|
470
347
|
axisSize: gridAxesSize$,
|
471
|
-
|
348
|
+
isSeriesSeprate: isSeriesSeprate$
|
472
349
|
}).pipe(
|
473
350
|
takeUntil(destroy$),
|
474
351
|
switchMap(async d => d),
|
@@ -536,7 +413,8 @@ export const createBaseBarStack: BasePluginFn<BaseBarStackContext> = (pluginName
|
|
536
413
|
})
|
537
414
|
})
|
538
415
|
return Array.from(GroupLabelSet)
|
539
|
-
})
|
416
|
+
}),
|
417
|
+
shareReplay(1)
|
540
418
|
)
|
541
419
|
|
542
420
|
const transitionDuration$ = fullChartParams$.pipe(
|
@@ -598,7 +476,7 @@ export const createBaseBarStack: BasePluginFn<BaseBarStackContext> = (pluginName
|
|
598
476
|
// })
|
599
477
|
// )
|
600
478
|
|
601
|
-
const
|
479
|
+
const groupScaleDomain$ = combineLatest({
|
602
480
|
computedData: computedData$,
|
603
481
|
dataFormatter: fullDataFormatter$,
|
604
482
|
}).pipe(
|
@@ -608,56 +486,70 @@ export const createBaseBarStack: BasePluginFn<BaseBarStackContext> = (pluginName
|
|
608
486
|
const groupMin = 0
|
609
487
|
const groupMax = data.computedData[0] ? data.computedData[0].length - 1 : 0
|
610
488
|
const groupScaleDomainMin = data.dataFormatter.grid.groupAxis.scaleDomain[0] === 'auto'
|
611
|
-
? groupMin - data.dataFormatter.grid.groupAxis.scalePadding
|
612
|
-
: data.dataFormatter.grid.groupAxis.scaleDomain[0] as number - data.dataFormatter.grid.groupAxis.scalePadding
|
489
|
+
? groupMin // - data.dataFormatter.grid.groupAxis.scalePadding
|
490
|
+
: data.dataFormatter.grid.groupAxis.scaleDomain[0] as number // - data.dataFormatter.grid.groupAxis.scalePadding
|
613
491
|
const groupScaleDomainMax = data.dataFormatter.grid.groupAxis.scaleDomain[1] === 'auto'
|
614
|
-
? groupMax + data.dataFormatter.grid.groupAxis.scalePadding
|
615
|
-
: data.dataFormatter.grid.groupAxis.scaleDomain[1] as number + data.dataFormatter.grid.groupAxis.scalePadding
|
616
|
-
|
617
|
-
|
492
|
+
? groupMax // + data.dataFormatter.grid.groupAxis.scalePadding
|
493
|
+
: data.dataFormatter.grid.groupAxis.scaleDomain[1] as number // + data.dataFormatter.grid.groupAxis.scalePadding
|
494
|
+
|
495
|
+
return [groupScaleDomainMin, groupScaleDomainMax]
|
496
|
+
})
|
497
|
+
)
|
498
|
+
|
499
|
+
// 堆疊後的高度對應圖軸的比例(最大值/最大值所在group的總和)
|
500
|
+
const yRatio$ = combineLatest({
|
501
|
+
visibleComputedLayoutData: visibleComputedLayoutData$,
|
502
|
+
groupScaleDomain: groupScaleDomain$
|
503
|
+
}).pipe(
|
504
|
+
takeUntil(destroy$),
|
505
|
+
switchMap(async d => d),
|
506
|
+
map(data => {
|
507
|
+
const groupScaleDomainMin = data.groupScaleDomain[0]
|
508
|
+
const groupScaleDomainMax = data.groupScaleDomain[1]
|
509
|
+
// 只選取group篩選範圍內的資料
|
510
|
+
const filteredData = data.visibleComputedLayoutData
|
618
511
|
.map(d => {
|
619
512
|
return d.filter((_d, i) => {
|
620
513
|
return _d.groupIndex >= groupScaleDomainMin && _d.groupIndex <= groupScaleDomainMax
|
621
514
|
})
|
622
515
|
})
|
623
|
-
|
624
|
-
|
625
|
-
if (
|
516
|
+
|
517
|
+
const filteredDataList = filteredData.flat()
|
518
|
+
if (filteredDataList.length <= 1) {
|
626
519
|
return 1
|
627
|
-
} else {
|
628
|
-
const yArr = filteredData.flat().map(d => d.axisYFromZero)
|
629
|
-
const barMaxY = Math.max(...yArr)
|
630
|
-
// const stackYArr = filteredData.map(d => d.reduce((prev, current) => prev + current.axisYFromZero, 0))
|
631
|
-
const stackYArr = data.computedData[0]
|
632
|
-
? data.computedData[0].map((_, groupIndex) => {
|
633
|
-
// 加總同一group的value
|
634
|
-
return data.computedData.reduce((prev, current) => {
|
635
|
-
return prev + current[groupIndex].axisYFromZero
|
636
|
-
}, 0)
|
637
|
-
})
|
638
|
-
: []
|
639
|
-
const barStackMaxY = Math.max(...stackYArr)
|
640
|
-
|
641
|
-
return barMaxY / barStackMaxY
|
642
520
|
}
|
521
|
+
|
522
|
+
const maxValueDatum = filteredDataList.reduce((max, current) => {
|
523
|
+
return current.value > max.value ? current : max;
|
524
|
+
}, filteredDataList[0])
|
525
|
+
const maxValueGroupIndex = maxValueDatum.groupIndex
|
526
|
+
const maxValueGroupSum = filteredDataList
|
527
|
+
.filter(d => d.groupIndex === maxValueGroupIndex)
|
528
|
+
.reduce((sum, current) => {
|
529
|
+
return sum + current.value
|
530
|
+
}, 0)
|
531
|
+
return maxValueDatum.value / maxValueGroupSum
|
643
532
|
})
|
644
533
|
)
|
645
534
|
|
646
535
|
const stackedData$ = combineLatest({
|
647
|
-
|
536
|
+
computedLayoutData: computedLayoutData$,
|
648
537
|
yRatio: yRatio$,
|
649
538
|
zeroY: zeroY$
|
650
539
|
}).pipe(
|
651
540
|
takeUntil(destroy$),
|
652
541
|
map(data => {
|
653
|
-
let accYArr: number[] = data.
|
654
|
-
? data.
|
542
|
+
let accYArr: number[] = data.computedLayoutData[0]
|
543
|
+
? data.computedLayoutData[0].map(() => data.zeroY)
|
655
544
|
: []
|
656
|
-
return data.
|
545
|
+
return data.computedLayoutData.map((series, seriesIndex) => {
|
657
546
|
return series.map((datum, groupIndex) => {
|
658
547
|
const _barStartY = accYArr[groupIndex] // 前一次的累加高度
|
659
|
-
|
660
|
-
|
548
|
+
let _barHeight = 0
|
549
|
+
if (datum.visible) {
|
550
|
+
_barHeight = datum.axisYFromZero * data.yRatio
|
551
|
+
accYArr[groupIndex] = accYArr[groupIndex] + _barHeight // 累加高度
|
552
|
+
}
|
661
553
|
return <GraphicDatum>{
|
662
554
|
...datum,
|
663
555
|
_barStartY,
|
@@ -682,13 +574,13 @@ export const createBaseBarStack: BasePluginFn<BaseBarStackContext> = (pluginName
|
|
682
574
|
)
|
683
575
|
|
684
576
|
const noneStackedData$ = combineLatest({
|
685
|
-
|
577
|
+
computedLayoutData: computedLayoutData$,
|
686
578
|
// yRatio: yRatio$,
|
687
579
|
zeroY: zeroY$
|
688
580
|
}).pipe(
|
689
581
|
takeUntil(destroy$),
|
690
582
|
map(data => {
|
691
|
-
return data.
|
583
|
+
return data.computedLayoutData.map((series, seriesIndex) => {
|
692
584
|
return series.map((datum, groupIndex) => {
|
693
585
|
return <GraphicDatum>{
|
694
586
|
...datum,
|
@@ -700,9 +592,9 @@ export const createBaseBarStack: BasePluginFn<BaseBarStackContext> = (pluginName
|
|
700
592
|
})
|
701
593
|
)
|
702
594
|
|
703
|
-
const graphicData$ =
|
704
|
-
switchMap(
|
705
|
-
return iif(() =>
|
595
|
+
const graphicData$ = isSeriesSeprate$.pipe(
|
596
|
+
switchMap(isSeriesSeprate => {
|
597
|
+
return iif(() => isSeriesSeprate, noneStackedData$, stackedData$)
|
706
598
|
})
|
707
599
|
)
|
708
600
|
|
@@ -730,9 +622,7 @@ export const createBaseBarStack: BasePluginFn<BaseBarStackContext> = (pluginName
|
|
730
622
|
distinctUntilChanged()
|
731
623
|
)
|
732
624
|
|
733
|
-
const barSelection$ =
|
734
|
-
|
735
|
-
combineLatest({
|
625
|
+
const barSelection$ = combineLatest({
|
736
626
|
graphicGSelection: graphicGSelection$,
|
737
627
|
graphicData: graphicData$,
|
738
628
|
zeroY: zeroY$,
|
@@ -745,30 +635,38 @@ export const createBaseBarStack: BasePluginFn<BaseBarStackContext> = (pluginName
|
|
745
635
|
transformedBarRadius: transformedBarRadius$,
|
746
636
|
delayGroup: delayGroup$,
|
747
637
|
transitionItem: transitionItem$,
|
748
|
-
|
749
|
-
GroupDataMap: GroupDataMap$,
|
750
|
-
isSeriesPositionSeprate: isSeriesPositionSeprate$
|
638
|
+
isSeriesSeprate: isSeriesSeprate$
|
751
639
|
}).pipe(
|
752
640
|
takeUntil(destroy$),
|
753
641
|
switchMap(async (d) => d),
|
754
|
-
|
755
|
-
|
756
|
-
|
757
|
-
|
758
|
-
|
759
|
-
|
760
|
-
|
761
|
-
|
762
|
-
|
763
|
-
|
764
|
-
|
765
|
-
|
766
|
-
|
767
|
-
|
768
|
-
|
642
|
+
map(data => {
|
643
|
+
return renderRectBars({
|
644
|
+
graphicGSelection: data.graphicGSelection,
|
645
|
+
rectClassName,
|
646
|
+
barData: data.graphicData,
|
647
|
+
zeroY: data.zeroY,
|
648
|
+
groupLabels: data.groupLabels,
|
649
|
+
// barScale: data.barScale,
|
650
|
+
params: data.params,
|
651
|
+
chartParams: data.chartParams,
|
652
|
+
barWidth: data.barWidth,
|
653
|
+
transformedBarRadius: data.transformedBarRadius,
|
654
|
+
delayGroup: data.delayGroup,
|
655
|
+
transitionItem: data.transitionItem,
|
656
|
+
isSeriesSeprate: data.isSeriesSeprate
|
657
|
+
})
|
769
658
|
})
|
659
|
+
)
|
660
|
+
|
661
|
+
combineLatest({
|
662
|
+
barSelection: barSelection$,
|
663
|
+
computedData: computedData$,
|
664
|
+
highlightTarget: highlightTarget$,
|
665
|
+
SeriesDataMap: SeriesDataMap$,
|
666
|
+
GroupDataMap: GroupDataMap$,
|
667
|
+
}).subscribe(data => {
|
770
668
|
|
771
|
-
barSelection!
|
669
|
+
data.barSelection!
|
772
670
|
.on('mouseover', (event, datum) => {
|
773
671
|
event.stopPropagation()
|
774
672
|
|
@@ -786,7 +684,7 @@ export const createBaseBarStack: BasePluginFn<BaseBarStackContext> = (pluginName
|
|
786
684
|
groupIndex: datum.groupIndex,
|
787
685
|
groupLabel: datum.groupLabel,
|
788
686
|
event,
|
789
|
-
data: data.
|
687
|
+
data: data.computedData
|
790
688
|
})
|
791
689
|
})
|
792
690
|
.on('mousemove', (event, datum) => {
|
@@ -806,7 +704,7 @@ export const createBaseBarStack: BasePluginFn<BaseBarStackContext> = (pluginName
|
|
806
704
|
groupIndex: datum.groupIndex,
|
807
705
|
groupLabel: datum.groupLabel,
|
808
706
|
event,
|
809
|
-
data: data.
|
707
|
+
data: data.computedData
|
810
708
|
})
|
811
709
|
})
|
812
710
|
.on('mouseout', (event, datum) => {
|
@@ -826,7 +724,7 @@ export const createBaseBarStack: BasePluginFn<BaseBarStackContext> = (pluginName
|
|
826
724
|
groupIndex: datum.groupIndex,
|
827
725
|
groupLabel: datum.groupLabel,
|
828
726
|
event,
|
829
|
-
data: data.
|
727
|
+
data: data.computedData
|
830
728
|
})
|
831
729
|
})
|
832
730
|
.on('click', (event, datum) => {
|
@@ -846,11 +744,10 @@ export const createBaseBarStack: BasePluginFn<BaseBarStackContext> = (pluginName
|
|
846
744
|
groupIndex: datum.groupIndex,
|
847
745
|
groupLabel: datum.groupLabel,
|
848
746
|
event,
|
849
|
-
data: data.
|
747
|
+
data: data.computedData
|
850
748
|
})
|
851
749
|
})
|
852
750
|
|
853
|
-
barSelection$.next(barSelection!)
|
854
751
|
})
|
855
752
|
|
856
753
|
// const datumList$ = computedData$.pipe(
|