@orbcharts/plugins-basic 3.0.0-alpha.41 → 3.0.0-alpha.43
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/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'
|