@orbcharts/plugins-basic 3.0.0-alpha.56 → 3.0.0-alpha.57

package/src/grid/plugins/ValueStackAxis.ts

@@ -1,39 +1,39 @@
-import {
-  takeUntil,
-  map,
-  distinctUntilChanged,
-  shareReplay,
-  switchMap,
-  iif,
-  Observable,
-  Subject } from 'rxjs'
-import type { ComputedDataGrid } from '@orbcharts/core'
-import {
-  defineGridPlugin } from '@orbcharts/core'
-import { DEFAULT_VALUE_STACK_AXIS_PARAMS } from '../defaults'
-import { createBaseValueAxis } from '../../base/BaseValueAxis'
-
-const pluginName = 'ValueStackAxis'
-
-export const ValueStackAxis = defineGridPlugin(pluginName, DEFAULT_VALUE_STACK_AXIS_PARAMS)(({ selection, name, observer, subject }) => {
-  
-  const destroy$ = new Subject()
-
-  const unsubscribeBaseValueAxis = createBaseValueAxis(pluginName, {
-    selection,
-    computedData$: observer.computedStackedData$, // 計算疊加value的資料
-    fullParams$: observer.fullParams$,
-    fullDataFormatter$: observer.fullDataFormatter$,
-    fullChartParams$: observer.fullChartParams$,  
-    gridAxesTransform$: observer.gridAxesTransform$,
-    gridAxesReverseTransform$: observer.gridAxesReverseTransform$,
-    gridAxesSize$: observer.gridAxesSize$,
-    gridContainerPosition$: observer.gridContainerPosition$,
-    isSeriesSeprate$: observer.isSeriesSeprate$,
-  })
-
-  return () => {
-    destroy$.next(undefined)
-    unsubscribeBaseValueAxis()
-  }
+import {
+  takeUntil,
+  map,
+  distinctUntilChanged,
+  shareReplay,
+  switchMap,
+  iif,
+  Observable,
+  Subject } from 'rxjs'
+import type { ComputedDataGrid } from '@orbcharts/core'
+import {
+  defineGridPlugin } from '@orbcharts/core'
+import { DEFAULT_VALUE_STACK_AXIS_PARAMS } from '../defaults'
+import { createBaseValueAxis } from '../../base/BaseValueAxis'
+
+const pluginName = 'ValueStackAxis'
+
+export const ValueStackAxis = defineGridPlugin(pluginName, DEFAULT_VALUE_STACK_AXIS_PARAMS)(({ selection, name, observer, subject }) => {
+  
+  const destroy$ = new Subject()
+
+  const unsubscribeBaseValueAxis = createBaseValueAxis(pluginName, {
+    selection,
+    computedData$: observer.computedStackedData$, // 計算疊加value的資料
+    fullParams$: observer.fullParams$,
+    fullDataFormatter$: observer.fullDataFormatter$,
+    fullChartParams$: observer.fullChartParams$,  
+    gridAxesTransform$: observer.gridAxesTransform$,
+    gridAxesReverseTransform$: observer.gridAxesReverseTransform$,
+    gridAxesSize$: observer.gridAxesSize$,
+    gridContainerPosition$: observer.gridContainerPosition$,
+    isSeriesSeprate$: observer.isSeriesSeprate$,
+  })
+
+  return () => {
+    destroy$.next(undefined)
+    unsubscribeBaseValueAxis()
+  }
 })

package/src/grid/types.ts

@@ -1,123 +1,124 @@
-import type { ColorType } from '@orbcharts/core'
-// import type { BaseLegendParams } from '../base/BaseLegend'
-
-// export type LineType = 'line' | 'area' | 'gradientArea'
-// export type BarType = 'rect' | 'triangle'
-
-export interface LinesParams {
-  lineCurve: string
-  lineWidth: number
-  // labelFn: (d: ComputedDatumSeries) => string
-  // labelPositionFn: (d: ComputedDatumSeries) => 'top' | 'bottom' | 'left' | 'right' | 'center'
-  // labelStyleFn: (d: ComputedDatumSeries) => string
-  // labelFontSizeFn: (d: ComputedDatumSeries) => number
-  // labelColorFn: (d: ComputedDatumSeries) => string
-  // labelPadding: number
-}
-
-export interface LineAreasParams {
-  lineCurve: string
-  linearGradientOpacity: [number, number]
-}
-
-export interface DotsParams {
-  radius: number
-  fillColorType: ColorType
-  strokeColorType: ColorType
-  strokeWidth: number
-  // strokeWidthWhileHighlight: number
-  onlyShowHighlighted: boolean
-}
-
-export interface GroupAuxParams {
-  showLine: boolean
-  showLabel: boolean
-  lineDashArray: string
-  lineColorType: ColorType
-  labelColorType: ColorType
-  labelTextColorType: ColorType
-  labelTextFormat: string | ((text: any) => string)
-  labelPadding: number
-}
-
-export interface BarsParams {
-  // barType: BarType
-  barWidth: number
-  barPadding: number
-  barGroupPadding: number // 群組和群組間的間隔
-  barRadius: number | boolean
-}
-
-export interface BarsPNParams extends BarsParams {}
-
-export interface BarStackParams {
-  barWidth: number
-  barGroupPadding: number
-  barRadius: number | boolean
-}
-
-export interface BarsTriangleParams {
-  barWidth: number
-  barPadding: number
-  barGroupPadding: number // 群組和群組間的間隔
-  linearGradientOpacity: [number, number]
-}
-
-export interface GroupAxisParams {
-  // xLabel: string
-  // labelAnchor: 'start' | 'end'
-  labelOffset: [number, number]
-  labelColorType: ColorType
-  axisLineVisible: boolean
-  axisLineColorType: ColorType
-  ticks: number | null | 'all'
-  tickFormat: string | ((text: any) => string)
-  tickLineVisible: boolean
-  tickPadding: number
-  tickFullLine: boolean
-  tickFullLineDasharray: string
-  tickColorType: ColorType
-  // axisLineColor: string
-  // axisLabelColor: string
-  tickTextRotate: number
-  tickTextColorType: ColorType
-}
-
-export interface ValueAxisParams {
-  // xLabel: string
-  // labelAnchor: 'start' | 'end'
-  labelOffset: [number, number]
-  labelColorType: ColorType
-  axisLineVisible: boolean
-  axisLineColorType: ColorType
-  ticks: number | null
-  tickFormat: string | ((text: d3.NumberValue) => string)
-  tickLineVisible: boolean
-  tickPadding: number
-  tickFullLine: boolean
-  tickFullLineDasharray: string
-  tickColorType: ColorType
-  // axisLineColor: string
-  // axisLabelColor: string
-  tickTextRotate: number
-  tickTextColorType: ColorType
-}
-
-export interface ValueStackAxisParams extends ValueAxisParams {}
-
-export interface ScalingAreaParams {
-
-}
-
-export interface GridLegendParams {
-  position: 'top' | 'bottom' | 'left' | 'right'
-  justify: 'start' | 'center' | 'end'
-  padding: number
-  backgroundFill: ColorType
-  backgroundStroke: ColorType
-  gap: number
-  listRectWidth: number
-  listRectHeight: number
-  listRectRadius: number
-  textColorType: ColorType
+import type { ColorType } from '@orbcharts/core'
+// import type { BaseLegendParams } from '../base/BaseLegend'
+
+// export type LineType = 'line' | 'area' | 'gradientArea'
+// export type BarType = 'rect' | 'triangle'
+
+export interface LinesParams {
+  lineCurve: string
+  lineWidth: number
+  // labelFn: (d: ComputedDatumSeries) => string
+  // labelPositionFn: (d: ComputedDatumSeries) => 'top' | 'bottom' | 'left' | 'right' | 'center'
+  // labelStyleFn: (d: ComputedDatumSeries) => string
+  // labelFontSizeFn: (d: ComputedDatumSeries) => number
+  // labelColorFn: (d: ComputedDatumSeries) => string
+  // labelPadding: number
+}
+
+export interface LineAreasParams {
+  lineCurve: string
+  linearGradientOpacity: [number, number]
+}
+
+export interface DotsParams {
+  radius: number
+  fillColorType: ColorType
+  strokeColorType: ColorType
+  strokeWidth: number
+  // strokeWidthWhileHighlight: number
+  onlyShowHighlighted: boolean
+}
+
+export interface GroupAuxParams {
+  showLine: boolean
+  showLabel: boolean
+  lineDashArray: string
+  lineColorType: ColorType
+  labelColorType: ColorType
+  labelTextColorType: ColorType
+  labelTextFormat: string | ((text: any) => string)
+  labelPadding: number
+  labelRotate: number
+}
+
+export interface BarsParams {
+  // barType: BarType
+  barWidth: number
+  barPadding: number
+  barGroupPadding: number // 群組和群組間的間隔
+  barRadius: number | boolean
+}
+
+export interface BarsPNParams extends BarsParams {}
+
+export interface BarStackParams {
+  barWidth: number
+  barGroupPadding: number
+  barRadius: number | boolean
+}
+
+export interface BarsTriangleParams {
+  barWidth: number
+  barPadding: number
+  barGroupPadding: number // 群組和群組間的間隔
+  linearGradientOpacity: [number, number]
+}
+
+export interface GroupAxisParams {
+  // xLabel: string
+  // labelAnchor: 'start' | 'end'
+  labelOffset: [number, number]
+  labelColorType: ColorType
+  axisLineVisible: boolean
+  axisLineColorType: ColorType
+  ticks: number | null | 'all'
+  tickFormat: string | ((text: any) => string)
+  tickLineVisible: boolean
+  tickPadding: number
+  tickFullLine: boolean
+  tickFullLineDasharray: string
+  tickColorType: ColorType
+  // axisLineColor: string
+  // axisLabelColor: string
+  tickTextRotate: number
+  tickTextColorType: ColorType
+}
+
+export interface ValueAxisParams {
+  // xLabel: string
+  // labelAnchor: 'start' | 'end'
+  labelOffset: [number, number]
+  labelColorType: ColorType
+  axisLineVisible: boolean
+  axisLineColorType: ColorType
+  ticks: number | null
+  tickFormat: string | ((text: d3.NumberValue) => string)
+  tickLineVisible: boolean
+  tickPadding: number
+  tickFullLine: boolean
+  tickFullLineDasharray: string
+  tickColorType: ColorType
+  // axisLineColor: string
+  // axisLabelColor: string
+  tickTextRotate: number
+  tickTextColorType: ColorType
+}
+
+export interface ValueStackAxisParams extends ValueAxisParams {}
+
+export interface ScalingAreaParams {
+
+}
+
+export interface GridLegendParams {
+  position: 'top' | 'bottom' | 'left' | 'right'
+  justify: 'start' | 'center' | 'end'
+  padding: number
+  backgroundFill: ColorType
+  backgroundStroke: ColorType
+  gap: number
+  listRectWidth: number
+  listRectHeight: number
+  listRectRadius: number
+  textColorType: ColorType
 }

package/src/index.ts

@@ -1,10 +1,10 @@
-// export { default as container } from './noneDataPlugins/container'
-// export { default as pie } from './seriesPlugins/pie'
-// export { default as pieEventTexts } from './seriesPlugins/pieEventTexts'
-// export { default as pieLabels } from './seriesPlugins/pieLabels'
-
-export * from './grid'
-export * from './multiGrid'
-export * from './noneData'
-export * from './series'
+// export { default as container } from './noneDataPlugins/container'
+// export { default as pie } from './seriesPlugins/pie'
+// export { default as pieEventTexts } from './seriesPlugins/pieEventTexts'
+// export { default as pieLabels } from './seriesPlugins/pieLabels'
+
+export * from './grid'
+export * from './multiGrid'
+export * from './noneData'
+export * from './series'
 export * from './tree'

package/src/multiGrid/defaults.ts

@@ -1,159 +1,159 @@
-import type {
-  MultiGridLegendParams,
-  MultiBarsParams,
-  MultiBarStackParams,
-  MultiBarsTriangleParams,
-  MultiLinesParams,
-  MultiLineAreasParams,
-  MultiDotsParams,
-  MultiGroupAxisParams,
-  MultiValueAxisParams,
-  MultiValueStackAxisParams,
-  OverlappingValueAxesParams,
-  OverlappingValueStackAxesParams
-} 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',
-  ticks: 'all',
-  tickFormat: text => text,
-  tickLineVisible: true,
-  tickPadding: 20,
-  tickFullLine: false,
-  tickFullLineDasharray: 'none',
-  tickColorType: 'secondary',
-  tickTextRotate: 0,
-  tickTextColorType: 'primary',
-  gridIndexes: [0]
-}
-DEFAULT_MULTI_GROUP_AXIS_PARAMS.tickFormat.toString = () => `text => text`
-
-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]
-}
-
-export const DEFAULT_OVERLAPPING_VALUE_STACK_AXES_PARAMS: OverlappingValueStackAxesParams = {
-  ...DEFAULT_OVERLAPPING_VALUE_AXES_PARAMS
+import type {
+  MultiGridLegendParams,
+  MultiBarsParams,
+  MultiBarStackParams,
+  MultiBarsTriangleParams,
+  MultiLinesParams,
+  MultiLineAreasParams,
+  MultiDotsParams,
+  MultiGroupAxisParams,
+  MultiValueAxisParams,
+  MultiValueStackAxisParams,
+  OverlappingValueAxesParams,
+  OverlappingValueStackAxesParams
+} 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',
+  ticks: 'all',
+  tickFormat: text => text,
+  tickLineVisible: true,
+  tickPadding: 20,
+  tickFullLine: false,
+  tickFullLineDasharray: 'none',
+  tickColorType: 'secondary',
+  tickTextRotate: 0,
+  tickTextColorType: 'primary',
+  gridIndexes: [0]
+}
+DEFAULT_MULTI_GROUP_AXIS_PARAMS.tickFormat.toString = () => `text => text`
+
+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]
+}
+
+export const DEFAULT_OVERLAPPING_VALUE_STACK_AXES_PARAMS: OverlappingValueStackAxesParams = {
+  ...DEFAULT_OVERLAPPING_VALUE_AXES_PARAMS
 }