@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/BaseBars.ts
CHANGED
@@ -5,13 +5,16 @@ import {
|
|
5
5
|
switchMap,
|
6
6
|
takeUntil,
|
7
7
|
distinctUntilChanged,
|
8
|
+
shareReplay,
|
8
9
|
Observable,
|
9
10
|
Subject } from 'rxjs'
|
10
11
|
import type { BasePluginFn } from './types'
|
11
12
|
import type {
|
12
13
|
ComputedDatumGrid,
|
13
14
|
ComputedDataGrid,
|
14
|
-
|
15
|
+
ComputedLayoutDataGrid,
|
16
|
+
DataFormatterTypeMap,
|
17
|
+
GridContainerPosition,
|
15
18
|
EventGrid,
|
16
19
|
ChartParams,
|
17
20
|
Layout,
|
@@ -31,8 +34,10 @@ export interface BaseBarsParams {
|
|
31
34
|
interface BaseBarsContext {
|
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<BaseBarsParams>
|
@@ -45,15 +50,15 @@ interface BaseBarsContext {
|
|
45
50
|
height: number;
|
46
51
|
}>
|
47
52
|
gridHighlight$: Observable<ComputedDatumGrid[]>
|
48
|
-
|
49
|
-
|
53
|
+
gridContainerPosition$: Observable<GridContainerPosition[]>
|
54
|
+
isSeriesSeprate$: Observable<boolean>
|
50
55
|
event$: Subject<EventGrid>
|
51
56
|
}
|
52
57
|
|
53
58
|
interface RenderBarParams {
|
54
59
|
graphicGSelection: d3.Selection<SVGGElement, string, any, any>
|
55
60
|
rectClassName: string
|
56
|
-
|
61
|
+
visibleComputedLayoutData: ComputedLayoutDataGrid
|
57
62
|
zeroYArr: number[]
|
58
63
|
groupLabels: string[]
|
59
64
|
barScale: d3.ScalePoint<string>
|
@@ -63,7 +68,7 @@ interface RenderBarParams {
|
|
63
68
|
transformedBarRadius: [number, number][]
|
64
69
|
delayGroup: number
|
65
70
|
transitionItem: number
|
66
|
-
|
71
|
+
isSeriesSeprate: boolean
|
67
72
|
}
|
68
73
|
|
69
74
|
type ClipPathDatum = {
|
@@ -86,7 +91,9 @@ function calcBarWidth ({ axisWidth, groupAmount, barAmountOfGroup, barPadding =
|
|
86
91
|
barPadding: number
|
87
92
|
barGroupPadding: number
|
88
93
|
}) {
|
89
|
-
const eachGroupWidth =
|
94
|
+
const eachGroupWidth = groupAmount > 1
|
95
|
+
? axisWidth / (groupAmount - 1) // -1是因為要扣掉兩側的padding
|
96
|
+
: axisWidth
|
90
97
|
const width = (eachGroupWidth - barGroupPadding) / barAmountOfGroup - barPadding
|
91
98
|
return width > 1 ? width : 1
|
92
99
|
}
|
@@ -116,7 +123,7 @@ function calctransitionItem (barGroupAmount: number, totalDuration: number) {
|
|
116
123
|
}
|
117
124
|
// let _data: ComputedDatumGrid[][] = []
|
118
125
|
|
119
|
-
function renderRectBars ({ graphicGSelection, rectClassName,
|
126
|
+
function renderRectBars ({ graphicGSelection, rectClassName, visibleComputedLayoutData, zeroYArr, groupLabels, barScale, params, chartParams, barWidth, transformedBarRadius, delayGroup, transitionItem, isSeriesSeprate }: RenderBarParams) {
|
120
127
|
|
121
128
|
const barHalfWidth = barWidth! / 2
|
122
129
|
|
@@ -124,7 +131,7 @@ function renderRectBars ({ graphicGSelection, rectClassName, computedData, zeroY
|
|
124
131
|
.each((seriesData, seriesIndex, g) => {
|
125
132
|
d3.select(g[seriesIndex])
|
126
133
|
.selectAll<SVGGElement, ComputedDatumGrid>(`rect.${rectClassName}`)
|
127
|
-
.data(
|
134
|
+
.data(visibleComputedLayoutData[seriesIndex] ?? [], d => d.id)
|
128
135
|
.join(
|
129
136
|
enter => {
|
130
137
|
// console.log('enter')
|
@@ -140,7 +147,7 @@ function renderRectBars ({ graphicGSelection, rectClassName, computedData, zeroY
|
|
140
147
|
.attr('transform', (d, i) => `translate(${(d ? d.axisX : 0) - barHalfWidth}, ${0})`)
|
141
148
|
.attr('fill', d => d.color)
|
142
149
|
.attr('y', d => d.axisY < zeroYArr[seriesIndex] ? d.axisY : zeroYArr[seriesIndex])
|
143
|
-
.attr('x', d =>
|
150
|
+
.attr('x', d => isSeriesSeprate ? 0 : barScale(d.seriesLabel)!)
|
144
151
|
.attr('width', barWidth!)
|
145
152
|
.attr('rx', transformedBarRadius[seriesIndex][0] ?? 1)
|
146
153
|
.attr('ry', transformedBarRadius[seriesIndex][1] ?? 1)
|
@@ -177,7 +184,7 @@ function renderRectBars ({ graphicGSelection, rectClassName, computedData, zeroY
|
|
177
184
|
// .attr('cursor', 'pointer')
|
178
185
|
// .attr('fill', d => d.color)
|
179
186
|
// .attr('y', d => d.axisY < zeroYArr[seriesIndex] ? d.axisY : zeroYArr[seriesIndex])
|
180
|
-
// .attr('x', d =>
|
187
|
+
// .attr('x', d => isSeriesSeprate ? 0 : barScale(d.seriesLabel)!)
|
181
188
|
// .attr('width', barWidth!)
|
182
189
|
// .attr('transform', `translate(${-barHalfWidth}, 0)`)
|
183
190
|
// // .attr('rx', params.barRadius == true ? barHalfWidth
|
@@ -266,8 +273,10 @@ function highlight ({ selection, ids, fullChartParams }: {
|
|
266
273
|
export const createBaseBars: BasePluginFn<BaseBarsContext> = (pluginName: string, {
|
267
274
|
selection,
|
268
275
|
computedData$,
|
276
|
+
computedLayoutData$,
|
269
277
|
visibleComputedData$,
|
270
|
-
|
278
|
+
visibleComputedLayoutData$,
|
279
|
+
seriesLabels$,
|
271
280
|
SeriesDataMap$,
|
272
281
|
GroupDataMap$,
|
273
282
|
fullParams$,
|
@@ -277,8 +286,8 @@ export const createBaseBars: BasePluginFn<BaseBarsContext> = (pluginName: string
|
|
277
286
|
gridGraphicReverseScale$,
|
278
287
|
gridAxesSize$,
|
279
288
|
gridHighlight$,
|
280
|
-
|
281
|
-
|
289
|
+
gridContainerPosition$,
|
290
|
+
isSeriesSeprate$,
|
282
291
|
event$
|
283
292
|
}) => {
|
284
293
|
|
@@ -338,7 +347,7 @@ export const createBaseBars: BasePluginFn<BaseBarsContext> = (pluginName: string
|
|
338
347
|
|
339
348
|
// combineLatest({
|
340
349
|
// seriesSelection: seriesSelection$,
|
341
|
-
//
|
350
|
+
// gridContainerPosition: gridContainerPosition$
|
342
351
|
// }).pipe(
|
343
352
|
// takeUntil(destroy$),
|
344
353
|
// switchMap(async d => d)
|
@@ -346,8 +355,8 @@ export const createBaseBars: BasePluginFn<BaseBarsContext> = (pluginName: string
|
|
346
355
|
// data.seriesSelection
|
347
356
|
// .transition()
|
348
357
|
// .attr('transform', (d, i) => {
|
349
|
-
// const translate = data.
|
350
|
-
// const scale = data.
|
358
|
+
// const translate = data.gridContainerPosition[i].translate
|
359
|
+
// const scale = data.gridContainerPosition[i].scale
|
351
360
|
// return `translate(${translate[0]}, ${translate[1]}) scale(${scale[0]}, ${scale[1]})`
|
352
361
|
// })
|
353
362
|
// })
|
@@ -397,13 +406,13 @@ export const createBaseBars: BasePluginFn<BaseBarsContext> = (pluginName: string
|
|
397
406
|
selection,
|
398
407
|
pluginName,
|
399
408
|
clipPathID,
|
400
|
-
|
401
|
-
|
409
|
+
seriesLabels$,
|
410
|
+
gridContainerPosition$,
|
402
411
|
gridAxesTransform$,
|
403
412
|
gridGraphicTransform$
|
404
413
|
})
|
405
414
|
|
406
|
-
const zeroYArr$ =
|
415
|
+
const zeroYArr$ = visibleComputedLayoutData$.pipe(
|
407
416
|
takeUntil(destroy$),
|
408
417
|
map(data => {
|
409
418
|
return data.map(d => {
|
@@ -418,14 +427,14 @@ export const createBaseBars: BasePluginFn<BaseBarsContext> = (pluginName: string
|
|
418
427
|
visibleComputedData: visibleComputedData$,
|
419
428
|
params: fullParams$,
|
420
429
|
gridAxesSize: gridAxesSize$,
|
421
|
-
|
430
|
+
isSeriesSeprate: isSeriesSeprate$
|
422
431
|
}).pipe(
|
423
432
|
takeUntil(destroy$),
|
424
433
|
switchMap(async d => d),
|
425
434
|
map(data => {
|
426
435
|
if (data.params.barWidth) {
|
427
436
|
return data.params.barWidth
|
428
|
-
} else if (data.
|
437
|
+
} else if (data.isSeriesSeprate) {
|
429
438
|
return calcBarWidth({
|
430
439
|
axisWidth: data.gridAxesSize.width,
|
431
440
|
groupAmount: data.computedData[0] ? data.computedData[0].length : 0,
|
@@ -452,7 +461,7 @@ export const createBaseBars: BasePluginFn<BaseBarsContext> = (pluginName: string
|
|
452
461
|
// gridGraphicTransform: gridGraphicTransform$,
|
453
462
|
barWidth: barWidth$,
|
454
463
|
params: fullParams$,
|
455
|
-
//
|
464
|
+
// gridContainerPosition: gridContainerPosition$,
|
456
465
|
// gridAxesTransform: gridAxesTransform$
|
457
466
|
gridGraphicReverseScale: gridGraphicReverseScale$
|
458
467
|
}).pipe(
|
@@ -476,17 +485,17 @@ export const createBaseBars: BasePluginFn<BaseBarsContext> = (pluginName: string
|
|
476
485
|
// } else if (data.gridAxesTransform.rotate == 0) {
|
477
486
|
// transformedRx = radius
|
478
487
|
// // 抵消外層scale的變型
|
479
|
-
// / data.gridGraphicTransform.scale[0] / data.
|
488
|
+
// / data.gridGraphicTransform.scale[0] / data.gridContainerPosition[0].scale[0]
|
480
489
|
// transformedRy = radius
|
481
490
|
// // 抵消外層scale的變型
|
482
|
-
// / data.gridGraphicTransform.scale[1] / data.
|
491
|
+
// / data.gridGraphicTransform.scale[1] / data.gridContainerPosition[0].scale[1]
|
483
492
|
// } else if (data.gridAxesTransform.rotate != 0) {
|
484
493
|
// transformedRx = radius
|
485
494
|
// // 抵消外層scale的變型,由於有90度的旋轉,所以外層 (container) x和y的scale要互換
|
486
|
-
// / data.gridGraphicTransform.scale[0] / data.
|
495
|
+
// / data.gridGraphicTransform.scale[0] / data.gridContainerPosition[0].scale[1]
|
487
496
|
// transformedRy = radius
|
488
497
|
// // 抵消外層scale的變型,由於有90度的旋轉,所以外層 (container) x和y的scale要互換
|
489
|
-
// / data.gridGraphicTransform.scale[1] / data.
|
498
|
+
// / data.gridGraphicTransform.scale[1] / data.gridContainerPosition[0].scale[0]
|
490
499
|
// }
|
491
500
|
|
492
501
|
// 如果計算出來的x圓角值大於寬度一半則進行修正
|
@@ -502,18 +511,18 @@ export const createBaseBars: BasePluginFn<BaseBarsContext> = (pluginName: string
|
|
502
511
|
)
|
503
512
|
|
504
513
|
|
505
|
-
const seriesLabels$ = visibleComputedData$.pipe(
|
506
|
-
|
507
|
-
|
508
|
-
|
509
|
-
|
510
|
-
|
511
|
-
|
512
|
-
|
513
|
-
|
514
|
-
|
515
|
-
|
516
|
-
)
|
514
|
+
// const seriesLabels$ = visibleComputedData$.pipe(
|
515
|
+
// takeUntil(destroy$),
|
516
|
+
// map(data => {
|
517
|
+
// const SeriesLabelSet: Set<string> = new Set()
|
518
|
+
// data.forEach(d => {
|
519
|
+
// d.forEach(_d => {
|
520
|
+
// SeriesLabelSet.add(_d.seriesLabel)
|
521
|
+
// })
|
522
|
+
// })
|
523
|
+
// return Array.from(SeriesLabelSet)
|
524
|
+
// })
|
525
|
+
// )
|
517
526
|
|
518
527
|
const groupLabels$ = visibleComputedData$.pipe(
|
519
528
|
takeUntil(destroy$),
|
@@ -601,11 +610,9 @@ export const createBaseBars: BasePluginFn<BaseBarsContext> = (pluginName: string
|
|
601
610
|
distinctUntilChanged()
|
602
611
|
)
|
603
612
|
|
604
|
-
const barSelection$ =
|
605
|
-
|
606
|
-
combineLatest({
|
613
|
+
const barSelection$ = combineLatest({
|
607
614
|
graphicGSelection: graphicGSelection$,
|
608
|
-
|
615
|
+
visibleComputedLayoutData: visibleComputedLayoutData$,
|
609
616
|
// barData$: barData$,
|
610
617
|
zeroYArr: zeroYArr$,
|
611
618
|
groupLabels: groupLabels$,
|
@@ -617,31 +624,40 @@ export const createBaseBars: BasePluginFn<BaseBarsContext> = (pluginName: string
|
|
617
624
|
transformedBarRadius: transformedBarRadius$,
|
618
625
|
delayGroup: delayGroup$,
|
619
626
|
transitionItem: transitionItem$,
|
627
|
+
isSeriesSeprate: isSeriesSeprate$
|
628
|
+
}).pipe(
|
629
|
+
takeUntil(destroy$),
|
630
|
+
switchMap(async (d) => d),
|
631
|
+
map(data => {
|
632
|
+
return renderRectBars({
|
633
|
+
graphicGSelection: data.graphicGSelection,
|
634
|
+
rectClassName,
|
635
|
+
visibleComputedLayoutData: data.visibleComputedLayoutData,
|
636
|
+
zeroYArr: data.zeroYArr,
|
637
|
+
groupLabels: data.groupLabels,
|
638
|
+
barScale: data.barScale,
|
639
|
+
params: data.params,
|
640
|
+
chartParams: data.chartParams,
|
641
|
+
barWidth: data.barWidth,
|
642
|
+
transformedBarRadius: data.transformedBarRadius,
|
643
|
+
delayGroup: data.delayGroup,
|
644
|
+
transitionItem: data.transitionItem,
|
645
|
+
isSeriesSeprate: data.isSeriesSeprate
|
646
|
+
})
|
647
|
+
})
|
648
|
+
)
|
649
|
+
|
650
|
+
combineLatest({
|
651
|
+
barSelection: barSelection$,
|
652
|
+
computedData: computedData$,
|
653
|
+
highlightTarget: highlightTarget$,
|
620
654
|
SeriesDataMap: SeriesDataMap$,
|
621
655
|
GroupDataMap: GroupDataMap$,
|
622
|
-
isSeriesPositionSeprate: isSeriesPositionSeprate$
|
623
656
|
}).pipe(
|
624
657
|
takeUntil(destroy$),
|
625
658
|
switchMap(async (d) => d),
|
626
659
|
).subscribe(data => {
|
627
|
-
|
628
|
-
const barSelection = renderRectBars({
|
629
|
-
graphicGSelection: data.graphicGSelection,
|
630
|
-
rectClassName,
|
631
|
-
computedData: data.computedData,
|
632
|
-
zeroYArr: data.zeroYArr,
|
633
|
-
groupLabels: data.groupLabels,
|
634
|
-
barScale: data.barScale,
|
635
|
-
params: data.params,
|
636
|
-
chartParams: data.chartParams,
|
637
|
-
barWidth: data.barWidth,
|
638
|
-
transformedBarRadius: data.transformedBarRadius,
|
639
|
-
delayGroup: data.delayGroup,
|
640
|
-
transitionItem: data.transitionItem,
|
641
|
-
isSeriesPositionSeprate: data.isSeriesPositionSeprate
|
642
|
-
})
|
643
|
-
|
644
|
-
barSelection!
|
660
|
+
data.barSelection
|
645
661
|
.on('mouseover', (event, datum) => {
|
646
662
|
event.stopPropagation()
|
647
663
|
|
@@ -722,8 +738,6 @@ export const createBaseBars: BasePluginFn<BaseBarsContext> = (pluginName: string
|
|
722
738
|
data: data.computedData
|
723
739
|
})
|
724
740
|
})
|
725
|
-
|
726
|
-
barSelection$.next(barSelection!)
|
727
741
|
})
|
728
742
|
|
729
743
|
|
@@ -5,15 +5,19 @@ import {
|
|
5
5
|
switchMap,
|
6
6
|
takeUntil,
|
7
7
|
distinctUntilChanged,
|
8
|
+
shareReplay,
|
8
9
|
Observable,
|
9
10
|
Subject } from 'rxjs'
|
10
11
|
import type { BasePluginFn } from './types'
|
11
12
|
import type {
|
12
13
|
ComputedDatumGrid,
|
13
14
|
ComputedDataGrid,
|
15
|
+
ComputedLayoutDatumGrid,
|
16
|
+
ComputedLayoutDataGrid,
|
17
|
+
DataFormatterTypeMap,
|
14
18
|
EventGrid,
|
15
19
|
ChartParams,
|
16
|
-
|
20
|
+
GridContainerPosition,
|
17
21
|
Layout,
|
18
22
|
TransformData } from '@orbcharts/core'
|
19
23
|
import { getD3TransitionEase } from '../utils/d3Utils'
|
@@ -30,8 +34,11 @@ export interface BaseBarsTriangleParams {
|
|
30
34
|
interface BaseBarsContext {
|
31
35
|
selection: d3.Selection<any, unknown, any, unknown>
|
32
36
|
computedData$: Observable<ComputedDataGrid>
|
37
|
+
computedLayoutData$: Observable<ComputedLayoutDataGrid>
|
33
38
|
visibleComputedData$: Observable<ComputedDatumGrid[][]>
|
34
|
-
|
39
|
+
visibleComputedLayoutData$: Observable<ComputedLayoutDataGrid>
|
40
|
+
fullDataFormatter$: Observable<DataFormatterTypeMap<'grid'>>
|
41
|
+
seriesLabels$: Observable<string[]>
|
35
42
|
SeriesDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
|
36
43
|
GroupDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
|
37
44
|
fullParams$: Observable<BaseBarsTriangleParams>
|
@@ -43,8 +50,8 @@ interface BaseBarsContext {
|
|
43
50
|
height: number;
|
44
51
|
}>
|
45
52
|
gridHighlight$: Observable<ComputedDatumGrid[]>
|
46
|
-
|
47
|
-
|
53
|
+
gridContainerPosition$: Observable<GridContainerPosition[]>
|
54
|
+
isSeriesSeprate$: Observable<boolean>
|
48
55
|
event$: Subject<EventGrid>
|
49
56
|
}
|
50
57
|
|
@@ -53,7 +60,7 @@ interface RenderBarParams {
|
|
53
60
|
graphicGSelection: d3.Selection<SVGGElement, unknown, any, any>
|
54
61
|
pathGClassName: string
|
55
62
|
pathClassName: string
|
56
|
-
|
63
|
+
visibleComputedLayoutData: ComputedLayoutDataGrid
|
57
64
|
linearGradientIds: string[]
|
58
65
|
zeroYArr: number[]
|
59
66
|
groupLabels: string[]
|
@@ -63,7 +70,7 @@ interface RenderBarParams {
|
|
63
70
|
barWidth: number
|
64
71
|
delayGroup: number
|
65
72
|
transitionItem: number
|
66
|
-
|
73
|
+
isSeriesSeprate: boolean
|
67
74
|
}
|
68
75
|
|
69
76
|
// interface BarDatumGrid extends ComputedDatumGrid {
|
@@ -120,7 +127,7 @@ function calctransitionItem (barGroupAmount: number, totalDuration: number) {
|
|
120
127
|
return totalDuration * (1 - groupDelayProportionOfDuration) // delay後剩餘的時間
|
121
128
|
}
|
122
129
|
|
123
|
-
function renderTriangleBars ({ graphicGSelection, pathGClassName, pathClassName,
|
130
|
+
function renderTriangleBars ({ graphicGSelection, pathGClassName, pathClassName, visibleComputedLayoutData, linearGradientIds, zeroYArr, groupLabels, barScale, params, chartParams, barWidth, delayGroup, transitionItem, isSeriesSeprate }: RenderBarParams) {
|
124
131
|
|
125
132
|
const barHalfWidth = barWidth! / 2
|
126
133
|
|
@@ -129,7 +136,7 @@ function renderTriangleBars ({ graphicGSelection, pathGClassName, pathClassName,
|
|
129
136
|
// g
|
130
137
|
const gSelection = d3.select(g[seriesIndex])
|
131
138
|
.selectAll<SVGGElement, ComputedDatumGrid>(`g.${pathGClassName}`)
|
132
|
-
.data(
|
139
|
+
.data(visibleComputedLayoutData[seriesIndex] ?? [])
|
133
140
|
.join(
|
134
141
|
enter => {
|
135
142
|
const enterSelection = enter
|
@@ -151,13 +158,13 @@ function renderTriangleBars ({ graphicGSelection, pathGClassName, pathClassName,
|
|
151
158
|
update => update,
|
152
159
|
exit => exit.remove()
|
153
160
|
)
|
154
|
-
.attr('transform', d => `translate(${
|
161
|
+
.attr('transform', d => `translate(${isSeriesSeprate ? 0 : barScale(d.seriesLabel)!}, 0)`)
|
155
162
|
|
156
163
|
// path
|
157
164
|
gSelection.select(`path.${pathClassName}`)
|
158
165
|
.attr('height', d => Math.abs(d.axisYFromZero))
|
159
166
|
.attr('y', d => d.axisY < zeroYArr[seriesIndex] ? d.axisY : zeroYArr[seriesIndex])
|
160
|
-
.attr('x', d =>
|
167
|
+
.attr('x', d => isSeriesSeprate ? 0 : barScale(d.seriesLabel)!)
|
161
168
|
// .style('fill', d => `url(#${d.linearGradientId})`)
|
162
169
|
.style('fill', d => `url(#${linearGradientIds[d.seriesIndex]})`)
|
163
170
|
.attr('stroke', d => d.color)
|
@@ -288,8 +295,11 @@ function highlight ({ selection, ids, fullChartParams }: {
|
|
288
295
|
export const createBaseBarsTriangle: BasePluginFn<BaseBarsContext> = (pluginName: string, {
|
289
296
|
selection,
|
290
297
|
computedData$,
|
298
|
+
computedLayoutData$,
|
291
299
|
visibleComputedData$,
|
292
|
-
|
300
|
+
visibleComputedLayoutData$,
|
301
|
+
fullDataFormatter$,
|
302
|
+
seriesLabels$,
|
293
303
|
SeriesDataMap$,
|
294
304
|
GroupDataMap$,
|
295
305
|
fullParams$,
|
@@ -298,8 +308,8 @@ export const createBaseBarsTriangle: BasePluginFn<BaseBarsContext> = (pluginName
|
|
298
308
|
gridGraphicTransform$,
|
299
309
|
gridAxesSize$,
|
300
310
|
gridHighlight$,
|
301
|
-
|
302
|
-
|
311
|
+
gridContainerPosition$,
|
312
|
+
isSeriesSeprate$,
|
303
313
|
event$
|
304
314
|
}) => {
|
305
315
|
const destroy$ = new Subject()
|
@@ -317,8 +327,8 @@ export const createBaseBarsTriangle: BasePluginFn<BaseBarsContext> = (pluginName
|
|
317
327
|
selection,
|
318
328
|
pluginName,
|
319
329
|
clipPathID,
|
320
|
-
|
321
|
-
|
330
|
+
seriesLabels$,
|
331
|
+
gridContainerPosition$,
|
322
332
|
gridAxesTransform$,
|
323
333
|
gridGraphicTransform$
|
324
334
|
})
|
@@ -332,7 +342,7 @@ export const createBaseBarsTriangle: BasePluginFn<BaseBarsContext> = (pluginName
|
|
332
342
|
})
|
333
343
|
)
|
334
344
|
|
335
|
-
const zeroYArr$ =
|
345
|
+
const zeroYArr$ = visibleComputedLayoutData$.pipe(
|
336
346
|
// map(d => d[0] && d[0][0]
|
337
347
|
// ? d[0][0].axisY - d[0][0].axisYFromZero
|
338
348
|
// : 0),
|
@@ -349,14 +359,14 @@ export const createBaseBarsTriangle: BasePluginFn<BaseBarsContext> = (pluginName
|
|
349
359
|
visibleComputedData: visibleComputedData$,
|
350
360
|
params: fullParams$,
|
351
361
|
gridAxesSize: gridAxesSize$,
|
352
|
-
|
362
|
+
isSeriesSeprate: isSeriesSeprate$
|
353
363
|
}).pipe(
|
354
364
|
takeUntil(destroy$),
|
355
365
|
switchMap(async d => d),
|
356
366
|
map(data => {
|
357
367
|
if (data.params.barWidth) {
|
358
368
|
return data.params.barWidth
|
359
|
-
} else if (data.
|
369
|
+
} else if (data.isSeriesSeprate) {
|
360
370
|
return calcBarWidth({
|
361
371
|
axisWidth: data.gridAxesSize.width,
|
362
372
|
groupAmount: data.computedData[0] ? data.computedData[0].length : 0,
|
@@ -376,18 +386,18 @@ export const createBaseBarsTriangle: BasePluginFn<BaseBarsContext> = (pluginName
|
|
376
386
|
})
|
377
387
|
)
|
378
388
|
|
379
|
-
const seriesLabels$ = visibleComputedData$.pipe(
|
380
|
-
|
381
|
-
|
382
|
-
|
383
|
-
|
384
|
-
|
385
|
-
|
386
|
-
|
387
|
-
|
388
|
-
|
389
|
-
|
390
|
-
)
|
389
|
+
// const seriesLabels$ = visibleComputedData$.pipe(
|
390
|
+
// takeUntil(destroy$),
|
391
|
+
// map(data => {
|
392
|
+
// const SeriesLabelSet: Set<string> = new Set()
|
393
|
+
// data.forEach(d => {
|
394
|
+
// d.forEach(_d => {
|
395
|
+
// SeriesLabelSet.add(_d.seriesLabel)
|
396
|
+
// })
|
397
|
+
// })
|
398
|
+
// return Array.from(SeriesLabelSet)
|
399
|
+
// })
|
400
|
+
// )
|
391
401
|
|
392
402
|
const groupLabels$ = visibleComputedData$.pipe(
|
393
403
|
takeUntil(destroy$),
|
@@ -479,8 +489,6 @@ export const createBaseBarsTriangle: BasePluginFn<BaseBarsContext> = (pluginName
|
|
479
489
|
distinctUntilChanged()
|
480
490
|
)
|
481
491
|
|
482
|
-
const barSelection$ = new Subject<d3.Selection<SVGPathElement, ComputedDatumGrid, SVGGElement, unknown>>()
|
483
|
-
|
484
492
|
const linearGradientIds$ = seriesLabels$.pipe(
|
485
493
|
takeUntil(destroy$),
|
486
494
|
map(d => d.map((d, i) => {
|
@@ -506,52 +514,60 @@ export const createBaseBarsTriangle: BasePluginFn<BaseBarsContext> = (pluginName
|
|
506
514
|
// })
|
507
515
|
// )
|
508
516
|
|
509
|
-
combineLatest({
|
517
|
+
const barSelection$ = combineLatest({
|
510
518
|
graphicGSelection: graphicGSelection$,
|
511
519
|
defsSelection: defsSelection$,
|
512
520
|
computedData: computedData$,
|
521
|
+
visibleComputedLayoutData: visibleComputedLayoutData$,
|
513
522
|
linearGradientIds: linearGradientIds$,
|
514
523
|
zeroYArr: zeroYArr$,
|
515
524
|
groupLabels: groupLabels$,
|
516
525
|
barScale: barScale$,
|
517
526
|
params: fullParams$,
|
518
527
|
chartParams: fullChartParams$,
|
519
|
-
highlightTarget: highlightTarget$,
|
520
528
|
barWidth: barWidth$,
|
521
529
|
delayGroup: delayGroup$,
|
522
530
|
transitionItem: transitionItem$,
|
523
|
-
|
524
|
-
GroupDataMap: GroupDataMap$,
|
525
|
-
isSeriesPositionSeprate: isSeriesPositionSeprate$
|
531
|
+
isSeriesSeprate: isSeriesSeprate$
|
526
532
|
}).pipe(
|
527
533
|
takeUntil(destroy$),
|
528
534
|
switchMap(async (d) => d),
|
529
|
-
|
535
|
+
map(data => {
|
536
|
+
renderLinearGradient({
|
537
|
+
defsSelection: data.defsSelection,
|
538
|
+
computedData: data.computedData,
|
539
|
+
linearGradientIds: data.linearGradientIds,
|
540
|
+
params: data.params
|
541
|
+
})
|
530
542
|
|
531
|
-
|
532
|
-
|
533
|
-
|
534
|
-
|
535
|
-
|
536
|
-
|
537
|
-
|
538
|
-
|
539
|
-
|
540
|
-
|
541
|
-
|
542
|
-
|
543
|
-
|
544
|
-
|
545
|
-
|
546
|
-
|
547
|
-
renderLinearGradient({
|
548
|
-
defsSelection: data.defsSelection,
|
549
|
-
computedData: data.computedData,
|
550
|
-
linearGradientIds: data.linearGradientIds,
|
551
|
-
params: data.params
|
543
|
+
return renderTriangleBars({
|
544
|
+
graphicGSelection: data.graphicGSelection,
|
545
|
+
pathGClassName,
|
546
|
+
pathClassName,
|
547
|
+
visibleComputedLayoutData: data.visibleComputedLayoutData,
|
548
|
+
linearGradientIds: data.linearGradientIds,
|
549
|
+
zeroYArr: data.zeroYArr,
|
550
|
+
groupLabels: data.groupLabels,
|
551
|
+
barScale: data.barScale,
|
552
|
+
params: data.params,
|
553
|
+
chartParams: data.chartParams,
|
554
|
+
barWidth: data.barWidth,
|
555
|
+
delayGroup: data.delayGroup,
|
556
|
+
transitionItem: data.transitionItem,
|
557
|
+
isSeriesSeprate: data.isSeriesSeprate
|
558
|
+
})
|
552
559
|
})
|
560
|
+
)
|
553
561
|
|
554
|
-
|
562
|
+
combineLatest({
|
563
|
+
barSelection: barSelection$,
|
564
|
+
computedData: computedData$,
|
565
|
+
highlightTarget: highlightTarget$,
|
566
|
+
SeriesDataMap: SeriesDataMap$,
|
567
|
+
GroupDataMap: GroupDataMap$,
|
568
|
+
}).subscribe(data => {
|
569
|
+
|
570
|
+
data.barSelection!
|
555
571
|
.on('mouseover', (event, datum) => {
|
556
572
|
event.stopPropagation()
|
557
573
|
|
@@ -632,11 +648,8 @@ export const createBaseBarsTriangle: BasePluginFn<BaseBarsContext> = (pluginName
|
|
632
648
|
data: data.computedData
|
633
649
|
})
|
634
650
|
})
|
635
|
-
|
636
|
-
barSelection$.next(barSelection!)
|
637
651
|
})
|
638
652
|
|
639
|
-
|
640
653
|
combineLatest({
|
641
654
|
barSelection: barSelection$,
|
642
655
|
highlight: gridHighlight$.pipe(
|