@orbcharts/plugins-basic 3.0.0-alpha.35 → 3.0.0-alpha.36
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/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@orbcharts/plugins-basic",
|
3
|
-
"version": "3.0.0-alpha.
|
3
|
+
"version": "3.0.0-alpha.36",
|
4
4
|
"description": "plugins for OrbCharts",
|
5
5
|
"author": "Blue Planet Inc.",
|
6
6
|
"license": "Apache-2.0",
|
@@ -35,7 +35,7 @@
|
|
35
35
|
"vite-plugin-dts": "^3.7.3"
|
36
36
|
},
|
37
37
|
"dependencies": {
|
38
|
-
"@orbcharts/core": "^3.0.0-alpha.
|
38
|
+
"@orbcharts/core": "^3.0.0-alpha.35",
|
39
39
|
"d3": "^7.8.5",
|
40
40
|
"rxjs": "^7.8.1"
|
41
41
|
}
|
package/src/base/BaseLegend.ts
CHANGED
@@ -4,6 +4,7 @@ import {
|
|
4
4
|
map,
|
5
5
|
switchMap,
|
6
6
|
takeUntil,
|
7
|
+
shareReplay,
|
7
8
|
Observable,
|
8
9
|
Subject } from 'rxjs'
|
9
10
|
import type { BasePluginFn } from './types'
|
@@ -111,6 +112,44 @@ export const createBaseLegend: BasePluginFn<BaseLegendContext> = (pluginName: st
|
|
111
112
|
// })
|
112
113
|
// )
|
113
114
|
|
115
|
+
const SeriesLabelColorMap$ = combineLatest({
|
116
|
+
seriesLabels: seriesLabels$,
|
117
|
+
fullChartParams: fullChartParams$
|
118
|
+
}).pipe(
|
119
|
+
takeUntil(destroy$),
|
120
|
+
switchMap(async d => d),
|
121
|
+
map(data => {
|
122
|
+
const SeriesLabelColorMap: Map<string, string> = new Map()
|
123
|
+
let accIndex = 0
|
124
|
+
data.seriesLabels.forEach((label, i) => {
|
125
|
+
if (!SeriesLabelColorMap.has(label)) {
|
126
|
+
const color = getSeriesColor(accIndex, data.fullChartParams)
|
127
|
+
SeriesLabelColorMap.set(label, color)
|
128
|
+
accIndex ++
|
129
|
+
}
|
130
|
+
})
|
131
|
+
return SeriesLabelColorMap
|
132
|
+
})
|
133
|
+
)
|
134
|
+
|
135
|
+
// 對應seriesLabels是否顯示(只顯示不重覆的)
|
136
|
+
const visibleList$ = seriesLabels$.pipe(
|
137
|
+
takeUntil(destroy$),
|
138
|
+
map(data => {
|
139
|
+
const AccSeriesLabelSet = new Set()
|
140
|
+
let visibleList: boolean[] = []
|
141
|
+
data.forEach(d => {
|
142
|
+
if (AccSeriesLabelSet.has(d)) {
|
143
|
+
visibleList.push(false) // 已存在則不顯示
|
144
|
+
} else {
|
145
|
+
visibleList.push(true)
|
146
|
+
}
|
147
|
+
AccSeriesLabelSet.add(d) // 累加已存在的seriesLabel
|
148
|
+
})
|
149
|
+
return visibleList
|
150
|
+
})
|
151
|
+
)
|
152
|
+
|
114
153
|
const lineDirection$ = fullParams$.pipe(
|
115
154
|
takeUntil(destroy$),
|
116
155
|
map(data => {
|
@@ -222,20 +261,28 @@ export const createBaseLegend: BasePluginFn<BaseLegendContext> = (pluginName: st
|
|
222
261
|
|
223
262
|
// 先計算list內每個item
|
224
263
|
const lengendItems$: Observable<LegendItem[][]> = combineLatest({
|
264
|
+
visibleList: visibleList$,
|
225
265
|
fullParams: fullParams$,
|
226
266
|
fullChartParams: fullChartParams$,
|
227
267
|
seriesLabels: seriesLabels$,
|
228
268
|
lineDirection: lineDirection$,
|
229
269
|
lineMaxSize: lineMaxSize$,
|
230
|
-
defaultListStyle: defaultListStyle
|
270
|
+
defaultListStyle: defaultListStyle$,
|
271
|
+
SeriesLabelColorMap: SeriesLabelColorMap$
|
231
272
|
}).pipe(
|
232
273
|
takeUntil(destroy$),
|
233
274
|
switchMap(async d => d),
|
234
275
|
map(data => {
|
235
276
|
return data.seriesLabels.reduce((prev: LegendItem[][], current, currentIndex) => {
|
277
|
+
// visible為flase則不加入
|
278
|
+
if (!data.visibleList[currentIndex]) {
|
279
|
+
return prev
|
280
|
+
}
|
281
|
+
|
236
282
|
const textWidth = measureTextWidth(current, data.fullChartParams.styles.textSize)
|
237
283
|
const itemWidth = (data.fullChartParams.styles.textSize * 1.5) + textWidth
|
238
|
-
const color = getSeriesColor(currentIndex, data.fullChartParams)
|
284
|
+
// const color = getSeriesColor(currentIndex, data.fullChartParams)
|
285
|
+
const color = data.SeriesLabelColorMap.get(current)
|
239
286
|
const lastItem: LegendItem | null = prev[0] && prev[0][0]
|
240
287
|
? prev[prev.length - 1][prev[prev.length - 1].length - 1]
|
241
288
|
: null
|
@@ -311,7 +358,8 @@ export const createBaseLegend: BasePluginFn<BaseLegendContext> = (pluginName: st
|
|
311
358
|
|
312
359
|
return prev
|
313
360
|
}, [])
|
314
|
-
})
|
361
|
+
}),
|
362
|
+
shareReplay(1)
|
315
363
|
)
|
316
364
|
|
317
365
|
// 依list計算出來的排序位置來計算整體容器的尺寸
|
@@ -353,14 +401,15 @@ export const createBaseLegend: BasePluginFn<BaseLegendContext> = (pluginName: st
|
|
353
401
|
return { width, height }
|
354
402
|
})(data, data.lengendItems)
|
355
403
|
|
356
|
-
return {
|
404
|
+
return <LegendList>{
|
357
405
|
direction: data.lineDirection,
|
358
406
|
width,
|
359
407
|
height,
|
360
408
|
translateX: data.fullParams.gap,
|
361
409
|
translateY: data.fullParams.gap
|
362
410
|
}
|
363
|
-
})
|
411
|
+
}),
|
412
|
+
shareReplay(1)
|
364
413
|
)
|
365
414
|
|
366
415
|
const legendCard$: Observable<LegendCard> = combineLatest({
|
@@ -1,5 +1,17 @@
|
|
1
1
|
import * as d3 from 'd3'
|
2
|
-
import {
|
2
|
+
import {
|
3
|
+
Observable,
|
4
|
+
Subject,
|
5
|
+
of,
|
6
|
+
takeUntil,
|
7
|
+
filter,
|
8
|
+
map,
|
9
|
+
switchMap,
|
10
|
+
combineLatest,
|
11
|
+
merge,
|
12
|
+
shareReplay,
|
13
|
+
distinctUntilChanged
|
14
|
+
} from 'rxjs'
|
3
15
|
import type {
|
4
16
|
ChartParams,
|
5
17
|
HighlightTarget,
|
@@ -82,7 +94,8 @@ export const gridSelectionsObservable = ({ selection, pluginName, clipPathID, ex
|
|
82
94
|
return `translate(${translate[0]}, ${translate[1]}) scale(${scale[0]}, ${scale[1]})`
|
83
95
|
})
|
84
96
|
return data.seriesSelection
|
85
|
-
})
|
97
|
+
}),
|
98
|
+
shareReplay(1)
|
86
99
|
)
|
87
100
|
|
88
101
|
// combineLatest({
|
@@ -110,12 +123,14 @@ export const gridSelectionsObservable = ({ selection, pluginName, clipPathID, ex
|
|
110
123
|
return data.seriesSelection
|
111
124
|
.select<SVGGElement>(`g.${axesClassName}`)
|
112
125
|
.style('transform', data.gridAxesTransform.value)
|
113
|
-
})
|
126
|
+
}),
|
127
|
+
shareReplay(1)
|
114
128
|
)
|
115
129
|
const defsSelection$ = axesSelection$.pipe(
|
116
130
|
map(axesSelection => {
|
117
131
|
return axesSelection.select<SVGDefsElement>('defs')
|
118
|
-
})
|
132
|
+
}),
|
133
|
+
shareReplay(1)
|
119
134
|
)
|
120
135
|
const graphicGSelection$ = combineLatest({
|
121
136
|
axesSelection: axesSelection$,
|
@@ -130,7 +145,8 @@ export const gridSelectionsObservable = ({ selection, pluginName, clipPathID, ex
|
|
130
145
|
.duration(50)
|
131
146
|
.style('transform', data.gridGraphicTransform.value)
|
132
147
|
return graphicGSelection
|
133
|
-
})
|
148
|
+
}),
|
149
|
+
shareReplay(1)
|
134
150
|
)
|
135
151
|
|
136
152
|
return {
|