@orbcharts/plugins-basic 3.0.0-alpha.30 → 3.0.0-alpha.32

package/src/multiGrid/plugins/BarsAndLines.ts

@@ -0,0 +1,110 @@
+import {
+  combineLatest,
+  map,
+  switchMap,
+  takeUntil,
+  Subject,
+  Observable } from 'rxjs'
+import {
+  defineMultiGridPlugin } from '@orbcharts/core'
+// import { defineMultiGridPlugin } from '../../../../orbcharts-core/src'
+import { getClassName, getUniID } from '../../utils/orbchartsUtils'
+import { DEFAULT_BARS_AND_LINES_PARAMS } from '../defaults'
+import { createBaseBars } from '../../base/BaseBars'
+import { createBaseLines } from '../../base/BaseLines'
+
+const pluginName = 'BarsAndLines'
+const barsClassName = getClassName(pluginName, 'bars')
+const linesClassName = getClassName(pluginName, 'lines')
+
+export const BarsAndLines = defineMultiGridPlugin(pluginName, DEFAULT_BARS_AND_LINES_PARAMS)(({ selection, name, subject, observer }) => {
+  const destroy$ = new Subject()
+
+  const barsSelection = selection.append('g').attr('class', barsClassName)
+  const linesSelection = selection.append('g').attr('class', linesClassName)
+
+  let unsubscribeBaseBars = () => {}
+  let unsubscribeBaseLines = () => {}
+
+  // combineLatest({
+  //   fullParams: observer.fullParams$,
+  //   fullChartParams: observer.fullChartParams$,
+  //   computedData: observer.computedData$,
+  //   event: subject.event$,
+  //   multiGrid: observer.multiGrid$,
+  // }).pipe(
+  //   takeUntil(destroy$),
+  //   switchMap(async d => d)
+  // ).subscribe(data => {
+    
+  // })
+
+  const barsComputedData$ = observer.computedData$.pipe(
+    map((computedData) => computedData[0] || [])
+  )
+
+  const linesComputedData$ = observer.computedData$.pipe(
+    map((computedData) => computedData[1] || [])
+  )
+
+  const barsFullParams$ = observer.fullParams$.pipe(
+    map((fullParams) => fullParams.bars)
+  )
+
+  const linesFullParams$ = observer.fullParams$.pipe(
+    map((fullParams) => fullParams.lines)
+  )
+
+  const linesFullDataFormatter$ = observer.fullDataFormatter$.pipe(
+    map((fullDataFormatter) => fullDataFormatter.multiGrid[1])
+  )
+
+  observer.multiGrid$.subscribe((multiGrid) => {
+    // bars
+    if (multiGrid[0]) {
+      unsubscribeBaseBars = createBaseBars(pluginName, {
+        selection: barsSelection,
+        computedData$: barsComputedData$,
+        visibleComputedData$: multiGrid[0].visibleComputedData$,
+        SeriesDataMap$: multiGrid[0].SeriesDataMap$,
+        GroupDataMap$: multiGrid[0].GroupDataMap$,
+        fullParams$: barsFullParams$,
+        fullChartParams$: observer.fullChartParams$,
+        gridAxesTransform$: multiGrid[0].gridAxesTransform$,
+        gridGraphicTransform$: multiGrid[0].gridGraphicTransform$,
+        gridAxesSize$: multiGrid[0].gridAxesSize$,
+        gridHighlight$: multiGrid[0].gridHighlight$,
+        event$: subject.event$ as Subject<any>,
+      })
+    } else {
+      unsubscribeBaseBars()
+    }
+    // lines
+    if (multiGrid[1]) {
+      unsubscribeBaseLines = createBaseLines(pluginName, {
+        selection: linesSelection,
+        computedData$: linesComputedData$,
+        SeriesDataMap$: multiGrid[1].SeriesDataMap$,
+        GroupDataMap$: multiGrid[1].GroupDataMap$,
+        fullParams$: linesFullParams$,
+        fullDataFormatter$: linesFullDataFormatter$,
+        fullChartParams$: observer.fullChartParams$,
+        gridAxesTransform$: multiGrid[1].gridAxesTransform$,
+        gridGraphicTransform$: multiGrid[1].gridGraphicTransform$,
+        gridAxesSize$: multiGrid[1].gridAxesSize$,
+        gridHighlight$: multiGrid[1].gridHighlight$,
+        event$: subject.event$ as Subject<any>,
+      })
+    } else {
+      unsubscribeBaseLines()
+    }
+  })
+
+  
+
+  return () => {
+    destroy$.next(undefined)
+    unsubscribeBaseBars()
+    unsubscribeBaseLines()
+  }
+})

