@orbcharts/plugins-basic 3.0.0-beta.1 → 3.0.0-beta.3

package/src/multiGrid/index.ts

@@ -1,15 +1,15 @@
-export * from './defaults'
-// export * from './types'
-export { MultiGridLegend } from './plugins/MultiGridLegend'
-export { MultiBars } from './plugins/MultiBars'
-export { MultiBarStack } from './plugins/MultiBarStack'
-export { MultiBarsTriangle } from './plugins/MultiBarsTriangle'
-export { MultiLines } from './plugins/MultiLines'
-export { MultiLineAreas } from './plugins/MultiLineAreas'
-export { MultiDots } from './plugins/MultiDots'
-export { MultiGroupAxis } from './plugins/MultiGroupAxis'
-export { MultiValueAxis } from './plugins/MultiValueAxis'
-export { MultiGridTooltip } from './plugins/MultiGridTooltip'
-export { MultiValueStackAxis } from './plugins/MultiValueStackAxis'
-export { OverlappingValueAxes } from './plugins/OverlappingValueAxes'
+export * from './defaults'
+// export * from './types'
+export { MultiGridLegend } from './plugins/MultiGridLegend'
+export { MultiBars } from './plugins/MultiBars'
+export { MultiBarStack } from './plugins/MultiBarStack'
+export { MultiBarsTriangle } from './plugins/MultiBarsTriangle'
+export { MultiLines } from './plugins/MultiLines'
+export { MultiLineAreas } from './plugins/MultiLineAreas'
+export { MultiDots } from './plugins/MultiDots'
+export { MultiGroupAxis } from './plugins/MultiGroupAxis'
+export { MultiValueAxis } from './plugins/MultiValueAxis'
+export { MultiGridTooltip } from './plugins/MultiGridTooltip'
+export { MultiValueStackAxis } from './plugins/MultiValueStackAxis'
+export { OverlappingValueAxes } from './plugins/OverlappingValueAxes'
 export { OverlappingValueStackAxes } from './plugins/OverlappingValueStackAxes'

package/src/multiGrid/multiGridObservables.ts

@@ -1,49 +1,49 @@
-import type { Observable } from 'rxjs'
-import {
-  Subject,
-  takeUntil,
-  of,
-  map,
-  reduce,
-  switchMap,
-  combineLatest,
-  distinctUntilChanged,
-  shareReplay
-} from 'rxjs'
-import type {
-  ContextObserverMultiGrid,
-  ComputedDataGrid,
-  DataFormatterGrid,
-  ContextObserverGridDetail,
-  ContextObserverMultiGridDetail } from '../../lib/core-types'
-
-// 可設定多個gridIndex的params
-interface MultiGridPluginParams {
-  gridIndexes: number[] | 'all'
-}
-
-// 對應grid資料的plugin所需Observable（必須有gridIndexes）
-export const multiGridPluginDetailObservables = (observer: ContextObserverMultiGrid<MultiGridPluginParams>): Observable<ContextObserverMultiGridDetail[]> => {
-  const gridIndexes$ = observer.fullParams$.pipe(
-    map(fullParams => fullParams.gridIndexes),
-    distinctUntilChanged(),
-    shareReplay(1)
-  )
-
-  return combineLatest({
-    multiGridEachDetail: observer.multiGridEachDetail$,
-    gridIndexes: gridIndexes$,
-  }).pipe(
-    map(data => {
-      // 對應所有grid
-      if (data.gridIndexes === 'all') {
-        return data.multiGridEachDetail
-      }
-      // 自訂對應grid
-      return data.gridIndexes.map(gridIndex => {
-        return data.multiGridEachDetail[gridIndex] ?? data.multiGridEachDetail[0]
-      })
-    })
-  )
-}
-
+import type { Observable } from 'rxjs'
+import {
+  Subject,
+  takeUntil,
+  of,
+  map,
+  reduce,
+  switchMap,
+  combineLatest,
+  distinctUntilChanged,
+  shareReplay
+} from 'rxjs'
+import type {
+  ContextObserverMultiGrid,
+  ComputedDataGrid,
+  DataFormatterGrid,
+  ContextObserverGridDetail,
+  ContextObserverMultiGridDetail } from '../../lib/core-types'
+
+// 可設定多個gridIndex的params
+interface MultiGridPluginParams {
+  gridIndexes: number[] | 'all'
+}
+
+// 對應grid資料的plugin所需Observable（必須有gridIndexes）
+export const multiGridPluginDetailObservables = (observer: ContextObserverMultiGrid<MultiGridPluginParams>): Observable<ContextObserverMultiGridDetail[]> => {
+  const gridIndexes$ = observer.fullParams$.pipe(
+    map(fullParams => fullParams.gridIndexes),
+    distinctUntilChanged(),
+    shareReplay(1)
+  )
+
+  return combineLatest({
+    multiGridEachDetail: observer.multiGridEachDetail$,
+    gridIndexes: gridIndexes$,
+  }).pipe(
+    map(data => {
+      // 對應所有grid
+      if (data.gridIndexes === 'all') {
+        return data.multiGridEachDetail
+      }
+      // 自訂對應grid
+      return data.gridIndexes.map(gridIndex => {
+        return data.multiGridEachDetail[gridIndex] ?? data.multiGridEachDetail[0]
+      })
+    })
+  )
+}
+

