@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,165 +1,164 @@
|
|
1
|
-
import * as d3 from 'd3'
|
2
|
-
import {
|
3
|
-
of,
|
4
|
-
map,
|
5
|
-
switchMap,
|
6
|
-
combineLatest,
|
7
|
-
takeUntil,
|
8
|
-
iif,
|
9
|
-
Observable,
|
10
|
-
Subject } from 'rxjs'
|
11
|
-
import type { ContextObserverMultiGrid, DataFormatterGrid } from '@orbcharts/core'
|
12
|
-
import {
|
13
|
-
defineMultiGridPlugin } from '@orbcharts/core'
|
14
|
-
import { DEFAULT_OVERLAPPING_VALUE_AXES_PARAMS } from '../defaults'
|
15
|
-
import { createBaseValueAxis } from '../../base/BaseValueAxis'
|
16
|
-
import { multiGridDetailObservables } from '../multiGridObservables'
|
17
|
-
import { getClassName, getUniID } from '../../utils/orbchartsUtils'
|
18
|
-
// @Q@
|
19
|
-
import { gridAxesTransformObservable, gridAxesReverseTransformObservable, gridContainerObservable } from '@orbcharts/core/src/grid/gridObservables'
|
20
|
-
|
21
|
-
const pluginName = 'OverlappingValueAxes'
|
22
|
-
|
23
|
-
const gridClassName = getClassName(pluginName, 'grid')
|
24
|
-
|
25
|
-
export const OverlappingValueAxes = defineMultiGridPlugin(pluginName, DEFAULT_OVERLAPPING_VALUE_AXES_PARAMS)(({ selection, name, subject, observer }) => {
|
26
|
-
const destroy$ = new Subject()
|
27
|
-
|
28
|
-
const unsubscribeFnArr: (() => void)[] = []
|
29
|
-
|
30
|
-
const firstGridIndex$ = observer.fullParams$.pipe(
|
31
|
-
takeUntil(destroy$),
|
32
|
-
map(fullParams => fullParams.gridIndexes[0])
|
33
|
-
)
|
34
|
-
|
35
|
-
const secondGridIndex$ = observer.fullParams$.pipe(
|
36
|
-
takeUntil(destroy$),
|
37
|
-
map(fullParams => fullParams.gridIndexes[1])
|
38
|
-
)
|
39
|
-
|
40
|
-
// 為了要反轉第二個valueAxis的位置所以要重新計算
|
41
|
-
const secondGridDataFormatter$: Observable<DataFormatterGrid> = combineLatest({
|
42
|
-
firstGridIndex: firstGridIndex$,
|
43
|
-
secondGridIndex: secondGridIndex$
|
44
|
-
}).pipe(
|
45
|
-
takeUntil(destroy$),
|
46
|
-
switchMap(data => {
|
47
|
-
return observer.fullDataFormatter$.pipe(
|
48
|
-
takeUntil(destroy$),
|
49
|
-
map(fullDataFormatter => {
|
50
|
-
if (!fullDataFormatter.gridList[data.secondGridIndex]) {
|
51
|
-
fullDataFormatter.gridList[data.secondGridIndex] = Object.assign({}, fullDataFormatter.gridList[data.firstGridIndex])
|
52
|
-
}
|
53
|
-
// 反轉第二個valueAxis的位置
|
54
|
-
let reversePosition = ''
|
55
|
-
if (fullDataFormatter.gridList[data.firstGridIndex].valueAxis.position === 'left') {
|
56
|
-
reversePosition = 'right'
|
57
|
-
} else if (fullDataFormatter.gridList[data.firstGridIndex].valueAxis.position === 'bottom') {
|
58
|
-
reversePosition = 'top'
|
59
|
-
} else if (fullDataFormatter.gridList[data.firstGridIndex].valueAxis.position === 'top') {
|
60
|
-
reversePosition = 'bottom'
|
61
|
-
} else if (fullDataFormatter.gridList[data.firstGridIndex].valueAxis.position === 'right') {
|
62
|
-
reversePosition = 'left'
|
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
|
-
|
148
|
-
|
149
|
-
|
150
|
-
|
151
|
-
|
152
|
-
|
153
|
-
|
154
|
-
|
155
|
-
|
156
|
-
|
157
|
-
|
158
|
-
|
159
|
-
|
160
|
-
|
161
|
-
|
162
|
-
|
163
|
-
|
164
|
-
|
165
|
-
})
|
1
|
+
import * as d3 from 'd3'
|
2
|
+
import {
|
3
|
+
of,
|
4
|
+
map,
|
5
|
+
switchMap,
|
6
|
+
combineLatest,
|
7
|
+
takeUntil,
|
8
|
+
iif,
|
9
|
+
Observable,
|
10
|
+
Subject } from 'rxjs'
|
11
|
+
import type { ContextObserverMultiGrid, DataFormatterGrid } from '@orbcharts/core'
|
12
|
+
import {
|
13
|
+
defineMultiGridPlugin } from '@orbcharts/core'
|
14
|
+
import { DEFAULT_OVERLAPPING_VALUE_AXES_PARAMS } from '../defaults'
|
15
|
+
import { createBaseValueAxis } from '../../base/BaseValueAxis'
|
16
|
+
import { multiGridDetailObservables } from '../multiGridObservables'
|
17
|
+
import { getClassName, getUniID } from '../../utils/orbchartsUtils'
|
18
|
+
// @Q@
|
19
|
+
import { gridAxesTransformObservable, gridAxesReverseTransformObservable, gridContainerObservable } from '@orbcharts/core/src/grid/gridObservables'
|
20
|
+
|
21
|
+
const pluginName = 'OverlappingValueAxes'
|
22
|
+
|
23
|
+
const gridClassName = getClassName(pluginName, 'grid')
|
24
|
+
|
25
|
+
export const OverlappingValueAxes = defineMultiGridPlugin(pluginName, DEFAULT_OVERLAPPING_VALUE_AXES_PARAMS)(({ selection, name, subject, observer }) => {
|
26
|
+
const destroy$ = new Subject()
|
27
|
+
|
28
|
+
const unsubscribeFnArr: (() => void)[] = []
|
29
|
+
|
30
|
+
const firstGridIndex$ = observer.fullParams$.pipe(
|
31
|
+
takeUntil(destroy$),
|
32
|
+
map(fullParams => fullParams.gridIndexes[0])
|
33
|
+
)
|
34
|
+
|
35
|
+
const secondGridIndex$ = observer.fullParams$.pipe(
|
36
|
+
takeUntil(destroy$),
|
37
|
+
map(fullParams => fullParams.gridIndexes[1])
|
38
|
+
)
|
39
|
+
|
40
|
+
// 為了要反轉第二個valueAxis的位置所以要重新計算
|
41
|
+
const secondGridDataFormatter$: Observable<DataFormatterGrid> = combineLatest({
|
42
|
+
firstGridIndex: firstGridIndex$,
|
43
|
+
secondGridIndex: secondGridIndex$
|
44
|
+
}).pipe(
|
45
|
+
takeUntil(destroy$),
|
46
|
+
switchMap(data => {
|
47
|
+
return observer.fullDataFormatter$.pipe(
|
48
|
+
takeUntil(destroy$),
|
49
|
+
map(fullDataFormatter => {
|
50
|
+
if (!fullDataFormatter.gridList[data.secondGridIndex]) {
|
51
|
+
fullDataFormatter.gridList[data.secondGridIndex] = Object.assign({}, fullDataFormatter.gridList[data.firstGridIndex])
|
52
|
+
}
|
53
|
+
// 反轉第二個valueAxis的位置
|
54
|
+
let reversePosition = ''
|
55
|
+
if (fullDataFormatter.gridList[data.firstGridIndex].valueAxis.position === 'left') {
|
56
|
+
reversePosition = 'right'
|
57
|
+
} else if (fullDataFormatter.gridList[data.firstGridIndex].valueAxis.position === 'bottom') {
|
58
|
+
reversePosition = 'top'
|
59
|
+
} else if (fullDataFormatter.gridList[data.firstGridIndex].valueAxis.position === 'top') {
|
60
|
+
reversePosition = 'bottom'
|
61
|
+
} else if (fullDataFormatter.gridList[data.firstGridIndex].valueAxis.position === 'right') {
|
62
|
+
reversePosition = 'left'
|
63
|
+
}
|
64
|
+
return <DataFormatterGrid>{
|
65
|
+
type: 'grid',
|
66
|
+
grid: {
|
67
|
+
...fullDataFormatter.gridList[data.secondGridIndex],
|
68
|
+
valueAxis: {
|
69
|
+
...fullDataFormatter.gridList[data.secondGridIndex].valueAxis,
|
70
|
+
position: reversePosition
|
71
|
+
}
|
72
|
+
},
|
73
|
+
container: {
|
74
|
+
...fullDataFormatter.container
|
75
|
+
}
|
76
|
+
}
|
77
|
+
})
|
78
|
+
)
|
79
|
+
}),
|
80
|
+
)
|
81
|
+
|
82
|
+
const multiGridPlugin$ = of(observer).pipe(
|
83
|
+
takeUntil(destroy$),
|
84
|
+
map(observer => {
|
85
|
+
// 將observer的gridIndexes限制在2個
|
86
|
+
return {
|
87
|
+
...observer,
|
88
|
+
fullParams$: observer.fullParams$.pipe(
|
89
|
+
map(fullParams => {
|
90
|
+
if (fullParams.gridIndexes.length > 2) {
|
91
|
+
fullParams.gridIndexes.length = 2
|
92
|
+
}
|
93
|
+
return fullParams
|
94
|
+
})
|
95
|
+
)
|
96
|
+
}
|
97
|
+
}),
|
98
|
+
switchMap(observer => multiGridDetailObservables(observer)),
|
99
|
+
map(data => {
|
100
|
+
return data.map((observables, index) => {
|
101
|
+
if (index === 0) {
|
102
|
+
return observables
|
103
|
+
}
|
104
|
+
// index === 1,將跟第二個valueAxis有關的observables全部重新計算
|
105
|
+
const gridAxesTransform$ = gridAxesTransformObservable({
|
106
|
+
fullDataFormatter$: secondGridDataFormatter$,
|
107
|
+
layout$: observer.layout$
|
108
|
+
})
|
109
|
+
const gridAxesReverseTransform$ = gridAxesReverseTransformObservable({
|
110
|
+
gridAxesTransform$
|
111
|
+
})
|
112
|
+
const gridContainer$ = gridContainerObservable({
|
113
|
+
computedData$: observables.gridComputedData$,
|
114
|
+
fullDataFormatter$: secondGridDataFormatter$,
|
115
|
+
fullChartParams$: observer.fullChartParams$,
|
116
|
+
layout$: observer.layout$
|
117
|
+
})
|
118
|
+
return {
|
119
|
+
...observables,
|
120
|
+
gridAxesTransform$,
|
121
|
+
gridAxesReverseTransform$,
|
122
|
+
gridContainer$,
|
123
|
+
}
|
124
|
+
})
|
125
|
+
})
|
126
|
+
)
|
127
|
+
|
128
|
+
multiGridPlugin$.subscribe(data => {
|
129
|
+
// 每次重新計算時,清除之前的訂閱
|
130
|
+
unsubscribeFnArr.forEach(fn => fn())
|
131
|
+
|
132
|
+
selection.selectAll(`g.${gridClassName}`)
|
133
|
+
.data(data)
|
134
|
+
.join('g')
|
135
|
+
.attr('class', gridClassName)
|
136
|
+
.each((d, i, g) => {
|
137
|
+
if (i > 1) {
|
138
|
+
return
|
139
|
+
}
|
140
|
+
|
141
|
+
const gridSelection = d3.select(g[i])
|
142
|
+
|
143
|
+
unsubscribeFnArr[i] = createBaseValueAxis(pluginName, {
|
144
|
+
selection: gridSelection,
|
145
|
+
computedData$: d.gridComputedData$,
|
146
|
+
fullParams$: observer.fullParams$.pipe(
|
147
|
+
map(fullParams => i === 0 ? fullParams.firstAxis : fullParams.secondAxis)
|
148
|
+
),
|
149
|
+
fullDataFormatter$: d.gridDataFormatter$,
|
150
|
+
fullChartParams$: observer.fullChartParams$,
|
151
|
+
gridAxesTransform$: d.gridAxesTransform$,
|
152
|
+
gridAxesReverseTransform$: d.gridAxesReverseTransform$,
|
153
|
+
gridAxesSize$: d.gridAxesSize$,
|
154
|
+
gridContainer$: d.gridContainer$,
|
155
|
+
isSeriesPositionSeprate$: d.isSeriesPositionSeprate$,
|
156
|
+
})
|
157
|
+
})
|
158
|
+
})
|
159
|
+
|
160
|
+
return () => {
|
161
|
+
destroy$.next(undefined)
|
162
|
+
unsubscribeFnArr.forEach(fn => fn())
|
163
|
+
}
|
164
|
+
})
|
package/src/multiGrid/types.ts
CHANGED
@@ -1,67 +1,67 @@
|
|
1
|
-
import type { BaseBarsParams } from '../base/BaseBars'
|
2
|
-
import type { BaseBarStackParams } from '../base/BaseBarStack'
|
3
|
-
import type { BaseBarsTriangleParams } from '../base/BaseBarsTriangle'
|
4
|
-
import type { BaseLinesParams } from '../base/BaseLines'
|
5
|
-
import type {
|
6
|
-
import type {
|
7
|
-
import type {
|
8
|
-
import type {
|
9
|
-
|
10
|
-
|
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
|
-
export interface
|
36
|
-
gridIndexes: number[]
|
37
|
-
}
|
38
|
-
|
39
|
-
export interface
|
40
|
-
gridIndexes: number[]
|
41
|
-
}
|
42
|
-
|
43
|
-
export interface
|
44
|
-
gridIndexes: number[]
|
45
|
-
}
|
46
|
-
|
47
|
-
export interface
|
48
|
-
gridIndexes: number[]
|
49
|
-
}
|
50
|
-
|
51
|
-
export interface
|
52
|
-
gridIndexes: number[]
|
53
|
-
}
|
54
|
-
|
55
|
-
export interface
|
56
|
-
gridIndexes: number[]
|
57
|
-
}
|
58
|
-
|
59
|
-
export interface MultiDotsParams extends BaseDotsParams {
|
60
|
-
gridIndexes: number[]
|
61
|
-
}
|
62
|
-
|
63
|
-
export interface OverlappingValueAxesParams {
|
64
|
-
firstAxis: BaseValueAxisParams
|
65
|
-
secondAxis: BaseValueAxisParams
|
66
|
-
gridIndexes: [number, number]
|
67
|
-
}
|
1
|
+
import type { BaseBarsParams } from '../base/BaseBars'
|
2
|
+
import type { BaseBarStackParams } from '../base/BaseBarStack'
|
3
|
+
import type { BaseBarsTriangleParams } from '../base/BaseBarsTriangle'
|
4
|
+
import type { BaseLinesParams } from '../base/BaseLines'
|
5
|
+
import type { BaseLineAreasParams } from '../base/BaseLineAreas'
|
6
|
+
import type { BaseDotsParams } from '../base/BaseDots'
|
7
|
+
import type { BaseGroupAxisParams } from '../base/BaseGroupAxis'
|
8
|
+
import type { BaseValueAxisParams } from '../base/BaseValueAxis'
|
9
|
+
import type {
|
10
|
+
ChartParams, Layout, ColorType } from '@orbcharts/core'
|
11
|
+
|
12
|
+
export interface MultiGridLegendParams {
|
13
|
+
position: 'top' | 'bottom' | 'left' | 'right'
|
14
|
+
justify: 'start' | 'center' | 'end'
|
15
|
+
padding: number
|
16
|
+
backgroundFill: ColorType
|
17
|
+
backgroundStroke: ColorType
|
18
|
+
gap: number
|
19
|
+
listRectWidth: number
|
20
|
+
listRectHeight: number
|
21
|
+
listRectRadius: number
|
22
|
+
// 可針對各grid設定,覆蓋全域設定
|
23
|
+
gridList: Array<{
|
24
|
+
listRectWidth: number
|
25
|
+
listRectHeight: number
|
26
|
+
listRectRadius: number
|
27
|
+
}>
|
28
|
+
textColorType: ColorType
|
29
|
+
}
|
30
|
+
|
31
|
+
export interface MultiGroupAxisParams extends BaseGroupAxisParams {
|
32
|
+
gridIndexes: number[]
|
33
|
+
}
|
34
|
+
|
35
|
+
export interface MultiValueAxisParams extends BaseValueAxisParams {
|
36
|
+
gridIndexes: number[]
|
37
|
+
}
|
38
|
+
|
39
|
+
export interface MultiBarsParams extends BaseBarsParams {
|
40
|
+
gridIndexes: number[]
|
41
|
+
}
|
42
|
+
|
43
|
+
export interface MultiBarStackParams extends BaseBarStackParams {
|
44
|
+
gridIndexes: number[]
|
45
|
+
}
|
46
|
+
|
47
|
+
export interface MultiBarsTriangleParams extends BaseBarsTriangleParams {
|
48
|
+
gridIndexes: number[]
|
49
|
+
}
|
50
|
+
|
51
|
+
export interface MultiLinesParams extends BaseLinesParams {
|
52
|
+
gridIndexes: number[]
|
53
|
+
}
|
54
|
+
|
55
|
+
export interface MultiLineAreasParams extends BaseLineAreasParams {
|
56
|
+
gridIndexes: number[]
|
57
|
+
}
|
58
|
+
|
59
|
+
export interface MultiDotsParams extends BaseDotsParams {
|
60
|
+
gridIndexes: number[]
|
61
|
+
}
|
62
|
+
|
63
|
+
export interface OverlappingValueAxesParams {
|
64
|
+
firstAxis: BaseValueAxisParams
|
65
|
+
secondAxis: BaseValueAxisParams
|
66
|
+
gridIndexes: [number, number]
|
67
|
+
}
|
package/src/noneData/defaults.ts
CHANGED
@@ -1,61 +1,61 @@
|
|
1
|
-
import type { ContainerPluginParams, TooltipParams } from './types'
|
2
|
-
import type { EventBaseSeriesValue, EventBaseGridValue, EventBaseCategoryValue } from '@orbcharts/core'
|
3
|
-
|
4
|
-
export const CONTAINER_PLUGIN_PARAMS: ContainerPluginParams = {
|
5
|
-
header: {
|
6
|
-
height: 36,
|
7
|
-
text: [],
|
8
|
-
textStyle: []
|
9
|
-
},
|
10
|
-
footer: {
|
11
|
-
height: 0,
|
12
|
-
text: [],
|
13
|
-
textStyle: []
|
14
|
-
}
|
15
|
-
}
|
16
|
-
|
17
|
-
export const TOOLTIP_PARAMS: TooltipParams = {
|
18
|
-
backgroundColorType: 'background',
|
19
|
-
strokeColorType: 'primary',
|
20
|
-
backgroundOpacity: 0.8,
|
21
|
-
textColorType: 'primary',
|
22
|
-
offset: [20, 5],
|
23
|
-
padding: 10,
|
24
|
-
textRenderFn: (eventData) => {
|
25
|
-
if (eventData.highlightTarget === 'datum' && eventData.datum) {
|
26
|
-
return [`${eventData.datum.label}: ${eventData.datum.value}`]
|
27
|
-
} else if (eventData.highlightTarget === 'series') {
|
28
|
-
const label = (eventData as EventBaseSeriesValue<any, any>).seriesLabel
|
29
|
-
const valueArr = (eventData as EventBaseSeriesValue<any, any>).series
|
30
|
-
.map(d => {
|
31
|
-
return d.value
|
32
|
-
})
|
33
|
-
const value = valueArr.length > 5
|
34
|
-
? valueArr.slice(0, 5).join(',') + '...'
|
35
|
-
: valueArr.join(',')
|
36
|
-
return [label, value]
|
37
|
-
} else if (eventData.highlightTarget === 'group') {
|
38
|
-
const label = (eventData as EventBaseGridValue<any, any>).groupLabel
|
39
|
-
const valueArr = (eventData as EventBaseGridValue<any, any>).series
|
40
|
-
.map(d => {
|
41
|
-
return d.value
|
42
|
-
})
|
43
|
-
const value = valueArr.length > 5
|
44
|
-
? valueArr.slice(0, 5).join(',') + '...'
|
45
|
-
: valueArr.join(',')
|
46
|
-
return [label, value]
|
47
|
-
} else if (eventData.highlightTarget === 'category') {
|
48
|
-
const label = (eventData as EventBaseCategoryValue<any, any>).categoryLabel
|
49
|
-
const valueArr = (eventData as EventBaseCategoryValue<any, any>).category
|
50
|
-
.map(d => {
|
51
|
-
return d.value
|
52
|
-
})
|
53
|
-
const value = valueArr.length > 5
|
54
|
-
? valueArr.slice(0, 5).join(',') + '...'
|
55
|
-
: valueArr.join(',')
|
56
|
-
return [label, value]
|
57
|
-
}
|
58
|
-
return []
|
59
|
-
},
|
60
|
-
svgRenderFn: null
|
61
|
-
}
|
1
|
+
import type { ContainerPluginParams, TooltipParams } from './types'
|
2
|
+
import type { EventBaseSeriesValue, EventBaseGridValue, EventBaseCategoryValue } from '@orbcharts/core'
|
3
|
+
|
4
|
+
export const CONTAINER_PLUGIN_PARAMS: ContainerPluginParams = {
|
5
|
+
header: {
|
6
|
+
height: 36,
|
7
|
+
text: [],
|
8
|
+
textStyle: []
|
9
|
+
},
|
10
|
+
footer: {
|
11
|
+
height: 0,
|
12
|
+
text: [],
|
13
|
+
textStyle: []
|
14
|
+
}
|
15
|
+
}
|
16
|
+
|
17
|
+
export const TOOLTIP_PARAMS: TooltipParams = {
|
18
|
+
backgroundColorType: 'background',
|
19
|
+
strokeColorType: 'primary',
|
20
|
+
backgroundOpacity: 0.8,
|
21
|
+
textColorType: 'primary',
|
22
|
+
offset: [20, 5],
|
23
|
+
padding: 10,
|
24
|
+
textRenderFn: (eventData) => {
|
25
|
+
if (eventData.highlightTarget === 'datum' && eventData.datum) {
|
26
|
+
return [`${eventData.datum.label}: ${eventData.datum.value}`]
|
27
|
+
} else if (eventData.highlightTarget === 'series') {
|
28
|
+
const label = (eventData as EventBaseSeriesValue<any, any>).seriesLabel
|
29
|
+
const valueArr = (eventData as EventBaseSeriesValue<any, any>).series
|
30
|
+
.map(d => {
|
31
|
+
return d.value
|
32
|
+
})
|
33
|
+
const value = valueArr.length > 5
|
34
|
+
? valueArr.slice(0, 5).join(',') + '...'
|
35
|
+
: valueArr.join(',')
|
36
|
+
return [label, value]
|
37
|
+
} else if (eventData.highlightTarget === 'group') {
|
38
|
+
const label = (eventData as EventBaseGridValue<any, any>).groupLabel
|
39
|
+
const valueArr = (eventData as EventBaseGridValue<any, any>).series
|
40
|
+
.map(d => {
|
41
|
+
return d.value
|
42
|
+
})
|
43
|
+
const value = valueArr.length > 5
|
44
|
+
? valueArr.slice(0, 5).join(',') + '...'
|
45
|
+
: valueArr.join(',')
|
46
|
+
return [label, value]
|
47
|
+
} else if (eventData.highlightTarget === 'category') {
|
48
|
+
const label = (eventData as EventBaseCategoryValue<any, any>).categoryLabel
|
49
|
+
const valueArr = (eventData as EventBaseCategoryValue<any, any>).category
|
50
|
+
.map(d => {
|
51
|
+
return d.value
|
52
|
+
})
|
53
|
+
const value = valueArr.length > 5
|
54
|
+
? valueArr.slice(0, 5).join(',') + '...'
|
55
|
+
: valueArr.join(',')
|
56
|
+
return [label, value]
|
57
|
+
}
|
58
|
+
return []
|
59
|
+
},
|
60
|
+
svgRenderFn: null
|
61
|
+
}
|
package/src/noneData/index.ts
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
export * from './defaults'
|
2
|
-
export * from './types'
|
3
|
-
export { Container } from './plugins/Container'
|
1
|
+
export * from './defaults'
|
2
|
+
export * from './types'
|
3
|
+
export { Container } from './plugins/Container'
|
4
4
|
export { Tooltip } from './plugins/Tooltip'
|
@@ -1,11 +1,11 @@
|
|
1
|
-
import * as d3 from 'd3'
|
2
|
-
import {
|
3
|
-
defineNoneDataPlugin } from '@orbcharts/core'
|
4
|
-
import { CONTAINER_PLUGIN_PARAMS } from '../defaults'
|
5
|
-
|
6
|
-
export const Container = defineNoneDataPlugin('Container', CONTAINER_PLUGIN_PARAMS)(({ selection }) => {
|
7
|
-
|
8
|
-
return function unsubscribe () {
|
9
|
-
|
10
|
-
}
|
1
|
+
import * as d3 from 'd3'
|
2
|
+
import {
|
3
|
+
defineNoneDataPlugin } from '@orbcharts/core'
|
4
|
+
import { CONTAINER_PLUGIN_PARAMS } from '../defaults'
|
5
|
+
|
6
|
+
export const Container = defineNoneDataPlugin('Container', CONTAINER_PLUGIN_PARAMS)(({ selection }) => {
|
7
|
+
|
8
|
+
return function unsubscribe () {
|
9
|
+
|
10
|
+
}
|
11
11
|
})
|