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

package/src/base/BaseValueAxis.ts

@@ -22,7 +22,7 @@ import type {
 } from '../../lib/core-types'
 import type { BaseValueAxisParams } from '../../lib/plugins-basic-types'
 import { parseTickFormatValue } from '../utils/d3Utils'
-import { getColor, getMinAndMaxValue, getClassName, getUniID } from '../utils/orbchartsUtils'
+import { getColor, getMinMaxValue, getClassName, getUniID } from '../utils/orbchartsUtils'
 
 // export interface BaseValueAxisParams {
 //   labelOffset: [number, number]
@@ -83,35 +83,35 @@ function renderAxisLabel ({ selection, textClassName, fullParams, axisLabelAlign
   const offsetY = fullParams.tickPadding + fullParams.labelOffset[1]
   let labelX = 0
   let labelY = 0
-  if (fullDataFormatter.grid.groupAxis.position === 'bottom') {
+  if (fullDataFormatter.groupAxis.position === 'bottom') {
     // labelY = - gridAxesSize.height - offsetY
     labelY = - offsetY
-    if (fullDataFormatter.grid.valueAxis.position === 'left') {
+    if (fullDataFormatter.valueAxis.position === 'left') {
       labelX = - offsetX
-    } else if (fullDataFormatter.grid.valueAxis.position === 'right') {
+    } else if (fullDataFormatter.valueAxis.position === 'right') {
       labelX = offsetX
     }
-  } else if (fullDataFormatter.grid.groupAxis.position === 'top') {
+  } else if (fullDataFormatter.groupAxis.position === 'top') {
     // labelY = gridAxesSize.height + offsetY
     labelY = offsetY
-    if (fullDataFormatter.grid.valueAxis.position === 'left') {
+    if (fullDataFormatter.valueAxis.position === 'left') {
       labelX = - offsetX
-    } else if (fullDataFormatter.grid.valueAxis.position === 'right') {
+    } else if (fullDataFormatter.valueAxis.position === 'right') {
       labelX = offsetX
     }
-  } else if (fullDataFormatter.grid.groupAxis.position === 'left') {
+  } else if (fullDataFormatter.groupAxis.position === 'left') {
     // labelX = gridAxesSize.width + offsetX
     labelX = offsetX
-    if (fullDataFormatter.grid.valueAxis.position === 'bottom') {
+    if (fullDataFormatter.valueAxis.position === 'bottom') {
       labelY = offsetY
-    } else if (fullDataFormatter.grid.valueAxis.position === 'top') {
+    } else if (fullDataFormatter.valueAxis.position === 'top') {
       labelY = - offsetY
     }
-  } else if (fullDataFormatter.grid.groupAxis.position === 'right') {
+  } else if (fullDataFormatter.groupAxis.position === 'right') {
     labelX = - offsetX
-    if (fullDataFormatter.grid.valueAxis.position === 'bottom') {
+    if (fullDataFormatter.valueAxis.position === 'bottom') {
       labelY = offsetY
-    } else if (fullDataFormatter.grid.valueAxis.position === 'top') {
+    } else if (fullDataFormatter.valueAxis.position === 'top') {
       labelY = - offsetY
     }
   }
@@ -142,7 +142,7 @@ function renderAxisLabel ({ selection, textClassName, fullParams, axisLabelAlign
         // 偏移使用 x, y 而非 transform 才不會受到外層 scale 變形影響
         .attr('x', labelX)
         .attr('y', labelY)
-        .text(d => fullDataFormatter.grid.valueAxis.label)
+        .text(d => fullDataFormatter.valueAxis.label)
     })
     .attr('transform', d => `translate(0, ${gridAxesSize.height})`)
     // .attr('transform', d => `translate(${- fullParams.tickPadding + fullParams.labelOffset[0]}, ${gridAxesSize.height + fullParams.tickPadding + fullParams.labelOffset[1]})`)
@@ -169,8 +169,6 @@ function renderAxis ({ selection, yAxisClassName, fullParams, tickTextAlign, gri
     .join('g')
     .classed(yAxisClassName, true)
 
-  const valueLength = filteredMinMaxValue[1] - filteredMinMaxValue[0]
-  
   // const _valueScale = d3.scaleLinear()
   //   .domain([0, 150])
   //   .range([416.5, 791.349])
@@ -178,16 +176,16 @@ function renderAxis ({ selection, yAxisClassName, fullParams, tickTextAlign, gri
   // 刻度文字偏移
   let tickPadding = 0
   let textY = 0
-  if (fullDataFormatter.grid.valueAxis.position === 'left') {
+  if (fullDataFormatter.valueAxis.position === 'left') {
     tickPadding = fullParams.tickPadding
     textY = 0
-  } else if (fullDataFormatter.grid.valueAxis.position === 'right') {
+  } else if (fullDataFormatter.valueAxis.position === 'right') {
     tickPadding = - fullParams.tickPadding
     textY = 0
-  } else if (fullDataFormatter.grid.valueAxis.position === 'bottom') {
+  } else if (fullDataFormatter.valueAxis.position === 'bottom') {
     tickPadding = 0
     textY = fullParams.tickPadding
-  } else if (fullDataFormatter.grid.valueAxis.position === 'top') {
+  } else if (fullDataFormatter.valueAxis.position === 'top') {
     tickPadding = 0
     textY = - fullParams.tickPadding
   }
@@ -195,11 +193,7 @@ function renderAxis ({ selection, yAxisClassName, fullParams, tickTextAlign, gri
   // 設定Y軸刻度
   const yAxis = d3.axisLeft(valueScale)
     .scale(valueScale)
-    .ticks(valueLength > fullParams.ticks
-      ? fullParams.ticks
-      : ((filteredMinMaxValue[0] === 0 && filteredMinMaxValue[1] === 0)
-        ? 1
-        : Math.ceil(valueLength))) // 刻度分段數量
+    .ticks(fullParams.ticks) // 刻度分段數量
     .tickFormat(d => parseTickFormatValue(d, fullParams.tickFormat))
     .tickSize(fullParams.tickFullLine == true
       ? -gridAxesSize.width
@@ -236,7 +230,7 @@ function renderAxis ({ selection, yAxisClassName, fullParams, tickTextAlign, gri
   yText.style('transform', textReverseTransformWithRotate)
   
   // 抵消掉預設的偏移
-  if (fullDataFormatter.grid.valueAxis.position === 'bottom' || fullDataFormatter.grid.valueAxis.position === 'top') {
+  if (fullDataFormatter.valueAxis.position === 'bottom' || fullDataFormatter.valueAxis.position === 'top') {
     yText.attr('dy', 0)
   }
 
@@ -413,7 +407,7 @@ export const createBaseValueAxis: BasePluginFn<BaseLinesContext> = (pluginName:
     })
   )
 
-  // const minAndMax$: Observable<[number, number]> = new Observable(subscriber => {
+  // const minMax$: Observable<[number, number]> = new Observable(subscriber => {
   //   combineLatest({
   //     fullDataFormatter: fullDataFormatter$,
   //     computedData: computedData$
@@ -423,13 +417,13 @@ export const createBaseValueAxis: BasePluginFn<BaseLinesContext> = (pluginName:
   //   ).subscribe(data => {
   //     const groupMin = 0
   //     const groupMax = data.computedData[0] ? data.computedData[0].length - 1 : 0
-  //     // const groupScaleDomainMin = data.fullDataFormatter.grid.groupAxis.scaleDomain[0] === 'auto'
-  //     //   ? groupMin - data.fullDataFormatter.grid.groupAxis.scalePadding
-  //     //   : data.fullDataFormatter.grid.groupAxis.scaleDomain[0] as number - data.fullDataFormatter.grid.groupAxis.scalePadding
-  //     const groupScaleDomainMin = data.fullDataFormatter.grid.groupAxis.scaleDomain[0] - data.fullDataFormatter.grid.groupAxis.scalePadding
-  //     const groupScaleDomainMax = data.fullDataFormatter.grid.groupAxis.scaleDomain[1] === 'max'
-  //       ? groupMax + data.fullDataFormatter.grid.groupAxis.scalePadding
-  //       : data.fullDataFormatter.grid.groupAxis.scaleDomain[1] as number + data.fullDataFormatter.grid.groupAxis.scalePadding
+  //     // const groupScaleDomainMin = data.fullDataFormatter.groupAxis.scaleDomain[0] === 'auto'
+  //     //   ? groupMin - data.fullDataFormatter.groupAxis.scalePadding
+  //     //   : data.fullDataFormatter.groupAxis.scaleDomain[0] as number - data.fullDataFormatter.groupAxis.scalePadding
+  //     const groupScaleDomainMin = data.fullDataFormatter.groupAxis.scaleDomain[0] - data.fullDataFormatter.groupAxis.scalePadding
+  //     const groupScaleDomainMax = data.fullDataFormatter.groupAxis.scaleDomain[1] === 'max'
+  //       ? groupMax + data.fullDataFormatter.groupAxis.scalePadding
+  //       : data.fullDataFormatter.groupAxis.scaleDomain[1] as number + data.fullDataFormatter.groupAxis.scalePadding
         
   //     const filteredData = data.computedData.map((d, i) => {
   //       return d.filter((_d, _i) => {
@@ -437,11 +431,11 @@ export const createBaseValueAxis: BasePluginFn<BaseLinesContext> = (pluginName:
   //       })
   //     })
     
-  //     const filteredMinAndMax = getMinAndMaxValue(filteredData.flat())
-  //     if (filteredMinAndMax[0] === filteredMinAndMax[1]) {
-  //       filteredMinAndMax[0] = filteredMinAndMax[1] - 1 // 避免最大及最小值相同造成無法計算scale
+  //     const filteredMinMax = getMinMaxValue(filteredData.flat())
+  //     if (filteredMinMax[0] === filteredMinMax[1]) {
+  //       filteredMinMax[0] = filteredMinMax[1] - 1 // 避免最大及最小值相同造成無法計算scale
   //     }
-  //     subscriber.next(filteredMinAndMax)
+  //     subscriber.next(filteredMinMax)
   //   })
   // })
 
@@ -449,19 +443,25 @@ export const createBaseValueAxis: BasePluginFn<BaseLinesContext> = (pluginName:
     combineLatest({
       fullDataFormatter: fullDataFormatter$,
       gridAxesSize: gridAxesSize$,
-      // minAndMax: minAndMax$
+      // minMax: minMax$
       filteredMinMaxValue: filteredMinMaxValue$
     }).pipe(
       takeUntil(destroy$),
       switchMap(async (d) => d),
     ).subscribe(data => {
+      let maxValue = data.filteredMinMaxValue[1]
+      let minValue = data.filteredMinMaxValue[0]
+      if (maxValue === minValue && maxValue === 0) {
+        // 避免最大及最小值同等於 0 造成無法計算scale
+        maxValue = 1
+      }
     
       const valueScale: d3.ScaleLinear<number, number> = createValueToAxisScale({
-        maxValue: data.filteredMinMaxValue[1],
-        minValue: data.filteredMinMaxValue[0],
+        maxValue,
+        minValue,
         axisWidth: data.gridAxesSize.height,
-        scaleDomain: data.fullDataFormatter.grid.valueAxis.scaleDomain,
-        scaleRange: data.fullDataFormatter.grid.valueAxis.scaleRange
+        scaleDomain: data.fullDataFormatter.valueAxis.scaleDomain,
+        scaleRange: data.fullDataFormatter.valueAxis.scaleRange
       })
 
       subscriber.next(valueScale)
@@ -478,18 +478,18 @@ export const createBaseValueAxis: BasePluginFn<BaseLinesContext> = (pluginName:
       let textAnchor: 'start' | 'middle' | 'end' = 'start'
       let dominantBaseline: 'auto' | 'middle' | 'hanging' = 'hanging'
 
-      if (data.fullDataFormatter.grid.valueAxis.position === 'left') {
+      if (data.fullDataFormatter.valueAxis.position === 'left') {
         textAnchor = 'end'
         dominantBaseline = 'middle'
-      } else if (data.fullDataFormatter.grid.valueAxis.position === 'right') {
+      } else if (data.fullDataFormatter.valueAxis.position === 'right') {
         textAnchor = 'start'
         dominantBaseline = 'middle'
-      } else if (data.fullDataFormatter.grid.valueAxis.position === 'bottom') {
+      } else if (data.fullDataFormatter.valueAxis.position === 'bottom') {
         textAnchor = data.fullParams.tickTextRotate
           ? 'end'
           : 'middle'
         dominantBaseline = 'hanging'
-      } else if (data.fullDataFormatter.grid.valueAxis.position === 'top') {
+      } else if (data.fullDataFormatter.valueAxis.position === 'top') {
         textAnchor = data.fullParams.tickTextRotate
           ? 'start'
           : 'middle'
@@ -508,22 +508,22 @@ export const createBaseValueAxis: BasePluginFn<BaseLinesContext> = (pluginName:
       let textAnchor: 'start' | 'middle' | 'end' = 'start'
       let dominantBaseline: 'auto' | 'middle' | 'hanging' = 'hanging'
 
-      if (d.grid.groupAxis.position === 'bottom') {
+      if (d.groupAxis.position === 'bottom') {
         dominantBaseline = 'auto'
-      } else if (d.grid.groupAxis.position === 'top') {
+      } else if (d.groupAxis.position === 'top') {
         dominantBaseline = 'hanging'
-      } else if (d.grid.groupAxis.position === 'left') {
+      } else if (d.groupAxis.position === 'left') {
         textAnchor = 'start'
-      } else if (d.grid.groupAxis.position === 'right') {
+      } else if (d.groupAxis.position === 'right') {
         textAnchor = 'end'
       }
-      if (d.grid.valueAxis.position === 'left') {
+      if (d.valueAxis.position === 'left') {
         textAnchor = 'end'
-      } else if (d.grid.valueAxis.position === 'right') {
+      } else if (d.valueAxis.position === 'right') {
         textAnchor = 'start'
-      } else if (d.grid.valueAxis.position === 'bottom') {
+      } else if (d.valueAxis.position === 'bottom') {
         dominantBaseline = 'hanging'
-      } else if (d.grid.valueAxis.position === 'top') {
+      } else if (d.valueAxis.position === 'top') {
         dominantBaseline = 'auto'
       }
       return {

package/src/grid/defaults.ts

@@ -4,11 +4,11 @@ import type {
   GroupAuxParams,
   DotsParams,
   BarsParams,
-  BarStackParams,
+  StackedBarParams,
   BarsTriangleParams,
   GroupAxisParams,
   ValueAxisParams,
-  ValueStackAxisParams,
+  StackedValueAxisParams,
   GridTooltipParams,
   GridZoomParams,
   GridLegendParams
@@ -28,7 +28,7 @@ export const DEFAULT_LINE_AREAS_PARAMS: LineAreasParams = {
 export const DEFAULT_DOTS_PARAMS: DotsParams = {
   radius: 4,
   fillColorType: 'white',
-  strokeColorType: 'series',
+  strokeColorType: 'label',
   strokeWidth: 2,
   // strokeWidthWhileHighlight: 3,
   onlyShowHighlighted: false
@@ -59,7 +59,7 @@ export const DEFAULT_BARS_DIVERGING_PARAMS: BarsParams = {
   ...DEFAULT_BARS_PARAMS
 }
 
-export const DEFAULT_BAR_STACK_PARAMS: BarStackParams = {
+export const DEFAULT_STACKED_BAR_PARAMS: StackedBarParams = {
   barWidth: 0,
   barGroupPadding: 10,
   barRadius: false,
@@ -97,7 +97,8 @@ export const DEFAULT_VALUE_AXIS_PARAMS: ValueAxisParams = {
   axisLineVisible: false,
   axisLineColorType: 'primary',
   ticks: null,
-  tickFormat: ',.0f',
+  // tickFormat: ',.0f',
+  tickFormat: v => v,
   tickLineVisible: true,
   tickPadding: 20,
   tickFullLine: true,
@@ -106,8 +107,9 @@ export const DEFAULT_VALUE_AXIS_PARAMS: ValueAxisParams = {
   tickTextRotate: 0,
   tickTextColorType: 'primary'
 }
+DEFAULT_VALUE_AXIS_PARAMS.tickFormat.toString = () => 'v => v'
 
-export const DEFAULT_VALUE_STACK_AXIS_PARAMS: ValueStackAxisParams = {
+export const DEFAULT_STACKED_VALUE_AXIS_PARAMS: StackedValueAxisParams = {
   ...DEFAULT_VALUE_AXIS_PARAMS
 }
 

package/src/grid/gridObservables.ts

@@ -180,18 +180,18 @@ export const gridGroupPositionFnObservable = ({ fullDataFormatter$, gridAxesSize
   //   ).subscribe(data => {
   //     const groupMin = 0
   //     const groupMax = data.computedData[0] ? data.computedData[0].length - 1 : 0
-  //     const groupScaleDomainMin = data.dataFormatter.grid.groupAxis.scaleDomain[0] === 'auto'
-  //       ? groupMin - data.dataFormatter.grid.groupAxis.scalePadding
-  //       : data.dataFormatter.grid.groupAxis.scaleDomain[0] as number - data.dataFormatter.grid.groupAxis.scalePadding
-  //     const groupScaleDomainMax = data.dataFormatter.grid.groupAxis.scaleDomain[1] === 'auto'
-  //       ? groupMax + data.dataFormatter.grid.groupAxis.scalePadding
-  //       : data.dataFormatter.grid.groupAxis.scaleDomain[1] as number + data.dataFormatter.grid.groupAxis.scalePadding
+  //     const groupScaleDomainMin = data.dataFormatter.groupAxis.scaleDomain[0] === 'auto'
+  //       ? groupMin - data.dataFormatter.groupAxis.scalePadding
+  //       : data.dataFormatter.groupAxis.scaleDomain[0] as number - data.dataFormatter.groupAxis.scalePadding
+  //     const groupScaleDomainMax = data.dataFormatter.groupAxis.scaleDomain[1] === 'auto'
+  //       ? groupMax + data.dataFormatter.groupAxis.scalePadding
+  //       : data.dataFormatter.groupAxis.scaleDomain[1] as number + data.dataFormatter.groupAxis.scalePadding
       
   //     // const groupingAmount = data.computedData[0]
   //     //   ? data.computedData[0].length
   //     //   : 0
 
-  //     let _labels = data.dataFormatter.grid.seriesDirection === 'row'
+  //     let _labels = data.dataFormatter.seriesDirection === 'row'
   //       ? (data.computedData[0] ?? []).map(d => d.groupLabel)
   //       : data.computedData.map(d => d[0].groupLabel)
 
@@ -218,13 +218,13 @@ export const gridGroupPositionFnObservable = ({ fullDataFormatter$, gridAxesSize
     map(data => {
       const groupMin = 0
       const groupMax = data.computedData[0] ? data.computedData[0].length - 1 : 0
-      // const groupScaleDomainMin = data.fullDataFormatter.grid.groupAxis.scaleDomain[0] === 'auto'
-      //   ? groupMin - data.fullDataFormatter.grid.groupAxis.scalePadding
-      //   : data.fullDataFormatter.grid.groupAxis.scaleDomain[0] as number - data.fullDataFormatter.grid.groupAxis.scalePadding
-      const groupScaleDomainMin = data.fullDataFormatter.grid.groupAxis.scaleDomain[0] - data.fullDataFormatter.grid.groupAxis.scalePadding
-      const groupScaleDomainMax = data.fullDataFormatter.grid.groupAxis.scaleDomain[1] === 'max'
-        ? groupMax + data.fullDataFormatter.grid.groupAxis.scalePadding
-        : data.fullDataFormatter.grid.groupAxis.scaleDomain[1] as number + data.fullDataFormatter.grid.groupAxis.scalePadding
+      // const groupScaleDomainMin = data.fullDataFormatter.groupAxis.scaleDomain[0] === 'auto'
+      //   ? groupMin - data.fullDataFormatter.groupAxis.scalePadding
+      //   : data.fullDataFormatter.groupAxis.scaleDomain[0] as number - data.fullDataFormatter.groupAxis.scalePadding
+      const groupScaleDomainMin = data.fullDataFormatter.groupAxis.scaleDomain[0] - data.fullDataFormatter.groupAxis.scalePadding
+      const groupScaleDomainMax = data.fullDataFormatter.groupAxis.scaleDomain[1] === 'max'
+        ? groupMax + data.fullDataFormatter.groupAxis.scalePadding
+        : data.fullDataFormatter.groupAxis.scaleDomain[1] as number + data.fullDataFormatter.groupAxis.scalePadding
 
       return [groupScaleDomainMin, groupScaleDomainMax]
     }),
@@ -237,7 +237,7 @@ export const gridGroupPositionFnObservable = ({ fullDataFormatter$, gridAxesSize
   }).pipe(
     switchMap(async d => d),
     map(data => {
-      return data.fullDataFormatter.grid.seriesDirection === 'row'
+      return data.fullDataFormatter.seriesDirection === 'row'
         ? (data.computedData[0] ?? []).map(d => d.groupLabel)
         : data.computedData.map(d => d[0].groupLabel)
     })
@@ -293,22 +293,22 @@ export const gridGroupPositionFnObservable = ({ fullDataFormatter$, gridAxesSize
       switchMap(async (d) => d),
     ).subscribe(data => {
       
-      const reverse = data.dataFormatter.grid.valueAxis.position === 'right'
-        || data.dataFormatter.grid.valueAxis.position === 'bottom'
+      const reverse = data.dataFormatter.valueAxis.position === 'right'
+        || data.dataFormatter.valueAxis.position === 'bottom'
           ? true : false
 
       // 比例尺座標對應非連續資料索引
       const xIndexScale = createAxisToLabelIndexScale({
         axisLabels: data.scaleRangeGroupLabels,
         axisWidth: data.axisSize.width,
-        padding: data.dataFormatter.grid.groupAxis.scalePadding,
+        padding: data.dataFormatter.groupAxis.scalePadding,
         reverse
       })
 
       // 依比例尺位置計算座標
       const axisValuePredicate = (event: any) => {
-        return data.dataFormatter.grid.groupAxis.position === 'bottom'
-          || data.dataFormatter.grid.groupAxis.position === 'top'
+        return data.dataFormatter.groupAxis.position === 'bottom'
+          || data.dataFormatter.groupAxis.position === 'top'
             ? event.offsetX - data.fullChartParams.padding.left
             : event.offsetY - data.fullChartParams.padding.top
       }
@@ -364,13 +364,13 @@ export const gridGroupPositionObservable = ({ rootSelection, fullDataFormatter$,
     map(data => {
       const groupMin = 0
       const groupMax = data.computedData[0] ? data.computedData[0].length - 1 : 0
-      // const groupScaleDomainMin = data.fullDataFormatter.grid.groupAxis.scaleDomain[0] === 'auto'
-      //   ? groupMin - data.fullDataFormatter.grid.groupAxis.scalePadding
-      //   : data.fullDataFormatter.grid.groupAxis.scaleDomain[0] as number - data.fullDataFormatter.grid.groupAxis.scalePadding
-      const groupScaleDomainMin = data.fullDataFormatter.grid.groupAxis.scaleDomain[0] - data.fullDataFormatter.grid.groupAxis.scalePadding
-      const groupScaleDomainMax = data.fullDataFormatter.grid.groupAxis.scaleDomain[1] === 'max'
-        ? groupMax + data.fullDataFormatter.grid.groupAxis.scalePadding
-        : data.fullDataFormatter.grid.groupAxis.scaleDomain[1] as number + data.fullDataFormatter.grid.groupAxis.scalePadding
+      // const groupScaleDomainMin = data.fullDataFormatter.groupAxis.scaleDomain[0] === 'auto'
+      //   ? groupMin - data.fullDataFormatter.groupAxis.scalePadding
+      //   : data.fullDataFormatter.groupAxis.scaleDomain[0] as number - data.fullDataFormatter.groupAxis.scalePadding
+      const groupScaleDomainMin = data.fullDataFormatter.groupAxis.scaleDomain[0] - data.fullDataFormatter.groupAxis.scalePadding
+      const groupScaleDomainMax = data.fullDataFormatter.groupAxis.scaleDomain[1] === 'max'
+        ? groupMax + data.fullDataFormatter.groupAxis.scalePadding
+        : data.fullDataFormatter.groupAxis.scaleDomain[1] as number + data.fullDataFormatter.groupAxis.scalePadding
 
       return [groupScaleDomainMin, groupScaleDomainMax]
     }),
@@ -383,7 +383,7 @@ export const gridGroupPositionObservable = ({ rootSelection, fullDataFormatter$,
   }).pipe(
     switchMap(async d => d),
     map(data => {
-      return data.fullDataFormatter.grid.seriesDirection === 'row'
+      return data.fullDataFormatter.seriesDirection === 'row'
         ? (data.computedData[0] ?? []).map(d => d.groupLabel)
         : data.computedData.map(d => d[0].groupLabel)
     })
@@ -404,7 +404,7 @@ export const gridGroupPositionObservable = ({ rootSelection, fullDataFormatter$,
 
   const reverse$ = fullDataFormatter$.pipe(
     map(d => {
-      return d.grid.valueAxis.position === 'right' || d.grid.valueAxis.position === 'bottom'
+      return d.valueAxis.position === 'right' || d.valueAxis.position === 'bottom'
           ? true
           : false
     })
@@ -422,7 +422,7 @@ export const gridGroupPositionObservable = ({ rootSelection, fullDataFormatter$,
       return createAxisToLabelIndexScale({
         axisLabels: data.scaleRangeGroupLabels,
         axisWidth: data.gridAxesSize.width,
-        padding: data.fullDataFormatter.grid.groupAxis.scalePadding,
+        padding: data.fullDataFormatter.groupAxis.scalePadding,
         reverse: data.reverse
       })
     })
@@ -463,8 +463,8 @@ export const gridGroupPositionObservable = ({ rootSelection, fullDataFormatter$,
         offsetX: data.rootMousemove.offsetX * data.columnAmount % data.layout.rootWidth,
         offsetY: data.rootMousemove.offsetY * data.rowAmount % data.layout.rootHeight
       }
-      return data.fullDataFormatter.grid.groupAxis.position === 'bottom'
-          || data.fullDataFormatter.grid.groupAxis.position === 'top'
+      return data.fullDataFormatter.groupAxis.position === 'bottom'
+          || data.fullDataFormatter.groupAxis.position === 'top'
             ? eventData.offsetX - data.fullChartParams.padding.left
             : eventData.offsetY - data.fullChartParams.padding.top
     })

package/src/grid/index.ts

@@ -4,13 +4,13 @@ export { Lines } from './plugins/Lines'
 export { LineAreas } from './plugins/LineAreas'
 export { Bars } from './plugins/Bars'
 export { BarsPN } from './plugins/BarsPN'
-export { BarStack } from './plugins/BarStack'
+export { StackedBar } from './plugins/StackedBar'
 export { BarsTriangle } from './plugins/BarsTriangle'
 export { Dots } from './plugins/Dots'
 export { GridLegend } from './plugins/GridLegend'
 export { GroupAxis } from './plugins/GroupAxis'
 export { ValueAxis } from './plugins/ValueAxis'
-export { ValueStackAxis } from './plugins/ValueStackAxis'
+export { StackedValueAxis } from './plugins/StackedValueAxis'
 export { GridTooltip } from './plugins/GridTooltip'
 export { GridZoom } from './plugins/GridZoom'
 export { GroupAux } from './plugins/GroupAux'

package/src/grid/plugins/GridZoom.ts

@@ -76,7 +76,7 @@ export const GridZoom = defineGridPlugin(pluginConfig)(({ selection, rootSelecti
   //   })
 
   const initGroupAxis$ = observer.fullDataFormatter$.pipe(
-    map(d => d.grid.groupAxis),
+    map(d => d.groupAxis),
     // 只用第一次資料來計算scale才不會造成每次變動都受到影響
     first()
   )
@@ -156,7 +156,7 @@ export const GridZoom = defineGridPlugin(pluginConfig)(({ selection, rootSelecti
           return Math.min(data.groupMaxIndex, Math.max(groupMinIndex, n));
         }
         
-        const zoomedDomain = data.fullDataFormatter.grid.groupAxis.position === 'bottom' || data.fullDataFormatter.grid.groupAxis.position === 'top'
+        const zoomedDomain = data.fullDataFormatter.groupAxis.position === 'bottom' || data.fullDataFormatter.groupAxis.position === 'top'
           ? t.rescaleX(shadowScale)
             .domain()
             .map(mapGroupindex)
@@ -193,13 +193,13 @@ export const GridZoom = defineGridPlugin(pluginConfig)(({ selection, rootSelecti
 
         const newDataFormatter: DataFormatterGrid = {
           ...data.fullDataFormatter,
-          grid: {
-            ...data.fullDataFormatter.grid,
+          // grid: {
+            // ...data.fullDataFormatter.grid,
             groupAxis: {
-              ...data.fullDataFormatter.grid.groupAxis,
+              ...data.fullDataFormatter.groupAxis,
               scaleDomain: zoomedDomain
             }
-          }
+          // }
         }
         subject.dataFormatter$.next(newDataFormatter)
       })

package/src/grid/plugins/GroupAux.ts

@@ -225,18 +225,18 @@ function renderLabel ({ selection, labelData, fullParams, fullDataFormatter, ful
       // -- label偏移位置 --
       let rectX = - rectWidth / 2
       let rectY = -2
-      if (fullDataFormatter.grid.groupAxis.position === 'bottom') {
+      if (fullDataFormatter.groupAxis.position === 'bottom') {
         rectX = fullParams.labelRotate
           ? - rectWidth + rectHeight // 有傾斜時以末端對齊（+height是為了修正移動太多）
           : - rectWidth / 2
         rectY = 2
-      } else if (fullDataFormatter.grid.groupAxis.position === 'left') {
+      } else if (fullDataFormatter.groupAxis.position === 'left') {
         rectX = - rectWidth + 2
         rectY = - rectHeight / 2
-      } else if (fullDataFormatter.grid.groupAxis.position === 'right') {
+      } else if (fullDataFormatter.groupAxis.position === 'right') {
         rectX = - 2
         rectY = - rectHeight / 2
-      } else if (fullDataFormatter.grid.groupAxis.position === 'top') {
+      } else if (fullDataFormatter.groupAxis.position === 'top') {
         rectX = fullParams.labelRotate
           ? - rectWidth + rectHeight // 有傾斜時以末端對齊（+height是為了修正移動太多）
           : - rectWidth / 2
@@ -301,7 +301,7 @@ function renderLabel ({ selection, labelData, fullParams, fullDataFormatter, ful
           renderTspansOnAxis(d3.select(n[i]), {
             textArr: datum.textArr,
             textSizePx,
-            groupAxisPosition: fullDataFormatter.grid.groupAxis.position
+            groupAxisPosition: fullDataFormatter.groupAxis.position
           })
         })
 
@@ -327,7 +327,7 @@ function renderLabel ({ selection, labelData, fullParams, fullDataFormatter, ful
       //   renderTspansOnAxis(d3.select(n[i]), {
       //     textArr: datum.textArr,
       //     textSizePx,
-      //     groupAxisPosition: fullDataFormatter.grid.groupAxis.position
+      //     groupAxisPosition: fullDataFormatter.groupAxis.position
       //   })
       // })
     })
@@ -488,20 +488,20 @@ export const GroupAux = defineGridPlugin(pluginConfig)(({ selection, rootSelecti
   //   ).subscribe(data => {
   //     const groupMin = 0
   //     const groupMax = data.computedData[0] ? data.computedData[0].length - 1 : 0
-  //     const groupScaleDomainMin = data.fullDataFormatter.grid.groupAxis.scaleDomain[0] === 'auto'
-  //       ? groupMin - data.fullDataFormatter.grid.groupAxis.scalePadding
-  //       : data.fullDataFormatter.grid.groupAxis.scaleDomain[0] as number - data.fullDataFormatter.grid.groupAxis.scalePadding
-  //     const groupScaleDomainMax = data.fullDataFormatter.grid.groupAxis.scaleDomain[1] === 'auto'
-  //       ? groupMax + data.fullDataFormatter.grid.groupAxis.scalePadding
-  //       : data.fullDataFormatter.grid.groupAxis.scaleDomain[1] as number + data.fullDataFormatter.grid.groupAxis.scalePadding
+  //     const groupScaleDomainMin = data.fullDataFormatter.groupAxis.scaleDomain[0] === 'auto'
+  //       ? groupMin - data.fullDataFormatter.groupAxis.scalePadding
+  //       : data.fullDataFormatter.groupAxis.scaleDomain[0] as number - data.fullDataFormatter.groupAxis.scalePadding
+  //     const groupScaleDomainMax = data.fullDataFormatter.groupAxis.scaleDomain[1] === 'auto'
+  //       ? groupMax + data.fullDataFormatter.groupAxis.scalePadding
+  //       : data.fullDataFormatter.groupAxis.scaleDomain[1] as number + data.fullDataFormatter.groupAxis.scalePadding
       
   //     const groupingLength = data.computedData[0]
   //       ? data.computedData[0].length
   //       : 0
 
-  //     let _labels = data.fullDataFormatter.grid.seriesDirection === 'row'
-  //       // ? data.fullDataFormatter.grid.columnLabels
-  //       // : data.fullDataFormatter.grid.rowLabels
+  //     let _labels = data.fullDataFormatter.seriesDirection === 'row'
+  //       // ? data.fullDataFormatter.columnLabels
+  //       // : data.fullDataFormatter.rowLabels
   //       ? (data.computedData[0] ?? []).map(d => d.groupLabel)
   //       : data.computedData.map(d => d[0].groupLabel)
 
@@ -516,7 +516,7 @@ export const GroupAux = defineGridPlugin(pluginConfig)(({ selection, rootSelecti
   //       })
 
       
-  //     const padding = data.fullDataFormatter.grid.groupAxis.scalePadding
+  //     const padding = data.fullDataFormatter.groupAxis.scalePadding
       
   //     const groupScale = createLabelToAxisScale({
   //       axisLabels,
@@ -538,13 +538,13 @@ export const GroupAux = defineGridPlugin(pluginConfig)(({ selection, rootSelecti
   //   map(data => {
   //     const groupMin = 0
   //     const groupMax = data.computedData[0] ? data.computedData[0].length - 1 : 0
-  //     // const groupScaleDomainMin = data.fullDataFormatter.grid.groupAxis.scaleDomain[0] === 'auto'
-  //     //   ? groupMin - data.fullDataFormatter.grid.groupAxis.scalePadding
-  //     //   : data.fullDataFormatter.grid.groupAxis.scaleDomain[0] as number - data.fullDataFormatter.grid.groupAxis.scalePadding
-  //     const groupScaleDomainMin = data.fullDataFormatter.grid.groupAxis.scaleDomain[0] - data.fullDataFormatter.grid.groupAxis.scalePadding
-  //     const groupScaleDomainMax = data.fullDataFormatter.grid.groupAxis.scaleDomain[1] === 'max'
-  //       ? groupMax + data.fullDataFormatter.grid.groupAxis.scalePadding
-  //       : data.fullDataFormatter.grid.groupAxis.scaleDomain[1] as number + data.fullDataFormatter.grid.groupAxis.scalePadding
+  //     // const groupScaleDomainMin = data.fullDataFormatter.groupAxis.scaleDomain[0] === 'auto'
+  //     //   ? groupMin - data.fullDataFormatter.groupAxis.scalePadding
+  //     //   : data.fullDataFormatter.groupAxis.scaleDomain[0] as number - data.fullDataFormatter.groupAxis.scalePadding
+  //     const groupScaleDomainMin = data.fullDataFormatter.groupAxis.scaleDomain[0] - data.fullDataFormatter.groupAxis.scalePadding
+  //     const groupScaleDomainMax = data.fullDataFormatter.groupAxis.scaleDomain[1] === 'max'
+  //       ? groupMax + data.fullDataFormatter.groupAxis.scalePadding
+  //       : data.fullDataFormatter.groupAxis.scaleDomain[1] as number + data.fullDataFormatter.groupAxis.scalePadding
 
   //     return [groupScaleDomainMin, groupScaleDomainMax]
   //   }),

package/src/grid/plugins/{BarStack.ts → StackedBar.ts}

@@ -7,15 +7,15 @@ import {
   Observable } from 'rxjs'
 import type { DefinePluginConfig } from '../../../lib/core-types'
 import { defineGridPlugin } from '../../../lib/core'
-import { DEFAULT_BAR_STACK_PARAMS } from '../defaults'
+import { DEFAULT_STACKED_BAR_PARAMS } from '../defaults'
 import { LAYER_INDEX_OF_GRAPHIC } from '../../const'
-import { createBaseBarStack } from '../../base/BaseBarStack'
+import { createBaseStackedBar } from '../../base/BaseStackedBar'
 
-const pluginName = 'BarStack'
+const pluginName = 'StackedBar'
 
-const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_BAR_STACK_PARAMS> = {
+const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_STACKED_BAR_PARAMS> = {
   name: pluginName,
-  defaultParams: DEFAULT_BAR_STACK_PARAMS,
+  defaultParams: DEFAULT_STACKED_BAR_PARAMS,
   layerIndex: 5,
   validator: (params, { validateColumns }) => {
     const result = validateColumns(params, {
@@ -33,10 +33,10 @@ const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_BAR_STA
   }
 }
 
-export const BarStack = defineGridPlugin(pluginConfig)(({ selection, name, subject, observer }) => {
+export const StackedBar = defineGridPlugin(pluginConfig)(({ selection, name, subject, observer }) => {
   const destroy$ = new Subject()
 
-  const unsubscribeBaseBars = createBaseBarStack(pluginName, {
+  const unsubscribeBaseBars = createBaseStackedBar(pluginName, {
     selection,
     computedData$: observer.computedData$,
     computedLayoutData$: observer.computedLayoutData$,