@orbcharts/plugins-basic 3.0.0-alpha.41 → 3.0.0-alpha.43
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 +5477 -5426
- package/dist/orbcharts-plugins-basic.umd.js +8 -8
- package/dist/src/base/BaseBarStack.d.ts +1 -1
- package/dist/src/base/BaseBars.d.ts +1 -1
- package/dist/src/base/BaseBarsTriangle.d.ts +1 -1
- package/dist/src/base/BaseDots.d.ts +1 -1
- package/dist/src/base/BaseLineAreas.d.ts +1 -1
- package/dist/src/base/BaseLines.d.ts +1 -1
- package/dist/src/multiGrid/defaults.d.ts +2 -1
- package/dist/src/multiGrid/index.d.ts +1 -0
- package/dist/src/multiGrid/plugins/MultiLineAreas.d.ts +1 -0
- package/dist/src/multiGrid/types.d.ts +4 -4
- package/package.json +42 -42
- package/src/base/BaseBarStack.ts +881 -879
- package/src/base/BaseBars.ts +750 -748
- package/src/base/BaseBarsTriangle.ts +659 -657
- package/src/base/BaseDots.ts +639 -637
- package/src/base/BaseGroupAxis.ts +496 -496
- package/src/base/BaseLegend.ts +636 -636
- package/src/base/BaseLineAreas.ts +621 -624
- package/src/base/BaseLines.ts +692 -695
- package/src/base/BaseValueAxis.ts +479 -479
- package/src/base/types.ts +2 -2
- package/src/grid/defaults.ts +121 -121
- package/src/grid/gridObservables.ts +263 -263
- package/src/grid/index.ts +15 -15
- package/src/grid/plugins/BarStack.ts +37 -37
- package/src/grid/plugins/Bars.ts +37 -37
- package/src/grid/plugins/BarsDiverging.ts +39 -39
- package/src/grid/plugins/BarsTriangle.ts +34 -34
- package/src/grid/plugins/Dots.ts +35 -35
- package/src/grid/plugins/GridLegend.ts +58 -58
- package/src/grid/plugins/GroupAux.ts +643 -643
- package/src/grid/plugins/GroupAxis.ts +30 -30
- package/src/grid/plugins/LineAreas.ts +36 -36
- package/src/grid/plugins/Lines.ts +35 -35
- package/src/grid/plugins/ScalingArea.ts +174 -174
- package/src/grid/plugins/ValueAxis.ts +31 -31
- package/src/grid/plugins/ValueStackAxis.ts +70 -70
- package/src/grid/types.ts +120 -120
- package/src/index.ts +9 -9
- package/src/multiGrid/defaults.ts +147 -140
- package/src/multiGrid/index.ts +11 -10
- package/src/multiGrid/multiGridObservables.ts +289 -278
- package/src/multiGrid/plugins/MultiBarStack.ts +60 -60
- package/src/multiGrid/plugins/MultiBars.ts +59 -59
- package/src/multiGrid/plugins/MultiBarsTriangle.ts +58 -58
- package/src/multiGrid/plugins/MultiDots.ts +58 -58
- package/src/multiGrid/plugins/MultiGridLegend.ts +88 -88
- package/src/multiGrid/plugins/MultiGroupAxis.ts +53 -53
- package/src/multiGrid/plugins/MultiLineAreas.ts +59 -0
- package/src/multiGrid/plugins/MultiLines.ts +58 -58
- package/src/multiGrid/plugins/MultiValueAxis.ts +53 -53
- package/src/multiGrid/plugins/OverlappingValueAxes.ts +164 -165
- package/src/multiGrid/types.ts +67 -67
- package/src/noneData/defaults.ts +61 -61
- package/src/noneData/index.ts +3 -3
- package/src/noneData/plugins/Container.ts +10 -10
- package/src/noneData/plugins/Tooltip.ts +304 -304
- package/src/noneData/types.ts +26 -26
- package/src/series/defaults.ts +99 -99
- package/src/series/index.ts +6 -6
- package/src/series/plugins/Bubbles.ts +551 -549
- package/src/series/plugins/Pie.ts +600 -598
- package/src/series/plugins/PieEventTexts.ts +194 -194
- package/src/series/plugins/PieLabels.ts +288 -285
- package/src/series/plugins/SeriesLegend.ts +58 -58
- package/src/series/seriesUtils.ts +50 -50
- package/src/series/types.ts +67 -67
- package/src/tree/defaults.ts +22 -22
- package/src/tree/index.ts +3 -3
- package/src/tree/plugins/TreeLegend.ts +58 -58
- package/src/tree/plugins/TreeMap.ts +302 -300
- 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
@@ -1,71 +1,71 @@
|
|
1
|
-
import {
|
2
|
-
takeUntil,
|
3
|
-
map,
|
4
|
-
switchMap,
|
5
|
-
iif,
|
6
|
-
Subject } from 'rxjs'
|
7
|
-
import {
|
8
|
-
defineGridPlugin } from '@orbcharts/core'
|
9
|
-
import { DEFAULT_VALUE_STACK_AXIS_PARAMS } from '../defaults'
|
10
|
-
|
11
|
-
import { createBaseValueAxis } from '../../base/BaseValueAxis'
|
12
|
-
|
13
|
-
const pluginName = 'ValueStackAxis'
|
14
|
-
|
15
|
-
export const ValueStackAxis = defineGridPlugin(pluginName, DEFAULT_VALUE_STACK_AXIS_PARAMS)(({ selection, name, observer, subject }) => {
|
16
|
-
|
17
|
-
const destroy$ = new Subject()
|
18
|
-
|
19
|
-
// 將原本的value全部替換成加總後的value
|
20
|
-
const stackedData$ = observer.computedData$.pipe(
|
21
|
-
takeUntil(destroy$),
|
22
|
-
map(data => {
|
23
|
-
// 將同一group的value加總起來
|
24
|
-
const stackedValue = new Array(data[0] ? data[0].length : 0)
|
25
|
-
.fill(null)
|
26
|
-
.map((_, i) => {
|
27
|
-
return data.reduce((prev, current) => {
|
28
|
-
if (current && current[i]) {
|
29
|
-
const currentValue = current[i].value == null || current[i].visible == false
|
30
|
-
? 0
|
31
|
-
: current[i].value!
|
32
|
-
return prev + currentValue
|
33
|
-
}
|
34
|
-
return prev
|
35
|
-
}, 0)
|
36
|
-
})
|
37
|
-
// 將原本的value全部替換成加總後的value
|
38
|
-
const computedData = data.map((series, seriesIndex) => {
|
39
|
-
return series.map((d, i) => {
|
40
|
-
return {
|
41
|
-
...d,
|
42
|
-
value: stackedValue[i],
|
43
|
-
}
|
44
|
-
})
|
45
|
-
})
|
46
|
-
return computedData
|
47
|
-
}),
|
48
|
-
)
|
49
|
-
|
50
|
-
const unsubscribeBaseValueAxis = createBaseValueAxis(pluginName, {
|
51
|
-
selection,
|
52
|
-
computedData$: observer.isSeriesPositionSeprate$.pipe(
|
53
|
-
switchMap(isSeriesPositionSeprate => {
|
54
|
-
return iif(() => isSeriesPositionSeprate, observer.computedData$, stackedData$)
|
55
|
-
})
|
56
|
-
),
|
57
|
-
fullParams$: observer.fullParams$,
|
58
|
-
fullDataFormatter$: observer.fullDataFormatter$,
|
59
|
-
fullChartParams$: observer.fullChartParams$,
|
60
|
-
gridAxesTransform$: observer.gridAxesTransform$,
|
61
|
-
gridAxesReverseTransform$: observer.gridAxesReverseTransform$,
|
62
|
-
gridAxesSize$: observer.gridAxesSize$,
|
63
|
-
gridContainer$: observer.gridContainer$,
|
64
|
-
isSeriesPositionSeprate$: observer.isSeriesPositionSeprate$,
|
65
|
-
})
|
66
|
-
|
67
|
-
return () => {
|
68
|
-
destroy$.next(undefined)
|
69
|
-
unsubscribeBaseValueAxis()
|
70
|
-
}
|
1
|
+
import {
|
2
|
+
takeUntil,
|
3
|
+
map,
|
4
|
+
switchMap,
|
5
|
+
iif,
|
6
|
+
Subject } from 'rxjs'
|
7
|
+
import {
|
8
|
+
defineGridPlugin } from '@orbcharts/core'
|
9
|
+
import { DEFAULT_VALUE_STACK_AXIS_PARAMS } from '../defaults'
|
10
|
+
|
11
|
+
import { createBaseValueAxis } from '../../base/BaseValueAxis'
|
12
|
+
|
13
|
+
const pluginName = 'ValueStackAxis'
|
14
|
+
|
15
|
+
export const ValueStackAxis = defineGridPlugin(pluginName, DEFAULT_VALUE_STACK_AXIS_PARAMS)(({ selection, name, observer, subject }) => {
|
16
|
+
|
17
|
+
const destroy$ = new Subject()
|
18
|
+
|
19
|
+
// 將原本的value全部替換成加總後的value
|
20
|
+
const stackedData$ = observer.computedData$.pipe(
|
21
|
+
takeUntil(destroy$),
|
22
|
+
map(data => {
|
23
|
+
// 將同一group的value加總起來
|
24
|
+
const stackedValue = new Array(data[0] ? data[0].length : 0)
|
25
|
+
.fill(null)
|
26
|
+
.map((_, i) => {
|
27
|
+
return data.reduce((prev, current) => {
|
28
|
+
if (current && current[i]) {
|
29
|
+
const currentValue = current[i].value == null || current[i].visible == false
|
30
|
+
? 0
|
31
|
+
: current[i].value!
|
32
|
+
return prev + currentValue
|
33
|
+
}
|
34
|
+
return prev
|
35
|
+
}, 0)
|
36
|
+
})
|
37
|
+
// 將原本的value全部替換成加總後的value
|
38
|
+
const computedData = data.map((series, seriesIndex) => {
|
39
|
+
return series.map((d, i) => {
|
40
|
+
return {
|
41
|
+
...d,
|
42
|
+
value: stackedValue[i],
|
43
|
+
}
|
44
|
+
})
|
45
|
+
})
|
46
|
+
return computedData
|
47
|
+
}),
|
48
|
+
)
|
49
|
+
|
50
|
+
const unsubscribeBaseValueAxis = createBaseValueAxis(pluginName, {
|
51
|
+
selection,
|
52
|
+
computedData$: observer.isSeriesPositionSeprate$.pipe(
|
53
|
+
switchMap(isSeriesPositionSeprate => {
|
54
|
+
return iif(() => isSeriesPositionSeprate, observer.computedData$, stackedData$)
|
55
|
+
})
|
56
|
+
),
|
57
|
+
fullParams$: observer.fullParams$,
|
58
|
+
fullDataFormatter$: observer.fullDataFormatter$,
|
59
|
+
fullChartParams$: observer.fullChartParams$,
|
60
|
+
gridAxesTransform$: observer.gridAxesTransform$,
|
61
|
+
gridAxesReverseTransform$: observer.gridAxesReverseTransform$,
|
62
|
+
gridAxesSize$: observer.gridAxesSize$,
|
63
|
+
gridContainer$: observer.gridContainer$,
|
64
|
+
isSeriesPositionSeprate$: observer.isSeriesPositionSeprate$,
|
65
|
+
})
|
66
|
+
|
67
|
+
return () => {
|
68
|
+
destroy$.next(undefined)
|
69
|
+
unsubscribeBaseValueAxis()
|
70
|
+
}
|
71
71
|
})
|
package/src/grid/types.ts
CHANGED
@@ -1,121 +1,121 @@
|
|
1
|
-
import type { ColorType } from '@orbcharts/core'
|
2
|
-
// import type { BaseLegendParams } from '../base/BaseLegend'
|
3
|
-
|
4
|
-
// export type LineType = 'line' | 'area' | 'gradientArea'
|
5
|
-
// export type BarType = 'rect' | 'triangle'
|
6
|
-
|
7
|
-
export interface LinesParams {
|
8
|
-
lineCurve: string
|
9
|
-
lineWidth: number
|
10
|
-
// labelFn: (d: ComputedDatumSeries) => string
|
11
|
-
// labelPositionFn: (d: ComputedDatumSeries) => 'top' | 'bottom' | 'left' | 'right' | 'center'
|
12
|
-
// labelStyleFn: (d: ComputedDatumSeries) => string
|
13
|
-
// labelFontSizeFn: (d: ComputedDatumSeries) => number
|
14
|
-
// labelColorFn: (d: ComputedDatumSeries) => string
|
15
|
-
// labelPadding: number
|
16
|
-
}
|
17
|
-
|
18
|
-
export interface LineAreasParams {
|
19
|
-
lineCurve: string
|
20
|
-
linearGradientOpacity: [number, number]
|
21
|
-
}
|
22
|
-
|
23
|
-
export interface DotsParams {
|
24
|
-
radius: number
|
25
|
-
fillColorType: ColorType
|
26
|
-
strokeColorType: ColorType
|
27
|
-
strokeWidth: number
|
28
|
-
onlyShowHighlighted: boolean
|
29
|
-
}
|
30
|
-
|
31
|
-
export interface GroupAuxParams {
|
32
|
-
showLine: boolean
|
33
|
-
showLabel: boolean
|
34
|
-
lineDashArray: string
|
35
|
-
lineColorType: ColorType
|
36
|
-
labelColorType: ColorType
|
37
|
-
labelTextColorType: ColorType
|
38
|
-
labelTextFormat: string | ((text: any) => string)
|
39
|
-
labelPadding: number
|
40
|
-
}
|
41
|
-
|
42
|
-
export interface BarsParams {
|
43
|
-
// barType: BarType
|
44
|
-
barWidth: number
|
45
|
-
barPadding: number
|
46
|
-
barGroupPadding: number // 群組和群組間的間隔
|
47
|
-
barRadius: number | boolean
|
48
|
-
}
|
49
|
-
|
50
|
-
export interface BarsDivergingParams extends BarsParams {}
|
51
|
-
|
52
|
-
export interface BarStackParams {
|
53
|
-
barWidth: number
|
54
|
-
barGroupPadding: number
|
55
|
-
barRadius: number | boolean
|
56
|
-
}
|
57
|
-
|
58
|
-
export interface BarsTriangleParams {
|
59
|
-
barWidth: number
|
60
|
-
barPadding: number
|
61
|
-
barGroupPadding: number // 群組和群組間的間隔
|
62
|
-
linearGradientOpacity: [number, number]
|
63
|
-
}
|
64
|
-
|
65
|
-
export interface GroupAxisParams {
|
66
|
-
// xLabel: string
|
67
|
-
// labelAnchor: 'start' | 'end'
|
68
|
-
labelOffset: [number, number]
|
69
|
-
labelColorType: ColorType
|
70
|
-
axisLineVisible: boolean
|
71
|
-
axisLineColorType: ColorType
|
72
|
-
tickFormat: string | ((text: any) => string)
|
73
|
-
tickLineVisible: boolean
|
74
|
-
tickPadding: number
|
75
|
-
tickFullLine: boolean
|
76
|
-
tickFullLineDasharray: string
|
77
|
-
tickColorType: ColorType
|
78
|
-
// axisLineColor: string
|
79
|
-
// axisLabelColor: string
|
80
|
-
tickTextRotate: number
|
81
|
-
tickTextColorType: ColorType
|
82
|
-
}
|
83
|
-
|
84
|
-
export interface ValueAxisParams {
|
85
|
-
// xLabel: string
|
86
|
-
// labelAnchor: 'start' | 'end'
|
87
|
-
labelOffset: [number, number]
|
88
|
-
labelColorType: ColorType
|
89
|
-
axisLineVisible: boolean
|
90
|
-
axisLineColorType: ColorType
|
91
|
-
ticks: number
|
92
|
-
tickFormat: string | ((text: d3.NumberValue) => string)
|
93
|
-
tickLineVisible: boolean
|
94
|
-
tickPadding: number
|
95
|
-
tickFullLine: boolean
|
96
|
-
tickFullLineDasharray: string
|
97
|
-
tickColorType: ColorType
|
98
|
-
// axisLineColor: string
|
99
|
-
// axisLabelColor: string
|
100
|
-
tickTextRotate: number
|
101
|
-
tickTextColorType: ColorType
|
102
|
-
}
|
103
|
-
|
104
|
-
export interface ValueStackAxisParams extends ValueAxisParams {}
|
105
|
-
|
106
|
-
export interface ScalingAreaParams {
|
107
|
-
|
108
|
-
}
|
109
|
-
|
110
|
-
export interface GridLegendParams {
|
111
|
-
position: 'top' | 'bottom' | 'left' | 'right'
|
112
|
-
justify: 'start' | 'center' | 'end'
|
113
|
-
padding: number
|
114
|
-
backgroundFill: ColorType
|
115
|
-
backgroundStroke: ColorType
|
116
|
-
gap: number
|
117
|
-
listRectWidth: number
|
118
|
-
listRectHeight: number
|
119
|
-
listRectRadius: number
|
120
|
-
textColorType: ColorType
|
1
|
+
import type { ColorType } from '@orbcharts/core'
|
2
|
+
// import type { BaseLegendParams } from '../base/BaseLegend'
|
3
|
+
|
4
|
+
// export type LineType = 'line' | 'area' | 'gradientArea'
|
5
|
+
// export type BarType = 'rect' | 'triangle'
|
6
|
+
|
7
|
+
export interface LinesParams {
|
8
|
+
lineCurve: string
|
9
|
+
lineWidth: number
|
10
|
+
// labelFn: (d: ComputedDatumSeries) => string
|
11
|
+
// labelPositionFn: (d: ComputedDatumSeries) => 'top' | 'bottom' | 'left' | 'right' | 'center'
|
12
|
+
// labelStyleFn: (d: ComputedDatumSeries) => string
|
13
|
+
// labelFontSizeFn: (d: ComputedDatumSeries) => number
|
14
|
+
// labelColorFn: (d: ComputedDatumSeries) => string
|
15
|
+
// labelPadding: number
|
16
|
+
}
|
17
|
+
|
18
|
+
export interface LineAreasParams {
|
19
|
+
lineCurve: string
|
20
|
+
linearGradientOpacity: [number, number]
|
21
|
+
}
|
22
|
+
|
23
|
+
export interface DotsParams {
|
24
|
+
radius: number
|
25
|
+
fillColorType: ColorType
|
26
|
+
strokeColorType: ColorType
|
27
|
+
strokeWidth: number
|
28
|
+
onlyShowHighlighted: boolean
|
29
|
+
}
|
30
|
+
|
31
|
+
export interface GroupAuxParams {
|
32
|
+
showLine: boolean
|
33
|
+
showLabel: boolean
|
34
|
+
lineDashArray: string
|
35
|
+
lineColorType: ColorType
|
36
|
+
labelColorType: ColorType
|
37
|
+
labelTextColorType: ColorType
|
38
|
+
labelTextFormat: string | ((text: any) => string)
|
39
|
+
labelPadding: number
|
40
|
+
}
|
41
|
+
|
42
|
+
export interface BarsParams {
|
43
|
+
// barType: BarType
|
44
|
+
barWidth: number
|
45
|
+
barPadding: number
|
46
|
+
barGroupPadding: number // 群組和群組間的間隔
|
47
|
+
barRadius: number | boolean
|
48
|
+
}
|
49
|
+
|
50
|
+
export interface BarsDivergingParams extends BarsParams {}
|
51
|
+
|
52
|
+
export interface BarStackParams {
|
53
|
+
barWidth: number
|
54
|
+
barGroupPadding: number
|
55
|
+
barRadius: number | boolean
|
56
|
+
}
|
57
|
+
|
58
|
+
export interface BarsTriangleParams {
|
59
|
+
barWidth: number
|
60
|
+
barPadding: number
|
61
|
+
barGroupPadding: number // 群組和群組間的間隔
|
62
|
+
linearGradientOpacity: [number, number]
|
63
|
+
}
|
64
|
+
|
65
|
+
export interface GroupAxisParams {
|
66
|
+
// xLabel: string
|
67
|
+
// labelAnchor: 'start' | 'end'
|
68
|
+
labelOffset: [number, number]
|
69
|
+
labelColorType: ColorType
|
70
|
+
axisLineVisible: boolean
|
71
|
+
axisLineColorType: ColorType
|
72
|
+
tickFormat: string | ((text: any) => string)
|
73
|
+
tickLineVisible: boolean
|
74
|
+
tickPadding: number
|
75
|
+
tickFullLine: boolean
|
76
|
+
tickFullLineDasharray: string
|
77
|
+
tickColorType: ColorType
|
78
|
+
// axisLineColor: string
|
79
|
+
// axisLabelColor: string
|
80
|
+
tickTextRotate: number
|
81
|
+
tickTextColorType: ColorType
|
82
|
+
}
|
83
|
+
|
84
|
+
export interface ValueAxisParams {
|
85
|
+
// xLabel: string
|
86
|
+
// labelAnchor: 'start' | 'end'
|
87
|
+
labelOffset: [number, number]
|
88
|
+
labelColorType: ColorType
|
89
|
+
axisLineVisible: boolean
|
90
|
+
axisLineColorType: ColorType
|
91
|
+
ticks: number
|
92
|
+
tickFormat: string | ((text: d3.NumberValue) => string)
|
93
|
+
tickLineVisible: boolean
|
94
|
+
tickPadding: number
|
95
|
+
tickFullLine: boolean
|
96
|
+
tickFullLineDasharray: string
|
97
|
+
tickColorType: ColorType
|
98
|
+
// axisLineColor: string
|
99
|
+
// axisLabelColor: string
|
100
|
+
tickTextRotate: number
|
101
|
+
tickTextColorType: ColorType
|
102
|
+
}
|
103
|
+
|
104
|
+
export interface ValueStackAxisParams extends ValueAxisParams {}
|
105
|
+
|
106
|
+
export interface ScalingAreaParams {
|
107
|
+
|
108
|
+
}
|
109
|
+
|
110
|
+
export interface GridLegendParams {
|
111
|
+
position: 'top' | 'bottom' | 'left' | 'right'
|
112
|
+
justify: 'start' | 'center' | 'end'
|
113
|
+
padding: number
|
114
|
+
backgroundFill: ColorType
|
115
|
+
backgroundStroke: ColorType
|
116
|
+
gap: number
|
117
|
+
listRectWidth: number
|
118
|
+
listRectHeight: number
|
119
|
+
listRectRadius: number
|
120
|
+
textColorType: ColorType
|
121
121
|
}
|
package/src/index.ts
CHANGED
@@ -1,10 +1,10 @@
|
|
1
|
-
// export { default as container } from './noneDataPlugins/container'
|
2
|
-
// export { default as pie } from './seriesPlugins/pie'
|
3
|
-
// export { default as pieEventTexts } from './seriesPlugins/pieEventTexts'
|
4
|
-
// export { default as pieLabels } from './seriesPlugins/pieLabels'
|
5
|
-
|
6
|
-
export * from './grid'
|
7
|
-
export * from './multiGrid'
|
8
|
-
export * from './noneData'
|
9
|
-
export * from './series'
|
1
|
+
// export { default as container } from './noneDataPlugins/container'
|
2
|
+
// export { default as pie } from './seriesPlugins/pie'
|
3
|
+
// export { default as pieEventTexts } from './seriesPlugins/pieEventTexts'
|
4
|
+
// export { default as pieLabels } from './seriesPlugins/pieLabels'
|
5
|
+
|
6
|
+
export * from './grid'
|
7
|
+
export * from './multiGrid'
|
8
|
+
export * from './noneData'
|
9
|
+
export * from './series'
|
10
10
|
export * from './tree'
|