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

package/src/base/{BaseBarStack.ts → BaseStackedBar.ts}

@@ -17,22 +17,22 @@ import type {
   DataFormatterGrid,
   EventGrid,
   ChartParams,
-  GridContainerPosition,
+  ContainerPositionScaled,
   Layout,
   TransformData } from '../../lib/core-types'
-import type { BaseBarStackParams } from '../../lib/plugins-basic-types'
+import type { BaseStackedBarParams } from '../../lib/plugins-basic-types'
 import { getD3TransitionEase } from '../utils/d3Utils'
 import { getClassName, getUniID } from '../utils/orbchartsUtils'
 import { gridSelectionsObservable } from '../grid/gridObservables'
 import { shareReplay } from 'rxjs/operators'
 
-// export interface BaseBarStackParams {
+// export interface BaseStackedBarParams {
 //   barWidth: number
 //   barGroupPadding: number
 //   barRadius: number | boolean
 // }
 
-interface BaseBarStackContext {
+interface BaseStackedBarContext {
   selection: d3.Selection<any, unknown, any, unknown>
   computedData$: Observable<ComputedDataGrid>
   computedLayoutData$: Observable<ComputedLayoutDataGrid>
@@ -41,7 +41,7 @@ interface BaseBarStackContext {
   seriesLabels$: Observable<string[]>
   SeriesDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
   GroupDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
-  fullParams$: Observable<BaseBarStackParams>
+  fullParams$: Observable<BaseStackedBarParams>
   fullDataFormatter$: Observable<DataFormatterGrid>
   fullChartParams$: Observable<ChartParams>
   gridAxesTransform$: Observable<TransformData>
@@ -52,7 +52,7 @@ interface BaseBarStackContext {
     height: number;
   }>
   gridHighlight$: Observable<ComputedDatumGrid[]>
-  gridContainerPosition$: Observable<GridContainerPosition[]>
+  gridContainerPosition$: Observable<ContainerPositionScaled[]>
   isSeriesSeprate$: Observable<boolean>
   event$: Subject<EventGrid>
 }
@@ -70,7 +70,7 @@ interface RenderBarParams {
   zeroY: number
   groupLabels: string[]
   // barScale: d3.ScalePoint<string>
-  params: BaseBarStackParams
+  params: BaseStackedBarParams
   chartParams: ChartParams
   barWidth: number
   transformedBarRadius: [number, number][]
@@ -87,7 +87,7 @@ type ClipPathDatum = {
   height: number;
 }
 
-// const pluginName = 'BarStack'
+// const pluginName = 'StackedBar'
 // const rectClassName = getClassName(pluginName, 'rect')
 // group的delay在動畫中的佔比（剩餘部份的時間為圖形本身的動畫時間，因為delay時間和最後一個group的動畫時間加總為1）
 const groupDelayProportionOfDuration = 0.3
@@ -97,13 +97,15 @@ function calcBarWidth ({ axisWidth, groupAmount, barGroupPadding = 0 }: {
   groupAmount: number
   barGroupPadding: number
 }) {
-  const eachGroupWidth = axisWidth / (groupAmount - 1)
+  const eachGroupWidth = groupAmount > 1 // 等於 1 時會算出 Infinity
+    ? axisWidth / (groupAmount - 1) // -1是因為要扣掉兩側的padding
+    : axisWidth
   const width = eachGroupWidth - barGroupPadding
   return width > 1 ? width : 1
 
 }
 
-// function makeBarScale (barWidth: number, seriesLabels: string[], params: BarStackParams) {
+// function makeBarScale (barWidth: number, seriesLabels: string[], params: StackedBarParams) {
 //   const barHalfWidth = barWidth! / 2
 //   const barGroupWidth = barWidth * seriesLabels.length + params.barPadding! * seriesLabels.length
 //   return d3.scalePoint()
@@ -143,7 +145,7 @@ function renderRectBars ({ graphicGSelection, rectClassName, barData, zeroY, gro
               .append('rect')
               .classed(rectClassName, true)
               .attr('cursor', 'pointer')
-              .attr('height', d => 0)
+              .attr('height', d => 1)
           },
           update => update,
           exit => exit.remove()
@@ -160,7 +162,7 @@ function renderRectBars ({ graphicGSelection, rectClassName, barData, zeroY, gro
         .ease(getD3TransitionEase(chartParams.transitionEase))
         .delay((d, i) => d.groupIndex * delayGroup)
         .attr('y', d => d._barStartY)
-        .attr('height', d => Math.abs(d._barHeight))
+        .attr('height', d => Math.abs(d._barHeight) || 1) // 無值還是給一個 1 的高度
     })
 
   // const barGroup = graphicGSelection
@@ -290,7 +292,7 @@ function highlight ({ selection, ids, fullChartParams }: {
 }
 
 
-export const createBaseBarStack: BasePluginFn<BaseBarStackContext> = (pluginName: string, {
+export const createBaseStackedBar: BasePluginFn<BaseStackedBarContext> = (pluginName: string, {
   selection,
   computedData$,
   computedLayoutData$,
@@ -486,13 +488,13 @@ export const createBaseBarStack: BasePluginFn<BaseBarStackContext> = (pluginName
     map(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 groupScaleDomainMin = data.dataFormatter.grid.groupAxis.scaleDomain[0]
-      const groupScaleDomainMax = data.dataFormatter.grid.groupAxis.scaleDomain[1] === 'max'
-        ? 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 groupScaleDomainMin = data.dataFormatter.groupAxis.scaleDomain[0]
+      const groupScaleDomainMax = data.dataFormatter.groupAxis.scaleDomain[1] === 'max'
+        ? groupMax // + data.dataFormatter.groupAxis.scalePadding
+        : data.dataFormatter.groupAxis.scaleDomain[1] as number // + data.dataFormatter.groupAxis.scalePadding
 
       return [groupScaleDomainMin, groupScaleDomainMax]
     })

package/src/base/BaseTooltip.ts

@@ -23,7 +23,7 @@ import type { BasePluginFn } from './types'
 import { defineNoneDataPlugin, textSizePxObservable } from '../../lib/core'
 import { getSvgGElementSize, appendSvg } from '../utils/d3Utils'
 import { getColor, getClassName } from '../utils/orbchartsUtils'
-
+import { measureTextWidth } from '../utils/commonUtils'
 
 interface BaseTooltipContext {
   rootSelection: d3.Selection<any, unknown, any, unknown>
@@ -259,7 +259,7 @@ export const createBaseTooltip: BasePluginFn<BaseTooltipContext> = (pluginName:
         textSize: data.fullChartParams.styles.textSize,
         textSizePx: data.textSizePx,
         textColor: getColor(data.fullParams.textColorType, data.fullChartParams),
-        seriesColors: data.fullChartParams.colors[data.fullChartParams.colorScheme].series
+        seriesColors: data.fullChartParams.colors[data.fullChartParams.colorScheme].label
       }
     })
   )
@@ -287,6 +287,9 @@ export const createBaseTooltip: BasePluginFn<BaseTooltipContext> = (pluginName:
           eventData,
           // context
           {
+            utils: {
+              measureTextWidth
+            },
             styles: data.tooltipStyle
           }
         )

package/src/base/BaseValueAxis.ts

@@ -8,21 +8,21 @@ import {
   takeUntil,
   Observable,
   Subject } from 'rxjs'
-import { createAxisLinearScale } from '../../lib/core'
+import { createValueToAxisScale } from '../../lib/core'
 import type { BasePluginFn } from './types'
 import type {
   ComputedDataGrid,
   DataFormatterGrid,
   ChartParams,
   ComputedDatumGrid,
-  GridContainerPosition,
+  ContainerPositionScaled,
   TransformData,
   EventGrid,
   ColorType
 } 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]
@@ -43,6 +43,7 @@ import { getColor, getMinAndMaxValue, getClassName, getUniID } from '../utils/or
 interface BaseLinesContext {
   selection: d3.Selection<any, unknown, any, unknown>
   computedData$: Observable<ComputedDataGrid>
+  filteredMinMaxValue$: Observable<[number, number]>
   fullParams$: Observable<BaseValueAxisParams>
   fullDataFormatter$: Observable<DataFormatterGrid>
   fullChartParams$: Observable<ChartParams>
@@ -52,7 +53,7 @@ interface BaseLinesContext {
     width: number;
     height: number;
   }>
-  gridContainerPosition$: Observable<GridContainerPosition[]>
+  gridContainerPosition$: Observable<ContainerPositionScaled[]>
   isSeriesSeprate$: Observable<boolean>
 }
 
@@ -82,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
     }
   }
@@ -141,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]})`)
@@ -149,7 +150,7 @@ function renderAxisLabel ({ selection, textClassName, fullParams, axisLabelAlign
 
 }
 
-function renderAxis ({ selection, yAxisClassName, fullParams, tickTextAlign, gridAxesSize, fullDataFormatter, fullChartParams, valueScale, textReverseTransformWithRotate, minAndMax }: {
+function renderAxis ({ selection, yAxisClassName, fullParams, tickTextAlign, gridAxesSize, fullDataFormatter, fullChartParams, valueScale, textReverseTransformWithRotate, filteredMinMaxValue }: {
   selection: d3.Selection<SVGGElement, any, any, any>,
   yAxisClassName: string
   fullParams: BaseValueAxisParams
@@ -159,7 +160,7 @@ function renderAxis ({ selection, yAxisClassName, fullParams, tickTextAlign, gri
   fullChartParams: ChartParams
   valueScale: d3.ScaleLinear<number, number>
   textReverseTransformWithRotate: string,
-  minAndMax: [number, number]
+  filteredMinMaxValue: [number, number]
 }) {
 
   const yAxisSelection = selection
@@ -168,8 +169,6 @@ function renderAxis ({ selection, yAxisClassName, fullParams, tickTextAlign, gri
     .join('g')
     .classed(yAxisClassName, true)
 
-  const valueLength = minAndMax[1] - minAndMax[0]
-  
   // const _valueScale = d3.scaleLinear()
   //   .domain([0, 150])
   //   .range([416.5, 791.349])
@@ -177,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
   }
@@ -194,11 +193,7 @@ function renderAxis ({ selection, yAxisClassName, fullParams, tickTextAlign, gri
   // 設定Y軸刻度
   const yAxis = d3.axisLeft(valueScale)
     .scale(valueScale)
-    .ticks(valueLength > fullParams.ticks
-      ? fullParams.ticks
-      : ((minAndMax[0] === 0 && minAndMax[1] === 0)
-        ? 1
-        : Math.ceil(valueLength))) // 刻度分段數量
+    .ticks(fullParams.ticks) // 刻度分段數量
     .tickFormat(d => parseTickFormatValue(d, fullParams.tickFormat))
     .tickSize(fullParams.tickFullLine == true
       ? -gridAxesSize.width
@@ -231,10 +226,11 @@ function renderAxis ({ selection, yAxisClassName, fullParams, tickTextAlign, gri
     .attr('dominant-baseline', tickTextAlign.dominantBaseline)
     // .attr('dy', 0)
     .attr('y', textY)
+    .attr('dy', 0)
   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)
   }
 
@@ -246,6 +242,7 @@ function renderAxis ({ selection, yAxisClassName, fullParams, tickTextAlign, gri
 export const createBaseValueAxis: BasePluginFn<BaseLinesContext> = (pluginName: string, {
   selection,
   computedData$,
+  filteredMinMaxValue$,
   fullParams$,
   fullDataFormatter$,
   fullChartParams$,
@@ -410,55 +407,61 @@ export const createBaseValueAxis: BasePluginFn<BaseLinesContext> = (pluginName:
     })
   )
 
-  const minAndMax$: Observable<[number, number]> = new Observable(subscriber => {
-    combineLatest({
-      fullDataFormatter: fullDataFormatter$,
-      gridAxesSize: gridAxesSize$,
-      computedData: computedData$
-    }).pipe(
-      takeUntil(destroy$),
-      switchMap(async (d) => d),
-    ).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 minMax$: Observable<[number, number]> = new Observable(subscriber => {
+  //   combineLatest({
+  //     fullDataFormatter: fullDataFormatter$,
+  //     computedData: computedData$
+  //   }).pipe(
+  //     takeUntil(destroy$),
+  //     switchMap(async (d) => d),
+  //   ).subscribe(data => {
+  //     const groupMin = 0
+  //     const groupMax = data.computedData[0] ? data.computedData[0].length - 1 : 0
+  //     // 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) => {
-          return _i >= groupScaleDomainMin && _i <= groupScaleDomainMax
-        })
-      })
+  //     const filteredData = data.computedData.map((d, i) => {
+  //       return d.filter((_d, _i) => {
+  //         return _i >= groupScaleDomainMin && _i <= groupScaleDomainMax
+  //       })
+  //     })
     
-      const filteredMinAndMax = getMinAndMaxValue(filteredData.flat())
-      if (filteredMinAndMax[0] === filteredMinAndMax[1]) {
-        filteredMinAndMax[0] = filteredMinAndMax[1] - 1 // 避免最大及最小值相同造成無法計算scale
-      }
-      subscriber.next(filteredMinAndMax)
-    })
-  })
+  //     const filteredMinMax = getMinMaxValue(filteredData.flat())
+  //     if (filteredMinMax[0] === filteredMinMax[1]) {
+  //       filteredMinMax[0] = filteredMinMax[1] - 1 // 避免最大及最小值相同造成無法計算scale
+  //     }
+  //     subscriber.next(filteredMinMax)
+  //   })
+  // })
 
   const valueScale$: Observable<d3.ScaleLinear<number, number>> = new Observable(subscriber => {
     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> = createAxisLinearScale({
-        maxValue: data.minAndMax[1],
-        minValue: data.minAndMax[0],
+      const valueScale: d3.ScaleLinear<number, number> = createValueToAxisScale({
+        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)
@@ -475,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'
@@ -505,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 {
@@ -543,7 +546,7 @@ export const createBaseValueAxis: BasePluginFn<BaseLinesContext> = (pluginName:
     valueScale: valueScale$,
     textReverseTransform: textReverseTransform$,
     textReverseTransformWithRotate: textReverseTransformWithRotate$,
-    minAndMax: minAndMax$
+    filteredMinMaxValue: filteredMinMaxValue$
   }).pipe(
     takeUntil(destroy$),
     switchMap(async (d) => d),
@@ -559,7 +562,7 @@ export const createBaseValueAxis: BasePluginFn<BaseLinesContext> = (pluginName:
       fullChartParams: data.fullChartParams,
       valueScale: data.valueScale,
       textReverseTransformWithRotate: data.textReverseTransformWithRotate,
-      minAndMax: data.minAndMax
+      filteredMinMaxValue: data.filteredMinMaxValue
     })
 
     renderAxisLabel({

package/src/grid/defaults.ts

@@ -4,16 +4,16 @@ import type {
   GroupAuxParams,
   DotsParams,
   BarsParams,
-  BarStackParams,
+  StackedBarParams,
   BarsTriangleParams,
   GroupAxisParams,
   ValueAxisParams,
-  ValueStackAxisParams,
+  StackedValueAxisParams,
   GridTooltipParams,
   GridZoomParams,
   GridLegendParams
 } from '../../lib/plugins-basic-types'
-import { measureTextWidth } from '../utils/commonUtils'
+// import { measureTextWidth } from '../utils/commonUtils'
 
 export const DEFAULT_LINES_PARAMS: LinesParams = {
   lineCurve: 'curveLinear',
@@ -28,13 +28,13 @@ 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
 }
 
-export const DEFAULT_GROUP_AREA_PARAMS: GroupAuxParams = {
+export const DEFAULT_GROUP_AUX_PARAMS: GroupAuxParams = {
   showLine: true,
   showLabel: true,
   lineDashArray: '3, 3',
@@ -45,7 +45,7 @@ export const DEFAULT_GROUP_AREA_PARAMS: GroupAuxParams = {
   labelPadding: 20,
   labelRotate: 0
 }
-DEFAULT_GROUP_AREA_PARAMS.labelTextFormat.toString = () => `text => text`
+DEFAULT_GROUP_AUX_PARAMS.labelTextFormat.toString = () => `text => text`
 
 export const DEFAULT_BARS_PARAMS: BarsParams = {
   // barType: 'rect',
@@ -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
 }
 
@@ -188,7 +190,7 @@ export const DEFAULT_GRID_TOOLTIP_PARAMS: GridTooltipParams = {
 // </g>`
 //     }
 //   },
-  renderFn: (eventData, { styles }) => {
+  renderFn: (eventData, { styles, utils }) => {
     const bulletWidth = styles.textSizePx * 0.7
     const offset = (styles.textSizePx / 2) - (bulletWidth / 2)
 
@@ -197,7 +199,7 @@ export const DEFAULT_GRID_TOOLTIP_PARAMS: GridTooltipParams = {
       const text = `${group.seriesLabel}${group.value}`
       return text.length > acc.length ? text : acc
     }, '')
-    const maxTextWidth = measureTextWidth(maxLengthText, styles.textSizePx)
+    const maxTextWidth = utils.measureTextWidth(maxLengthText, styles.textSizePx)
     const lineEndX = maxTextWidth + styles.textSizePx * 2
     const contentSvg = eventData.groups
       .map((group, i) => {
@@ -216,7 +218,7 @@ export const DEFAULT_GRID_TOOLTIP_PARAMS: GridTooltipParams = {
 ${contentSvg}`
   }
 }
-DEFAULT_GRID_TOOLTIP_PARAMS.renderFn.toString = () => `(eventData, { styles }) => {
+DEFAULT_GRID_TOOLTIP_PARAMS.renderFn.toString = () => `(eventData, { styles, utils }) => {
     const bulletWidth = styles.textSizePx * 0.7
     const offset = (styles.textSizePx / 2) - (bulletWidth / 2)
 
@@ -225,7 +227,7 @@ DEFAULT_GRID_TOOLTIP_PARAMS.renderFn.toString = () => `(eventData, { styles }) =
       const text = \`\${group.seriesLabel}\${group.value}\`
       return text.length > acc.length ? text : acc
     }, '')
-    const maxTextWidth = measureTextWidth(maxLengthText, styles.textSizePx)
+    const maxTextWidth = utils.measureTextWidth(maxLengthText, styles.textSizePx)
     const lineEndX = maxTextWidth + styles.textSizePx * 2
     const contentSvg = eventData.groups
       .map((group, i) => {