@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.35",
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.33",
38
+ "@orbcharts/core": "^3.0.0-alpha.35",
39
39
  "d3": "^7.8.5",
40
40
  "rxjs": "^7.8.1"
41
41
  }
@@ -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 { Observable, Subject, of, takeUntil, filter, map, switchMap, combineLatest, merge, distinctUntilChanged } from 'rxjs'
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 {