@orbcharts/plugins-basic 3.0.0-alpha.49 → 3.0.0-alpha.51
Sign up to get free protection for your applications and to get access to all the features.
- package/LICENSE +200 -200
- package/dist/orbcharts-plugins-basic.es.js +6325 -6272
- package/dist/orbcharts-plugins-basic.umd.js +8 -8
- package/dist/src/base/BaseGroupAxis.d.ts +1 -0
- package/dist/src/grid/index.d.ts +1 -1
- package/dist/src/grid/plugins/BarsPN.d.ts +1 -0
- package/dist/src/grid/types.d.ts +3 -2
- package/dist/src/multiGrid/defaults.d.ts +2 -1
- package/dist/src/multiGrid/index.d.ts +2 -0
- package/dist/src/multiGrid/multiGridObservables.d.ts +1 -1
- package/dist/src/multiGrid/plugins/MultiValueStackAxis.d.ts +1 -0
- package/dist/src/multiGrid/plugins/OverlappingValueStackAxes.d.ts +1 -0
- package/dist/src/multiGrid/types.d.ts +3 -0
- package/dist/src/series/types.d.ts +2 -3
- package/package.json +42 -42
- package/src/base/BaseBarStack.ts +778 -778
- package/src/base/BaseBars.ts +764 -764
- package/src/base/BaseBarsTriangle.ts +672 -672
- package/src/base/BaseDots.ts +513 -502
- package/src/base/BaseGroupAxis.ts +562 -496
- package/src/base/BaseLegend.ts +641 -641
- package/src/base/BaseLineAreas.ts +625 -625
- package/src/base/BaseLines.ts +699 -699
- package/src/base/BaseValueAxis.ts +478 -478
- package/src/base/types.ts +2 -2
- package/src/grid/defaults.ts +125 -121
- package/src/grid/gridObservables.ts +248 -247
- package/src/grid/index.ts +15 -15
- package/src/grid/plugins/BarStack.ts +43 -50
- package/src/grid/plugins/Bars.ts +44 -51
- package/src/grid/plugins/{BarsDiverging.ts → BarsPN.ts} +41 -41
- package/src/grid/plugins/BarsTriangle.ts +42 -50
- package/src/grid/plugins/Dots.ts +37 -37
- package/src/grid/plugins/GridLegend.ts +59 -59
- package/src/grid/plugins/GroupAux.ts +645 -645
- package/src/grid/plugins/GroupAxis.ts +35 -42
- package/src/grid/plugins/LineAreas.ts +39 -39
- package/src/grid/plugins/Lines.ts +38 -38
- package/src/grid/plugins/ScalingArea.ts +173 -173
- package/src/grid/plugins/ValueAxis.ts +36 -43
- package/src/grid/plugins/ValueStackAxis.ts +38 -79
- package/src/grid/types.ts +122 -120
- package/src/index.ts +9 -9
- package/src/multiGrid/defaults.ts +152 -147
- package/src/multiGrid/index.ts +14 -12
- package/src/multiGrid/multiGridObservables.ts +44 -43
- package/src/multiGrid/plugins/MultiBarStack.ts +78 -78
- package/src/multiGrid/plugins/MultiBars.ts +77 -77
- package/src/multiGrid/plugins/MultiBarsTriangle.ts +77 -77
- package/src/multiGrid/plugins/MultiDots.ts +65 -65
- package/src/multiGrid/plugins/MultiGridLegend.ts +89 -89
- package/src/multiGrid/plugins/MultiGroupAxis.ts +69 -69
- package/src/multiGrid/plugins/MultiLineAreas.ts +67 -67
- package/src/multiGrid/plugins/MultiLines.ts +66 -66
- package/src/multiGrid/plugins/MultiValueAxis.ts +69 -69
- package/src/multiGrid/plugins/MultiValueStackAxis.ts +69 -0
- package/src/multiGrid/plugins/OverlappingValueAxes.ts +166 -173
- package/src/multiGrid/plugins/OverlappingValueStackAxes.ts +167 -0
- package/src/multiGrid/types.ts +71 -67
- package/src/noneData/defaults.ts +64 -64
- package/src/noneData/index.ts +3 -3
- package/src/noneData/plugins/Container.ts +10 -10
- package/src/noneData/plugins/Tooltip.ts +310 -310
- package/src/noneData/types.ts +26 -26
- package/src/series/defaults.ts +126 -126
- package/src/series/index.ts +9 -9
- package/src/series/plugins/Bubbles.ts +545 -602
- package/src/series/plugins/Pie.ts +576 -576
- package/src/series/plugins/PieEventTexts.ts +262 -262
- package/src/series/plugins/PieLabels.ts +304 -304
- package/src/series/plugins/Rose.ts +472 -472
- package/src/series/plugins/RoseLabels.ts +362 -362
- package/src/series/plugins/SeriesLegend.ts +59 -59
- package/src/series/seriesObservables.ts +145 -145
- package/src/series/seriesUtils.ts +51 -51
- package/src/series/types.ts +83 -83
- package/src/tree/defaults.ts +22 -22
- package/src/tree/index.ts +3 -3
- package/src/tree/plugins/TreeLegend.ts +59 -59
- package/src/tree/plugins/TreeMap.ts +305 -305
- package/src/tree/types.ts +23 -23
- package/src/utils/commonUtils.ts +21 -21
- package/src/utils/d3Graphics.ts +124 -124
- package/src/utils/d3Utils.ts +73 -73
- package/src/utils/observables.ts +14 -14
- package/src/utils/orbchartsUtils.ts +100 -100
- package/tsconfig.dev.json +16 -16
- package/tsconfig.json +13 -13
- package/tsconfig.prod.json +13 -13
- package/vite.config.js +49 -49
- package/dist/src/grid/plugins/BarsDiverging.d.ts +0 -1
@@ -1,147 +1,152 @@
|
|
1
|
-
import type {
|
2
|
-
MultiGridLegendParams,
|
3
|
-
MultiBarsParams,
|
4
|
-
MultiBarStackParams,
|
5
|
-
MultiBarsTriangleParams,
|
6
|
-
MultiLinesParams,
|
7
|
-
MultiLineAreasParams,
|
8
|
-
MultiDotsParams,
|
9
|
-
MultiGroupAxisParams,
|
10
|
-
MultiValueAxisParams,
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
|
113
|
-
|
114
|
-
|
115
|
-
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
|
126
|
-
|
127
|
-
|
128
|
-
|
129
|
-
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
|
147
|
-
|
1
|
+
import type {
|
2
|
+
MultiGridLegendParams,
|
3
|
+
MultiBarsParams,
|
4
|
+
MultiBarStackParams,
|
5
|
+
MultiBarsTriangleParams,
|
6
|
+
MultiLinesParams,
|
7
|
+
MultiLineAreasParams,
|
8
|
+
MultiDotsParams,
|
9
|
+
MultiGroupAxisParams,
|
10
|
+
MultiValueAxisParams,
|
11
|
+
MultiValueStackAxisParams,
|
12
|
+
OverlappingValueAxesParams
|
13
|
+
} from './types'
|
14
|
+
|
15
|
+
export const DEFAULT_MULTI_GRID_LEGEND_PARAMS: MultiGridLegendParams = {
|
16
|
+
position: 'right',
|
17
|
+
justify: 'end',
|
18
|
+
padding: 28,
|
19
|
+
backgroundFill: 'none',
|
20
|
+
backgroundStroke: 'none',
|
21
|
+
gap: 10,
|
22
|
+
listRectWidth: 14,
|
23
|
+
listRectHeight: 14,
|
24
|
+
listRectRadius: 0,
|
25
|
+
gridList: [
|
26
|
+
{
|
27
|
+
listRectWidth: 14,
|
28
|
+
listRectHeight: 14,
|
29
|
+
listRectRadius: 0,
|
30
|
+
}
|
31
|
+
],
|
32
|
+
textColorType: 'primary'
|
33
|
+
}
|
34
|
+
|
35
|
+
export const DEFAULT_MULTI_GROUP_AXIS_PARAMS: MultiGroupAxisParams = {
|
36
|
+
// labelAnchor: 'start',
|
37
|
+
labelOffset: [0, 0],
|
38
|
+
labelColorType: 'primary',
|
39
|
+
axisLineVisible: true,
|
40
|
+
axisLineColorType: 'primary',
|
41
|
+
tickFormat: text => text,
|
42
|
+
tickLineVisible: true,
|
43
|
+
tickPadding: 20,
|
44
|
+
tickFullLine: false,
|
45
|
+
tickFullLineDasharray: 'none',
|
46
|
+
tickColorType: 'secondary',
|
47
|
+
tickTextRotate: 0,
|
48
|
+
tickTextColorType: 'primary',
|
49
|
+
gridIndexes: [0]
|
50
|
+
}
|
51
|
+
|
52
|
+
export const DEFAULT_MULTI_VALUE_AXIS_PARAMS: MultiValueAxisParams = {
|
53
|
+
// labelAnchor: 'end',
|
54
|
+
labelOffset: [0, 0],
|
55
|
+
labelColorType: 'primary',
|
56
|
+
axisLineVisible: false,
|
57
|
+
axisLineColorType: 'primary',
|
58
|
+
ticks: 4,
|
59
|
+
tickFormat: ',.0f',
|
60
|
+
tickLineVisible: true,
|
61
|
+
tickPadding: 20,
|
62
|
+
tickFullLine: true,
|
63
|
+
tickFullLineDasharray: 'none',
|
64
|
+
tickColorType: 'secondary',
|
65
|
+
tickTextRotate: 0,
|
66
|
+
tickTextColorType: 'primary',
|
67
|
+
gridIndexes: [0]
|
68
|
+
}
|
69
|
+
|
70
|
+
export const DEFAULT_MULTI_VALUE_STACK_AXIS_PARAMS: MultiValueStackAxisParams = {
|
71
|
+
...DEFAULT_MULTI_VALUE_AXIS_PARAMS
|
72
|
+
}
|
73
|
+
|
74
|
+
export const DEFAULT_MULTI_BARS_PARAMS: MultiBarsParams = {
|
75
|
+
barWidth: 0,
|
76
|
+
barPadding: 1,
|
77
|
+
barGroupPadding: 40,
|
78
|
+
barRadius: false,
|
79
|
+
gridIndexes: [0]
|
80
|
+
}
|
81
|
+
|
82
|
+
export const DEFAULT_MULTI_BAR_STACK_PARAMS: MultiBarStackParams = {
|
83
|
+
barWidth: 0,
|
84
|
+
barGroupPadding: 10,
|
85
|
+
barRadius: false,
|
86
|
+
gridIndexes: [0]
|
87
|
+
}
|
88
|
+
|
89
|
+
export const DEFAULT_MULTI_BARS_TRIANGLE_PARAMS: MultiBarsTriangleParams = {
|
90
|
+
barWidth: 0,
|
91
|
+
barPadding: 1,
|
92
|
+
barGroupPadding: 20,
|
93
|
+
linearGradientOpacity: [1, 0],
|
94
|
+
gridIndexes: [0]
|
95
|
+
}
|
96
|
+
|
97
|
+
export const DEFAULT_MULTI_LINES_PARAMS: MultiLinesParams = {
|
98
|
+
lineCurve: 'curveLinear',
|
99
|
+
lineWidth: 2,
|
100
|
+
gridIndexes: [1]
|
101
|
+
}
|
102
|
+
|
103
|
+
export const DEFAULT_MULTI_LINE_AREAS_PARAMS: MultiLineAreasParams = {
|
104
|
+
lineCurve: 'curveLinear',
|
105
|
+
linearGradientOpacity: [1, 0],
|
106
|
+
gridIndexes: [1]
|
107
|
+
}
|
108
|
+
|
109
|
+
export const DEFAULT_MULTI_DOTS_PARAMS: MultiDotsParams = {
|
110
|
+
radius: 4,
|
111
|
+
fillColorType: 'white',
|
112
|
+
strokeColorType: 'series',
|
113
|
+
strokeWidth: 2,
|
114
|
+
onlyShowHighlighted: false,
|
115
|
+
gridIndexes: [1]
|
116
|
+
}
|
117
|
+
|
118
|
+
export const DEFAULT_OVERLAPPING_VALUE_AXES_PARAMS: OverlappingValueAxesParams = {
|
119
|
+
firstAxis: {
|
120
|
+
// labelAnchor: 'end',
|
121
|
+
labelOffset: [0, 0],
|
122
|
+
labelColorType: 'primary',
|
123
|
+
axisLineVisible: false,
|
124
|
+
axisLineColorType: 'primary',
|
125
|
+
ticks: 4,
|
126
|
+
tickFormat: ',.0f',
|
127
|
+
tickLineVisible: true,
|
128
|
+
tickPadding: 20,
|
129
|
+
tickFullLine: true,
|
130
|
+
tickFullLineDasharray: 'none',
|
131
|
+
tickColorType: 'secondary',
|
132
|
+
tickTextRotate: 0,
|
133
|
+
tickTextColorType: 'primary',
|
134
|
+
},
|
135
|
+
secondAxis: {
|
136
|
+
// labelAnchor: 'end',
|
137
|
+
labelOffset: [0, 0],
|
138
|
+
labelColorType: 'primary',
|
139
|
+
axisLineVisible: false,
|
140
|
+
axisLineColorType: 'primary',
|
141
|
+
ticks: 4,
|
142
|
+
tickFormat: ',.0f',
|
143
|
+
tickLineVisible: true,
|
144
|
+
tickPadding: 20,
|
145
|
+
tickFullLine: true,
|
146
|
+
tickFullLineDasharray: 'none',
|
147
|
+
tickColorType: 'secondary',
|
148
|
+
tickTextRotate: 0,
|
149
|
+
tickTextColorType: 'primary',
|
150
|
+
},
|
151
|
+
gridIndexes: [0, 1]
|
152
|
+
}
|
package/src/multiGrid/index.ts
CHANGED
@@ -1,12 +1,14 @@
|
|
1
|
-
export * from './defaults'
|
2
|
-
export * from './types'
|
3
|
-
export { MultiGridLegend } from './plugins/MultiGridLegend'
|
4
|
-
export { MultiBars } from './plugins/MultiBars'
|
5
|
-
export { MultiBarStack } from './plugins/MultiBarStack'
|
6
|
-
export { MultiBarsTriangle } from './plugins/MultiBarsTriangle'
|
7
|
-
export { MultiLines } from './plugins/MultiLines'
|
8
|
-
export { MultiLineAreas } from './plugins/MultiLineAreas'
|
9
|
-
export { MultiDots } from './plugins/MultiDots'
|
10
|
-
export { MultiGroupAxis } from './plugins/MultiGroupAxis'
|
11
|
-
export { MultiValueAxis } from './plugins/MultiValueAxis'
|
12
|
-
export {
|
1
|
+
export * from './defaults'
|
2
|
+
export * from './types'
|
3
|
+
export { MultiGridLegend } from './plugins/MultiGridLegend'
|
4
|
+
export { MultiBars } from './plugins/MultiBars'
|
5
|
+
export { MultiBarStack } from './plugins/MultiBarStack'
|
6
|
+
export { MultiBarsTriangle } from './plugins/MultiBarsTriangle'
|
7
|
+
export { MultiLines } from './plugins/MultiLines'
|
8
|
+
export { MultiLineAreas } from './plugins/MultiLineAreas'
|
9
|
+
export { MultiDots } from './plugins/MultiDots'
|
10
|
+
export { MultiGroupAxis } from './plugins/MultiGroupAxis'
|
11
|
+
export { MultiValueAxis } from './plugins/MultiValueAxis'
|
12
|
+
export { MultiValueStackAxis } from './plugins/MultiValueStackAxis'
|
13
|
+
export { OverlappingValueAxes } from './plugins/OverlappingValueAxes'
|
14
|
+
export { OverlappingValueStackAxes } from './plugins/OverlappingValueStackAxes'
|
@@ -1,43 +1,44 @@
|
|
1
|
-
import type { Observable } from 'rxjs'
|
2
|
-
import {
|
3
|
-
Subject,
|
4
|
-
takeUntil,
|
5
|
-
of,
|
6
|
-
map,
|
7
|
-
reduce,
|
8
|
-
switchMap,
|
9
|
-
combineLatest,
|
10
|
-
distinctUntilChanged,
|
11
|
-
shareReplay
|
12
|
-
} from 'rxjs'
|
13
|
-
import type {
|
14
|
-
ContextObserverMultiGrid,
|
15
|
-
ComputedDataGrid,
|
16
|
-
DataFormatterGrid,
|
17
|
-
ContextObserverGridDetail,
|
18
|
-
ContextObserverMultiGridDetail } from '@orbcharts/core'
|
19
|
-
|
20
|
-
// 可設定多個gridIndex的params
|
21
|
-
interface MultiGridPluginParams {
|
22
|
-
gridIndexes: number[]
|
23
|
-
}
|
24
|
-
|
25
|
-
// 對應grid資料的plugin所需Observable(必須有gridIndexes)
|
26
|
-
export const
|
27
|
-
const gridIndexes$ = observer.fullParams$.pipe(
|
28
|
-
map(fullParams => fullParams.gridIndexes),
|
29
|
-
distinctUntilChanged(),
|
30
|
-
shareReplay(1)
|
31
|
-
)
|
32
|
-
|
33
|
-
return combineLatest({
|
34
|
-
multiGridEachDetail: observer.multiGridEachDetail$,
|
35
|
-
gridIndexes: gridIndexes$,
|
36
|
-
}).pipe(
|
37
|
-
map(data => {
|
38
|
-
return data.gridIndexes.map(gridIndex => {
|
39
|
-
return data.multiGridEachDetail[gridIndex] ?? data.multiGridEachDetail[0]
|
40
|
-
})
|
41
|
-
})
|
42
|
-
)
|
43
|
-
}
|
1
|
+
import type { Observable } from 'rxjs'
|
2
|
+
import {
|
3
|
+
Subject,
|
4
|
+
takeUntil,
|
5
|
+
of,
|
6
|
+
map,
|
7
|
+
reduce,
|
8
|
+
switchMap,
|
9
|
+
combineLatest,
|
10
|
+
distinctUntilChanged,
|
11
|
+
shareReplay
|
12
|
+
} from 'rxjs'
|
13
|
+
import type {
|
14
|
+
ContextObserverMultiGrid,
|
15
|
+
ComputedDataGrid,
|
16
|
+
DataFormatterGrid,
|
17
|
+
ContextObserverGridDetail,
|
18
|
+
ContextObserverMultiGridDetail } from '@orbcharts/core'
|
19
|
+
|
20
|
+
// 可設定多個gridIndex的params
|
21
|
+
interface MultiGridPluginParams {
|
22
|
+
gridIndexes: number[]
|
23
|
+
}
|
24
|
+
|
25
|
+
// 對應grid資料的plugin所需Observable(必須有gridIndexes)
|
26
|
+
export const multiGridPluginDetailObservables = (observer: ContextObserverMultiGrid<MultiGridPluginParams>): Observable<ContextObserverMultiGridDetail[]> => {
|
27
|
+
const gridIndexes$ = observer.fullParams$.pipe(
|
28
|
+
map(fullParams => fullParams.gridIndexes),
|
29
|
+
distinctUntilChanged(),
|
30
|
+
shareReplay(1)
|
31
|
+
)
|
32
|
+
|
33
|
+
return combineLatest({
|
34
|
+
multiGridEachDetail: observer.multiGridEachDetail$,
|
35
|
+
gridIndexes: gridIndexes$,
|
36
|
+
}).pipe(
|
37
|
+
map(data => {
|
38
|
+
return data.gridIndexes.map(gridIndex => {
|
39
|
+
return data.multiGridEachDetail[gridIndex] ?? data.multiGridEachDetail[0]
|
40
|
+
})
|
41
|
+
})
|
42
|
+
)
|
43
|
+
}
|
44
|
+
|
@@ -1,78 +1,78 @@
|
|
1
|
-
import * as d3 from 'd3'
|
2
|
-
import {
|
3
|
-
Subject,
|
4
|
-
map,
|
5
|
-
distinctUntilChanged,
|
6
|
-
shareReplay,
|
7
|
-
takeUntil
|
8
|
-
} from 'rxjs'
|
9
|
-
import {
|
10
|
-
defineMultiGridPlugin } from '@orbcharts/core'
|
11
|
-
import { DEFAULT_MULTI_BAR_STACK_PARAMS } from '../defaults'
|
12
|
-
import { createBaseBarStack } from '../../base/BaseBarStack'
|
13
|
-
import {
|
14
|
-
import { getClassName, getUniID } from '../../utils/orbchartsUtils'
|
15
|
-
|
16
|
-
const pluginName = 'MultiBarStack'
|
17
|
-
|
18
|
-
const gridClassName = getClassName(pluginName, 'grid')
|
19
|
-
|
20
|
-
export const MultiBarStack = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_BAR_STACK_PARAMS)(({ selection, name, subject, observer }) => {
|
21
|
-
const destroy$ = new Subject()
|
22
|
-
|
23
|
-
const unsubscribeFnArr: (() => void)[] = []
|
24
|
-
|
25
|
-
const
|
26
|
-
|
27
|
-
|
28
|
-
.pipe(
|
29
|
-
takeUntil(destroy$)
|
30
|
-
)
|
31
|
-
.subscribe(data => {
|
32
|
-
// 每次重新計算時,清除之前的訂閱
|
33
|
-
unsubscribeFnArr.forEach(fn => fn())
|
34
|
-
|
35
|
-
selection.selectAll(`g.${gridClassName}`)
|
36
|
-
.data(data)
|
37
|
-
.join('g')
|
38
|
-
.attr('class', gridClassName)
|
39
|
-
.each((d, i, g) => {
|
40
|
-
|
41
|
-
const gridSelection = d3.select(g[i])
|
42
|
-
|
43
|
-
const isSeriesSeprate$ = d.dataFormatter$.pipe(
|
44
|
-
takeUntil(destroy$),
|
45
|
-
map(d => d.grid.separateSeries),
|
46
|
-
distinctUntilChanged(),
|
47
|
-
shareReplay(1)
|
48
|
-
)
|
49
|
-
|
50
|
-
unsubscribeFnArr[i] = createBaseBarStack(pluginName, {
|
51
|
-
selection: gridSelection,
|
52
|
-
computedData$: d.computedData$,
|
53
|
-
visibleComputedData$: d.visibleComputedData$,
|
54
|
-
computedLayoutData$: d.computedLayoutData$,
|
55
|
-
visibleComputedLayoutData$: d.visibleComputedLayoutData$,
|
56
|
-
seriesLabels$: d.seriesLabels$,
|
57
|
-
SeriesDataMap$: d.SeriesDataMap$,
|
58
|
-
GroupDataMap$: d.GroupDataMap$,
|
59
|
-
fullParams$: observer.fullParams$,
|
60
|
-
fullDataFormatter$: d.dataFormatter$,
|
61
|
-
fullChartParams$: observer.fullChartParams$,
|
62
|
-
gridAxesTransform$: d.gridAxesTransform$,
|
63
|
-
gridGraphicTransform$: d.gridGraphicTransform$,
|
64
|
-
gridGraphicReverseScale$: d.gridGraphicReverseScale$,
|
65
|
-
gridAxesSize$: d.gridAxesSize$,
|
66
|
-
gridHighlight$: d.gridHighlight$,
|
67
|
-
gridContainerPosition$: d.gridContainerPosition$,
|
68
|
-
isSeriesSeprate$,
|
69
|
-
event$: subject.event$ as Subject<any>,
|
70
|
-
})
|
71
|
-
})
|
72
|
-
})
|
73
|
-
|
74
|
-
return () => {
|
75
|
-
destroy$.next(undefined)
|
76
|
-
unsubscribeFnArr.forEach(fn => fn())
|
77
|
-
}
|
78
|
-
})
|
1
|
+
import * as d3 from 'd3'
|
2
|
+
import {
|
3
|
+
Subject,
|
4
|
+
map,
|
5
|
+
distinctUntilChanged,
|
6
|
+
shareReplay,
|
7
|
+
takeUntil
|
8
|
+
} from 'rxjs'
|
9
|
+
import {
|
10
|
+
defineMultiGridPlugin } from '@orbcharts/core'
|
11
|
+
import { DEFAULT_MULTI_BAR_STACK_PARAMS } from '../defaults'
|
12
|
+
import { createBaseBarStack } from '../../base/BaseBarStack'
|
13
|
+
import { multiGridPluginDetailObservables } from '../multiGridObservables'
|
14
|
+
import { getClassName, getUniID } from '../../utils/orbchartsUtils'
|
15
|
+
|
16
|
+
const pluginName = 'MultiBarStack'
|
17
|
+
|
18
|
+
const gridClassName = getClassName(pluginName, 'grid')
|
19
|
+
|
20
|
+
export const MultiBarStack = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_BAR_STACK_PARAMS)(({ selection, name, subject, observer }) => {
|
21
|
+
const destroy$ = new Subject()
|
22
|
+
|
23
|
+
const unsubscribeFnArr: (() => void)[] = []
|
24
|
+
|
25
|
+
const multiGridPluginDetail$ = multiGridPluginDetailObservables(observer)
|
26
|
+
|
27
|
+
multiGridPluginDetail$
|
28
|
+
.pipe(
|
29
|
+
takeUntil(destroy$)
|
30
|
+
)
|
31
|
+
.subscribe(data => {
|
32
|
+
// 每次重新計算時,清除之前的訂閱
|
33
|
+
unsubscribeFnArr.forEach(fn => fn())
|
34
|
+
|
35
|
+
selection.selectAll(`g.${gridClassName}`)
|
36
|
+
.data(data)
|
37
|
+
.join('g')
|
38
|
+
.attr('class', gridClassName)
|
39
|
+
.each((d, i, g) => {
|
40
|
+
|
41
|
+
const gridSelection = d3.select(g[i])
|
42
|
+
|
43
|
+
const isSeriesSeprate$ = d.dataFormatter$.pipe(
|
44
|
+
takeUntil(destroy$),
|
45
|
+
map(d => d.grid.separateSeries),
|
46
|
+
distinctUntilChanged(),
|
47
|
+
shareReplay(1)
|
48
|
+
)
|
49
|
+
|
50
|
+
unsubscribeFnArr[i] = createBaseBarStack(pluginName, {
|
51
|
+
selection: gridSelection,
|
52
|
+
computedData$: d.computedData$,
|
53
|
+
visibleComputedData$: d.visibleComputedData$,
|
54
|
+
computedLayoutData$: d.computedLayoutData$,
|
55
|
+
visibleComputedLayoutData$: d.visibleComputedLayoutData$,
|
56
|
+
seriesLabels$: d.seriesLabels$,
|
57
|
+
SeriesDataMap$: d.SeriesDataMap$,
|
58
|
+
GroupDataMap$: d.GroupDataMap$,
|
59
|
+
fullParams$: observer.fullParams$,
|
60
|
+
fullDataFormatter$: d.dataFormatter$,
|
61
|
+
fullChartParams$: observer.fullChartParams$,
|
62
|
+
gridAxesTransform$: d.gridAxesTransform$,
|
63
|
+
gridGraphicTransform$: d.gridGraphicTransform$,
|
64
|
+
gridGraphicReverseScale$: d.gridGraphicReverseScale$,
|
65
|
+
gridAxesSize$: d.gridAxesSize$,
|
66
|
+
gridHighlight$: d.gridHighlight$,
|
67
|
+
gridContainerPosition$: d.gridContainerPosition$,
|
68
|
+
isSeriesSeprate$,
|
69
|
+
event$: subject.event$ as Subject<any>,
|
70
|
+
})
|
71
|
+
})
|
72
|
+
})
|
73
|
+
|
74
|
+
return () => {
|
75
|
+
destroy$.next(undefined)
|
76
|
+
unsubscribeFnArr.forEach(fn => fn())
|
77
|
+
}
|
78
|
+
})
|