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

package/src/multiGrid/plugins/MultiBarStack.ts

@@ -1,60 +1,74 @@
-import * as d3 from 'd3'
-import {
-  Subject } from 'rxjs'
-import {
-  defineMultiGridPlugin } from '@orbcharts/core'
-import { DEFAULT_MULTI_BAR_STACK_PARAMS } from '../defaults'
-import { createBaseBarStack } from '../../base/BaseBarStack'
-import { multiGridDetailObservables } from '../multiGridObservables'
-import { getClassName, getUniID } from '../../utils/orbchartsUtils'
-
-const pluginName = 'MultiBarStack'
-
-const gridClassName = getClassName(pluginName, 'grid')
-
-export const MultiBarStack = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_BAR_STACK_PARAMS)(({ selection, name, subject, observer }) => {
-  const destroy$ = new Subject()
-
-  const unsubscribeFnArr: (() => void)[] = []
-
-  const multiGridPlugin$ = multiGridDetailObservables(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] = createBaseBarStack(pluginName, {
-          selection: gridSelection,
-          computedData$: d.gridComputedData$,
-          visibleComputedData$: d.visibleComputedData$,
-          existSeriesLabels$: d.existSeriesLabels$,
-          SeriesDataMap$: d.SeriesDataMap$,
-          GroupDataMap$: d.GroupDataMap$,
-          fullParams$: observer.fullParams$,
-          fullDataFormatter$: d.gridDataFormatter$,
-          fullChartParams$: observer.fullChartParams$,
-          gridAxesTransform$: d.gridAxesTransform$,
-          gridGraphicTransform$: d.gridGraphicTransform$,
-          gridGraphicReverseScale$: d.gridGraphicReverseScale$,
-          gridAxesSize$: d.gridAxesSize$,
-          gridHighlight$: d.gridHighlight$,
-          gridContainer$: d.gridContainer$,
-          isSeriesPositionSeprate$: d.isSeriesPositionSeprate$,
-          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_BAR_STACK_PARAMS } from '../defaults'
+import { createBaseBarStack } from '../../base/BaseBarStack'
+import { multiGridPluginObservables } from '../multiGridObservables'
+import { getClassName, getUniID } from '../../utils/orbchartsUtils'
+
+const pluginName = 'MultiBarStack'
+
+const gridClassName = getClassName(pluginName, 'grid')
+
+export const MultiBarStack = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_BAR_STACK_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] = createBaseBarStack(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$,
+          fullDataFormatter$: d.dataFormatter$,
+          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/MultiBars.ts

@@ -1,59 +1,73 @@
-import * as d3 from 'd3'
-import {
-  Subject } from 'rxjs'
-import {
-  defineMultiGridPlugin } from '@orbcharts/core'
-import { DEFAULT_MULTI_BARS_PARAMS } from '../defaults'
-import { createBaseBars } from '../../base/BaseBars'
-import { multiGridDetailObservables } 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$ = multiGridDetailObservables(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] = createBaseBars(pluginName, {
-          selection: gridSelection,
-          computedData$: d.gridComputedData$,
-          visibleComputedData$: d.visibleComputedData$,
-          existSeriesLabels$: d.existSeriesLabels$,
-          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$,
-          gridContainer$: d.gridContainer$,
-          isSeriesPositionSeprate$: d.isSeriesPositionSeprate$,
-          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$.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,58 +1,73 @@
-import * as d3 from 'd3'
-import {
-  Subject } from 'rxjs'
-import {
-  defineMultiGridPlugin } from '@orbcharts/core'
-import { DEFAULT_MULTI_BARS_TRIANGLE_PARAMS } from '../defaults'
-import { createBaseBarsTriangle } from '../../base/BaseBarsTriangle'
-import { multiGridDetailObservables } 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$ = multiGridDetailObservables(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] = createBaseBarsTriangle(pluginName, {
-          selection: gridSelection,
-          computedData$: d.gridComputedData$,
-          visibleComputedData$: d.visibleComputedData$,
-          existSeriesLabels$: d.existSeriesLabels$,
-          SeriesDataMap$: d.SeriesDataMap$,
-          GroupDataMap$: d.GroupDataMap$,
-          fullParams$: observer.fullParams$,
-          fullChartParams$: observer.fullChartParams$,
-          gridAxesTransform$: d.gridAxesTransform$,
-          gridGraphicTransform$: d.gridGraphicTransform$,
-          gridAxesSize$: d.gridAxesSize$,
-          gridHighlight$: d.gridHighlight$,
-          gridContainer$: d.gridContainer$,
-          isSeriesPositionSeprate$: d.isSeriesPositionSeprate$,
-          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$.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,58 +1,60 @@
-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 { multiGridDetailObservables } 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$ = multiGridDetailObservables(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.gridComputedData$,
-          visibleComputedData$: d.visibleComputedData$,
-          existSeriesLabels$: d.existSeriesLabels$,
-          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$,
-          gridContainer$: d.gridContainer$,
-          event$: subject.event$ as Subject<any>,
-        })
-      })
-  })
-
-  return () => {
-    destroy$.next(undefined)
-    unsubscribeFnArr.forEach(fn => fn())
-  }
-})
+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())
+  }
+})