@orbcharts/plugins-basic 3.0.0-alpha.45 → 3.0.0-alpha.47

package/src/multiGrid/plugins/MultiBars.ts

@@ -1,73 +1,77 @@
-import * as d3 from 'd3'
-import {
-  Subject,
-  map,
-  distinctUntilChanged,
-  shareReplay,
-  takeUntil
-} from 'rxjs'
-import {
-  defineMultiGridPlugin } from '@orbcharts/core'
-import { DEFAULT_MULTI_BARS_PARAMS } from '../defaults'
-import { createBaseBars } from '../../base/BaseBars'
-import { multiGridPluginObservables } from '../multiGridObservables'
-import { getClassName, getUniID } from '../../utils/orbchartsUtils'
-
-const pluginName = 'MultiBars'
-
-const gridClassName = getClassName(pluginName, 'grid')
-
-export const MultiBars = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_BARS_PARAMS)(({ selection, name, subject, observer }) => {
-  const destroy$ = new Subject()
-
-  const unsubscribeFnArr: (() => void)[] = []
-
-  const multiGridPlugin$ = multiGridPluginObservables(observer)
-
-  multiGridPlugin$.subscribe(data => {
-    // 每次重新計算時，清除之前的訂閱
-    unsubscribeFnArr.forEach(fn => fn())
-
-    selection.selectAll(`g.${gridClassName}`)
-      .data(data)
-      .join('g')
-      .attr('class', gridClassName)
-      .each((d, i, g) => {
-
-        const gridSelection = d3.select(g[i])
-
-        const isSeriesSeprate$ = d.dataFormatter$.pipe(
-          takeUntil(destroy$),
-          map(d => d.grid.separateSeries),
-          distinctUntilChanged(),
-          shareReplay(1)
-        )
-
-        unsubscribeFnArr[i] = createBaseBars(pluginName, {
-          selection: gridSelection,
-          computedData$: d.computedData$,
-          visibleComputedData$: d.visibleComputedData$,
-          computedLayoutData$: d.computedLayoutData$,
-          visibleComputedLayoutData$: d.visibleComputedLayoutData$,
-          seriesLabels$: d.seriesLabels$,
-          SeriesDataMap$: d.SeriesDataMap$,
-          GroupDataMap$: d.GroupDataMap$,
-          fullParams$: observer.fullParams$,
-          fullChartParams$: observer.fullChartParams$,
-          gridAxesTransform$: d.gridAxesTransform$,
-          gridGraphicTransform$: d.gridGraphicTransform$,
-          gridGraphicReverseScale$: d.gridGraphicReverseScale$,
-          gridAxesSize$: d.gridAxesSize$,
-          gridHighlight$: d.gridHighlight$,
-          gridContainerPosition$: d.gridContainerPosition$,
-          isSeriesSeprate$,
-          event$: subject.event$ as Subject<any>,
-        })
-      })
-  })
-
-  return () => {
-    destroy$.next(undefined)
-    unsubscribeFnArr.forEach(fn => fn())
-  }
-})
+import * as d3 from 'd3'
+import {
+  Subject,
+  map,
+  distinctUntilChanged,
+  shareReplay,
+  takeUntil
+} from 'rxjs'
+import {
+  defineMultiGridPlugin } from '@orbcharts/core'
+import { DEFAULT_MULTI_BARS_PARAMS } from '../defaults'
+import { createBaseBars } from '../../base/BaseBars'
+import { multiGridPluginObservables } from '../multiGridObservables'
+import { getClassName, getUniID } from '../../utils/orbchartsUtils'
+
+const pluginName = 'MultiBars'
+
+const gridClassName = getClassName(pluginName, 'grid')
+
+export const MultiBars = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_BARS_PARAMS)(({ selection, name, subject, observer }) => {
+  const destroy$ = new Subject()
+
+  const unsubscribeFnArr: (() => void)[] = []
+
+  const multiGridPlugin$ = multiGridPluginObservables(observer)
+
+  multiGridPlugin$
+    .pipe(
+      takeUntil(destroy$)
+    )
+    .subscribe(data => {
+      // 每次重新計算時，清除之前的訂閱
+      unsubscribeFnArr.forEach(fn => fn())
+
+      selection.selectAll(`g.${gridClassName}`)
+        .data(data)
+        .join('g')
+        .attr('class', gridClassName)
+        .each((d, i, g) => {
+
+          const gridSelection = d3.select(g[i])
+
+          const isSeriesSeprate$ = d.dataFormatter$.pipe(
+            takeUntil(destroy$),
+            map(d => d.grid.separateSeries),
+            distinctUntilChanged(),
+            shareReplay(1)
+          )
+
+          unsubscribeFnArr[i] = createBaseBars(pluginName, {
+            selection: gridSelection,
+            computedData$: d.computedData$,
+            visibleComputedData$: d.visibleComputedData$,
+            computedLayoutData$: d.computedLayoutData$,
+            visibleComputedLayoutData$: d.visibleComputedLayoutData$,
+            seriesLabels$: d.seriesLabels$,
+            SeriesDataMap$: d.SeriesDataMap$,
+            GroupDataMap$: d.GroupDataMap$,
+            fullParams$: observer.fullParams$,
+            fullChartParams$: observer.fullChartParams$,
+            gridAxesTransform$: d.gridAxesTransform$,
+            gridGraphicTransform$: d.gridGraphicTransform$,
+            gridGraphicReverseScale$: d.gridGraphicReverseScale$,
+            gridAxesSize$: d.gridAxesSize$,
+            gridHighlight$: d.gridHighlight$,
+            gridContainerPosition$: d.gridContainerPosition$,
+            isSeriesSeprate$,
+            event$: subject.event$ as Subject<any>,
+          })
+        })
+    })
+
+  return () => {
+    destroy$.next(undefined)
+    unsubscribeFnArr.forEach(fn => fn())
+  }
+})