package/src/multiGrid/plugins/MultiBarStack.ts

@@ -1,106 +1,106 @@
-import * as d3 from 'd3'
-import {
-  Subject,
-  map,
-  distinctUntilChanged,
-  shareReplay,
-  takeUntil
-} from 'rxjs'
-import type { DefinePluginConfig } from '../../../lib/core-types'
-import {
-  defineMultiGridPlugin } from '../../../lib/core'
-import { DEFAULT_MULTI_BAR_STACK_PARAMS } from '../defaults'
-import { createBaseBarStack } from '../../base/BaseBarStack'
-import { multiGridPluginDetailObservables } from '../multiGridObservables'
-import { getClassName, getUniID } from '../../utils/orbchartsUtils'
-import { LAYER_INDEX_OF_GRAPHIC } from '../../const'
-
-const pluginName = 'MultiBarStack'
-
-const gridClassName = getClassName(pluginName, 'grid')
-
-const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_MULTI_BAR_STACK_PARAMS> = {
-  name: pluginName,
-  defaultParams: DEFAULT_MULTI_BAR_STACK_PARAMS,
-  layerIndex: LAYER_INDEX_OF_GRAPHIC,
-  validator: (params, { validateColumns }) => {
-    const result = validateColumns(params, {
-      gridIndexes: {
-        toBe: 'number[] | "all"',
-        test: (value: any) => {
-          return value === 'all' || (Array.isArray(value) && value.every((v: any) => typeof v === 'number'))
-        }
-      },
-      barWidth: {
-        toBeTypes: ['number']
-      },
-      barGroupPadding: {
-        toBeTypes: ['number']
-      },
-      barRadius: {
-        toBeTypes: ['number', 'boolean']
-      }
-    })
-    return result
-  }
-}
-
-export const MultiBarStack = defineMultiGridPlugin(pluginConfig)(({ selection, name, subject, observer }) => {
-  const destroy$ = new Subject()
-
-  const unsubscribeFnArr: (() => void)[] = []
-
-  const multiGridPluginDetail$ = multiGridPluginDetailObservables(observer)
-
-  multiGridPluginDetail$
-    .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] = 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())
-  }
-})
+import * as d3 from 'd3'
+import {
+  Subject,
+  map,
+  distinctUntilChanged,
+  shareReplay,
+  takeUntil
+} from 'rxjs'
+import type { DefinePluginConfig } from '../../../lib/core-types'
+import {
+  defineMultiGridPlugin } from '../../../lib/core'
+import { DEFAULT_MULTI_BAR_STACK_PARAMS } from '../defaults'
+import { createBaseBarStack } from '../../base/BaseBarStack'
+import { multiGridPluginDetailObservables } from '../multiGridObservables'
+import { getClassName, getUniID } from '../../utils/orbchartsUtils'
+import { LAYER_INDEX_OF_GRAPHIC } from '../../const'
+
+const pluginName = 'MultiBarStack'
+
+const gridClassName = getClassName(pluginName, 'grid')
+
+const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_MULTI_BAR_STACK_PARAMS> = {
+  name: pluginName,
+  defaultParams: DEFAULT_MULTI_BAR_STACK_PARAMS,
+  layerIndex: LAYER_INDEX_OF_GRAPHIC,
+  validator: (params, { validateColumns }) => {
+    const result = validateColumns(params, {
+      gridIndexes: {
+        toBe: 'number[] | "all"',
+        test: (value: any) => {
+          return value === 'all' || (Array.isArray(value) && value.every((v: any) => typeof v === 'number'))
+        }
+      },
+      barWidth: {
+        toBeTypes: ['number']
+      },
+      barGroupPadding: {
+        toBeTypes: ['number']
+      },
+      barRadius: {
+        toBeTypes: ['number', 'boolean']
+      }
+    })
+    return result
+  }
+}
+
+export const MultiBarStack = defineMultiGridPlugin(pluginConfig)(({ selection, name, subject, observer }) => {
+  const destroy$ = new Subject()
+
+  const unsubscribeFnArr: (() => void)[] = []
+
+  const multiGridPluginDetail$ = multiGridPluginDetailObservables(observer)
+
+  multiGridPluginDetail$
+    .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] = 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,108 +1,108 @@
-import * as d3 from 'd3'
-import {
-  Subject,
-  map,
-  distinctUntilChanged,
-  shareReplay,
-  takeUntil
-} from 'rxjs'
-import type { DefinePluginConfig } from '../../../lib/core-types'
-import {
-  defineMultiGridPlugin } from '../../../lib/core'
-import { DEFAULT_MULTI_BARS_PARAMS } from '../defaults'
-import { createBaseBars } from '../../base/BaseBars'
-import { multiGridPluginDetailObservables } from '../multiGridObservables'
-import { getClassName, getUniID } from '../../utils/orbchartsUtils'
-import { LAYER_INDEX_OF_GRAPHIC } from '../../const'
-
-const pluginName = 'MultiBars'
-
-const gridClassName = getClassName(pluginName, 'grid')
-
-const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_MULTI_BARS_PARAMS> = {
-  name: pluginName,
-  defaultParams: DEFAULT_MULTI_BARS_PARAMS,
-  layerIndex: LAYER_INDEX_OF_GRAPHIC,
-  validator: (params, { validateColumns }) => {
-    const result = validateColumns(params, {
-      gridIndexes: {
-        toBe: 'number[] | "all"',
-        test: (value: any) => {
-          return value === 'all' || (Array.isArray(value) && value.every((v: any) => typeof v === 'number'))
-        }
-      },
-      barWidth: {
-        toBeTypes: ['number']
-      },
-      barPadding: {
-        toBeTypes: ['number']
-      },
-      barGroupPadding: {
-        toBeTypes: ['number']
-      },
-      barRadius: {
-        toBeTypes: ['number', 'boolean']
-      }
-    })
-    return result
-  }
-}
-
-export const MultiBars = defineMultiGridPlugin(pluginConfig)(({ selection, name, subject, observer }) => {
-  const destroy$ = new Subject()
-
-  const unsubscribeFnArr: (() => void)[] = []
-
-  const multiGridPluginDetail$ = multiGridPluginDetailObservables(observer)
-
-  multiGridPluginDetail$
-    .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())
-  }
-})
+import * as d3 from 'd3'
+import {
+  Subject,
+  map,
+  distinctUntilChanged,
+  shareReplay,
+  takeUntil
+} from 'rxjs'
+import type { DefinePluginConfig } from '../../../lib/core-types'
+import {
+  defineMultiGridPlugin } from '../../../lib/core'
+import { DEFAULT_MULTI_BARS_PARAMS } from '../defaults'
+import { createBaseBars } from '../../base/BaseBars'
+import { multiGridPluginDetailObservables } from '../multiGridObservables'
+import { getClassName, getUniID } from '../../utils/orbchartsUtils'
+import { LAYER_INDEX_OF_GRAPHIC } from '../../const'
+
+const pluginName = 'MultiBars'
+
+const gridClassName = getClassName(pluginName, 'grid')
+
+const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_MULTI_BARS_PARAMS> = {
+  name: pluginName,
+  defaultParams: DEFAULT_MULTI_BARS_PARAMS,
+  layerIndex: LAYER_INDEX_OF_GRAPHIC,
+  validator: (params, { validateColumns }) => {
+    const result = validateColumns(params, {
+      gridIndexes: {
+        toBe: 'number[] | "all"',
+        test: (value: any) => {
+          return value === 'all' || (Array.isArray(value) && value.every((v: any) => typeof v === 'number'))
+        }
+      },
+      barWidth: {
+        toBeTypes: ['number']
+      },
+      barPadding: {
+        toBeTypes: ['number']
+      },
+      barGroupPadding: {
+        toBeTypes: ['number']
+      },
+      barRadius: {
+        toBeTypes: ['number', 'boolean']
+      }
+    })
+    return result
+  }
+}
+
+export const MultiBars = defineMultiGridPlugin(pluginConfig)(({ selection, name, subject, observer }) => {
+  const destroy$ = new Subject()
+
+  const unsubscribeFnArr: (() => void)[] = []
+
+  const multiGridPluginDetail$ = multiGridPluginDetailObservables(observer)
+
+  multiGridPluginDetail$
+    .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())
+  }
+})