package/src/multiGrid/plugins/MultiGridLegend.ts

@@ -0,0 +1,89 @@
+import * as d3 from 'd3'
+import {
+  combineLatest,
+  map,
+  switchMap,
+  takeUntil,
+  Observable,
+  Subject } from 'rxjs'
+import {
+  defineMultiGridPlugin } from '@orbcharts/core'
+import { DEFAULT_MULTI_GRID_LEGEND_PARAMS } from '../defaults'
+import { createBaseLegend } from '../../base/BaseLegend'
+import type { BaseLegendParams } from '../../base/BaseLegend'
+
+const pluginName = 'MultiGridLegend'
+
+export const MultiGridLegend = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_GRID_LEGEND_PARAMS)(({ selection, rootSelection, observer, subject }) => {
+  
+  const destroy$ = new Subject()
+
+  const seriesLabels$ = observer.multiGrid$.pipe(
+    takeUntil(destroy$),
+    map(multiGrid => {
+      const seriesLabelsObservableArr = multiGrid.map((grid, gridIndex) => {
+        return grid.SeriesDataMap$.pipe(
+          // grid內的seriesLabels
+          map(seriesDataMap => Array.from(seriesDataMap.keys()))
+        )
+      })
+      return seriesLabelsObservableArr
+    }),
+    switchMap(seriesLabelsObservableArr => combineLatest(seriesLabelsObservableArr)),
+    map(data => data.flat())
+  )
+
+  const seriesList$ = combineLatest({
+    fullParams: observer.fullParams$,
+    multiGrid: observer.multiGrid$,
+    computedData: observer.computedData$,
+  }).pipe(
+    takeUntil(destroy$),
+    switchMap(async d => d),
+    map(data => {
+      // grid
+      return data.computedData
+        .map((gridData, gridIndex) => {
+          // 這個grid全部series要套用的圖例列點樣式
+          const gridListStyle = data.fullParams.gridList[gridIndex]
+            ? data.fullParams.gridList[gridIndex]
+            : {
+              listRectWidth: data.fullParams.listRectWidth,
+              listRectHeight: data.fullParams.listRectHeight,
+              listRectRadius: data.fullParams.listRectRadius,
+            }
+          // series
+          return gridData.map(d => gridListStyle)
+        })
+        .flat()
+
+    })
+  )
+
+  const fullParams$: Observable<BaseLegendParams> = combineLatest({
+    fullParams: observer.fullParams$,
+    seriesList: seriesList$
+  }).pipe(
+    takeUntil(destroy$),
+    map(d => {
+      return {
+        ...d.fullParams,
+        seriesList: d.seriesList
+      }
+    })
+  )
+
+  const unsubscribeBaseLegend = createBaseLegend(pluginName, {
+    rootSelection,
+    seriesLabels$,
+    fullParams$,
+    layout$: observer.layout$,
+    fullChartParams$: observer.fullChartParams$
+  })
+
+  return () => {
+    destroy$.next(undefined)
+    unsubscribeBaseLegend()
+  }
+})
+

package/src/multiGrid/types.ts

@@ -0,0 +1,27 @@
+import type { BaseBarsParams } from '../base/BaseBars'
+import type { BaseLinesParams } from '../base/BaseLines'
+import type {
+  ChartParams, Layout, ColorType } from '@orbcharts/core'
+
+export interface BarsAndLinesParams {
+  bars: BaseBarsParams
+  lines: BaseLinesParams
+}
+
+export interface MultiGridLegendParams {
+  position: 'top' | 'bottom' | 'left' | 'right'
+  justify: 'start' | 'center' | 'end'
+  padding: number
+  backgroundFill: ColorType
+  backgroundStroke: ColorType
+  gap: number
+  listRectWidth: number
+  listRectHeight: number
+  listRectRadius: number
+  // 可針對各grid設定，覆蓋全域設定
+  gridList: Array<{
+    listRectWidth: number
+    listRectHeight: number
+    listRectRadius: number
+  }>
+}

package/src/series/defaults.ts

@@ -7,7 +7,7 @@ import type {
   SeriesLegendParams } from './types'
 
   