package/src/multiGrid/plugins/MultiBarsTriangle.ts

@@ -1,73 +1,77 @@
-import * as d3 from 'd3'
-import {
-  Subject,
-  map,
-  distinctUntilChanged,
-  shareReplay,
-  takeUntil
-} from 'rxjs'
-import {
-  defineMultiGridPlugin } from '@orbcharts/core'
-import { DEFAULT_MULTI_BARS_TRIANGLE_PARAMS } from '../defaults'
-import { createBaseBarsTriangle } from '../../base/BaseBarsTriangle'
-import { multiGridPluginObservables } from '../multiGridObservables'
-import { getClassName, getUniID } from '../../utils/orbchartsUtils'
-
-const pluginName = 'MultiBarsTriangle'
-
-const gridClassName = getClassName(pluginName, 'grid')
-
-export const MultiBarsTriangle = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_BARS_TRIANGLE_PARAMS)(({ selection, name, subject, observer }) => {
-  const destroy$ = new Subject()
-  
-  const unsubscribeFnArr: (() => void)[] = []
-
-  const multiGridPlugin$ = multiGridPluginObservables(observer)
-
-  multiGridPlugin$.subscribe(data => {
-    // 每次重新計算時，清除之前的訂閱
-    unsubscribeFnArr.forEach(fn => fn())
-
-    selection.selectAll(`g.${gridClassName}`)
-      .data(data)
-      .join('g')
-      .attr('class', gridClassName)
-      .each((d, i, g) => {
-
-        const gridSelection = d3.select(g[i])
-
-        const isSeriesSeprate$ = d.dataFormatter$.pipe(
-          takeUntil(destroy$),
-          map(d => d.grid.separateSeries),
-          distinctUntilChanged(),
-          shareReplay(1)
-        )
-
-        unsubscribeFnArr[i] = createBaseBarsTriangle(pluginName, {
-          selection: gridSelection,
-          computedData$: d.computedData$,
-          visibleComputedData$: d.visibleComputedData$,
-          computedLayoutData$: d.computedLayoutData$,
-          visibleComputedLayoutData$: d.visibleComputedLayoutData$,
-          seriesLabels$: d.seriesLabels$,
-          SeriesDataMap$: d.SeriesDataMap$,
-          GroupDataMap$: d.GroupDataMap$,
-          fullParams$: observer.fullParams$,
-          fullChartParams$: observer.fullChartParams$,
-          fullDataFormatter$: d.dataFormatter$,
-          gridAxesTransform$: d.gridAxesTransform$,
-          gridGraphicTransform$: d.gridGraphicTransform$,
-          gridAxesSize$: d.gridAxesSize$,
-          gridHighlight$: d.gridHighlight$,
-          gridContainerPosition$: d.gridContainerPosition$,
-          isSeriesSeprate$: isSeriesSeprate$,
-          event$: subject.event$ as Subject<any>,
-        })
-      })
-  })
-
-  return () => {
-    destroy$.next(undefined)
-    unsubscribeFnArr.forEach(fn => fn())
-  }
-})
+import * as d3 from 'd3'
+import {
+  Subject,
+  map,
+  distinctUntilChanged,
+  shareReplay,
+  takeUntil
+} from 'rxjs'
+import {
+  defineMultiGridPlugin } from '@orbcharts/core'
+import { DEFAULT_MULTI_BARS_TRIANGLE_PARAMS } from '../defaults'
+import { createBaseBarsTriangle } from '../../base/BaseBarsTriangle'
+import { multiGridPluginObservables } from '../multiGridObservables'
+import { getClassName, getUniID } from '../../utils/orbchartsUtils'
+
+const pluginName = 'MultiBarsTriangle'
+
+const gridClassName = getClassName(pluginName, 'grid')
+
+export const MultiBarsTriangle = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_BARS_TRIANGLE_PARAMS)(({ selection, name, subject, observer }) => {
+  const destroy$ = new Subject()
+  
+  const unsubscribeFnArr: (() => void)[] = []
+
+  const multiGridPlugin$ = multiGridPluginObservables(observer)
+
+  multiGridPlugin$
+    .pipe(
+      takeUntil(destroy$)
+    )
+    .subscribe(data => {
+      // 每次重新計算時，清除之前的訂閱
+      unsubscribeFnArr.forEach(fn => fn())
+
+      selection.selectAll(`g.${gridClassName}`)
+        .data(data)
+        .join('g')
+        .attr('class', gridClassName)
+        .each((d, i, g) => {
+
+          const gridSelection = d3.select(g[i])
+
+          const isSeriesSeprate$ = d.dataFormatter$.pipe(
+            takeUntil(destroy$),
+            map(d => d.grid.separateSeries),
+            distinctUntilChanged(),
+            shareReplay(1)
+          )
+
+          unsubscribeFnArr[i] = createBaseBarsTriangle(pluginName, {
+            selection: gridSelection,
+            computedData$: d.computedData$,
+            visibleComputedData$: d.visibleComputedData$,
+            computedLayoutData$: d.computedLayoutData$,
+            visibleComputedLayoutData$: d.visibleComputedLayoutData$,
+            seriesLabels$: d.seriesLabels$,
+            SeriesDataMap$: d.SeriesDataMap$,
+            GroupDataMap$: d.GroupDataMap$,
+            fullParams$: observer.fullParams$,
+            fullChartParams$: observer.fullChartParams$,
+            fullDataFormatter$: d.dataFormatter$,
+            gridAxesTransform$: d.gridAxesTransform$,
+            gridGraphicTransform$: d.gridGraphicTransform$,
+            gridAxesSize$: d.gridAxesSize$,
+            gridHighlight$: d.gridHighlight$,
+            gridContainerPosition$: d.gridContainerPosition$,
+            isSeriesSeprate$: isSeriesSeprate$,
+            event$: subject.event$ as Subject<any>,
+          })
+        })
+    })
+
+  return () => {
+    destroy$.next(undefined)
+    unsubscribeFnArr.forEach(fn => fn())
+  }
+})

