@orbcharts/plugins-basic 3.0.0-beta.6 → 3.0.0-beta.8

package/src/grid/plugins/{ValueStackAxis.ts → StackedValueAxis.ts}

@@ -10,15 +10,15 @@ import {
 import type { DefinePluginConfig } from '../../../lib/core-types'
 import {
   defineGridPlugin } from '../../../lib/core'
-import { DEFAULT_VALUE_STACK_AXIS_PARAMS } from '../defaults'
+import { DEFAULT_STACKED_VALUE_AXIS_PARAMS } from '../defaults'
 import { LAYER_INDEX_OF_AXIS } from '../../const'
 import { createBaseValueAxis } from '../../base/BaseValueAxis'
 
-const pluginName = 'ValueStackAxis'
+const pluginName = 'StackedValueAxis'
 
-const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_VALUE_STACK_AXIS_PARAMS> = {
+const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_STACKED_VALUE_AXIS_PARAMS> = {
   name: pluginName,
-  defaultParams: DEFAULT_VALUE_STACK_AXIS_PARAMS,
+  defaultParams: DEFAULT_STACKED_VALUE_AXIS_PARAMS,
   layerIndex: LAYER_INDEX_OF_AXIS,
   validator: (params, { validateColumns }) => {
     const result = validateColumns(params, {
@@ -72,7 +72,7 @@ const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_VALUE_S
   }
 }
 
-export const ValueStackAxis = defineGridPlugin(pluginConfig)(({ selection, name, observer, subject }) => {
+export const StackedValueAxis = defineGridPlugin(pluginConfig)(({ selection, name, observer, subject }) => {
   
   const destroy$ = new Subject()
 

package/src/index.ts

@@ -1,11 +1,7 @@
-// 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 './multiValue'
 export * from './noneData'
+export * from './relationship'
 export * from './series'
 export * from './tree'

package/src/multiGrid/defaults.ts

@@ -1,7 +1,7 @@
 import type {
   MultiGridLegendParams,
   MultiBarsParams,
-  MultiBarStackParams,
+  MultiStackedBarParams,
   MultiBarsTriangleParams,
   MultiLinesParams,
   MultiLineAreasParams,
@@ -9,9 +9,9 @@ import type {
   MultiGroupAxisParams,
   MultiGridTooltipParams,
   MultiValueAxisParams,
-  MultiValueStackAxisParams,
+  MultiStackedValueAxisParams,
   OverlappingValueAxesParams,
-  OverlappingValueStackAxesParams
+  OverlappingStackedValueAxesParams
 } from '../../lib/plugins-basic-types'
 import { measureTextWidth } from '../utils/commonUtils'
 
@@ -73,7 +73,7 @@ export const DEFAULT_MULTI_VALUE_AXIS_PARAMS: MultiValueAxisParams = {
   gridIndexes: [0]
 }
 
-export const DEFAULT_MULTI_VALUE_STACK_AXIS_PARAMS: MultiValueStackAxisParams = {
+export const DEFAULT_MULTI_STACKED_VALUE_AXIS_PARAMS: MultiStackedValueAxisParams = {
   ...DEFAULT_MULTI_VALUE_AXIS_PARAMS
 }
 
@@ -85,7 +85,7 @@ export const DEFAULT_MULTI_BARS_PARAMS: MultiBarsParams = {
   gridIndexes: [0]
 }
 
-export const DEFAULT_MULTI_BAR_STACK_PARAMS: MultiBarStackParams = {
+export const DEFAULT_MULTI_STACKED_BAR_PARAMS: MultiStackedBarParams = {
   barWidth: 0,
   barGroupPadding: 10,
   barRadius: false,
@@ -115,7 +115,7 @@ export const DEFAULT_MULTI_LINE_AREAS_PARAMS: MultiLineAreasParams = {
 export const DEFAULT_MULTI_DOTS_PARAMS: MultiDotsParams = {
   radius: 4,
   fillColorType: 'white',
-  strokeColorType: 'series',
+  strokeColorType: 'label',
   strokeWidth: 2,
   onlyShowHighlighted: false,
   gridIndexes: [1]
@@ -157,7 +157,7 @@ export const DEFAULT_OVERLAPPING_VALUE_AXES_PARAMS: OverlappingValueAxesParams =
   gridIndexes: [0, 1]
 }
 
-export const DEFAULT_OVERLAPPING_VALUE_STACK_AXES_PARAMS: OverlappingValueStackAxesParams = {
+export const DEFAULT_OVERLAPPING_STACKED_VALUE_AXES_PARAMS: OverlappingStackedValueAxesParams = {
   ...DEFAULT_OVERLAPPING_VALUE_AXES_PARAMS
 }
 

package/src/multiGrid/index.ts

@@ -2,7 +2,7 @@ export * from './defaults'
 // export * from './types'
 export { MultiGridLegend } from './plugins/MultiGridLegend'
 export { MultiBars } from './plugins/MultiBars'
-export { MultiBarStack } from './plugins/MultiBarStack'
+export { MultiStackedBar } from './plugins/MultiStackedBar'
 export { MultiBarsTriangle } from './plugins/MultiBarsTriangle'
 export { MultiLines } from './plugins/MultiLines'
 export { MultiLineAreas } from './plugins/MultiLineAreas'
@@ -10,6 +10,6 @@ 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 { MultiStackedValueAxis } from './plugins/MultiStackedValueAxis'
 export { OverlappingValueAxes } from './plugins/OverlappingValueAxes'
-export { OverlappingValueStackAxes } from './plugins/OverlappingValueStackAxes'
+export { OverlappingStackedValueAxes } from './plugins/OverlappingStackedValueAxes'

package/src/multiGrid/plugins/MultiBars.ts

@@ -73,7 +73,7 @@ export const MultiBars = defineMultiGridPlugin(pluginConfig)(({ selection, name,
 
           const isSeriesSeprate$ = d.dataFormatter$.pipe(
             takeUntil(destroy$),
-            map(d => d.grid.separateSeries),
+            map(d => d.separateSeries),
             distinctUntilChanged(),
             shareReplay(1)
           )

package/src/multiGrid/plugins/MultiBarsTriangle.ts

@@ -79,7 +79,7 @@ export const MultiBarsTriangle = defineMultiGridPlugin(pluginConfig)(({ selectio
 
           const isSeriesSeprate$ = d.dataFormatter$.pipe(
             takeUntil(destroy$),
-            map(d => d.grid.separateSeries),
+            map(d => d.separateSeries),
             distinctUntilChanged(),
             shareReplay(1)
           )

package/src/multiGrid/plugins/MultiGroupAxis.ts

@@ -109,7 +109,7 @@ export const MultiGroupAxis = defineMultiGridPlugin(pluginConfig)(({ selection,
 
           const isSeriesSeprate$ = d.dataFormatter$.pipe(
             takeUntil(destroy$),
-            map(d => d.grid.separateSeries),
+            map(d => d.separateSeries),
             distinctUntilChanged(),
             shareReplay(1)
           )

package/src/multiGrid/plugins/{MultiBarStack.ts → MultiStackedBar.ts}

@@ -9,19 +9,19 @@ import {
 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 { DEFAULT_MULTI_STACKED_BAR_PARAMS } from '../defaults'
+import { createBaseStackedBar } from '../../base/BaseStackedBar'
 import { multiGridPluginDetailObservables } from '../multiGridObservables'
 import { getClassName, getUniID } from '../../utils/orbchartsUtils'
 import { LAYER_INDEX_OF_GRAPHIC } from '../../const'
 
-const pluginName = 'MultiBarStack'
+const pluginName = 'MultiStackedBar'
 
 const gridClassName = getClassName(pluginName, 'grid')
 
-const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_MULTI_BAR_STACK_PARAMS> = {
+const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_MULTI_STACKED_BAR_PARAMS> = {
   name: pluginName,
-  defaultParams: DEFAULT_MULTI_BAR_STACK_PARAMS,
+  defaultParams: DEFAULT_MULTI_STACKED_BAR_PARAMS,
   layerIndex: LAYER_INDEX_OF_GRAPHIC,
   validator: (params, { validateColumns }) => {
     const result = validateColumns(params, {
@@ -45,7 +45,7 @@ const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_MULTI_B
   }
 }
 
-export const MultiBarStack = defineMultiGridPlugin(pluginConfig)(({ selection, name, subject, observer }) => {
+export const MultiStackedBar = defineMultiGridPlugin(pluginConfig)(({ selection, name, subject, observer }) => {
   const destroy$ = new Subject()
 
   const unsubscribeFnArr: (() => void)[] = []
@@ -70,12 +70,12 @@ export const MultiBarStack = defineMultiGridPlugin(pluginConfig)(({ selection, n
 
           const isSeriesSeprate$ = d.dataFormatter$.pipe(
             takeUntil(destroy$),
-            map(d => d.grid.separateSeries),
+            map(d => d.separateSeries),
             distinctUntilChanged(),
             shareReplay(1)
           )
 
-          unsubscribeFnArr[i] = createBaseBarStack(pluginName, {
+          unsubscribeFnArr[i] = createBaseStackedBar(pluginName, {
             selection: gridSelection,
             computedData$: d.computedData$,
             visibleComputedData$: d.visibleComputedData$,

package/src/multiGrid/plugins/{MultiValueStackAxis.ts → MultiStackedValueAxis.ts}

@@ -15,7 +15,7 @@ import { multiGridPluginDetailObservables } from '../multiGridObservables'
 import { getClassName, getUniID } from '../../utils/orbchartsUtils'
 import { LAYER_INDEX_OF_AXIS } from '../../const'
 
-const pluginName = 'MultiValueStackAxis'
+const pluginName = 'MultiStackedValueAxis'
 
 const gridClassName = getClassName(pluginName, 'grid')
 
@@ -81,7 +81,7 @@ const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_MULTI_V
   }
 }
 
-export const MultiValueStackAxis = defineMultiGridPlugin(pluginConfig)(({ selection, name, subject, observer }) => {
+export const MultiStackedValueAxis = defineMultiGridPlugin(pluginConfig)(({ selection, name, subject, observer }) => {
   const destroy$ = new Subject()
 
   const unsubscribeFnArr: (() => void)[] = []
@@ -106,7 +106,7 @@ export const MultiValueStackAxis = defineMultiGridPlugin(pluginConfig)(({ select
 
           const isSeriesSeprate$ = d.dataFormatter$.pipe(
             takeUntil(destroy$),
-            map(d => d.grid.separateSeries),
+            map(d => d.separateSeries),
             distinctUntilChanged(),
             shareReplay(1)
           )

package/src/multiGrid/plugins/MultiValueAxis.ts

@@ -106,7 +106,7 @@ export const MultiValueAxis = defineMultiGridPlugin(pluginConfig)(({ selection,
 
           const isSeriesSeprate$ = d.dataFormatter$.pipe(
             takeUntil(destroy$),
-            map(d => d.grid.separateSeries),
+            map(d => d.separateSeries),
             distinctUntilChanged(),
             shareReplay(1)
           )

package/src/multiGrid/plugins/{OverlappingValueStackAxes.ts → OverlappingStackedValueAxes.ts}

@@ -14,20 +14,20 @@ import type { DefinePluginConfig } from '../../../lib/core-types'
 import type { ContextObserverMultiGrid, DataFormatterGrid, DataFormatterTypeMap, Layout } from '../../../lib/core-types'
 import {
   defineMultiGridPlugin } from '../../../lib/core'
-import { DEFAULT_OVERLAPPING_VALUE_STACK_AXES_PARAMS } from '../defaults'
+import { DEFAULT_OVERLAPPING_STACKED_VALUE_AXES_PARAMS } from '../defaults'
 import { createBaseValueAxis } from '../../base/BaseValueAxis'
 import { multiGridPluginDetailObservables } from '../multiGridObservables'
 import { getClassName, getUniID } from '../../utils/orbchartsUtils'
 import { gridAxesTransformObservable, gridAxesReverseTransformObservable, gridContainerPositionObservable } from '../../../lib/core'
 import { LAYER_INDEX_OF_AXIS } from '../../const'
 
-const pluginName = 'OverlappingValueStackAxes'
+const pluginName = 'OverlappingStackedValueAxes'
 
 const gridClassName = getClassName(pluginName, 'grid')
 
-const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_OVERLAPPING_VALUE_STACK_AXES_PARAMS> = {
+const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_OVERLAPPING_STACKED_VALUE_AXES_PARAMS> = {
   name: pluginName,
-  defaultParams: DEFAULT_OVERLAPPING_VALUE_STACK_AXES_PARAMS,
+  defaultParams: DEFAULT_OVERLAPPING_STACKED_VALUE_AXES_PARAMS,
   layerIndex: LAYER_INDEX_OF_AXIS,
   validator: (params, { validateColumns }) => {
     const result = validateColumns(params, {
@@ -153,7 +153,7 @@ const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_OVERLAP
 }
 
 // 第一個圖軸使用堆疊的資料，第二個圖軸使用原始資料
-export const OverlappingValueStackAxes = defineMultiGridPlugin(pluginConfig)(({ selection, name, subject, observer }) => {
+export const OverlappingStackedValueAxes = defineMultiGridPlugin(pluginConfig)(({ selection, name, subject, observer }) => {
   const destroy$ = new Subject()
 
   const unsubscribeFnArr: (() => void)[] = []
@@ -195,13 +195,13 @@ export const OverlappingValueStackAxes = defineMultiGridPlugin(pluginConfig)(({
       return <DataFormatterGrid>{
         type: 'grid',
         visibleFilter: data.fullDataFormatter.visibleFilter as any,
-        grid: {
+        // grid: {
           ...data.fullDataFormatter.gridList[data.secondGridIndex],
           valueAxis: {
             ...data.fullDataFormatter.gridList[data.secondGridIndex].valueAxis,
             position: reversePosition
-          }
-        },
+          },
+        // },
         container: {
           ...data.fullDataFormatter.container
         }

package/src/multiGrid/plugins/OverlappingValueAxes.ts

@@ -196,13 +196,13 @@ export const OverlappingValueAxes = defineMultiGridPlugin(pluginConfig)(({ selec
       return <DataFormatterGrid>{
         type: 'grid',
         visibleFilter: data.fullDataFormatter.visibleFilter as any,
-        grid: {
+        // grid: {
           ...data.fullDataFormatter.gridList[data.secondGridIndex],
           valueAxis: {
             ...data.fullDataFormatter.gridList[data.secondGridIndex].valueAxis,
             position: reversePosition
-          }
-        },
+          },
+        // },
         container: {
           ...data.fullDataFormatter.container
         }

package/src/multiValue/defaults.ts

@@ -82,15 +82,15 @@ DEFAULT_MULTI_VALUE_TOOLTIP_PARAMS.renderFn.toString = () => `(eventData, { styl
 
 export const DEFAULT_SCATTER_PARAMS: ScatterParams = {
   radius: 5,
-  fillColorType: 'series',
-  strokeColorType: 'series',
+  fillColorType: 'label',
+  strokeColorType: 'label',
   strokeWidth: 0,
 }
 
 export const DEFAULT_SCATTER_BUBBLES_PARAMS: ScatterBubblesParams = {
   // radius: 5,
-  fillColorType: 'series',
-  strokeColorType: 'series',
+  fillColorType: 'label',
+  strokeColorType: 'label',
   strokeWidth: 0,
   valueLinearOpacity: [0.8, 0.8],
   arcScaleType: 'area',
@@ -134,7 +134,8 @@ export const DEFAULT_X_Y_AXES_PARAMS: XYAxesParams = {
     axisLineVisible: false,
     axisLineColorType: 'primary',
     ticks: null,
-    tickFormat: ',.0f',
+    // tickFormat: ',.0f',
+    tickFormat: v => v,
     tickLineVisible: true,
     tickPadding: 20,
     tickFullLine: true,
@@ -148,7 +149,8 @@ export const DEFAULT_X_Y_AXES_PARAMS: XYAxesParams = {
     axisLineVisible: false,
     axisLineColorType: 'primary',
     ticks: null,
-    tickFormat: ',.0f',
+    // tickFormat: ',.0f',
+    tickFormat: v => v,
     tickLineVisible: true,
     tickPadding: 20,
     tickFullLine: true,
@@ -157,6 +159,8 @@ export const DEFAULT_X_Y_AXES_PARAMS: XYAxesParams = {
     tickTextColorType: 'primary'
   }
 }
+DEFAULT_X_Y_AXES_PARAMS.xAxis.tickFormat.toString = () => `v => v`
+DEFAULT_X_Y_AXES_PARAMS.yAxis.tickFormat.toString = () => `v => v`
 
 export const DEFAULT_X_Y_ZOOM_PARAMS: XYZoomParams = {
 

package/src/multiValue/multiValueObservables.ts

@@ -193,15 +193,54 @@ export const multiValueXYPositionObservable = ({ rootSelection, fullDataFormatte
     shareReplay(1)
   )
 
-  const xyScale$ = combineLatest({
-    layout: layout$,
-    filteredMinMaxXYData: filteredMinMaxXYData$,
-    fullDataFormatter: fullDataFormatter$,
-    columnAmount: columnAmount$,
-    rowAmount: rowAmount$
-  }).pipe(
-    switchMap(async d => d),
-    map(data => {
+  // const xyScale$ = combineLatest({
+  //   layout: layout$,
+  //   filteredMinMaxXYData: filteredMinMaxXYData$,
+  //   fullDataFormatter: fullDataFormatter$,
+  //   columnAmount: columnAmount$,
+  //   rowAmount: rowAmount$
+  // }).pipe(
+  //   switchMap(async d => d),
+  //   map(data => {
+  //     const xScale = createAxisToValueScale({
+  //       maxValue: data.filteredMinMaxXYData.maxXDatum.value[0],
+  //       minValue: data.filteredMinMaxXYData.minXDatum.value[0],
+  //       axisWidth: data.layout.width,
+  //       scaleDomain: data.fullDataFormatter.xAxis.scaleDomain,
+  //       scaleRange: data.fullDataFormatter.xAxis.scaleRange,
+  //     })
+  //     const yScale = createAxisToValueScale({
+  //       maxValue: data.filteredMinMaxXYData.maxYDatum.value[1],
+  //       minValue: data.filteredMinMaxXYData.minYDatum.value[1],
+  //       axisWidth: data.layout.height,
+  //       scaleDomain: data.fullDataFormatter.yAxis.scaleDomain,
+  //       scaleRange: data.fullDataFormatter.yAxis.scaleRange,
+  //       reverse: true
+  //     })
+  //     return { xScale, yScale }
+  //   })
+  // )
+
+  const xyScale$: Observable<{
+    xScale: d3.ScaleLinear<number, number, never>;
+    yScale: d3.ScaleLinear<number, number, never>;
+  }> = new Observable(subscriber => {
+    combineLatest({
+      layout: layout$,
+      filteredMinMaxXYData: filteredMinMaxXYData$,
+      fullDataFormatter: fullDataFormatter$,
+      columnAmount: columnAmount$,
+      rowAmount: rowAmount$
+    }).pipe(
+      switchMap(async d => d),
+    ).subscribe(data => {
+      if (!data.filteredMinMaxXYData.minXDatum || !data.filteredMinMaxXYData.maxXDatum
+        || data.filteredMinMaxXYData.minXDatum.value[0] == null || data.filteredMinMaxXYData.maxXDatum.value[0] == null
+        || !data.filteredMinMaxXYData.minYDatum || !data.filteredMinMaxXYData.maxYDatum
+        || data.filteredMinMaxXYData.minYDatum.value[1] == null || data.filteredMinMaxXYData.maxYDatum.value[1] == null
+      ) {
+        return
+      }
       const xScale = createAxisToValueScale({
         maxValue: data.filteredMinMaxXYData.maxXDatum.value[0],
         minValue: data.filteredMinMaxXYData.minXDatum.value[0],
@@ -217,9 +256,9 @@ export const multiValueXYPositionObservable = ({ rootSelection, fullDataFormatte
         scaleRange: data.fullDataFormatter.yAxis.scaleRange,
         reverse: true
       })
-      return { xScale, yScale }
+      subscriber.next({ xScale, yScale })
     })
-  )
+  })
 
   const axisValue$ = combineLatest({
     fullDataFormatter: fullDataFormatter$,

package/src/multiValue/plugins/ScatterBubbles.ts

@@ -2,6 +2,7 @@ import * as d3 from 'd3'
 import {
   combineLatest,
   map,
+  filter,
   switchMap,
   takeUntil,
   distinctUntilChanged,
@@ -25,7 +26,7 @@ import type {
 } from '../../../lib/core-types'
 import {
   defineMultiValuePlugin,
-  getMinAndMax
+  getMinMax
 } from '../../../lib/core'
 import type { ScatterBubblesParams } from '../../../lib/plugins-basic-types'
 import { DEFAULT_SCATTER_BUBBLES_PARAMS } from '../defaults'
@@ -298,7 +299,7 @@ export const ScatterBubbles = defineMultiValuePlugin(pluginConfig)(({ selection,
   const filteredMinMaxValue$ = observer.filteredMinMaxXYData$.pipe(
     takeUntil(destroy$),
     map(data => {
-      return getMinAndMax(data.datumList.flat().map(d => d.value[2] ?? 0))
+      return getMinMax(data.datumList.flat().map(d => d.value[2] ?? 0))
     })
   )
 
@@ -332,7 +333,8 @@ export const ScatterBubbles = defineMultiValuePlugin(pluginConfig)(({ selection,
     takeUntil(destroy$),
     map(data => {
       return data.reduce((acc, current) => acc + current, 0)
-    })
+    }),
+    filter(data => data > 0) // 避免後續計算scale的時候發生問題
   )
 
   const radiusScale$ = combineLatest({
@@ -343,6 +345,7 @@ export const ScatterBubbles = defineMultiValuePlugin(pluginConfig)(({ selection,
     takeUntil(destroy$),
     switchMap(async (d) => d),
     map(data => {
+      // console.log({ totalR: data.totalR, totalValue: data.totalValue })
       return d3.scalePow()
         .domain([0, data.totalValue])
         .range([0, data.totalR])

package/src/multiValue/plugins/XYAxes.ts

@@ -19,7 +19,7 @@ import type {
 import {
   defineMultiValuePlugin,
   createValueToAxisScale,
-  getMinAndMax
+  getMinMax
 } from '../../../lib/core'
 import type { XYAxesParams
 } from '../../../lib/plugins-basic-types'
@@ -295,8 +295,6 @@ function renderXAxis ({ selection, xAxisClassName, fullParams, layout, fullDataF
     .classed(xAxisClassName, true)
     .attr('transform', `translate(0, ${layout.height})`)
 
-  const valueLength = minMaxXY.maxY - minMaxXY.minY
-  
   // const _xScale = d3.scaleLinear()
   //   .domain([0, 150])
   //   .range([416.5, 791.349])
@@ -307,11 +305,7 @@ function renderXAxis ({ selection, xAxisClassName, fullParams, layout, fullDataF
   // 設定Y軸刻度
   const xAxis = d3.axisBottom(xScale)
     .scale(xScale)
-    .ticks(valueLength > fullParams.xAxis.ticks
-      ? fullParams.xAxis.ticks
-      : ((minMaxXY.minY === 0 && minMaxXY.maxY === 0)
-        ? 1
-        : Math.ceil(valueLength))) // 刻度分段數量
+    .ticks(fullParams.xAxis.ticks) // 刻度分段數量
     .tickFormat(d => parseTickFormatValue(d, fullParams.xAxis.tickFormat))
     .tickSize(fullParams.xAxis.tickFullLine == true
       ? -layout.height
@@ -379,8 +373,6 @@ function renderYAxis ({ selection, yAxisClassName, fullParams, layout, fullDataF
     .join('g')
     .classed(yAxisClassName, true)
 
-  const valueLength = minMaxXY.maxY - minMaxXY.minY
-  
   // const _yScale = d3.scaleLinear()
   //   .domain([0, 150])
   //   .range([416.5, 791.349])
@@ -391,11 +383,7 @@ function renderYAxis ({ selection, yAxisClassName, fullParams, layout, fullDataF
   // 設定Y軸刻度
   const yAxis = d3.axisLeft(yScale)
     .scale(yScale)
-    .ticks(valueLength > fullParams.yAxis.ticks
-      ? fullParams.yAxis.ticks
-      : ((minMaxXY.minY === 0 && minMaxXY.maxY === 0)
-        ? 1
-        : Math.ceil(valueLength))) // 刻度分段數量
+    .ticks(fullParams.xAxis.ticks) // 刻度分段數量
     .tickFormat(d => parseTickFormatValue(d, fullParams.yAxis.tickFormat))
     .tickSize(fullParams.yAxis.tickFullLine == true
       ? -layout.width
@@ -522,7 +510,7 @@ export const XYAxes = defineMultiValuePlugin(pluginConfig)(({ selection, name, o
     distinctUntilChanged()
   )
 
-  // const minAndMax$: Observable<[number, number]> = new Observable(subscriber => {
+  // const minMax$: Observable<[number, number]> = new Observable(subscriber => {
   //   combineLatest({
   //     fullDataFormatter: observer.fullDataFormatter$,
   //     computedData: observer.computedData$
@@ -546,11 +534,11 @@ export const XYAxes = defineMultiValuePlugin(pluginConfig)(({ selection, name, o
   //       })
   //     })
     
-  //     const filteredMinAndMax = getMinAndMax(filteredData.flat().map(d => d.value[1]))
-  //     if (filteredMinAndMax[0] === filteredMinAndMax[1]) {
-  //       filteredMinAndMax[0] = filteredMinAndMax[1] - 1 // 避免最大及最小值相同造成無法計算scale
+  //     const filteredMinMax = getMinMax(filteredData.flat().map(d => d.value[1]))
+  //     if (filteredMinMax[0] === filteredMinMax[1]) {
+  //       filteredMinMax[0] = filteredMinMax[1] - 1 // 避免最大及最小值相同造成無法計算scale
   //     }
-  //     subscriber.next(filteredMinAndMax)
+  //     subscriber.next(filteredMinMax)
   //   })
   // })
 
@@ -564,12 +552,21 @@ export const XYAxes = defineMultiValuePlugin(pluginConfig)(({ selection, name, o
       takeUntil(destroy$),
       switchMap(async (d) => d),
     ).subscribe(data => {
-    
+      if (!data.filteredMinMaxXYData.minXDatum || !data.filteredMinMaxXYData.maxXDatum
+        || data.filteredMinMaxXYData.minXDatum.value[0] == null || data.filteredMinMaxXYData.maxXDatum.value[0] == null
+      ) {
+        return
+      }
+      let maxValue = data.filteredMinMaxXYData.maxXDatum.value[0]
+      let minValue = data.filteredMinMaxXYData.minXDatum.value[0]
+      if (maxValue === minValue && maxValue === 0) {
+        // 避免最大及最小值同等於 0 造成無法計算scale
+        maxValue = 1
+      }
+
       const xScale: d3.ScaleLinear<number, number> = createValueToAxisScale({
-        // maxValue: data.minMaxXY.maxX,
-        // minValue: data.minMaxXY.minX,
-        maxValue: data.filteredMinMaxXYData.maxYDatum.value[1],
-        minValue: data.filteredMinMaxXYData.minYDatum.value[0],
+        maxValue,
+        minValue,
         axisWidth: data.layout.width,
         scaleDomain: data.fullDataFormatter.xAxis.scaleDomain,
         scaleRange: data.fullDataFormatter.xAxis.scaleRange,
@@ -589,10 +586,21 @@ export const XYAxes = defineMultiValuePlugin(pluginConfig)(({ selection, name, o
       takeUntil(destroy$),
       switchMap(async (d) => d),
     ).subscribe(data => {
-    
+      if (!data.filteredMinMaxXYData.minYDatum || !data.filteredMinMaxXYData.maxYDatum
+        || data.filteredMinMaxXYData.minYDatum.value[1] == null || data.filteredMinMaxXYData.maxYDatum.value[1] == null
+      ) {
+        return
+      }
+      let maxValue = data.filteredMinMaxXYData.maxYDatum.value[1]
+      let minValue = data.filteredMinMaxXYData.minYDatum.value[1]
+      if (maxValue === minValue && maxValue === 0) {
+        // 避免最大及最小值同等於 0 造成無法計算scale
+        maxValue = 1
+      }
+
       const yScale: d3.ScaleLinear<number, number> = createValueToAxisScale({
-        maxValue: data.filteredMinMaxXYData.maxYDatum.value[1],
-        minValue: data.filteredMinMaxXYData.minYDatum.value[0],
+        maxValue,
+        minValue,
         axisWidth: data.layout.height,
         scaleDomain: data.fullDataFormatter.yAxis.scaleDomain,
         scaleRange: data.fullDataFormatter.yAxis.scaleRange,

package/src/noneData/plugins/Container.ts

@@ -1,28 +1,28 @@
-import * as d3 from 'd3'
-import type { DefinePluginConfig } from '../../../lib/core-types'
-import {
-  defineNoneDataPlugin } from '../../../lib/core'
-import { CONTAINER_PLUGIN_PARAMS } from '../defaults'
-import { LAYER_INDEX_OF_BG } from '../../const'
+// import * as d3 from 'd3'
+// import type { DefinePluginConfig } from '../../../lib/core-types'
+// import {
+//   defineNoneDataPlugin } from '../../../lib/core'
+// import { CONTAINER_PLUGIN_PARAMS } from '../defaults'
+// import { LAYER_INDEX_OF_BG } from '../../const'
 
-const pluginName = 'Container'
+// const pluginName = 'Container'
 
-const pluginConfig: DefinePluginConfig<typeof pluginName, typeof CONTAINER_PLUGIN_PARAMS> = {
-  name: pluginName,
-  defaultParams: CONTAINER_PLUGIN_PARAMS,
-  layerIndex: LAYER_INDEX_OF_BG,
-  validator: (params, { validateColumns }) => {
-    return {
-      status: 'success',
-      columnName: '',
-      expectToBe: '',
-    }
-  }
-}
+// const pluginConfig: DefinePluginConfig<typeof pluginName, typeof CONTAINER_PLUGIN_PARAMS> = {
+//   name: pluginName,
+//   defaultParams: CONTAINER_PLUGIN_PARAMS,
+//   layerIndex: LAYER_INDEX_OF_BG,
+//   validator: (params, { validateColumns }) => {
+//     return {
+//       status: 'success',
+//       columnName: '',
+//       expectToBe: '',
+//     }
+//   }
+// }
 
-export const Container = defineNoneDataPlugin(pluginConfig)(({ selection }) => {
+// export const Container = defineNoneDataPlugin(pluginConfig)(({ selection }) => {
   
-  return function unsubscribe () {
+//   return function unsubscribe () {
     
-  }
-})
+//   }
+// })