@orbcharts/plugins-basic 3.0.0-beta.9 → 3.0.0

package/src/base/BaseYAxis.ts

@@ -0,0 +1,389 @@
+import * as d3 from 'd3'
+import {
+  Observable,
+  Subject,
+  combineLatest,
+  takeUntil,
+  map,
+  distinctUntilChanged,
+  switchMap,
+  shareReplay
+} from 'rxjs'
+import type {
+  ColorType,
+  ChartParams,
+  ComputedDatumMultiValue,
+  ComputedDataMultiValue,
+  ComputedXYDatumMultiValue,
+  ContainerPositionScaled,
+  ContainerSize,
+  DataFormatterMultiValue,
+  DefinePluginConfig,
+  TransformData,
+  Layout
+} from '../../lib/core-types'
+import {
+  createValueToAxisScale,
+} from '../../lib/core'
+import type { BaseYAxisParams
+} from '../../lib/plugins-basic-types'
+import type { BasePluginFn } from './types'
+// import { DEFAULT_X_Y_AXES_PARAMS } from '../defaults'
+// import { LAYER_INDEX_OF_AXIS } from '../const'
+import { getColor, getDatumColor, getClassName, getUniID } from '../utils/orbchartsUtils'
+import { parseTickFormatValue } from '../utils/d3Utils'
+import { multiValueContainerSelectionsObservable } from '../multiValue/multiValueObservables'
+
+interface BaseYAxisContext {
+  selection: d3.Selection<any, unknown, any, unknown>
+  computedData$: Observable<ComputedDataMultiValue>
+  // filteredMinMaxValue$: Observable<[number, number]>
+  fullParams$: Observable<BaseYAxisParams>
+  fullDataFormatter$: Observable<DataFormatterMultiValue>
+  fullChartParams$: Observable<ChartParams>
+  isCategorySeprate$: Observable<boolean>
+  containerPosition$: Observable<ContainerPositionScaled[]>
+  containerSize$: Observable<ContainerSize>
+  // layout$: Observable<Layout>
+  // filteredXYMinMaxData$: Observable<{
+  //   datumList: ComputedXYDatumMultiValue[];
+  //   minXDatum: ComputedXYDatumMultiValue | null;
+  //   maxXDatum: ComputedXYDatumMultiValue | null;
+  //   minYDatum: ComputedXYDatumMultiValue | null;
+  //   maxYDatum: ComputedXYDatumMultiValue | null;
+  // }>
+  yScale$: Observable<d3.ScaleLinear<number, number>>
+  // xyMinMax$: Observable<{
+  //   minX: number;
+  //   maxX: number;
+  //   minY: number;
+  //   maxY: number;
+  // }>
+}
+
+// interface TextAlign {
+//   textAnchor: "start" | "middle" | "end"
+//   dominantBaseline: "middle" | "auto" | "hanging"
+// }
+
+const defaultTickSize = 6
+
+const yTickTextAnchor = 'end'
+const yTickDominantBaseline = 'middle'
+const yAxisLabelAnchor = 'end'
+const yAxisLabelDominantBaseline = 'auto'
+
+function renderYAxisLabel ({ selection, yLabelClassName, fullParams, containerSize, fullDataFormatter, fullChartParams }: {
+  selection: d3.Selection<SVGGElement, any, any, any>,
+  yLabelClassName: string
+  fullParams: BaseYAxisParams
+  // axisLabelAlign: TextAlign
+  containerSize: { width: number, height: number }
+  fullDataFormatter: DataFormatterMultiValue,
+  fullChartParams: ChartParams
+  // textReverseTransform: string,
+}) {
+  const offsetX = fullParams.tickPadding - fullParams.labelOffset[0]
+  const offsetY = fullParams.tickPadding + fullParams.labelOffset[1]
+  let labelX = - offsetX
+  let labelY = - offsetY
+
+  const axisLabelSelection = selection
+    .selectAll<SVGGElement, BaseYAxisParams>(`g.${yLabelClassName}`)
+    .data([fullParams])
+    .join('g')
+    .classed(yLabelClassName, true)
+    .each((d, i, g) => {
+      const text = d3.select(g[i])
+        .selectAll<SVGTextElement, BaseYAxisParams>(`text`)
+        .data([d])
+        .join(
+          enter => {
+            return enter
+              .append('text')
+              .style('font-weight', 'bold')
+          },
+          update => update,
+          exit => exit.remove()
+        )
+        .attr('text-anchor', yAxisLabelAnchor)
+        .attr('dominant-baseline', yAxisLabelDominantBaseline)
+        .attr('font-size', fullChartParams.styles.textSize)
+        .style('fill', getColor(fullParams.labelColorType, fullChartParams))
+        // .style('transform', textReverseTransform)
+        // 偏移使用 x, y 而非 transform 才不會受到外層 scale 變形影響
+        .attr('x', labelX)
+        .attr('y', labelY)
+        .text(d => fullDataFormatter.yAxis.label)
+    })
+    // .attr('transform', d => `translate(0, ${layout.height})`)
+}
+
+function renderYAxis ({ selection, yAxisClassName, fullParams, containerSize, fullDataFormatter, fullChartParams, yScale }: {
+  selection: d3.Selection<SVGGElement, any, any, any>,
+  yAxisClassName: string
+  fullParams: BaseYAxisParams
+  // tickTextAlign: TextAlign
+  containerSize: ContainerSize
+  fullDataFormatter: DataFormatterMultiValue,
+  fullChartParams: ChartParams
+  yScale: d3.ScaleLinear<number, number>
+  // textReverseTransform: string,
+  // xyMinMax: {
+  //   minX: number;
+  //   maxX: number;
+  //   minY: number;
+  //   maxY: number;
+  // }
+}) {
+
+  const yAxisSelection = selection
+    .selectAll<SVGGElement, BaseYAxisParams>(`g.${yAxisClassName}`)
+    .data([fullParams])
+    .join('g')
+    .classed(yAxisClassName, true)
+
+  // const _yScale = d3.scaleLinear()
+  //   .domain([0, 150])
+  //   .range([416.5, 791.349])
+
+  // 刻度文字偏移
+  let tickPadding = fullParams.tickPadding
+
+  // 設定Y軸刻度
+  const yAxis = d3.axisLeft(yScale)
+    .scale(yScale)
+    .ticks(fullParams.ticks) // 刻度分段數量
+    .tickFormat(d => parseTickFormatValue(d, fullParams.tickFormat))
+    .tickSize(fullParams.tickFullLine == true
+      ? -containerSize.width
+      : defaultTickSize)
+    .tickPadding(tickPadding)
+  
+  const yAxisEl = yAxisSelection
+    .transition()
+    .duration(100)
+    .ease(d3.easeLinear) // 線性的 - 當托曳或快速變動的時候比較滑順
+    .call(yAxis)
+  
+  yAxisEl.selectAll('line')
+    .style('fill', 'none')
+    .style('stroke', fullParams.tickLineVisible == true ? getColor(fullParams.tickColorType, fullChartParams) : 'none')
+    .style('stroke-dasharray', fullParams.tickFullLineDasharray)
+    .attr('pointer-events', 'none')
+  
+  yAxisEl.selectAll('path')
+    .style('fill', 'none')
+    // .style('stroke', this.fullParams.axisLineColor!)
+    .style('stroke', fullParams.axisLineVisible == true ? getColor(fullParams.axisLineColorType, fullChartParams) : 'none')
+    .style('shape-rendering', 'crispEdges')
+  
+  // const yText = yAxisEl.selectAll('text')
+  const yText = yAxisSelection.selectAll('text')
+    // .style('font-family', 'sans-serif')
+    .attr('font-size', fullChartParams.styles.textSize)
+    .style('color', getColor(fullParams.tickTextColorType, fullChartParams))
+    .attr('text-anchor', yTickTextAnchor)
+    .attr('dominant-baseline', yTickDominantBaseline)
+    // .attr('dy', 0)
+    .attr('x', - tickPadding)
+    .attr('dy', 0)
+  // yText.style('transform', textReverseTransform)
+  
+  // // 抵消掉預設的偏移
+  // if (fullDataFormatter.grid.valueAxis.position === 'bottom' || fullDataFormatter.grid.valueAxis.position === 'top') {
+  //   yText.attr('dy', 0)
+  // }
+
+  return yAxisSelection
+}
+
+export const createBaseYAxis: BasePluginFn<BaseYAxisContext> = (pluginName: string, {
+  selection,
+  computedData$,
+  fullParams$,
+  fullDataFormatter$,
+  fullChartParams$,
+  isCategorySeprate$,
+  containerPosition$,
+  containerSize$,
+  // layout$,
+  // filteredXYMinMaxData$,
+  yScale$,
+  // xyMinMax$
+}) => {
+  
+  const destroy$ = new Subject()
+
+  // const containerClassName = getClassName(pluginName, 'container')
+  const yAxisGClassName = getClassName(pluginName, 'yAxisG')
+  const yAxisClassName = getClassName(pluginName, 'yAxis')
+  const yLabelClassName = getClassName(pluginName, 'yLabel')
+
+  const containerSelection$ = multiValueContainerSelectionsObservable({
+    selection,
+    pluginName,
+    clipPathID: null,
+    computedData$,
+    containerPosition$,
+    isCategorySeprate$,
+  }).pipe(
+    takeUntil(destroy$),
+  )
+
+  // const containerSelection$ = combineLatest({
+  //   computedData: computedData$.pipe(
+  //     distinctUntilChanged((a, b) => {
+  //       // 只有當series的數量改變時，才重新計算
+  //       return a.length === b.length
+  //     }),
+  //   ),
+  //   isCategorySeprate: isCategorySeprate$
+  // }).pipe(
+  //   takeUntil(destroy$),
+  //   switchMap(async (d) => d),
+  //   map(data => {
+  //     return data.isCategorySeprate
+  //       // category分開的時候顯示各別axis
+  //       ? data.computedData
+  //       // category合併的時候只顯示第一個axis
+  //       : [data.computedData[0]]
+  //   }),
+  //   map((computedData, i) => {
+  //     return selection
+  //       .selectAll<SVGGElement, ComputedDatumMultiValue[]>(`g.${containerClassName}`)
+  //       .data(computedData, d => d[0] ? d[0].categoryIndex : i)
+  //       .join('g')
+  //       .classed(containerClassName, true)
+  //   })
+  // )
+
+  const axisSelection$ = containerSelection$.pipe(
+    takeUntil(destroy$),
+    map((containerSelection, i) => {
+      return containerSelection
+        .selectAll<SVGGElement, ComputedDatumMultiValue[]>(`g.${yAxisGClassName}`)
+        .data([yAxisGClassName])
+        .join('g')
+        .classed(yAxisGClassName, true)
+    })
+  )
+
+  // combineLatest({
+  //   containerSelection: containerSelection$,
+  //   gridContainerPosition: containerPosition$
+  // }).pipe(
+  //   takeUntil(destroy$),
+  //   switchMap(async d => d)
+  // ).subscribe(data => {
+  //   data.containerSelection
+  //     .attr('transform', (d, i) => {
+  //       const gridContainerPosition = data.gridContainerPosition[i] ?? data.gridContainerPosition[0]
+  //       const translate = gridContainerPosition.translate
+  //       const scale = gridContainerPosition.scale
+  //       // return `translate(${translate[0]}, ${translate[1]}) scale(${scale[0]}, ${scale[1]})`
+  //       return `translate(${translate[0]}, ${translate[1]})`
+  //     })
+  //     // .attr('opacity', 0)
+  //     // .transition()
+  //     // .attr('opacity', 1)
+  // })
+
+  // const textReverseTransform$ = containerPosition$.pipe(
+  //   takeUntil(destroy$),
+  //   switchMap(async (d) => d),
+  //   map(containerPosition => {
+  //     // const axesRotateXYReverseValue = `rotateX(${data.gridAxesReverseTransform.rotateX}deg) rotateY(${data.gridAxesReverseTransform.rotateY}deg)`
+  //     // const axesRotateReverseValue = `rotate(${data.gridAxesReverseTransform.rotate}deg)`
+  //     const containerScaleReverseValue = `scale(${1 / containerPosition[0].scale[0]}, ${1 / containerPosition[0].scale[1]})`
+  //     // 抵消最外層scale
+  //     return `${containerScaleReverseValue}`
+  //   }),
+  //   distinctUntilChanged()
+  // )
+
+  // const yScale$: Observable<d3.ScaleLinear<number, number>> = new Observable(subscriber => {
+  //   combineLatest({
+  //     fullDataFormatter: fullDataFormatter$,
+  //     layout: layout$,
+  //     // xyMinMax: observer.xyMinMax$
+  //     filteredXYMinMaxData: filteredXYMinMaxData$
+  //   }).pipe(
+  //     takeUntil(destroy$),
+  //     switchMap(async (d) => d),
+  //   ).subscribe(data => {
+  //     const valueIndex = data.fullDataFormatter.xAxis.valueIndex
+  //     if (!data.filteredXYMinMaxData.minYDatum || !data.filteredXYMinMaxData.maxYDatum
+  //       || data.filteredXYMinMaxData.minYDatum.value[valueIndex] == null || data.filteredXYMinMaxData.maxYDatum.value[valueIndex] == null
+  //     ) {
+  //       return
+  //     }
+  //     let maxValue = data.filteredXYMinMaxData.maxYDatum.value[valueIndex]
+  //     let minValue = data.filteredXYMinMaxData.minYDatum.value[valueIndex]
+  //     if (maxValue === minValue && maxValue === 0) {
+  //       // 避免最大及最小值同等於 0 造成無法計算scale
+  //       maxValue = 1
+  //     }
+
+  //     const yScale: d3.ScaleLinear<number, number> = createValueToAxisScale({
+  //       maxValue,
+  //       minValue,
+  //       axisWidth: data.layout.height,
+  //       scaleDomain: data.fullDataFormatter.yAxis.scaleDomain,
+  //       scaleRange: data.fullDataFormatter.yAxis.scaleRange,
+  //       reverse: true
+  //     })
+
+  //     subscriber.next(yScale)
+  //   })
+  // })
+
+
+  combineLatest({
+    axisSelection: axisSelection$,
+    fullParams: fullParams$,
+    // tickTextAlign: tickTextAlign$,
+    // axisLabelAlign: axisLabelAlign$,
+    computedData: computedData$,
+    containerSize: containerSize$,
+    fullDataFormatter: fullDataFormatter$,
+    fullChartParams: fullChartParams$,
+    yScale: yScale$,
+    // textReverseTransform: textReverseTransform$,
+    // xyMinMax: xyMinMax$
+  }).pipe(
+    takeUntil(destroy$),
+    switchMap(async (d) => d),
+  ).subscribe(data => {
+
+    renderYAxis({
+      selection: data.axisSelection,
+      yAxisClassName,
+      fullParams: data.fullParams,
+      // tickTextAlign: data.tickTextAlign,
+      containerSize: data.containerSize,
+      fullDataFormatter: data.fullDataFormatter,
+      fullChartParams: data.fullChartParams,
+      yScale: data.yScale,
+      // textReverseTransform: data.textReverseTransform,
+      // xyMinMax: data.xyMinMax
+    })
+
+    renderYAxisLabel({
+      selection: data.axisSelection,
+      yLabelClassName,
+      fullParams: data.fullParams,
+      // axisLabelAlign: data.axisLabelAlign,
+      containerSize: data.containerSize,
+      fullDataFormatter: data.fullDataFormatter,
+      fullChartParams: data.fullChartParams,
+      // textReverseTransform: data.textReverseTransform,
+    })
+
+  })
+
+
+  return () => {
+    destroy$.next(undefined)
+  }
+}

