@orbcharts/plugins-basic 3.0.0-alpha.35 → 3.0.0-alpha.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orbcharts/plugins-basic",
-  "version": "3.0.0-alpha.35",
+  "version": "3.0.0-alpha.36",
   "description": "plugins for OrbCharts",
   "author": "Blue Planet Inc.",
   "license": "Apache-2.0",
@@ -35,7 +35,7 @@
     "vite-plugin-dts": "^3.7.3"
   },
   "dependencies": {
-    "@orbcharts/core": "^3.0.0-alpha.33",
+    "@orbcharts/core": "^3.0.0-alpha.35",
     "d3": "^7.8.5",
     "rxjs": "^7.8.1"
   }

package/src/base/BaseLegend.ts

@@ -4,6 +4,7 @@ import {
   map,
   switchMap,
   takeUntil,
+  shareReplay,
   Observable,
   Subject } from 'rxjs'
 import type { BasePluginFn } from './types'
@@ -111,6 +112,44 @@ export const createBaseLegend: BasePluginFn<BaseLegendContext> = (pluginName: st
   //   })
   // )
 
+  const SeriesLabelColorMap$ = combineLatest({
+    seriesLabels: seriesLabels$,
+    fullChartParams: fullChartParams$
+  }).pipe(
+    takeUntil(destroy$),
+    switchMap(async d => d),
+    map(data => {
+      const SeriesLabelColorMap: Map<string, string> = new Map()
+      let accIndex = 0
+      data.seriesLabels.forEach((label, i) => {
+        if (!SeriesLabelColorMap.has(label)) {
+          const color = getSeriesColor(accIndex, data.fullChartParams)
+          SeriesLabelColorMap.set(label, color)
+          accIndex ++
+        }
+      })
+      return SeriesLabelColorMap
+    })
+  )
+
+  // 對應seriesLabels是否顯示（只顯示不重覆的）
+  const visibleList$ = seriesLabels$.pipe(
+    takeUntil(destroy$),
+    map(data => {
+      const AccSeriesLabelSet = new Set()
+      let visibleList: boolean[] = []
+      data.forEach(d => {
+        if (AccSeriesLabelSet.has(d)) {
+          visibleList.push(false) // 已存在則不顯示
+        } else {
+          visibleList.push(true)
+        }
+        AccSeriesLabelSet.add(d) // 累加已存在的seriesLabel
+      })
+      return visibleList
+    })
+  )
+
   const lineDirection$ = fullParams$.pipe(
     takeUntil(destroy$),
     map(data => {
@@ -222,20 +261,28 @@ export const createBaseLegend: BasePluginFn<BaseLegendContext> = (pluginName: st
 
   // 先計算list內每個item
   const lengendItems$: Observable<LegendItem[][]> = combineLatest({
+    visibleList: visibleList$,
     fullParams: fullParams$,
     fullChartParams: fullChartParams$,
     seriesLabels: seriesLabels$,
     lineDirection: lineDirection$,
     lineMaxSize: lineMaxSize$,
-    defaultListStyle: defaultListStyle$
+    defaultListStyle: defaultListStyle$,
+    SeriesLabelColorMap: SeriesLabelColorMap$
   }).pipe(
     takeUntil(destroy$),
     switchMap(async d => d),
     map(data => {
       return data.seriesLabels.reduce((prev: LegendItem[][], current, currentIndex) => {
+        // visible為flase則不加入
+        if (!data.visibleList[currentIndex]) {
+          return prev
+        }
+        
         const textWidth = measureTextWidth(current, data.fullChartParams.styles.textSize)
         const itemWidth = (data.fullChartParams.styles.textSize * 1.5) + textWidth
-        const color = getSeriesColor(currentIndex, data.fullChartParams)
+        // const color = getSeriesColor(currentIndex, data.fullChartParams)
+        const color = data.SeriesLabelColorMap.get(current)
         const lastItem: LegendItem | null = prev[0] && prev[0][0]
           ? prev[prev.length - 1][prev[prev.length - 1].length - 1]
           : null
@@ -311,7 +358,8 @@ export const createBaseLegend: BasePluginFn<BaseLegendContext> = (pluginName: st
         
         return prev
       }, [])
-    })
+    }),
+    shareReplay(1)
   )
 
   // 依list計算出來的排序位置來計算整體容器的尺寸
@@ -353,14 +401,15 @@ export const createBaseLegend: BasePluginFn<BaseLegendContext> = (pluginName: st
         return { width, height }
       })(data, data.lengendItems)
 
-      return {
+      return <LegendList>{
         direction: data.lineDirection,
         width,
         height,
         translateX: data.fullParams.gap,
         translateY: data.fullParams.gap
       }
-    })
+    }),
+    shareReplay(1)
   )
 
   const legendCard$: Observable<LegendCard> = combineLatest({

package/src/grid/gridObservables.ts

@@ -1,5 +1,17 @@
 import * as d3 from 'd3'
-import { Observable, Subject, of, takeUntil, filter, map, switchMap, combineLatest, merge, distinctUntilChanged } from 'rxjs'
+import {
+  Observable,
+  Subject,
+  of,
+  takeUntil,
+  filter,
+  map,
+  switchMap,
+  combineLatest,
+  merge,
+  shareReplay,
+  distinctUntilChanged
+} from 'rxjs'
 import type {
   ChartParams,
   HighlightTarget,
@@ -82,7 +94,8 @@ export const gridSelectionsObservable = ({ selection, pluginName, clipPathID, ex
           return `translate(${translate[0]}, ${translate[1]}) scale(${scale[0]}, ${scale[1]})`
         })
       return data.seriesSelection
-    })
+    }),
+    shareReplay(1)
   )
 
   // combineLatest({
@@ -110,12 +123,14 @@ export const gridSelectionsObservable = ({ selection, pluginName, clipPathID, ex
       return data.seriesSelection
         .select<SVGGElement>(`g.${axesClassName}`)
         .style('transform', data.gridAxesTransform.value)
-    })
+    }),
+    shareReplay(1)
   )
   const defsSelection$ = axesSelection$.pipe(
     map(axesSelection => {
       return axesSelection.select<SVGDefsElement>('defs')
-    })
+    }),
+    shareReplay(1)
   )
   const graphicGSelection$ = combineLatest({
     axesSelection: axesSelection$,
@@ -130,7 +145,8 @@ export const gridSelectionsObservable = ({ selection, pluginName, clipPathID, ex
         .duration(50)
         .style('transform', data.gridGraphicTransform.value)
       return graphicGSelection
-    })
+    }),
+    shareReplay(1)
   )
 
   return {