-export const DEFAULT_BUBBLES_PLUGIN_PARAMS: BubblesParams = {
+export const DEFAULT_BUBBLES_PARAMS: BubblesParams = {
   force: {
     strength: 0.03, // 泡泡引力
     velocityDecay: 0.2, // 衰減數
@@ -22,7 +22,7 @@ export const DEFAULT_BUBBLES_PLUGIN_PARAMS: BubblesParams = {
   bubbleScaleType: 'area'
 }
 
-export const DEFAULT_PIE_PLUGIN_PARAMS: PieParams = {
+export const DEFAULT_PIE_PARAMS: PieParams = {
   // padding: {
   //   top: 50,
   //   right: 70,

package/src/series/plugins/Bubbles.ts

@@ -18,7 +18,7 @@ import type {
 import {
   defineSeriesPlugin } from '@orbcharts/core'
 import type { BubblesParams, BubbleScaleType } from '../types'
-import { DEFAULT_BUBBLES_PLUGIN_PARAMS } from '../defaults'
+import { DEFAULT_BUBBLES_PARAMS } from '../defaults'
 import { renderCircleText } from '../../utils/d3Graphics'
 
 interface BubblesDatum extends ComputedDatumSeries {
@@ -298,7 +298,7 @@ function highlight ({ bubblesSelection, highlightIds, fullChartParams }: {
   })
 }
 
-export const Bubbles = defineSeriesPlugin('Bubbles', DEFAULT_BUBBLES_PLUGIN_PARAMS)(({ selection, name, observer, subject }) => {
+export const Bubbles = defineSeriesPlugin('Bubbles', DEFAULT_BUBBLES_PARAMS)(({ selection, name, observer, subject }) => {
   
   const destroy$ = new Subject()
 

package/src/series/plugins/Pie.ts

@@ -19,7 +19,7 @@ import type {
   ChartParams } from '@orbcharts/core'
 import type { PieParams } from '../types'
 import type { PieDatum } from '../seriesUtils'
-import { DEFAULT_PIE_PLUGIN_PARAMS } from '../defaults'
+import { DEFAULT_PIE_PARAMS } from '../defaults'
 import { makePieData } from '../seriesUtils'
 import { getD3TransitionEase, makeD3Arc } from '../../utils/d3Utils'
 import { getClassName } from '../../utils/orbchartsUtils'
@@ -163,7 +163,7 @@ function highlight ({ pathSelection, ids, fullChartParams, arc, arcMouseover }:
 }
 
 
-export const Pie = defineSeriesPlugin(pluginName, DEFAULT_PIE_PLUGIN_PARAMS)(({ selection, name, observer, subject }) => {
+export const Pie = defineSeriesPlugin(pluginName, DEFAULT_PIE_PARAMS)(({ selection, name, observer, subject }) => {
   
   const destroy$ = new Subject()
 

package/src/series/plugins/SeriesLegend.ts

@@ -24,10 +24,28 @@ export const SeriesLegend = defineSeriesPlugin(pluginName, DEFAULT_SERIES_LEGEND
     })
   )
 
+  // 全部列點矩型使用相同樣式參數
+  const fullParams$ = observer.fullParams$.pipe(
+    takeUntil(destroy$),
+    map(d => {
+      const seriesList = [
+        {
+          listRectWidth: d.listRectWidth,
+          listRectHeight: d.listRectHeight,
+          listRectRadius: d.listRectRadius,
+        }
+      ]
+      return {
+        ...d,
+        seriesList
+      }
+    })
+  )
+
   const unsubscribeBaseLegend = createBaseLegend(pluginName, {
     rootSelection,
     seriesLabels$,
-    fullParams$: observer.fullParams$,
+    fullParams$,
     layout$: observer.layout$,
     fullChartParams$: observer.fullChartParams$
   })

package/src/series/types.ts

@@ -1,5 +1,5 @@
 import type { ComputedDatumSeries, EventSeries, EventName, ColorType } from '@orbcharts/core'
-import type { BaseLegendParams } from '../base/BaseLegend'
+// import type { BaseLegendParams } from '../base/BaseLegend'
 
 export type BubbleScaleType = 'area' | 'radius'
 
@@ -53,4 +53,14 @@ export interface PieLabelsParams {
   labelColorType: ColorType
 }
 
-export interface SeriesLegendParams extends BaseLegendParams {}
+export interface SeriesLegendParams {
+  position: 'top' | 'bottom' | 'left' | 'right'
+  justify: 'start' | 'center' | 'end'
+  padding: number
+  backgroundFill: ColorType
+  backgroundStroke: ColorType
+  gap: number
+  listRectWidth: number
+  listRectHeight: number
+  listRectRadius: number
+}