@orbcharts/plugins-basic 3.0.0-alpha.49 → 3.0.0-alpha.51

package/src/multiGrid/defaults.ts

@@ -1,147 +1,152 @@
-import type {
-  MultiGridLegendParams,
-  MultiBarsParams,
-  MultiBarStackParams,
-  MultiBarsTriangleParams,
-  MultiLinesParams,
-  MultiLineAreasParams,
-  MultiDotsParams,
-  MultiGroupAxisParams,
-  MultiValueAxisParams,
-  OverlappingValueAxesParams
-} from './types'
-
-export const DEFAULT_MULTI_GRID_LEGEND_PARAMS: MultiGridLegendParams = {
-  position: 'right',
-  justify: 'end',
-  padding: 28,
-  backgroundFill: 'none',
-  backgroundStroke: 'none',
-  gap: 10,
-  listRectWidth: 14,
-  listRectHeight: 14,
-  listRectRadius: 0,
-  gridList: [
-    {
-      listRectWidth: 14,
-      listRectHeight: 14,
-      listRectRadius: 0,
-    }
-  ],
-  textColorType: 'primary'
-}
-
-export const DEFAULT_MULTI_GROUP_AXIS_PARAMS: MultiGroupAxisParams = {
-  // labelAnchor: 'start',
-  labelOffset: [0, 0],
-  labelColorType: 'primary',
-  axisLineVisible: true,
-  axisLineColorType: 'primary',
-  tickFormat: text => text,
-  tickLineVisible: true,
-  tickPadding: 20,
-  tickFullLine: false,
-  tickFullLineDasharray: 'none',
-  tickColorType: 'secondary',
-  tickTextRotate: 0,
-  tickTextColorType: 'primary',
-  gridIndexes: [0]
-}
-
-export const DEFAULT_MULTI_VALUE_AXIS_PARAMS: MultiValueAxisParams = {
-  // labelAnchor: 'end',
-  labelOffset: [0, 0],
-  labelColorType: 'primary',
-  axisLineVisible: false,
-  axisLineColorType: 'primary',
-  ticks: 4,
-  tickFormat: ',.0f',
-  tickLineVisible: true,
-  tickPadding: 20,
-  tickFullLine: true,
-  tickFullLineDasharray: 'none',
-  tickColorType: 'secondary',
-  tickTextRotate: 0,
-  tickTextColorType: 'primary',
-  gridIndexes: [0]
-}
-
-export const DEFAULT_MULTI_BARS_PARAMS: MultiBarsParams = {
-  barWidth: 0,
-  barPadding: 1,
-  barGroupPadding: 40,
-  barRadius: false,
-  gridIndexes: [0]
-}
-
-export const DEFAULT_MULTI_BAR_STACK_PARAMS: MultiBarStackParams = {
-  barWidth: 0,
-  barGroupPadding: 10,
-  barRadius: false,
-  gridIndexes: [0]
-}
-
-export const DEFAULT_MULTI_BARS_TRIANGLE_PARAMS: MultiBarsTriangleParams = {
-  barWidth: 0,
-  barPadding: 1,
-  barGroupPadding: 20,
-  linearGradientOpacity: [1, 0],
-  gridIndexes: [0]
-}
-
-export const DEFAULT_MULTI_LINES_PARAMS: MultiLinesParams = {
-  lineCurve: 'curveLinear',
-  lineWidth: 2,
-  gridIndexes: [1]
-}
-
-export const DEFAULT_MULTI_LINE_AREAS_PARAMS: MultiLineAreasParams = {
-  lineCurve: 'curveLinear',
-  linearGradientOpacity: [1, 0],
-  gridIndexes: [1]
-}
-
-export const DEFAULT_MULTI_DOTS_PARAMS: MultiDotsParams = {
-  radius: 4,
-  fillColorType: 'white',
-  strokeColorType: 'series',
-  strokeWidth: 2,
-  onlyShowHighlighted: false,
-  gridIndexes: [1]
-}
-
-export const DEFAULT_OVERLAPPING_VALUE_AXES_PARAMS: OverlappingValueAxesParams = {
-  firstAxis: {
-    // labelAnchor: 'end',
-    labelOffset: [0, 0],
-    labelColorType: 'primary',
-    axisLineVisible: false,
-    axisLineColorType: 'primary',
-    ticks: 4,
-    tickFormat: ',.0f',
-    tickLineVisible: true,
-    tickPadding: 20,
-    tickFullLine: true,
-    tickFullLineDasharray: 'none',
-    tickColorType: 'secondary',
-    tickTextRotate: 0,
-    tickTextColorType: 'primary',
-  },
-  secondAxis: {
-    // labelAnchor: 'end',
-    labelOffset: [0, 0],
-    labelColorType: 'primary',
-    axisLineVisible: false,
-    axisLineColorType: 'primary',
-    ticks: 4,
-    tickFormat: ',.0f',
-    tickLineVisible: true,
-    tickPadding: 20,
-    tickFullLine: true,
-    tickFullLineDasharray: 'none',
-    tickColorType: 'secondary',
-    tickTextRotate: 0,
-    tickTextColorType: 'primary',
-  },
-  gridIndexes: [0, 1]
-}
+import type {
+  MultiGridLegendParams,
+  MultiBarsParams,
+  MultiBarStackParams,
+  MultiBarsTriangleParams,
+  MultiLinesParams,
+  MultiLineAreasParams,
+  MultiDotsParams,
+  MultiGroupAxisParams,
+  MultiValueAxisParams,
+  MultiValueStackAxisParams,
+  OverlappingValueAxesParams
+} from './types'
+
+export const DEFAULT_MULTI_GRID_LEGEND_PARAMS: MultiGridLegendParams = {
+  position: 'right',
+  justify: 'end',
+  padding: 28,
+  backgroundFill: 'none',
+  backgroundStroke: 'none',
+  gap: 10,
+  listRectWidth: 14,
+  listRectHeight: 14,
+  listRectRadius: 0,
+  gridList: [
+    {
+      listRectWidth: 14,
+      listRectHeight: 14,
+      listRectRadius: 0,
+    }
+  ],
+  textColorType: 'primary'
+}
+
+export const DEFAULT_MULTI_GROUP_AXIS_PARAMS: MultiGroupAxisParams = {
+  // labelAnchor: 'start',
+  labelOffset: [0, 0],
+  labelColorType: 'primary',
+  axisLineVisible: true,
+  axisLineColorType: 'primary',
+  tickFormat: text => text,
+  tickLineVisible: true,
+  tickPadding: 20,
+  tickFullLine: false,
+  tickFullLineDasharray: 'none',
+  tickColorType: 'secondary',
+  tickTextRotate: 0,
+  tickTextColorType: 'primary',
+  gridIndexes: [0]
+}
+
+export const DEFAULT_MULTI_VALUE_AXIS_PARAMS: MultiValueAxisParams = {
+  // labelAnchor: 'end',
+  labelOffset: [0, 0],
+  labelColorType: 'primary',
+  axisLineVisible: false,
+  axisLineColorType: 'primary',
+  ticks: 4,
+  tickFormat: ',.0f',
+  tickLineVisible: true,
+  tickPadding: 20,
+  tickFullLine: true,
+  tickFullLineDasharray: 'none',
+  tickColorType: 'secondary',
+  tickTextRotate: 0,
+  tickTextColorType: 'primary',
+  gridIndexes: [0]
+}
+
+export const DEFAULT_MULTI_VALUE_STACK_AXIS_PARAMS: MultiValueStackAxisParams = {
+  ...DEFAULT_MULTI_VALUE_AXIS_PARAMS
+}
+
+export const DEFAULT_MULTI_BARS_PARAMS: MultiBarsParams = {
+  barWidth: 0,
+  barPadding: 1,
+  barGroupPadding: 40,
+  barRadius: false,
+  gridIndexes: [0]
+}
+
+export const DEFAULT_MULTI_BAR_STACK_PARAMS: MultiBarStackParams = {
+  barWidth: 0,
+  barGroupPadding: 10,
+  barRadius: false,
+  gridIndexes: [0]
+}
+
+export const DEFAULT_MULTI_BARS_TRIANGLE_PARAMS: MultiBarsTriangleParams = {
+  barWidth: 0,
+  barPadding: 1,
+  barGroupPadding: 20,
+  linearGradientOpacity: [1, 0],
+  gridIndexes: [0]
+}
+
+export const DEFAULT_MULTI_LINES_PARAMS: MultiLinesParams = {
+  lineCurve: 'curveLinear',
+  lineWidth: 2,
+  gridIndexes: [1]
+}
+
+export const DEFAULT_MULTI_LINE_AREAS_PARAMS: MultiLineAreasParams = {
+  lineCurve: 'curveLinear',
+  linearGradientOpacity: [1, 0],
+  gridIndexes: [1]
+}
+
+export const DEFAULT_MULTI_DOTS_PARAMS: MultiDotsParams = {
+  radius: 4,
+  fillColorType: 'white',
+  strokeColorType: 'series',
+  strokeWidth: 2,
+  onlyShowHighlighted: false,
+  gridIndexes: [1]
+}
+
+export const DEFAULT_OVERLAPPING_VALUE_AXES_PARAMS: OverlappingValueAxesParams = {
+  firstAxis: {
+    // labelAnchor: 'end',
+    labelOffset: [0, 0],
+    labelColorType: 'primary',
+    axisLineVisible: false,
+    axisLineColorType: 'primary',
+    ticks: 4,
+    tickFormat: ',.0f',
+    tickLineVisible: true,
+    tickPadding: 20,
+    tickFullLine: true,
+    tickFullLineDasharray: 'none',
+    tickColorType: 'secondary',
+    tickTextRotate: 0,
+    tickTextColorType: 'primary',
+  },
+  secondAxis: {
+    // labelAnchor: 'end',
+    labelOffset: [0, 0],
+    labelColorType: 'primary',
+    axisLineVisible: false,
+    axisLineColorType: 'primary',
+    ticks: 4,
+    tickFormat: ',.0f',
+    tickLineVisible: true,
+    tickPadding: 20,
+    tickFullLine: true,
+    tickFullLineDasharray: 'none',
+    tickColorType: 'secondary',
+    tickTextRotate: 0,
+    tickTextColorType: 'primary',
+  },
+  gridIndexes: [0, 1]
+}

