@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,58 +1,58 @@
|
|
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
|
-
defineSeriesPlugin } from '@orbcharts/core'
|
11
|
-
import { DEFAULT_SERIES_LEGEND_PARAMS } from '../defaults'
|
12
|
-
import { createBaseLegend } from '../../base/BaseLegend'
|
13
|
-
|
14
|
-
const pluginName = 'SeriesLegend'
|
15
|
-
|
16
|
-
export const SeriesLegend = defineSeriesPlugin(pluginName, DEFAULT_SERIES_LEGEND_PARAMS)(({ selection, rootSelection, observer, subject }) => {
|
17
|
-
|
18
|
-
const destroy$ = new Subject()
|
19
|
-
|
20
|
-
const seriesLabels$: Observable<string[]> = observer.SeriesDataMap$.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$,
|
48
|
-
fullParams$,
|
49
|
-
layout$: observer.layout$,
|
50
|
-
fullChartParams$: observer.fullChartParams$
|
51
|
-
})
|
52
|
-
|
53
|
-
return () => {
|
54
|
-
destroy$.next(undefined)
|
55
|
-
unsubscribeBaseLegend()
|
56
|
-
}
|
57
|
-
})
|
58
|
-
|
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
|
+
defineSeriesPlugin } from '@orbcharts/core'
|
11
|
+
import { DEFAULT_SERIES_LEGEND_PARAMS } from '../defaults'
|
12
|
+
import { createBaseLegend } from '../../base/BaseLegend'
|
13
|
+
|
14
|
+
const pluginName = 'SeriesLegend'
|
15
|
+
|
16
|
+
export const SeriesLegend = defineSeriesPlugin(pluginName, DEFAULT_SERIES_LEGEND_PARAMS)(({ selection, rootSelection, observer, subject }) => {
|
17
|
+
|
18
|
+
const destroy$ = new Subject()
|
19
|
+
|
20
|
+
const seriesLabels$: Observable<string[]> = observer.SeriesDataMap$.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$,
|
48
|
+
fullParams$,
|
49
|
+
layout$: observer.layout$,
|
50
|
+
fullChartParams$: observer.fullChartParams$
|
51
|
+
})
|
52
|
+
|
53
|
+
return () => {
|
54
|
+
destroy$.next(undefined)
|
55
|
+
unsubscribeBaseLegend()
|
56
|
+
}
|
57
|
+
})
|
58
|
+
|
@@ -1,51 +1,51 @@
|
|
1
|
-
import * as d3 from 'd3'
|
2
|
-
import type { ComputedDataSeries, ComputedDatumSeries, EventName, EventSeries, HighlightTarget } from '@orbcharts/core'
|
3
|
-
// import type { D3PieDatum, PieDatum } from '../types'
|
4
|
-
|
5
|
-
// 由d3.pie()建出來的資料格式
|
6
|
-
export interface D3PieDatum {
|
7
|
-
data: any
|
8
|
-
index: number,
|
9
|
-
value: number,
|
10
|
-
startAngle: number,
|
11
|
-
endAngle: number,
|
12
|
-
padAngle: number,
|
13
|
-
}
|
14
|
-
|
15
|
-
export interface PieDatum extends D3PieDatum {
|
16
|
-
data: ComputedDatumSeries
|
17
|
-
id: string
|
18
|
-
}
|
19
|
-
|
20
|
-
export function makePieData ({ computedDataSeries, startAngle, endAngle }: {
|
21
|
-
computedDataSeries: ComputedDataSeries
|
22
|
-
startAngle: number
|
23
|
-
endAngle: number
|
24
|
-
// itemLabels: string[]
|
25
|
-
// arcLabels: string[]
|
26
|
-
}): PieDatum[] {
|
27
|
-
let pie = d3.pie<any, any>()
|
28
|
-
.startAngle(startAngle)
|
29
|
-
// .endAngle(startAngle + (endAngle - startAngle) * t)
|
30
|
-
.endAngle(endAngle)
|
31
|
-
.value((d) => d.visible == false ? 0 : d.value)
|
32
|
-
// .sort(null) // 不要排序
|
33
|
-
.sort((a, b) => a.sortedIndex - b.sortedIndex)
|
34
|
-
// .sort((a: any, b: any) => {
|
35
|
-
// return b.value - a.value
|
36
|
-
// })
|
37
|
-
// .sort(d3.ascending)
|
38
|
-
const pieData = pie(computedDataSeries)
|
39
|
-
return pieData.map((d: D3PieDatum, i: number) => {
|
40
|
-
// const itemLabel = d.data.itemLabel
|
41
|
-
let _d: any = d
|
42
|
-
_d.id = d.data.id
|
43
|
-
return _d
|
44
|
-
// return {
|
45
|
-
// ...d,
|
46
|
-
// itemIndex: itemLabels.indexOf(itemLabel),
|
47
|
-
// itemLabel,
|
48
|
-
// id: d.data.id,
|
49
|
-
// }
|
50
|
-
})
|
1
|
+
import * as d3 from 'd3'
|
2
|
+
import type { ComputedDataSeries, ComputedDatumSeries, EventName, EventSeries, HighlightTarget } from '@orbcharts/core'
|
3
|
+
// import type { D3PieDatum, PieDatum } from '../types'
|
4
|
+
|
5
|
+
// 由d3.pie()建出來的資料格式
|
6
|
+
export interface D3PieDatum {
|
7
|
+
data: any
|
8
|
+
index: number,
|
9
|
+
value: number,
|
10
|
+
startAngle: number,
|
11
|
+
endAngle: number,
|
12
|
+
padAngle: number,
|
13
|
+
}
|
14
|
+
|
15
|
+
export interface PieDatum extends D3PieDatum {
|
16
|
+
data: ComputedDatumSeries
|
17
|
+
id: string
|
18
|
+
}
|
19
|
+
|
20
|
+
export function makePieData ({ computedDataSeries, startAngle, endAngle }: {
|
21
|
+
computedDataSeries: ComputedDataSeries
|
22
|
+
startAngle: number
|
23
|
+
endAngle: number
|
24
|
+
// itemLabels: string[]
|
25
|
+
// arcLabels: string[]
|
26
|
+
}): PieDatum[] {
|
27
|
+
let pie = d3.pie<any, any>()
|
28
|
+
.startAngle(startAngle)
|
29
|
+
// .endAngle(startAngle + (endAngle - startAngle) * t)
|
30
|
+
.endAngle(endAngle)
|
31
|
+
.value((d) => d.visible == false ? 0 : d.value)
|
32
|
+
// .sort(null) // 不要排序
|
33
|
+
.sort((a, b) => a.sortedIndex - b.sortedIndex)
|
34
|
+
// .sort((a: any, b: any) => {
|
35
|
+
// return b.value - a.value
|
36
|
+
// })
|
37
|
+
// .sort(d3.ascending)
|
38
|
+
const pieData = pie(computedDataSeries)
|
39
|
+
return pieData.map((d: D3PieDatum, i: number) => {
|
40
|
+
// const itemLabel = d.data.itemLabel
|
41
|
+
let _d: any = d
|
42
|
+
_d.id = d.data.id
|
43
|
+
return _d
|
44
|
+
// return {
|
45
|
+
// ...d,
|
46
|
+
// itemIndex: itemLabels.indexOf(itemLabel),
|
47
|
+
// itemLabel,
|
48
|
+
// id: d.data.id,
|
49
|
+
// }
|
50
|
+
})
|
51
51
|
}
|
package/src/series/types.ts
CHANGED
@@ -1,67 +1,67 @@
|
|
1
|
-
import type { ComputedDatumSeries, EventSeries, EventName, ColorType } from '@orbcharts/core'
|
2
|
-
// import type { BaseLegendParams } from '../base/BaseLegend'
|
3
|
-
|
4
|
-
export type BubbleScaleType = '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
|
-
bubbleScaleType: BubbleScaleType
|
19
|
-
}
|
20
|
-
|
21
|
-
export interface PieParams {
|
22
|
-
// padding: Padding
|
23
|
-
outerRadius: number;
|
24
|
-
innerRadius: number;
|
25
|
-
outerMouseoverRadius: 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
|
-
outerMouseoverRadius: 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 SeriesLegendParams {
|
57
|
-
position: 'top' | 'bottom' | 'left' | 'right'
|
58
|
-
justify: 'start' | 'center' | 'end'
|
59
|
-
padding: number
|
60
|
-
backgroundFill: ColorType
|
61
|
-
backgroundStroke: ColorType
|
62
|
-
gap: number
|
63
|
-
listRectWidth: number
|
64
|
-
listRectHeight: number
|
65
|
-
listRectRadius: number
|
66
|
-
textColorType: ColorType
|
67
|
-
}
|
1
|
+
import type { ComputedDatumSeries, EventSeries, EventName, ColorType } from '@orbcharts/core'
|
2
|
+
// import type { BaseLegendParams } from '../base/BaseLegend'
|
3
|
+
|
4
|
+
export type BubbleScaleType = '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
|
+
bubbleScaleType: BubbleScaleType
|
19
|
+
}
|
20
|
+
|
21
|
+
export interface PieParams {
|
22
|
+
// padding: Padding
|
23
|
+
outerRadius: number;
|
24
|
+
innerRadius: number;
|
25
|
+
outerMouseoverRadius: 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
|
+
outerMouseoverRadius: 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 SeriesLegendParams {
|
57
|
+
position: 'top' | 'bottom' | 'left' | 'right'
|
58
|
+
justify: 'start' | 'center' | 'end'
|
59
|
+
padding: number
|
60
|
+
backgroundFill: ColorType
|
61
|
+
backgroundStroke: ColorType
|
62
|
+
gap: number
|
63
|
+
listRectWidth: number
|
64
|
+
listRectHeight: number
|
65
|
+
listRectRadius: number
|
66
|
+
textColorType: ColorType
|
67
|
+
}
|
package/src/tree/defaults.ts
CHANGED
@@ -1,22 +1,22 @@
|
|
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
|
-
|
11
|
-
export const DEFAULT_TREE_LEGEND_PARAMS: TreeLegendParams = {
|
12
|
-
position: 'right',
|
13
|
-
justify: 'end',
|
14
|
-
padding: 28,
|
15
|
-
backgroundFill: 'none',
|
16
|
-
backgroundStroke: 'none',
|
17
|
-
gap: 10,
|
18
|
-
listRectWidth: 14,
|
19
|
-
listRectHeight: 14,
|
20
|
-
listRectRadius: 0,
|
21
|
-
textColorType: 'primary'
|
22
|
-
}
|
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
|
+
|
11
|
+
export const DEFAULT_TREE_LEGEND_PARAMS: TreeLegendParams = {
|
12
|
+
position: 'right',
|
13
|
+
justify: 'end',
|
14
|
+
padding: 28,
|
15
|
+
backgroundFill: 'none',
|
16
|
+
backgroundStroke: 'none',
|
17
|
+
gap: 10,
|
18
|
+
listRectWidth: 14,
|
19
|
+
listRectHeight: 14,
|
20
|
+
listRectRadius: 0,
|
21
|
+
textColorType: 'primary'
|
22
|
+
}
|
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,58 +1,58 @@
|
|
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
|
-
})
|
52
|
-
|
53
|
-
return () => {
|
54
|
-
destroy$.next(undefined)
|
55
|
-
unsubscribeBaseLegend()
|
56
|
-
}
|
57
|
-
})
|
58
|
-
|
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
|
+
})
|
52
|
+
|
53
|
+
return () => {
|
54
|
+
destroy$.next(undefined)
|
55
|
+
unsubscribeBaseLegend()
|
56
|
+
}
|
57
|
+
})
|
58
|
+
|