package/src/grid/defaults.ts

@@ -4,13 +4,13 @@ import type {
   GroupAuxParams,
   DotsParams,
   BarsParams,
-  StackedBarParams,
+  StackedBarsParams,
   BarsTriangleParams,
   GroupAxisParams,
   ValueAxisParams,
   StackedValueAxisParams,
   GridTooltipParams,
-  GridZoomParams,
+  GroupZoomParams,
   GridLegendParams
 } from '../../lib/plugins-basic-types'
 // import { measureTextWidth } from '../utils/commonUtils'
@@ -27,7 +27,7 @@ export const DEFAULT_LINE_AREAS_PARAMS: LineAreasParams = {
 
 export const DEFAULT_DOTS_PARAMS: DotsParams = {
   radius: 4,
-  fillColorType: 'white',
+  fillColorType: 'background',
   strokeColorType: 'label',
   strokeWidth: 2,
   // strokeWidthWhileHighlight: 3,
@@ -59,7 +59,7 @@ export const DEFAULT_BARS_DIVERGING_PARAMS: BarsParams = {
   ...DEFAULT_BARS_PARAMS
 }
 
-export const DEFAULT_STACKED_BAR_PARAMS: StackedBarParams = {
+export const DEFAULT_STACKED_BARS_PARAMS: StackedBarsParams = {
   barWidth: 0,
   barGroupPadding: 10,
   barRadius: false,
@@ -98,7 +98,15 @@ export const DEFAULT_VALUE_AXIS_PARAMS: ValueAxisParams = {
   axisLineColorType: 'primary',
   ticks: null,
   // tickFormat: ',.0f',
-  tickFormat: v => v,
+  // tickFormat: v => v,
+  tickFormat: num => {
+    if (num === null || Number.isNaN(num) == true) {
+      return num || 0
+    }
+    const parts = num.toString().split('.')
+    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+    return parts.join('.')
+  },
   tickLineVisible: true,
   tickPadding: 20,
   tickFullLine: true,
@@ -107,19 +115,24 @@ export const DEFAULT_VALUE_AXIS_PARAMS: ValueAxisParams = {
   tickTextRotate: 0,
   tickTextColorType: 'primary'
 }
-DEFAULT_VALUE_AXIS_PARAMS.tickFormat.toString = () => 'v => v'
+DEFAULT_VALUE_AXIS_PARAMS.tickFormat.toString = () => `num => {
+  if (num === null || Number.isNaN(num) == true) {
+    return num || 0
+  }
+  const parts = num.toString().split('.')
+  parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+  return parts.join('.')
+}`
 
 export const DEFAULT_STACKED_VALUE_AXIS_PARAMS: StackedValueAxisParams = {
   ...DEFAULT_VALUE_AXIS_PARAMS
 }
 
-export const DEFAULT_GRID_ZOOM_PARAMS: GridZoomParams = {
+export const DEFAULT_GROUP_ZOOM_PARAMS: GroupZoomParams = {
 
 }
 
 export const DEFAULT_GRID_LEGEND_PARAMS: GridLegendParams = {
-  // position: 'right',
-  // justify: 'end',
   placement: 'bottom',
   padding: 28,
   // offset: [0, 0],
@@ -140,68 +153,20 @@ export const DEFAULT_GRID_TOOLTIP_PARAMS: GridTooltipParams = {
   textColorType: 'primary',
   offset: [20, 5],
   padding: 10,
-//   renderFn: (eventData, { styles }) => {
-//     const bulletWidth = styles.textSizePx * 0.7
-//     const offset = (styles.textSizePx / 2) - (bulletWidth / 2)
-//     if (eventData.highlightTarget === 'group') {
-//       const titleSvg = `<g><text dominant-baseline="hanging" font-size="${styles.textSizePx}">${eventData.groupLabel}</text></g>`
-//       const maxLengthText = eventData.groups.reduce((acc, group) => {
-//         const text = `${group.seriesLabel}${group.value}`
-//         return text.length > acc.length ? text : acc
-//       }, '')
-//       const maxTextWidth = measureTextWidth(maxLengthText, styles.textSizePx)
-//       const lineEndX = maxTextWidth + styles.textSizePx * 2
-//       const contentSvg = eventData.groups
-//         .map((group, i) => {
-//           const y = i * styles.textSizePx * 1.5
-//           return `<g transform="translate(0, ${styles.textSizePx * 2})">
-//   <rect width="${bulletWidth}" height="${bulletWidth}" x="${offset}" y="${y + offset}" rx="${bulletWidth / 2}" fill="${group.color}"></rect>
-//   <text x="${styles.textSizePx * 1.5}" y="${y}" font-size="${styles.textSizePx}" dominant-baseline="hanging" fill="${styles.textColor}">
-//     <tspan>${group.seriesLabel}</tspan>
-//     <tspan font-weight="bold" text-anchor="end" x="${lineEndX}">${group.value}</tspan>
-//   </text>
-// </g>`
-//         })
-//         .join('')
-//       return `${titleSvg}
-// ${contentSvg}`
-//     } else if (eventData.highlightTarget === 'series') {
-//       const titleSvg = `<g><text dominant-baseline="hanging" font-size="${styles.textSizePx}">${eventData.groupLabel}</text></g>`
-//       const textWidth = measureTextWidth(`${eventData.seriesLabel}${eventData.datum.value}`, styles.textSizePx)
-//       const lineEndX = textWidth + styles.textSizePx * 2
-//       const contentSvg = `<g transform="translate(0, ${styles.textSizePx * 2})">
-//   <rect width="${bulletWidth}" height="${bulletWidth}" x="${offset}" y="${offset}" rx="${bulletWidth / 2}" fill="${eventData.datum.color}"></rect>
-//   <text x="${styles.textSizePx * 1.5}" font-size="${styles.textSizePx}" dominant-baseline="hanging" fill="${styles.textColor}">
-//     <tspan>${eventData.seriesLabel}</tspan>
-//     <tspan font-weight="bold" text-anchor="end" x="${lineEndX}">${eventData.datum.value}</tspan>
-//   </text>
-// </g>`
-//       return `${titleSvg}
-// ${contentSvg}`
-//     } else {
-//       const textWidth = measureTextWidth(`${eventData.datum.label}${eventData.datum.value}`, styles.textSizePx)
-//       const lineEndX = textWidth + styles.textSizePx * 2
-//       return `<g>
-//   <rect width="${bulletWidth}" height="${bulletWidth}" x="${offset}" y="${offset}" rx="${bulletWidth / 2}" fill="${eventData.datum.color}"></rect>
-//   <text x="${styles.textSizePx * 1.5}" font-size="${styles.textSizePx}" dominant-baseline="hanging" fill="${styles.textColor}">
-//     <tspan>${eventData.datum.label}</tspan>
-//     <tspan font-weight="bold" text-anchor="end" x="${lineEndX}">${eventData.datum.value}</tspan>
-//   </text>
-// </g>`
-//     }
-//   },
   renderFn: (eventData, { styles, utils }) => {
     const bulletWidth = styles.textSizePx * 0.7
     const offset = (styles.textSizePx / 2) - (bulletWidth / 2)
 
-    const titleSvg = `<g><text dominant-baseline="hanging" font-size="${styles.textSizePx}">${eventData.groupLabel}</text></g>`
-    const maxLengthText = eventData.groups.reduce((acc, group) => {
-      const text = `${group.seriesLabel}${group.value}`
-      return text.length > acc.length ? text : acc
-    }, '')
-    const maxTextWidth = utils.measureTextWidth(maxLengthText, styles.textSizePx)
-    const lineEndX = maxTextWidth + styles.textSizePx * 2
-    const contentSvg = eventData.groups
+    const titleSvg = `<g><text dominant-baseline="hanging" font-size="${styles.textSizePx}" fill="${styles.textColor}">${eventData.groupLabel}</text></g>`
+    const groupLabelTextWidth = utils.measureTextWidth(eventData.groupLabel, styles.textSizePx)
+    const listTextWidth = eventData.group.reduce((acc, group) => {
+      const text = `${group.seriesLabel}${utils.toCurrency(group.value)}`
+      const _maxTextWidth = utils.measureTextWidth(text, styles.textSizePx)
+      return _maxTextWidth > acc ? _maxTextWidth : acc
+    }, 0)
+    const maxTextWidth = Math.max(groupLabelTextWidth, listTextWidth)
+    const lineEndX = maxTextWidth + styles.textSizePx * 3
+    const contentSvg = eventData.group
       .map((group, i) => {
         const y = i * styles.textSizePx * 1.5
         const isHighlight = group.id === (eventData.datum && eventData.datum.id)
@@ -209,7 +174,7 @@ export const DEFAULT_GRID_TOOLTIP_PARAMS: GridTooltipParams = {
   <rect width="${bulletWidth}" height="${bulletWidth}" x="${offset}" y="${y + offset}" rx="${bulletWidth / 2}" fill="${group.color}"></rect>
   <text x="${styles.textSizePx * 1.5}" y="${y}" font-size="${styles.textSizePx}" dominant-baseline="hanging" fill="${styles.textColor}">
     <tspan font-weight="${isHighlight ? 'bold' : ''}">${group.seriesLabel}</tspan>
-    <tspan font-weight="bold" text-anchor="end" x="${lineEndX}">${group.value}</tspan>
+    <tspan font-weight="bold" text-anchor="end" x="${lineEndX}">${utils.toCurrency(group.value)}</tspan>
   </text>
 </g>`
       })
@@ -222,14 +187,16 @@ DEFAULT_GRID_TOOLTIP_PARAMS.renderFn.toString = () => `(eventData, { styles, uti
     const bulletWidth = styles.textSizePx * 0.7
     const offset = (styles.textSizePx / 2) - (bulletWidth / 2)
 
-    const titleSvg = \`<g><text dominant-baseline="hanging" font-size="\${styles.textSizePx}">\${eventData.groupLabel}</text></g>\`
-    const maxLengthText = eventData.groups.reduce((acc, group) => {
-      const text = \`\${group.seriesLabel}\${group.value}\`
-      return text.length > acc.length ? text : acc
-    }, '')
-    const maxTextWidth = utils.measureTextWidth(maxLengthText, styles.textSizePx)
-    const lineEndX = maxTextWidth + styles.textSizePx * 2
-    const contentSvg = eventData.groups
+    const titleSvg = \`<g><text dominant-baseline="hanging" font-size="\${styles.textSizePx}" fill="\${styles.textColor}">\${eventData.groupLabel}</text></g>\`
+    const groupLabelTextWidth = utils.measureTextWidth(eventData.groupLabel, styles.textSizePx)
+    const listTextWidth = eventData.group.reduce((acc, group) => {
+      const text = \`\${group.seriesLabel}\${utils.toCurrency(group.value)}\`
+      const _maxTextWidth = utils.measureTextWidth(text, styles.textSizePx)
+      return _maxTextWidth > acc ? _maxTextWidth : acc
+    }, 0)
+    const maxTextWidth = Math.max(groupLabelTextWidth, listTextWidth)
+    const lineEndX = maxTextWidth + styles.textSizePx * 3
+    const contentSvg = eventData.group
       .map((group, i) => {
         const y = i * styles.textSizePx * 1.5
         const isHighlight = group.id === (eventData.datum && eventData.datum.id)
@@ -237,7 +204,7 @@ DEFAULT_GRID_TOOLTIP_PARAMS.renderFn.toString = () => `(eventData, { styles, uti
   <rect width="\${bulletWidth}" height="\${bulletWidth}" x="\${offset}" y="\${y + offset}" rx="\${bulletWidth / 2}" fill="\${group.color}"></rect>
   <text x="\${styles.textSizePx * 1.5}" y="\${y}" font-size="\${styles.textSizePx}" dominant-baseline="hanging" fill="\${styles.textColor}">
     <tspan font-weight="\${isHighlight ? 'bold' : ''}">\${group.seriesLabel}</tspan>
-    <tspan font-weight="bold" text-anchor="end" x="\${lineEndX}">\${group.value}</tspan>
+    <tspan font-weight="bold" text-anchor="end" x="\${lineEndX}">\${utils.toCurrency(group.value)}</tspan>
   </text>
 </g>\`
       })

package/src/grid/gridObservables.ts

@@ -154,6 +154,64 @@ export const gridSelectionsObservable = ({ selection, pluginName, clipPathID, se
   }
 }
 
+// 建立 grid 主要的 selection - 只取的container
+export const gridContainerSelectionsObservable = ({ selection, pluginName, computedData$, gridContainerPosition$, isSeriesSeprate$ }: {
+  selection: d3.Selection<any, unknown, any, unknown>
+  pluginName: string
+  computedData$: Observable<ComputedDataGrid>
+  gridContainerPosition$: Observable<ContainerPositionScaled[]>
+  isSeriesSeprate$: Observable<boolean>
+}) => {
+  const containerClassName = getClassName(pluginName, 'container')
+
+  const containerSelection$ = combineLatest({
+    computedData: computedData$.pipe(
+      distinctUntilChanged((a, b) => {
+        // 只有當series的數量改變時，才重新計算
+        return a.length === b.length
+      }),
+    ),
+    isSeriesSeprate: isSeriesSeprate$
+  }).pipe(
+    switchMap(async (d) => d),
+    map(data => {
+      return data.isSeriesSeprate
+        // series分開的時候顯示各別axis
+        ? data.computedData
+        // series合併的時候只顯示第一個axis
+        : [data.computedData[0]]
+    }),
+    map((computedData, i) => {
+      return selection
+        .selectAll<SVGGElement, ComputedDatumGrid[]>(`g.${containerClassName}`)
+        .data(computedData, d => d[0] ? d[0].seriesIndex : i)
+        .join('g')
+        .classed(containerClassName, true)
+    }),
+    shareReplay(1)
+  )
+
+  combineLatest({
+    containerSelection: containerSelection$,
+    gridContainerPosition: gridContainerPosition$
+  }).pipe(
+    switchMap(async d => d)
+  ).subscribe(data => {
+    data.containerSelection
+      .attr('transform', (d, i) => {
+        const gridContainerPosition = data.gridContainerPosition[i] ?? data.gridContainerPosition[0]
+        const translate = gridContainerPosition.translate
+        const scale = gridContainerPosition.scale
+        return `translate(${translate[0]}, ${translate[1]}) scale(${scale[0]}, ${scale[1]})`        
+      })
+      // .attr('opacity', 0)
+      // .transition()
+      // .attr('opacity', 1)
+  })
+
+  return containerSelection$
+}
+
 // 由事件取得group data的function
 export const gridGroupPositionFnObservable = ({ fullDataFormatter$, gridAxesSize$, computedData$, fullChartParams$, gridContainerPosition$, layout$ }: {
   fullDataFormatter$: Observable<DataFormatterGrid>

package/src/grid/index.ts

@@ -4,7 +4,7 @@ export { Lines } from './plugins/Lines'
 export { LineAreas } from './plugins/LineAreas'
 export { Bars } from './plugins/Bars'
 export { BarsPN } from './plugins/BarsPN'
-export { StackedBar } from './plugins/StackedBar'
+export { StackedBars } from './plugins/StackedBars'
 export { BarsTriangle } from './plugins/BarsTriangle'
 export { Dots } from './plugins/Dots'
 export { GridLegend } from './plugins/GridLegend'
@@ -12,5 +12,5 @@ export { GroupAxis } from './plugins/GroupAxis'
 export { ValueAxis } from './plugins/ValueAxis'
 export { StackedValueAxis } from './plugins/StackedValueAxis'
 export { GridTooltip } from './plugins/GridTooltip'
-export { GridZoom } from './plugins/GridZoom'
+export { GroupZoom } from './plugins/GroupZoom'
 export { GroupAux } from './plugins/GroupAux'