package/src/multiGrid/plugins/MultiDots.ts

@@ -1,60 +1,65 @@
-import * as d3 from 'd3'
-import {
-  Subject } from 'rxjs'
-import {
-  defineMultiGridPlugin } from '@orbcharts/core'
-import { DEFAULT_MULTI_DOTS_PARAMS } from '../defaults'
-import { createBaseDots } from '../../base/BaseDots'
-import { multiGridPluginObservables } from '../multiGridObservables'
-import { getClassName, getUniID } from '../../utils/orbchartsUtils'
-
-const pluginName = 'MultiDots'
-
-const gridClassName = getClassName(pluginName, 'grid')
-
-export const MultiDots = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_DOTS_PARAMS)(({ selection, name, subject, observer }) => {
-  const destroy$ = new Subject()
-
-  const unsubscribeFnArr: (() => void)[] = []
-
-  const multiGridPlugin$ = multiGridPluginObservables(observer)
-
-  multiGridPlugin$.subscribe(data => {
-    // 每次重新計算時，清除之前的訂閱
-    unsubscribeFnArr.forEach(fn => fn())
-
-    selection.selectAll(`g.${gridClassName}`)
-      .data(data)
-      .join('g')
-      .attr('class', gridClassName)
-      .each((d, i, g) => {
-
-        const gridSelection = d3.select(g[i])
-
-        unsubscribeFnArr[i] = createBaseDots(pluginName, {
-          selection: gridSelection,
-          computedData$: d.computedData$,
-          visibleComputedData$: d.visibleComputedData$,
-          computedLayoutData$: d.computedLayoutData$,
-          visibleComputedLayoutData$: d.visibleComputedLayoutData$,
-          seriesLabels$: d.seriesLabels$,
-          SeriesDataMap$: d.SeriesDataMap$,
-          GroupDataMap$: d.GroupDataMap$,
-          fullParams$: observer.fullParams$,
-          fullChartParams$: observer.fullChartParams$,
-          gridAxesTransform$: d.gridAxesTransform$,
-          gridGraphicTransform$: d.gridGraphicTransform$,
-          gridGraphicReverseScale$: d.gridGraphicReverseScale$,
-          gridAxesSize$: d.gridAxesSize$,
-          gridHighlight$: d.gridHighlight$,
-          gridContainerPosition$: d.gridContainerPosition$,
-          event$: subject.event$ as Subject<any>,
-        })
-      })
-  })
-
-  return () => {
-    destroy$.next(undefined)
-    unsubscribeFnArr.forEach(fn => fn())
-  }
-})
+import * as d3 from 'd3'
+import {
+  takeUntil,
+  Subject } from 'rxjs'
+import {
+  defineMultiGridPlugin } from '@orbcharts/core'
+import { DEFAULT_MULTI_DOTS_PARAMS } from '../defaults'
+import { createBaseDots } from '../../base/BaseDots'
+import { multiGridPluginObservables } from '../multiGridObservables'
+import { getClassName, getUniID } from '../../utils/orbchartsUtils'
+
+const pluginName = 'MultiDots'
+
+const gridClassName = getClassName(pluginName, 'grid')
+
+export const MultiDots = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_DOTS_PARAMS)(({ selection, name, subject, observer }) => {
+  const destroy$ = new Subject()
+
+  const unsubscribeFnArr: (() => void)[] = []
+
+  const multiGridPlugin$ = multiGridPluginObservables(observer)
+
+  multiGridPlugin$
+    .pipe(
+      takeUntil(destroy$)
+    )
+    .subscribe(data => {
+      // 每次重新計算時，清除之前的訂閱
+      unsubscribeFnArr.forEach(fn => fn())
+
+      selection.selectAll(`g.${gridClassName}`)
+        .data(data)
+        .join('g')
+        .attr('class', gridClassName)
+        .each((d, i, g) => {
+
+          const gridSelection = d3.select(g[i])
+
+          unsubscribeFnArr[i] = createBaseDots(pluginName, {
+            selection: gridSelection,
+            computedData$: d.computedData$,
+            visibleComputedData$: d.visibleComputedData$,
+            computedLayoutData$: d.computedLayoutData$,
+            visibleComputedLayoutData$: d.visibleComputedLayoutData$,
+            seriesLabels$: d.seriesLabels$,
+            SeriesDataMap$: d.SeriesDataMap$,
+            GroupDataMap$: d.GroupDataMap$,
+            fullParams$: observer.fullParams$,
+            fullChartParams$: observer.fullChartParams$,
+            gridAxesTransform$: d.gridAxesTransform$,
+            gridGraphicTransform$: d.gridGraphicTransform$,
+            gridGraphicReverseScale$: d.gridGraphicReverseScale$,
+            gridAxesSize$: d.gridAxesSize$,
+            gridHighlight$: d.gridHighlight$,
+            gridContainerPosition$: d.gridContainerPosition$,
+            event$: subject.event$ as Subject<any>,
+          })
+        })
+    })
+
+  return () => {
+    destroy$.next(undefined)
+    unsubscribeFnArr.forEach(fn => fn())
+  }
+})

