@orbcharts/plugins-basic 3.0.0-alpha.48 → 3.0.0-alpha.50
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/dist/orbcharts-plugins-basic.es.js +7956 -7491
- package/dist/orbcharts-plugins-basic.umd.js +9 -9
- package/dist/src/multiGrid/defaults.d.ts +2 -1
- package/dist/src/multiGrid/index.d.ts +2 -0
- package/dist/src/multiGrid/multiGridObservables.d.ts +1 -1
- package/dist/src/multiGrid/plugins/MultiValueStackAxis.d.ts +1 -0
- package/dist/src/multiGrid/plugins/OverlappingValueStackAxes.d.ts +1 -0
- package/dist/src/multiGrid/types.d.ts +3 -0
- package/dist/src/series/defaults.d.ts +3 -1
- package/dist/src/series/index.d.ts +2 -0
- package/dist/src/series/plugins/Rose.d.ts +10 -0
- package/dist/src/series/plugins/RoseLabels.d.ts +3 -0
- package/dist/src/series/types.d.ts +17 -5
- package/package.json +2 -2
- package/src/grid/defaults.ts +3 -1
- package/src/grid/gridObservables.ts +1 -0
- package/src/grid/plugins/BarStack.ts +1 -8
- package/src/grid/plugins/Bars.ts +1 -8
- package/src/grid/plugins/BarsTriangle.ts +1 -9
- package/src/grid/plugins/GroupAxis.ts +1 -8
- package/src/grid/plugins/ValueAxis.ts +1 -8
- package/src/grid/plugins/ValueStackAxis.ts +4 -45
- package/src/multiGrid/defaults.ts +5 -0
- package/src/multiGrid/index.ts +3 -1
- package/src/multiGrid/multiGridObservables.ts +3 -2
- package/src/multiGrid/plugins/MultiBarStack.ts +3 -3
- package/src/multiGrid/plugins/MultiBars.ts +3 -3
- package/src/multiGrid/plugins/MultiBarsTriangle.ts +3 -3
- package/src/multiGrid/plugins/MultiDots.ts +3 -3
- package/src/multiGrid/plugins/MultiGroupAxis.ts +3 -3
- package/src/multiGrid/plugins/MultiLineAreas.ts +3 -3
- package/src/multiGrid/plugins/MultiLines.ts +3 -3
- package/src/multiGrid/plugins/MultiValueAxis.ts +3 -3
- package/src/multiGrid/plugins/MultiValueStackAxis.ts +69 -0
- package/src/multiGrid/plugins/OverlappingValueAxes.ts +5 -12
- package/src/multiGrid/plugins/OverlappingValueStackAxes.ts +167 -0
- package/src/multiGrid/types.ts +4 -0
- package/src/series/defaults.ts +22 -5
- package/src/series/index.ts +3 -1
- package/src/series/plugins/Bubbles.ts +4 -4
- package/src/series/plugins/Pie.ts +18 -17
- package/src/series/plugins/PieLabels.ts +16 -51
- package/src/series/plugins/Rose.ts +473 -0
- package/src/series/plugins/RoseLabels.ts +362 -0
- package/src/series/seriesUtils.ts +2 -1
- package/src/series/types.ts +21 -5
@@ -15,7 +15,7 @@ import {
|
|
15
15
|
defineMultiGridPlugin } from '@orbcharts/core'
|
16
16
|
import { DEFAULT_OVERLAPPING_VALUE_AXES_PARAMS } from '../defaults'
|
17
17
|
import { createBaseValueAxis } from '../../base/BaseValueAxis'
|
18
|
-
import {
|
18
|
+
import { multiGridPluginDetailObservables } from '../multiGridObservables'
|
19
19
|
import { getClassName, getUniID } from '../../utils/orbchartsUtils'
|
20
20
|
import { gridAxesTransformObservable, gridAxesReverseTransformObservable, gridContainerPositionObservable } from '@orbcharts/core/src/grid/gridObservables'
|
21
21
|
|
@@ -78,7 +78,7 @@ export const OverlappingValueAxes = defineMultiGridPlugin(pluginName, DEFAULT_OV
|
|
78
78
|
})
|
79
79
|
)
|
80
80
|
|
81
|
-
const
|
81
|
+
const multiGridPluginDetail$ = of(observer).pipe(
|
82
82
|
takeUntil(destroy$),
|
83
83
|
map(observer => {
|
84
84
|
// 將observer的gridIndexes限制在2個
|
@@ -94,7 +94,7 @@ export const OverlappingValueAxes = defineMultiGridPlugin(pluginName, DEFAULT_OV
|
|
94
94
|
)
|
95
95
|
}
|
96
96
|
}),
|
97
|
-
switchMap(observer =>
|
97
|
+
switchMap(observer => multiGridPluginDetailObservables(observer)),
|
98
98
|
map(data => {
|
99
99
|
return data.map((observables, index) => {
|
100
100
|
if (index === 0) {
|
@@ -123,7 +123,7 @@ export const OverlappingValueAxes = defineMultiGridPlugin(pluginName, DEFAULT_OV
|
|
123
123
|
})
|
124
124
|
)
|
125
125
|
|
126
|
-
|
126
|
+
multiGridPluginDetail$
|
127
127
|
.pipe(
|
128
128
|
takeUntil(destroy$)
|
129
129
|
)
|
@@ -142,13 +142,6 @@ export const OverlappingValueAxes = defineMultiGridPlugin(pluginName, DEFAULT_OV
|
|
142
142
|
|
143
143
|
const gridSelection = d3.select(g[i])
|
144
144
|
|
145
|
-
const isSeriesSeprate$ = d.dataFormatter$.pipe(
|
146
|
-
takeUntil(destroy$),
|
147
|
-
map(d => d.grid.separateSeries),
|
148
|
-
distinctUntilChanged(),
|
149
|
-
shareReplay(1)
|
150
|
-
)
|
151
|
-
|
152
145
|
unsubscribeFnArr[i] = createBaseValueAxis(pluginName, {
|
153
146
|
selection: gridSelection,
|
154
147
|
computedData$: d.computedData$,
|
@@ -161,7 +154,7 @@ export const OverlappingValueAxes = defineMultiGridPlugin(pluginName, DEFAULT_OV
|
|
161
154
|
gridAxesReverseTransform$: d.gridAxesReverseTransform$,
|
162
155
|
gridAxesSize$: d.gridAxesSize$,
|
163
156
|
gridContainerPosition$: d.gridContainerPosition$,
|
164
|
-
isSeriesSeprate$,
|
157
|
+
isSeriesSeprate$: d.isSeriesSeprate$,
|
165
158
|
})
|
166
159
|
})
|
167
160
|
})
|
@@ -0,0 +1,167 @@
|
|
1
|
+
import * as d3 from 'd3'
|
2
|
+
import {
|
3
|
+
of,
|
4
|
+
map,
|
5
|
+
switchMap,
|
6
|
+
combineLatest,
|
7
|
+
takeUntil,
|
8
|
+
distinctUntilChanged,
|
9
|
+
shareReplay,
|
10
|
+
iif,
|
11
|
+
Observable,
|
12
|
+
Subject } from 'rxjs'
|
13
|
+
import type { ContextObserverMultiGrid, DataFormatterGrid, DataFormatterTypeMap, Layout } from '@orbcharts/core'
|
14
|
+
import {
|
15
|
+
defineMultiGridPlugin } from '@orbcharts/core'
|
16
|
+
import { DEFAULT_OVERLAPPING_VALUE_AXES_PARAMS } from '../defaults'
|
17
|
+
import { createBaseValueAxis } from '../../base/BaseValueAxis'
|
18
|
+
import { multiGridPluginDetailObservables } from '../multiGridObservables'
|
19
|
+
import { getClassName, getUniID } from '../../utils/orbchartsUtils'
|
20
|
+
import { gridAxesTransformObservable, gridAxesReverseTransformObservable, gridContainerPositionObservable } from '@orbcharts/core/src/grid/gridObservables'
|
21
|
+
|
22
|
+
const pluginName = 'OverlappingValueStackAxes'
|
23
|
+
|
24
|
+
const gridClassName = getClassName(pluginName, 'grid')
|
25
|
+
|
26
|
+
// 第一個圖軸使用堆疊的資料,第二個圖軸使用原始資料
|
27
|
+
export const OverlappingValueStackAxes = defineMultiGridPlugin(pluginName, DEFAULT_OVERLAPPING_VALUE_AXES_PARAMS)(({ selection, name, subject, observer }) => {
|
28
|
+
const destroy$ = new Subject()
|
29
|
+
|
30
|
+
const unsubscribeFnArr: (() => void)[] = []
|
31
|
+
|
32
|
+
const firstGridIndex$ = observer.fullParams$.pipe(
|
33
|
+
takeUntil(destroy$),
|
34
|
+
map(fullParams => fullParams.gridIndexes[0])
|
35
|
+
)
|
36
|
+
|
37
|
+
const secondGridIndex$ = observer.fullParams$.pipe(
|
38
|
+
takeUntil(destroy$),
|
39
|
+
map(fullParams => fullParams.gridIndexes[1])
|
40
|
+
)
|
41
|
+
|
42
|
+
// 為了要反轉第二個valueAxis的位置所以要重新計算
|
43
|
+
const secondGridDataFormatter$: Observable<DataFormatterGrid> = combineLatest({
|
44
|
+
firstGridIndex: firstGridIndex$,
|
45
|
+
secondGridIndex: secondGridIndex$,
|
46
|
+
fullDataFormatter: observer.fullDataFormatter$,
|
47
|
+
}).pipe(
|
48
|
+
takeUntil(destroy$),
|
49
|
+
switchMap(async (d) => d),
|
50
|
+
map(data => {
|
51
|
+
if (!data.fullDataFormatter.gridList[data.secondGridIndex]) {
|
52
|
+
data.fullDataFormatter.gridList[data.secondGridIndex] = Object.assign({}, data.fullDataFormatter.gridList[data.firstGridIndex])
|
53
|
+
}
|
54
|
+
// 反轉第二個valueAxis的位置
|
55
|
+
let reversePosition = ''
|
56
|
+
if (data.fullDataFormatter.gridList[data.firstGridIndex].valueAxis.position === 'left') {
|
57
|
+
reversePosition = 'right'
|
58
|
+
} else if (data.fullDataFormatter.gridList[data.firstGridIndex].valueAxis.position === 'bottom') {
|
59
|
+
reversePosition = 'top'
|
60
|
+
} else if (data.fullDataFormatter.gridList[data.firstGridIndex].valueAxis.position === 'top') {
|
61
|
+
reversePosition = 'bottom'
|
62
|
+
} else if (data.fullDataFormatter.gridList[data.firstGridIndex].valueAxis.position === 'right') {
|
63
|
+
reversePosition = 'left'
|
64
|
+
}
|
65
|
+
return <DataFormatterGrid>{
|
66
|
+
type: 'grid',
|
67
|
+
visibleFilter: data.fullDataFormatter.visibleFilter as any,
|
68
|
+
grid: {
|
69
|
+
...data.fullDataFormatter.gridList[data.secondGridIndex],
|
70
|
+
valueAxis: {
|
71
|
+
...data.fullDataFormatter.gridList[data.secondGridIndex].valueAxis,
|
72
|
+
position: reversePosition
|
73
|
+
}
|
74
|
+
},
|
75
|
+
container: {
|
76
|
+
...data.fullDataFormatter.container
|
77
|
+
}
|
78
|
+
}
|
79
|
+
})
|
80
|
+
)
|
81
|
+
|
82
|
+
const multiGridPluginDetail$ = 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 => multiGridPluginDetailObservables(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 gridContainerPosition$ = gridContainerPositionObservable({
|
113
|
+
computedData$: observables.computedData$,
|
114
|
+
fullDataFormatter$: secondGridDataFormatter$,
|
115
|
+
layout$: observer.layout$
|
116
|
+
})
|
117
|
+
return {
|
118
|
+
...observables,
|
119
|
+
gridAxesTransform$,
|
120
|
+
gridAxesReverseTransform$,
|
121
|
+
gridContainerPosition$,
|
122
|
+
}
|
123
|
+
})
|
124
|
+
})
|
125
|
+
)
|
126
|
+
|
127
|
+
multiGridPluginDetail$
|
128
|
+
.pipe(
|
129
|
+
takeUntil(destroy$)
|
130
|
+
)
|
131
|
+
.subscribe(data => {
|
132
|
+
// 每次重新計算時,清除之前的訂閱
|
133
|
+
unsubscribeFnArr.forEach(fn => fn())
|
134
|
+
|
135
|
+
selection.selectAll(`g.${gridClassName}`)
|
136
|
+
.data(data)
|
137
|
+
.join('g')
|
138
|
+
.attr('class', gridClassName)
|
139
|
+
.each((d, i, g) => {
|
140
|
+
if (i > 1) {
|
141
|
+
return
|
142
|
+
}
|
143
|
+
|
144
|
+
const gridSelection = d3.select(g[i])
|
145
|
+
|
146
|
+
unsubscribeFnArr[i] = createBaseValueAxis(pluginName, {
|
147
|
+
selection: gridSelection,
|
148
|
+
computedData$: i === 0 ? d.computedStackedData$ : d.computedData$, // 第一個圖軸計算疊加value的資料
|
149
|
+
fullParams$: observer.fullParams$.pipe(
|
150
|
+
map(fullParams => i === 0 ? fullParams.firstAxis : fullParams.secondAxis)
|
151
|
+
),
|
152
|
+
fullDataFormatter$: d.dataFormatter$,
|
153
|
+
fullChartParams$: observer.fullChartParams$,
|
154
|
+
gridAxesTransform$: d.gridAxesTransform$,
|
155
|
+
gridAxesReverseTransform$: d.gridAxesReverseTransform$,
|
156
|
+
gridAxesSize$: d.gridAxesSize$,
|
157
|
+
gridContainerPosition$: d.gridContainerPosition$,
|
158
|
+
isSeriesSeprate$: d.isSeriesSeprate$,
|
159
|
+
})
|
160
|
+
})
|
161
|
+
})
|
162
|
+
|
163
|
+
return () => {
|
164
|
+
destroy$.next(undefined)
|
165
|
+
unsubscribeFnArr.forEach(fn => fn())
|
166
|
+
}
|
167
|
+
})
|
package/src/multiGrid/types.ts
CHANGED
@@ -36,6 +36,10 @@ export interface MultiValueAxisParams extends BaseValueAxisParams {
|
|
36
36
|
gridIndexes: number[]
|
37
37
|
}
|
38
38
|
|
39
|
+
export interface MultiValueStackAxisParams extends BaseValueAxisParams {
|
40
|
+
gridIndexes: number[]
|
41
|
+
}
|
42
|
+
|
39
43
|
export interface MultiBarsParams extends BaseBarsParams {
|
40
44
|
gridIndexes: number[]
|
41
45
|
}
|
package/src/series/defaults.ts
CHANGED
@@ -4,6 +4,8 @@ import type {
|
|
4
4
|
PieParams,
|
5
5
|
PieEventTextsParams,
|
6
6
|
PieLabelsParams,
|
7
|
+
RoseParams,
|
8
|
+
RoseLabelsParams,
|
7
9
|
SeriesLegendParams } from './types'
|
8
10
|
|
9
11
|
|
@@ -19,7 +21,7 @@ export const DEFAULT_BUBBLES_PARAMS: BubblesParams = {
|
|
19
21
|
lineLengthMin: 4
|
20
22
|
},
|
21
23
|
highlightRIncrease: 0,
|
22
|
-
|
24
|
+
arcScaleType: 'area'
|
23
25
|
}
|
24
26
|
|
25
27
|
export const DEFAULT_PIE_PARAMS: PieParams = {
|
@@ -31,9 +33,9 @@ export const DEFAULT_PIE_PARAMS: PieParams = {
|
|
31
33
|
// },
|
32
34
|
outerRadius: 0.95,
|
33
35
|
innerRadius: 0,
|
34
|
-
|
36
|
+
mouseoverOuterRadius: 1,
|
35
37
|
// label?: LabelStyle
|
36
|
-
enterDuration: 800,
|
38
|
+
// enterDuration: 800,
|
37
39
|
startAngle: 0,
|
38
40
|
endAngle: Math.PI * 2,
|
39
41
|
padAngle: 0.02,
|
@@ -82,7 +84,7 @@ export const DEFAULT_PIE_LABELS_PARAMS: PieLabelsParams = {
|
|
82
84
|
// solidColor: undefined,
|
83
85
|
// colors: DEFAULT_COLORS,
|
84
86
|
outerRadius: 0.95,
|
85
|
-
|
87
|
+
mouseoverOuterRadius: 1,
|
86
88
|
// innerRadius: 0,
|
87
89
|
// enterDuration: 800,
|
88
90
|
startAngle: 0,
|
@@ -90,7 +92,22 @@ export const DEFAULT_PIE_LABELS_PARAMS: PieLabelsParams = {
|
|
90
92
|
labelCentroid: 2.3,
|
91
93
|
// fontSize: 12,
|
92
94
|
labelColorType: 'series',
|
93
|
-
labelFn: d => String(d.
|
95
|
+
labelFn: d => String(d.label),
|
96
|
+
}
|
97
|
+
|
98
|
+
export const DEFAULT_ROSE_PARAMS: RoseParams = {
|
99
|
+
outerRadius: 0.95,
|
100
|
+
cornerRadius: 0,
|
101
|
+
arcScaleType: 'area',
|
102
|
+
mouseoverAngleIncrease: 0.05
|
103
|
+
}
|
104
|
+
|
105
|
+
export const DEFAULT_ROSE_LABELS_PARAMS: RoseLabelsParams = {
|
106
|
+
outerRadius: 0.95,
|
107
|
+
labelCentroid: 2.5,
|
108
|
+
labelFn: d => String(d.label),
|
109
|
+
labelColorType: 'series',
|
110
|
+
arcScaleType: 'area'
|
94
111
|
}
|
95
112
|
|
96
113
|
export const DEFAULT_SERIES_LEGEND_PARAMS: SeriesLegendParams = {
|
package/src/series/index.ts
CHANGED
@@ -4,4 +4,6 @@ export { Bubbles } from './plugins/Bubbles'
|
|
4
4
|
export { Pie } from './plugins/Pie'
|
5
5
|
export { PieEventTexts } from './plugins/PieEventTexts'
|
6
6
|
export { PieLabels } from './plugins/PieLabels'
|
7
|
-
export {
|
7
|
+
export { Rose } from './plugins/Rose'
|
8
|
+
export { RoseLabels } from './plugins/RoseLabels'
|
9
|
+
export { SeriesLegend } from './plugins/SeriesLegend'
|
@@ -18,7 +18,7 @@ import type {
|
|
18
18
|
SeriesContainerPosition } from '@orbcharts/core'
|
19
19
|
import {
|
20
20
|
defineSeriesPlugin } from '@orbcharts/core'
|
21
|
-
import type { BubblesParams,
|
21
|
+
import type { BubblesParams, ArcScaleType } from '../types'
|
22
22
|
import { DEFAULT_BUBBLES_PARAMS } from '../defaults'
|
23
23
|
import { renderCircleText } from '../../utils/d3Graphics'
|
24
24
|
|
@@ -80,7 +80,7 @@ function getMaxR ({ data, bubbleGroupR, maxValue, avgValue }: {
|
|
80
80
|
const maxSize = maxValue * sizeRate
|
81
81
|
const maxR = Math.pow(maxSize / Math.PI, 0.5)
|
82
82
|
|
83
|
-
const modifier = 0.
|
83
|
+
const modifier = 0.785 // @Q@ 因為以下公式是假設泡泡是正方型來計算,所以畫出來的圖會偏大一些,這個數值是用來修正用的
|
84
84
|
return maxR * modifier
|
85
85
|
}
|
86
86
|
|
@@ -90,7 +90,7 @@ function createBubblesData ({ data, LastBubbleDataMap, graphicWidth, graphicHeig
|
|
90
90
|
graphicWidth: number
|
91
91
|
graphicHeight: number
|
92
92
|
SeriesContainerPositionMap: Map<string, SeriesContainerPosition>
|
93
|
-
scaleType:
|
93
|
+
scaleType: ArcScaleType
|
94
94
|
// highlightIds: string[]
|
95
95
|
}) {
|
96
96
|
const bubbleGroupR = Math.min(...[graphicWidth, graphicHeight]) / 2
|
@@ -392,7 +392,7 @@ export const Bubbles = defineSeriesPlugin('Bubbles', DEFAULT_BUBBLES_PARAMS)(({
|
|
392
392
|
|
393
393
|
const scaleType$ = observer.fullParams$.pipe(
|
394
394
|
takeUntil(destroy$),
|
395
|
-
map(d => d.
|
395
|
+
map(d => d.arcScaleType),
|
396
396
|
distinctUntilChanged()
|
397
397
|
)
|
398
398
|
|
@@ -162,7 +162,7 @@ function highlight ({ pathSelection, ids, fullChartParams, arc, arcMouseover }:
|
|
162
162
|
function createEachPie (pluginName: string, context: {
|
163
163
|
containerSelection: d3.Selection<SVGGElement, any, any, unknown>
|
164
164
|
computedData$: Observable<ComputedDatumSeries[][]>
|
165
|
-
|
165
|
+
containerVisibleComputedLayoutData$: Observable<ComputedDatumSeries[]>
|
166
166
|
SeriesDataMap$: Observable<Map<string, ComputedDatumSeries[]>>
|
167
167
|
fullParams$: Observable<PieParams>
|
168
168
|
fullChartParams$: Observable<ChartParams>
|
@@ -199,12 +199,13 @@ function createEachPie (pluginName: string, context: {
|
|
199
199
|
|
200
200
|
const shorterSideWith$ = context.seriesContainerPosition$.pipe(
|
201
201
|
takeUntil(destroy$),
|
202
|
-
map(d => d.width < d.height ? d.width : d.height)
|
202
|
+
map(d => d.width < d.height ? d.width : d.height),
|
203
|
+
distinctUntilChanged()
|
203
204
|
)
|
204
205
|
|
205
206
|
const pieData$: Observable<PieDatum[]> = new Observable(subscriber => {
|
206
207
|
combineLatest({
|
207
|
-
|
208
|
+
containerVisibleComputedLayoutData: context.containerVisibleComputedLayoutData$,
|
208
209
|
fullParams: context.fullParams$,
|
209
210
|
}).pipe(
|
210
211
|
takeUntil(destroy$),
|
@@ -212,7 +213,7 @@ function createEachPie (pluginName: string, context: {
|
|
212
213
|
).subscribe(data => {
|
213
214
|
// console.log('pieData', data)
|
214
215
|
const pieData: PieDatum[] = makePieData({
|
215
|
-
data: data.
|
216
|
+
data: data.containerVisibleComputedLayoutData,
|
216
217
|
startAngle: data.fullParams.startAngle,
|
217
218
|
endAngle: data.fullParams.endAngle
|
218
219
|
})
|
@@ -256,7 +257,7 @@ function createEachPie (pluginName: string, context: {
|
|
256
257
|
const arcMouseover = makeD3Arc({
|
257
258
|
axisWidth: data.shorterSideWith,
|
258
259
|
innerRadius: data.fullParams.innerRadius,
|
259
|
-
outerRadius: data.fullParams.
|
260
|
+
outerRadius: data.fullParams.mouseoverOuterRadius, // 外半徑變化
|
260
261
|
padAngle: data.fullParams.padAngle,
|
261
262
|
cornerRadius: data.fullParams.cornerRadius
|
262
263
|
})
|
@@ -385,16 +386,16 @@ function createEachPie (pluginName: string, context: {
|
|
385
386
|
})
|
386
387
|
|
387
388
|
// -- 更新資料 --
|
388
|
-
if (!enter.size() && update.size() > 0) {
|
389
|
-
|
390
|
-
|
391
|
-
|
392
|
-
|
393
|
-
|
394
|
-
|
395
|
-
|
396
|
-
|
397
|
-
}
|
389
|
+
// if (!enter.size() && update.size() > 0) {
|
390
|
+
// // console.log('test')
|
391
|
+
// const pathSelection = renderPie({
|
392
|
+
// selection: context.containerSelection,
|
393
|
+
// data: data.pieData,
|
394
|
+
// arc: data.arc,
|
395
|
+
// pathClassName
|
396
|
+
// })
|
397
|
+
// subscriber.next(pathSelection)
|
398
|
+
// }
|
398
399
|
})
|
399
400
|
}).pipe(
|
400
401
|
shareReplay(1)
|
@@ -544,7 +545,7 @@ export const Pie = defineSeriesPlugin(pluginName, DEFAULT_PIE_PARAMS)(({ selecti
|
|
544
545
|
// console.log('containerIndex', containerIndex)
|
545
546
|
const containerSelection = d3.select(g[containerIndex])
|
546
547
|
|
547
|
-
const
|
548
|
+
const containerVisibleComputedLayoutData$ = observer.visibleComputedLayoutData$.pipe(
|
548
549
|
takeUntil(destroy$),
|
549
550
|
map(data => data[containerIndex] ?? data[0])
|
550
551
|
)
|
@@ -557,7 +558,7 @@ export const Pie = defineSeriesPlugin(pluginName, DEFAULT_PIE_PARAMS)(({ selecti
|
|
557
558
|
unsubscribeFnArr[containerIndex] = createEachPie(pluginName, {
|
558
559
|
containerSelection: containerSelection,
|
559
560
|
computedData$: observer.computedData$,
|
560
|
-
|
561
|
+
containerVisibleComputedLayoutData$: containerVisibleComputedLayoutData$,
|
561
562
|
SeriesDataMap$: observer.SeriesDataMap$,
|
562
563
|
fullParams$: observer.fullParams$,
|
563
564
|
fullChartParams$: observer.fullChartParams$,
|
@@ -6,6 +6,7 @@ import {
|
|
6
6
|
map,
|
7
7
|
takeUntil,
|
8
8
|
Observable,
|
9
|
+
distinctUntilChanged,
|
9
10
|
Subject,
|
10
11
|
BehaviorSubject } from 'rxjs'
|
11
12
|
import {
|
@@ -160,7 +161,7 @@ function highlight ({ labelSelection, ids, fullChartParams }: {
|
|
160
161
|
function createEachPieLabel (pluginName: string, context: {
|
161
162
|
containerSelection: d3.Selection<SVGGElement, any, any, unknown>
|
162
163
|
// computedData$: Observable<ComputedDatumSeries[][]>
|
163
|
-
|
164
|
+
containerVisibleComputedLayoutData$: Observable<ComputedDatumSeries[]>
|
164
165
|
// SeriesDataMap$: Observable<Map<string, ComputedDatumSeries[]>>
|
165
166
|
fullParams$: Observable<PieLabelsParams>
|
166
167
|
fullChartParams$: Observable<ChartParams>
|
@@ -173,52 +174,16 @@ function createEachPieLabel (pluginName: string, context: {
|
|
173
174
|
// const graphicSelection: d3.Selection<SVGGElement, any, any, any> = selection.append('g')
|
174
175
|
let labelSelection$: Subject<d3.Selection<SVGPathElement, RenderDatum, any, any>> = new Subject()
|
175
176
|
let renderData: RenderDatum[] = []
|
176
|
-
// let highlightTarget: HighlightTarget | undefined
|
177
|
-
// let fullChartParams: ChartParams | undefined
|
178
|
-
|
179
|
-
// observer.layout$
|
180
|
-
// .pipe(
|
181
|
-
// first()
|
182
|
-
// )
|
183
|
-
// .subscribe(size => {
|
184
|
-
// selection
|
185
|
-
// .attr('transform', `translate(${size.width / 2}, ${size.height / 2})`)
|
186
|
-
// observer.layout$
|
187
|
-
// .pipe(
|
188
|
-
// takeUntil(destroy$)
|
189
|
-
// )
|
190
|
-
// .subscribe(size => {
|
191
|
-
// selection
|
192
|
-
// .transition()
|
193
|
-
// .attr('transform', `translate(${size.width / 2}, ${size.height / 2})`)
|
194
|
-
// })
|
195
|
-
// })
|
196
|
-
|
197
177
|
|
198
|
-
|
199
|
-
|
200
|
-
|
201
|
-
|
202
|
-
|
203
|
-
// // 轉換後會退訂前一個未完成的訂閱事件,因此可以取到「同時間」最後一次的訂閱事件
|
204
|
-
// switchMap(async (d) => d),
|
205
|
-
// ).subscribe(d => {
|
206
|
-
// if (d.event.eventName === 'mouseover' && d.event.datum) {
|
207
|
-
// highlight({
|
208
|
-
// labelSelection,
|
209
|
-
// data: renderData,
|
210
|
-
// id: d.fullChartParams.highlightTarget === 'datum' ? d.event.datum!.id : undefined,
|
211
|
-
// label: d.fullChartParams.highlightTarget === 'series' ? d.event.datum!.label : undefined,
|
212
|
-
// fullChartParams: d.fullChartParams
|
213
|
-
// })
|
214
|
-
// } else if (d.event.eventName === 'mouseout') {
|
215
|
-
// removeHighlight({ labelSelection })
|
216
|
-
// }
|
217
|
-
// })
|
178
|
+
const shorterSideWith$ = context.seriesContainerPosition$.pipe(
|
179
|
+
takeUntil(destroy$),
|
180
|
+
map(d => d.width < d.height ? d.width : d.height),
|
181
|
+
distinctUntilChanged()
|
182
|
+
)
|
218
183
|
|
219
184
|
combineLatest({
|
220
|
-
|
221
|
-
|
185
|
+
shorterSideWith: shorterSideWith$,
|
186
|
+
containerVisibleComputedLayoutData: context.containerVisibleComputedLayoutData$,
|
222
187
|
fullParams: context.fullParams$,
|
223
188
|
fullChartParams: context.fullChartParams$
|
224
189
|
}).pipe(
|
@@ -226,11 +191,11 @@ function createEachPieLabel (pluginName: string, context: {
|
|
226
191
|
switchMap(async (d) => d),
|
227
192
|
).subscribe(data => {
|
228
193
|
|
229
|
-
const shorterSideWith = data.layout.width < data.layout.height ? data.layout.width : data.layout.height
|
194
|
+
// const shorterSideWith = data.layout.width < data.layout.height ? data.layout.width : data.layout.height
|
230
195
|
|
231
196
|
// 弧產生器 (d3.arc())
|
232
197
|
const arc = makeD3Arc({
|
233
|
-
axisWidth: shorterSideWith,
|
198
|
+
axisWidth: data.shorterSideWith,
|
234
199
|
innerRadius: 0,
|
235
200
|
outerRadius: data.fullParams.outerRadius,
|
236
201
|
padAngle: 0,
|
@@ -238,15 +203,15 @@ function createEachPieLabel (pluginName: string, context: {
|
|
238
203
|
})
|
239
204
|
|
240
205
|
const arcMouseover = makeD3Arc({
|
241
|
-
axisWidth: shorterSideWith,
|
206
|
+
axisWidth: data.shorterSideWith,
|
242
207
|
innerRadius: 0,
|
243
|
-
outerRadius: data.fullParams.
|
208
|
+
outerRadius: data.fullParams.mouseoverOuterRadius, // 外半徑變化
|
244
209
|
padAngle: 0,
|
245
210
|
cornerRadius: 0
|
246
211
|
})
|
247
212
|
|
248
213
|
const pieData = makePieData({
|
249
|
-
data: data.
|
214
|
+
data: data.containerVisibleComputedLayoutData,
|
250
215
|
startAngle: data.fullParams.startAngle,
|
251
216
|
endAngle: data.fullParams.endAngle
|
252
217
|
})
|
@@ -308,7 +273,7 @@ export const PieLabels = defineSeriesPlugin(pluginName, DEFAULT_PIE_LABELS_PARAM
|
|
308
273
|
|
309
274
|
const containerSelection = d3.select(g[containerIndex])
|
310
275
|
|
311
|
-
const
|
276
|
+
const containerVisibleComputedLayoutData$ = observer.visibleComputedLayoutData$.pipe(
|
312
277
|
takeUntil(destroy$),
|
313
278
|
map(data => data[containerIndex] ?? data[0])
|
314
279
|
)
|
@@ -321,7 +286,7 @@ export const PieLabels = defineSeriesPlugin(pluginName, DEFAULT_PIE_LABELS_PARAM
|
|
321
286
|
unsubscribeFnArr[containerIndex] = createEachPieLabel(pluginName, {
|
322
287
|
containerSelection: containerSelection,
|
323
288
|
// computedData$: observer.computedData$,
|
324
|
-
|
289
|
+
containerVisibleComputedLayoutData$: containerVisibleComputedLayoutData$,
|
325
290
|
// SeriesDataMap$: observer.SeriesDataMap$,
|
326
291
|
fullParams$: observer.fullParams$,
|
327
292
|
fullChartParams$: observer.fullChartParams$,
|