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

package/dist/src/grid/defaults.d.ts

@@ -4,6 +4,7 @@ export declare const DEFAULT_LINES_PARAMS: LinesParams;
 export declare const DEFAULT_DOTS_PARAMS: DotsParams;
 export declare const DEFAULT_GROUP_AREA_PARAMS: GroupAuxParams;
 export declare const DEFAULT_BARS_PARAMS: BarsParams;
+export declare const DEFAULT_BARS_DIVERGING_PARAMS: BarsParams;
 export declare const DEFAULT_BAR_STACK_PARAMS: BarStackParams;
 export declare const DEFAULT_BARS_TRIANGLE_PARAMS: BarsTriangleParams;
 export declare const DEFAULT_GROUP_AXIS_PARAMS: GroupAxisParams;

package/dist/src/grid/index.d.ts

@@ -2,6 +2,7 @@ export * from './defaults';
 export * from './types';
 export { Lines } from './plugins/Lines';
 export { Bars } from './plugins/Bars';
+export { BarsDiverging } from './plugins/BarsDiverging';
 export { BarStack } from './plugins/BarStack';
 export { BarsTriangle } from './plugins/BarsTriangle';
 export { Dots } from './plugins/Dots';

package/dist/src/grid/plugins/BarsDiverging.d.ts

@@ -0,0 +1 @@
+export declare const BarsDiverging: import('@orbcharts/core').PluginConstructor<"grid", string, import('..').BarsParams>;

package/dist/src/grid/types.d.ts

@@ -27,6 +27,8 @@ export interface BarsParams {
     barGroupPadding: number;
     barRadius: number | boolean;
 }
+export interface BarsDivergingParams extends BarsParams {
+}
 export interface BarStackParams {
     barWidth: number;
     barGroupPadding: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orbcharts/plugins-basic",
-  "version": "3.0.0-alpha.35",
+  "version": "3.0.0-alpha.37",
   "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.36",
     "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/base/BaseValueAxis.ts

@@ -116,6 +116,10 @@ function renderLinearAxis ({ selection, yAxisClassName, textClassName, fullParam
 
   const valueLength = minAndMax[1] - minAndMax[0]
   
+  // const _valueScale = d3.scaleLinear()
+  //   .domain([0, 150])
+  //   .range([416.5, 791.349])
+
   // 設定Y軸刻度
   const yAxis = d3.axisLeft(valueScale)
     .scale(valueScale)
@@ -365,6 +369,7 @@ export const createBaseValueAxis: BasePluginFn<BaseLinesContext> = (pluginName:
       // 轉換後會退訂前一個未完成的訂閱事件，因此可以取到「同時間」最後一次的訂閱事件
       switchMap(async (d) => d),
     ).subscribe(data => {
+      console.log(data)
     
       const valueScale: d3.ScaleLinear<number, number> = createAxisLinearScale({
         maxValue: data.minAndMax[1],

package/src/grid/defaults.ts

@@ -43,6 +43,10 @@ export const DEFAULT_BARS_PARAMS: BarsParams = {
   barRadius: false,
 }
 
+export const DEFAULT_BARS_DIVERGING_PARAMS: BarsParams = {
+  ...DEFAULT_BARS_PARAMS
+}
+
 export const DEFAULT_BAR_STACK_PARAMS: BarStackParams = {
   barWidth: 0,
   barGroupPadding: 10,

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 {

package/src/grid/index.ts

@@ -2,6 +2,7 @@ export * from './defaults'
 export * from './types'
 export { Lines } from './plugins/Lines'
 export { Bars } from './plugins/Bars'
+export { BarsDiverging } from './plugins/BarsDiverging'
 export { BarStack } from './plugins/BarStack'
 export { BarsTriangle } from './plugins/BarsTriangle'
 export { Dots } from './plugins/Dots'

package/src/grid/plugins/BarsDiverging.ts

@@ -0,0 +1,39 @@
+import {
+  of,
+  Subject,
+  Observable } from 'rxjs'
+import {
+  defineGridPlugin } from '@orbcharts/core'
+import { DEFAULT_BARS_PARAMS } from '../defaults'
+import { createBaseBars } from '../../base/BaseBars'
+
+const pluginName = 'BarsDiverging'
+
+export const BarsDiverging = defineGridPlugin(pluginName, DEFAULT_BARS_PARAMS)(({ selection, name, subject, observer }) => {
+  const destroy$ = new Subject()
+
+  const unsubscribeBaseBars = createBaseBars(pluginName, {
+    selection,
+    computedData$: observer.computedData$,
+    visibleComputedData$: observer.visibleComputedData$,
+    existedSeriesLabels$: observer.existedSeriesLabels$,
+    SeriesDataMap$: observer.SeriesDataMap$,
+    GroupDataMap$: observer.GroupDataMap$,
+    fullParams$: observer.fullParams$,
+    fullChartParams$: observer.fullChartParams$,
+    gridAxesTransform$: observer.gridAxesTransform$,
+    gridGraphicTransform$: observer.gridGraphicTransform$,
+    gridGraphicReverseScale$: observer.gridGraphicReverseScale$,
+    gridAxesSize$: observer.gridAxesSize$,
+    gridHighlight$: observer.gridHighlight$,
+    gridContainer$: observer.gridContainer$,
+    // isSeriesPositionSeprate$: observer.isSeriesPositionSeprate$,
+    isSeriesPositionSeprate$: of(true), // hack: 永遠為true，可以強制讓每組series的bars的x位置都是一樣的
+    event$: subject.event$,
+  })
+
+  return () => {
+    destroy$.next(undefined)
+    unsubscribeBaseBars()
+  }
+})

package/src/grid/types.ts

@@ -43,6 +43,8 @@ export interface BarsParams {
   barRadius: number | boolean
 }
 
+export interface BarsDivergingParams extends BarsParams {}
+
 export interface BarStackParams {
   barWidth: number
   barGroupPadding: number