package/src/multiGrid/index.ts

@@ -1,12 +1,14 @@
-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 { 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 { MultiValueStackAxis } from './plugins/MultiValueStackAxis'
+export { OverlappingValueAxes } from './plugins/OverlappingValueAxes'
+export { OverlappingValueStackAxes } from './plugins/OverlappingValueStackAxes'

package/src/multiGrid/multiGridObservables.ts

@@ -1,43 +1,44 @@
-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 '@orbcharts/core'
-
-// 可設定多個gridIndex的params
-interface MultiGridPluginParams {
-  gridIndexes: number[]
-}
-
-// 對應grid資料的plugin所需Observable（必須有gridIndexes）
-export const multiGridPluginObservables = (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 => {
-      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 '@orbcharts/core'
+
+// 可設定多個gridIndex的params
+interface MultiGridPluginParams {
+  gridIndexes: number[]
+}
+
+// 對應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 => {
+      return data.gridIndexes.map(gridIndex => {
+        return data.multiGridEachDetail[gridIndex] ?? data.multiGridEachDetail[0]
+      })
+    })
+  )
+}
+

package/src/multiGrid/plugins/MultiBarStack.ts

@@ -1,78 +1,78 @@
-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$
-    .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 {
+  defineMultiGridPlugin } from '@orbcharts/core'
+import { DEFAULT_MULTI_BAR_STACK_PARAMS } from '../defaults'
+import { createBaseBarStack } from '../../base/BaseBarStack'
+import { multiGridPluginDetailObservables } 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 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())
+  }
+})