package/src/multiGrid/plugins/MultiGridLegend.ts

@@ -1,89 +1,89 @@
-import * as d3 from 'd3'
-import {
-  combineLatest,
-  map,
-  switchMap,
-  takeUntil,
-  Observable,
-  Subject } from 'rxjs'
-import {
-  defineMultiGridPlugin, mergeOptionsWithDefault } 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.multiGridEachDetail$.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.multiGridEachDetail$,
-    computedData: observer.computedData$,
-  }).pipe(
-    takeUntil(destroy$),
-    switchMap(async d => d),
-    map(data => {
-      // grid
-      return data.computedData
-        .map((gridData, gridIndex) => {
-          // 這個grid全部series要套用的圖例列點樣式
-          const gridListStyle = mergeOptionsWithDefault(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$),
-    switchMap(async d => d),
-    map(d => {
-      return {
-        ...d.fullParams,
-        seriesList: d.seriesList
-      }
-    })
-  )
-
-  const unsubscribeBaseLegend = createBaseLegend(pluginName, {
-    rootSelection,
-    seriesLabels$,
-    fullParams$,
-    layout$: observer.layout$,
-    fullChartParams$: observer.fullChartParams$,
-    textSizePx$: observer.textSizePx$
-  })
-
-  return () => {
-    destroy$.next(undefined)
-    unsubscribeBaseLegend()
-  }
-})
-
+import * as d3 from 'd3'
+import {
+  combineLatest,
+  map,
+  switchMap,
+  takeUntil,
+  Observable,
+  Subject } from 'rxjs'
+import {
+  defineMultiGridPlugin, mergeOptionsWithDefault } 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.multiGridEachDetail$.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.multiGridEachDetail$,
+    computedData: observer.computedData$,
+  }).pipe(
+    takeUntil(destroy$),
+    switchMap(async d => d),
+    map(data => {
+      // grid
+      return data.computedData
+        .map((gridData, gridIndex) => {
+          // 這個grid全部series要套用的圖例列點樣式
+          const gridListStyle = mergeOptionsWithDefault(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$),
+    switchMap(async d => d),
+    map(d => {
+      return {
+        ...d.fullParams,
+        seriesList: d.seriesList
+      }
+    })
+  )
+
+  const unsubscribeBaseLegend = createBaseLegend(pluginName, {
+    rootSelection,
+    seriesLabels$,
+    fullParams$,
+    layout$: observer.layout$,
+    fullChartParams$: observer.fullChartParams$,
+    textSizePx$: observer.textSizePx$
+  })
+
+  return () => {
+    destroy$.next(undefined)
+    unsubscribeBaseLegend()
+  }
+})
+