@orbcharts/plugins-basic 3.0.0-alpha.61 → 3.0.0-alpha.62
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 +1 -1
- package/dist/orbcharts-plugins-basic.umd.js +1 -1
- 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 -513
- package/src/base/BaseGroupAxis.ts +558 -558
- package/src/base/BaseLegend.ts +641 -641
- package/src/base/BaseLineAreas.ts +628 -628
- package/src/base/BaseLines.ts +704 -704
- package/src/base/BaseValueAxis.ts +480 -478
- package/src/base/types.ts +2 -2
- package/src/grid/defaults.ts +128 -128
- package/src/grid/gridObservables.ts +541 -541
- package/src/grid/index.ts +15 -15
- package/src/grid/plugins/BarStack.ts +43 -43
- package/src/grid/plugins/Bars.ts +44 -44
- package/src/grid/plugins/BarsPN.ts +41 -41
- package/src/grid/plugins/BarsTriangle.ts +42 -42
- package/src/grid/plugins/Dots.ts +37 -37
- package/src/grid/plugins/GridLegend.ts +59 -59
- package/src/grid/plugins/GroupAux.ts +976 -976
- package/src/grid/plugins/GroupAxis.ts +35 -35
- package/src/grid/plugins/LineAreas.ts +40 -40
- package/src/grid/plugins/Lines.ts +40 -40
- package/src/grid/plugins/ScalingArea.ts +173 -173
- package/src/grid/plugins/ValueAxis.ts +36 -36
- package/src/grid/plugins/ValueStackAxis.ts +38 -38
- package/src/grid/types.ts +123 -123
- package/src/index.ts +9 -9
- package/src/multiGrid/defaults.ts +158 -158
- package/src/multiGrid/index.ts +13 -13
- package/src/multiGrid/multiGridObservables.ts +49 -49
- 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 +77 -77
- package/src/multiGrid/plugins/MultiLines.ts +77 -77
- package/src/multiGrid/plugins/MultiValueAxis.ts +69 -69
- package/src/multiGrid/plugins/MultiValueStackAxis.ts +69 -69
- package/src/multiGrid/plugins/OverlappingValueAxes.ts +167 -167
- package/src/multiGrid/plugins/OverlappingValueStackAxes.ts +168 -168
- package/src/multiGrid/types.ts +72 -72
- package/src/noneData/defaults.ts +102 -102
- 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 +144 -144
- package/src/series/index.ts +9 -9
- package/src/series/plugins/Bubbles.ts +545 -545
- 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 +23 -23
- 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.base.json +13 -13
- package/tsconfig.json +2 -2
- package/vite.config.js +22 -22
package/src/series/types.ts
CHANGED
@@ -1,83 +1,83 @@
|
|
1
|
-
import type { ComputedDatumSeries, EventSeries, EventName, ColorType } from '@orbcharts/core'
|
2
|
-
// import type { BaseLegendParams } from '../base/BaseLegend'
|
3
|
-
|
4
|
-
export type ArcScaleType = 'area' | 'radius'
|
5
|
-
|
6
|
-
export interface BubblesParams {
|
7
|
-
force: {
|
8
|
-
strength: number; // 泡泡引力
|
9
|
-
velocityDecay: number; // 衰減數
|
10
|
-
collisionSpacing: number // 泡泡間距
|
11
|
-
}
|
12
|
-
bubbleText: {
|
13
|
-
fillRate: number
|
14
|
-
lineHeight: number
|
15
|
-
lineLengthMin: number
|
16
|
-
}
|
17
|
-
// highlightRIncrease: number
|
18
|
-
arcScaleType: ArcScaleType
|
19
|
-
}
|
20
|
-
|
21
|
-
export interface PieParams {
|
22
|
-
// padding: Padding
|
23
|
-
outerRadius: number;
|
24
|
-
innerRadius: number;
|
25
|
-
outerRadiusWhileHighlight: number;
|
26
|
-
// label?: LabelStyle
|
27
|
-
// enterDuration: number
|
28
|
-
startAngle: number
|
29
|
-
endAngle: number
|
30
|
-
padAngle: number
|
31
|
-
// padRadius: number
|
32
|
-
cornerRadius: number
|
33
|
-
}
|
34
|
-
|
35
|
-
export interface PieEventTextsParams {
|
36
|
-
eventFn: (d: EventSeries, eventName: EventName, t: number) => string[]
|
37
|
-
textAttrs: Array<{ [key:string]: string | number }>
|
38
|
-
textStyles: Array<{ [key:string]: string | number }>
|
39
|
-
}
|
40
|
-
|
41
|
-
export interface PieLabelsParams {
|
42
|
-
// solidColor?: string;
|
43
|
-
// colors?: string[];
|
44
|
-
outerRadius: number
|
45
|
-
outerRadiusWhileHighlight: number
|
46
|
-
// innerRadius?: number;
|
47
|
-
// enterDuration?: number
|
48
|
-
startAngle: number
|
49
|
-
endAngle: number
|
50
|
-
labelCentroid: number
|
51
|
-
// fontSize?: number
|
52
|
-
labelFn: ((d: ComputedDatumSeries) => string)
|
53
|
-
labelColorType: ColorType
|
54
|
-
}
|
55
|
-
|
56
|
-
export interface RoseParams {
|
57
|
-
outerRadius: number
|
58
|
-
// padAngle: number
|
59
|
-
cornerRadius: number
|
60
|
-
arcScaleType: ArcScaleType
|
61
|
-
mouseoverAngleIncrease: number
|
62
|
-
}
|
63
|
-
|
64
|
-
export interface RoseLabelsParams {
|
65
|
-
outerRadius: number
|
66
|
-
labelCentroid: number
|
67
|
-
labelFn: ((d: ComputedDatumSeries) => string)
|
68
|
-
labelColorType: ColorType
|
69
|
-
arcScaleType: ArcScaleType
|
70
|
-
}
|
71
|
-
|
72
|
-
export interface SeriesLegendParams {
|
73
|
-
position: 'top' | 'bottom' | 'left' | 'right'
|
74
|
-
justify: 'start' | 'center' | 'end'
|
75
|
-
padding: number
|
76
|
-
backgroundFill: ColorType
|
77
|
-
backgroundStroke: ColorType
|
78
|
-
gap: number
|
79
|
-
listRectWidth: number
|
80
|
-
listRectHeight: number
|
81
|
-
listRectRadius: number
|
82
|
-
textColorType: ColorType
|
83
|
-
}
|
1
|
+
import type { ComputedDatumSeries, EventSeries, EventName, ColorType } from '@orbcharts/core'
|
2
|
+
// import type { BaseLegendParams } from '../base/BaseLegend'
|
3
|
+
|
4
|
+
export type ArcScaleType = 'area' | 'radius'
|
5
|
+
|
6
|
+
export interface BubblesParams {
|
7
|
+
force: {
|
8
|
+
strength: number; // 泡泡引力
|
9
|
+
velocityDecay: number; // 衰減數
|
10
|
+
collisionSpacing: number // 泡泡間距
|
11
|
+
}
|
12
|
+
bubbleText: {
|
13
|
+
fillRate: number
|
14
|
+
lineHeight: number
|
15
|
+
lineLengthMin: number
|
16
|
+
}
|
17
|
+
// highlightRIncrease: number
|
18
|
+
arcScaleType: ArcScaleType
|
19
|
+
}
|
20
|
+
|
21
|
+
export interface PieParams {
|
22
|
+
// padding: Padding
|
23
|
+
outerRadius: number;
|
24
|
+
innerRadius: number;
|
25
|
+
outerRadiusWhileHighlight: number;
|
26
|
+
// label?: LabelStyle
|
27
|
+
// enterDuration: number
|
28
|
+
startAngle: number
|
29
|
+
endAngle: number
|
30
|
+
padAngle: number
|
31
|
+
// padRadius: number
|
32
|
+
cornerRadius: number
|
33
|
+
}
|
34
|
+
|
35
|
+
export interface PieEventTextsParams {
|
36
|
+
eventFn: (d: EventSeries, eventName: EventName, t: number) => string[]
|
37
|
+
textAttrs: Array<{ [key:string]: string | number }>
|
38
|
+
textStyles: Array<{ [key:string]: string | number }>
|
39
|
+
}
|
40
|
+
|
41
|
+
export interface PieLabelsParams {
|
42
|
+
// solidColor?: string;
|
43
|
+
// colors?: string[];
|
44
|
+
outerRadius: number
|
45
|
+
outerRadiusWhileHighlight: number
|
46
|
+
// innerRadius?: number;
|
47
|
+
// enterDuration?: number
|
48
|
+
startAngle: number
|
49
|
+
endAngle: number
|
50
|
+
labelCentroid: number
|
51
|
+
// fontSize?: number
|
52
|
+
labelFn: ((d: ComputedDatumSeries) => string)
|
53
|
+
labelColorType: ColorType
|
54
|
+
}
|
55
|
+
|
56
|
+
export interface RoseParams {
|
57
|
+
outerRadius: number
|
58
|
+
// padAngle: number
|
59
|
+
cornerRadius: number
|
60
|
+
arcScaleType: ArcScaleType
|
61
|
+
mouseoverAngleIncrease: number
|
62
|
+
}
|
63
|
+
|
64
|
+
export interface RoseLabelsParams {
|
65
|
+
outerRadius: number
|
66
|
+
labelCentroid: number
|
67
|
+
labelFn: ((d: ComputedDatumSeries) => string)
|
68
|
+
labelColorType: ColorType
|
69
|
+
arcScaleType: ArcScaleType
|
70
|
+
}
|
71
|
+
|
72
|
+
export interface SeriesLegendParams {
|
73
|
+
position: 'top' | 'bottom' | 'left' | 'right'
|
74
|
+
justify: 'start' | 'center' | 'end'
|
75
|
+
padding: number
|
76
|
+
backgroundFill: ColorType
|
77
|
+
backgroundStroke: ColorType
|
78
|
+
gap: number
|
79
|
+
listRectWidth: number
|
80
|
+
listRectHeight: number
|
81
|
+
listRectRadius: number
|
82
|
+
textColorType: ColorType
|
83
|
+
}
|
package/src/tree/defaults.ts
CHANGED
@@ -1,23 +1,23 @@
|
|
1
|
-
import type { TreeMapParams, TreeLegendParams } from './types'
|
2
|
-
|
3
|
-
export const DEFAULT_TREE_MAP_PARAMS: TreeMapParams = {
|
4
|
-
paddingInner: 2,
|
5
|
-
paddingOuter: 2,
|
6
|
-
labelColorType: 'primary',
|
7
|
-
squarifyRatio: 1.618034, // 黃金比例
|
8
|
-
sort: (a, b) => b.value - a.value
|
9
|
-
}
|
10
|
-
DEFAULT_TREE_MAP_PARAMS.sort.toString = () => `(a, b) => b.value - a.value`
|
11
|
-
|
12
|
-
export const DEFAULT_TREE_LEGEND_PARAMS: TreeLegendParams = {
|
13
|
-
position: 'right',
|
14
|
-
justify: 'end',
|
15
|
-
padding: 28,
|
16
|
-
backgroundFill: 'none',
|
17
|
-
backgroundStroke: 'none',
|
18
|
-
gap: 10,
|
19
|
-
listRectWidth: 14,
|
20
|
-
listRectHeight: 14,
|
21
|
-
listRectRadius: 0,
|
22
|
-
textColorType: 'primary'
|
23
|
-
}
|
1
|
+
import type { TreeMapParams, TreeLegendParams } from './types'
|
2
|
+
|
3
|
+
export const DEFAULT_TREE_MAP_PARAMS: TreeMapParams = {
|
4
|
+
paddingInner: 2,
|
5
|
+
paddingOuter: 2,
|
6
|
+
labelColorType: 'primary',
|
7
|
+
squarifyRatio: 1.618034, // 黃金比例
|
8
|
+
sort: (a, b) => b.value - a.value
|
9
|
+
}
|
10
|
+
DEFAULT_TREE_MAP_PARAMS.sort.toString = () => `(a, b) => b.value - a.value`
|
11
|
+
|
12
|
+
export const DEFAULT_TREE_LEGEND_PARAMS: TreeLegendParams = {
|
13
|
+
position: 'right',
|
14
|
+
justify: 'end',
|
15
|
+
padding: 28,
|
16
|
+
backgroundFill: 'none',
|
17
|
+
backgroundStroke: 'none',
|
18
|
+
gap: 10,
|
19
|
+
listRectWidth: 14,
|
20
|
+
listRectHeight: 14,
|
21
|
+
listRectRadius: 0,
|
22
|
+
textColorType: 'primary'
|
23
|
+
}
|
package/src/tree/index.ts
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
export * from './defaults'
|
2
|
-
export * from './types'
|
3
|
-
export { TreeLegend } from './plugins/TreeLegend'
|
1
|
+
export * from './defaults'
|
2
|
+
export * from './types'
|
3
|
+
export { TreeLegend } from './plugins/TreeLegend'
|
4
4
|
export { TreeMap } from './plugins/TreeMap'
|
@@ -1,59 +1,59 @@
|
|
1
|
-
import * as d3 from 'd3'
|
2
|
-
import {
|
3
|
-
combineLatest,
|
4
|
-
map,
|
5
|
-
switchMap,
|
6
|
-
takeUntil,
|
7
|
-
Observable,
|
8
|
-
Subject } from 'rxjs'
|
9
|
-
import {
|
10
|
-
defineTreePlugin } from '@orbcharts/core'
|
11
|
-
import { DEFAULT_TREE_LEGEND_PARAMS } from '../defaults'
|
12
|
-
import { createBaseLegend } from '../../base/BaseLegend'
|
13
|
-
|
14
|
-
const pluginName = 'TreeLegend'
|
15
|
-
|
16
|
-
export const TreeLegend = defineTreePlugin(pluginName, DEFAULT_TREE_LEGEND_PARAMS)(({ selection, rootSelection, observer, subject }) => {
|
17
|
-
|
18
|
-
const destroy$ = new Subject()
|
19
|
-
|
20
|
-
const categoryLabels$: Observable<string[]> = observer.CategoryDataMap$.pipe(
|
21
|
-
takeUntil(destroy$),
|
22
|
-
map(data => {
|
23
|
-
return Array.from(data.keys())
|
24
|
-
})
|
25
|
-
)
|
26
|
-
|
27
|
-
// 全部列點矩型使用相同樣式參數
|
28
|
-
const fullParams$ = observer.fullParams$.pipe(
|
29
|
-
takeUntil(destroy$),
|
30
|
-
map(d => {
|
31
|
-
const seriesList = [
|
32
|
-
{
|
33
|
-
listRectWidth: d.listRectWidth,
|
34
|
-
listRectHeight: d.listRectHeight,
|
35
|
-
listRectRadius: d.listRectRadius,
|
36
|
-
}
|
37
|
-
]
|
38
|
-
return {
|
39
|
-
...d,
|
40
|
-
seriesList
|
41
|
-
}
|
42
|
-
})
|
43
|
-
)
|
44
|
-
|
45
|
-
const unsubscribeBaseLegend = createBaseLegend(pluginName, {
|
46
|
-
rootSelection,
|
47
|
-
seriesLabels$: categoryLabels$,
|
48
|
-
fullParams$,
|
49
|
-
layout$: observer.layout$,
|
50
|
-
fullChartParams$: observer.fullChartParams$,
|
51
|
-
textSizePx$: observer.textSizePx$
|
52
|
-
})
|
53
|
-
|
54
|
-
return () => {
|
55
|
-
destroy$.next(undefined)
|
56
|
-
unsubscribeBaseLegend()
|
57
|
-
}
|
58
|
-
})
|
59
|
-
|
1
|
+
import * as d3 from 'd3'
|
2
|
+
import {
|
3
|
+
combineLatest,
|
4
|
+
map,
|
5
|
+
switchMap,
|
6
|
+
takeUntil,
|
7
|
+
Observable,
|
8
|
+
Subject } from 'rxjs'
|
9
|
+
import {
|
10
|
+
defineTreePlugin } from '@orbcharts/core'
|
11
|
+
import { DEFAULT_TREE_LEGEND_PARAMS } from '../defaults'
|
12
|
+
import { createBaseLegend } from '../../base/BaseLegend'
|
13
|
+
|
14
|
+
const pluginName = 'TreeLegend'
|
15
|
+
|
16
|
+
export const TreeLegend = defineTreePlugin(pluginName, DEFAULT_TREE_LEGEND_PARAMS)(({ selection, rootSelection, observer, subject }) => {
|
17
|
+
|
18
|
+
const destroy$ = new Subject()
|
19
|
+
|
20
|
+
const categoryLabels$: Observable<string[]> = observer.CategoryDataMap$.pipe(
|
21
|
+
takeUntil(destroy$),
|
22
|
+
map(data => {
|
23
|
+
return Array.from(data.keys())
|
24
|
+
})
|
25
|
+
)
|
26
|
+
|
27
|
+
// 全部列點矩型使用相同樣式參數
|
28
|
+
const fullParams$ = observer.fullParams$.pipe(
|
29
|
+
takeUntil(destroy$),
|
30
|
+
map(d => {
|
31
|
+
const seriesList = [
|
32
|
+
{
|
33
|
+
listRectWidth: d.listRectWidth,
|
34
|
+
listRectHeight: d.listRectHeight,
|
35
|
+
listRectRadius: d.listRectRadius,
|
36
|
+
}
|
37
|
+
]
|
38
|
+
return {
|
39
|
+
...d,
|
40
|
+
seriesList
|
41
|
+
}
|
42
|
+
})
|
43
|
+
)
|
44
|
+
|
45
|
+
const unsubscribeBaseLegend = createBaseLegend(pluginName, {
|
46
|
+
rootSelection,
|
47
|
+
seriesLabels$: categoryLabels$,
|
48
|
+
fullParams$,
|
49
|
+
layout$: observer.layout$,
|
50
|
+
fullChartParams$: observer.fullChartParams$,
|
51
|
+
textSizePx$: observer.textSizePx$
|
52
|
+
})
|
53
|
+
|
54
|
+
return () => {
|
55
|
+
destroy$.next(undefined)
|
56
|
+
unsubscribeBaseLegend()
|
57
|
+
}
|
58
|
+
})
|
59
|
+
|