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

package/src/grid/plugins/Bars.ts

@@ -44,9 +44,9 @@ export const Bars = defineGridPlugin(pluginConfig)(({ selection, name, subject,
   const unsubscribeBaseBars = createBaseBars(pluginName, {
     selection,
     computedData$: observer.computedData$,
-    computedLayoutData$: observer.computedLayoutData$,
+    computedAxesData$: observer.computedAxesData$,
     visibleComputedData$: observer.visibleComputedData$,
-    visibleComputedLayoutData$: observer.visibleComputedLayoutData$,
+    visibleComputedAxesData$: observer.visibleComputedAxesData$,
     seriesLabels$: observer.seriesLabels$,
     SeriesDataMap$: observer.SeriesDataMap$,
     GroupDataMap$: observer.GroupDataMap$,

package/src/grid/plugins/BarsPN.ts

@@ -40,9 +40,9 @@ export const BarsPN = defineGridPlugin(pluginConfig)(({ selection, name, subject
   const unsubscribeBaseBars = createBaseBars(pluginName, {
     selection,
     computedData$: observer.computedData$,
-    computedLayoutData$: observer.computedLayoutData$,
+    computedAxesData$: observer.computedAxesData$,
     visibleComputedData$: observer.visibleComputedData$,
-    visibleComputedLayoutData$: observer.visibleComputedLayoutData$,
+    visibleComputedAxesData$: observer.visibleComputedAxesData$,
     seriesLabels$: observer.seriesLabels$,
     SeriesDataMap$: observer.SeriesDataMap$,
     GroupDataMap$: observer.GroupDataMap$,

package/src/grid/plugins/BarsTriangle.ts

@@ -49,9 +49,9 @@ export const BarsTriangle = defineGridPlugin(pluginConfig)(({ selection, name, s
   const unsubscribeBaseBars = createBaseBarsTriangle(pluginName, {
     selection,
     computedData$: observer.computedData$,
-    computedLayoutData$: observer.computedLayoutData$,
+    computedAxesData$: observer.computedAxesData$,
     visibleComputedData$: observer.visibleComputedData$,
-    visibleComputedLayoutData$: observer.visibleComputedLayoutData$,
+    visibleComputedAxesData$: observer.visibleComputedAxesData$,
     fullDataFormatter$: observer.fullDataFormatter$,
     seriesLabels$: observer.seriesLabels$,
     SeriesDataMap$: observer.SeriesDataMap$,

package/src/grid/plugins/Dots.ts

@@ -45,9 +45,9 @@ export const Dots = defineGridPlugin(pluginConfig)(({ selection, name, subject,
   const unsubscribeBaseBars = createBaseDots(pluginName, {
     selection,
     computedData$: observer.computedData$,
-    computedLayoutData$: observer.computedLayoutData$,
+    computedAxesData$: observer.computedAxesData$,
     visibleComputedData$: observer.visibleComputedData$,
-    visibleComputedLayoutData$: observer.visibleComputedLayoutData$,
+    visibleComputedAxesData$: observer.visibleComputedAxesData$,
     seriesLabels$: observer.seriesLabels$,
     SeriesDataMap$: observer.SeriesDataMap$,
     GroupDataMap$: observer.GroupDataMap$,

package/src/grid/plugins/GridLegend.ts

@@ -65,12 +65,12 @@ export const GridLegend = defineGridPlugin(pluginConfig)(({ selection, rootSelec
   
   const destroy$ = new Subject()
 
-  const seriesLabels$: Observable<string[]> = observer.SeriesDataMap$.pipe(
-    takeUntil(destroy$),
-    map(data => {
-      return Array.from(data.keys())
-    })
-  )
+  // const seriesLabels$: Observable<string[]> = observer.SeriesDataMap$.pipe(
+  //   takeUntil(destroy$),
+  //   map(data => {
+  //     return Array.from(data.keys())
+  //   })
+  // )
 
   // 全部列點矩型使用相同樣式參數
   const fullParams$ = observer.fullParams$.pipe(
@@ -92,7 +92,7 @@ export const GridLegend = defineGridPlugin(pluginConfig)(({ selection, rootSelec
 
   const unsubscribeBaseLegend = createBaseLegend(pluginName, {
     rootSelection,
-    legendLabels$: seriesLabels$,
+    legendLabels$: observer.seriesLabels$,
     fullParams$,
     layout$: observer.layout$,
     fullChartParams$: observer.fullChartParams$,

package/src/grid/plugins/GroupAux.ts

@@ -225,22 +225,38 @@ function renderLabel ({ selection, labelData, fullParams, fullDataFormatter, ful
       // -- label偏移位置 --
       let rectX = - rectWidth / 2
       let rectY = -2
+      let x = rectX
+      let y = rectY - 3 // 奇怪的偏移修正
       if (fullDataFormatter.groupAxis.position === 'bottom') {
         rectX = fullParams.labelRotate
           ? - rectWidth + rectHeight // 有傾斜時以末端對齊（+height是為了修正移動太多）
           : - rectWidth / 2
         rectY = 2
+        x = rectX
+        y = rectY - 3 // 奇怪的偏移修正
       } else if (fullDataFormatter.groupAxis.position === 'left') {
         rectX = - rectWidth + 2
         rectY = - rectHeight / 2
+        x = rectX
+        y = rectY - 3 // 奇怪的偏移修正
+        if (fullParams.labelRotate) {
+          y += rectHeight
+        }
       } else if (fullDataFormatter.groupAxis.position === 'right') {
         rectX = - 2
         rectY = - rectHeight / 2
+        x = rectX
+        y = rectY - 3 // 奇怪的偏移修正
+        if (fullParams.labelRotate) {
+          y += rectHeight
+        }
       } else if (fullDataFormatter.groupAxis.position === 'top') {
         rectX = fullParams.labelRotate
           ? - rectWidth + rectHeight // 有傾斜時以末端對齊（+height是為了修正移動太多）
           : - rectWidth / 2
-        rectY = - rectHeight + 2
+        rectY = - rectHeight + 6
+        x = - rectHeight
+        y = rectY - 3 // 奇怪的偏移修正
       }
 
       // -- rect --
@@ -258,8 +274,8 @@ function renderLabel ({ selection, labelData, fullParams, fullDataFormatter, ful
         .attr('width', d => `${rectWidth}px`)
         .attr('height', `${rectHeight}px`)
         .attr('fill', d => getColor(fullParams.labelColorType, fullChartParams))
-        .attr('x', rectX)
-        .attr('y', rectY - 3) // 奇怪的偏移修正
+        .attr('x', x)
+        .attr('y', y) // 奇怪的偏移修正
         .style('transform', textReverseTransformWithRotate)
 
       // const rectUpdate = d3.select(n[i])
@@ -295,13 +311,14 @@ function renderLabel ({ selection, labelData, fullParams, fullDataFormatter, ful
         .style('transform', textReverseTransformWithRotate)
         .attr('fill', d => getColor(fullParams.labelTextColorType, fullChartParams))
         .attr('font-size', fullChartParams.styles.textSize)
-        .attr('x', rectX + 6)
-        .attr('y', rectY)
+        .attr('x', x + 6)
+        .attr('y', y + 3)
         .each((d, i, n) => {
           renderTspansOnAxis(d3.select(n[i]), {
             textArr: datum.textArr,
             textSizePx,
-            groupAxisPosition: fullDataFormatter.groupAxis.position
+            groupAxisPosition: fullDataFormatter.groupAxis.position,
+            isContainerRotated: false
           })
         })
 
@@ -611,8 +628,8 @@ export const GroupAux = defineGridPlugin(pluginConfig)(({ selection, rootSelecti
   //         series: [],
   //         seriesIndex: -1,
   //         seriesLabel: '',
-  //         groups: data.GroupDataMap.get(groupLabel) ?? [],
-  //         // groups: [],
+  //         group: data.GroupDataMap.get(groupLabel) ?? [],
+  //         // group: [],
   //         groupIndex,
   //         groupLabel,
   //         event,
@@ -634,8 +651,8 @@ export const GroupAux = defineGridPlugin(pluginConfig)(({ selection, rootSelecti
   //         series: [],
   //         seriesIndex: -1,
   //         seriesLabel: '',
-  //         groups: data.GroupDataMap.get(groupLabel) ?? [],
-  //         // groups: [],
+  //         group: data.GroupDataMap.get(groupLabel) ?? [],
+  //         // group: [],
   //         groupIndex,
   //         groupLabel,
   //         event,
@@ -657,8 +674,8 @@ export const GroupAux = defineGridPlugin(pluginConfig)(({ selection, rootSelecti
   //         series: [],
   //         seriesIndex: -1,
   //         seriesLabel: '',
-  //         groups: data.GroupDataMap.get(groupLabel) ?? [],
-  //         // groups: [],
+  //         group: data.GroupDataMap.get(groupLabel) ?? [],
+  //         // group: [],
   //         groupIndex,
   //         groupLabel,
   //         event,
@@ -680,8 +697,8 @@ export const GroupAux = defineGridPlugin(pluginConfig)(({ selection, rootSelecti
   //         series: [],
   //         seriesIndex: -1,
   //         seriesLabel: '',
-  //         // groups: data.GroupDataMap.get(groupLabel) ?? [],
-  //         groups: [],
+  //         // group: data.GroupDataMap.get(groupLabel) ?? [],
+  //         group: [],
   //         groupIndex,
   //         groupLabel,
   //         event,
@@ -858,7 +875,7 @@ export const GroupAux = defineGridPlugin(pluginConfig)(({ selection, rootSelecti
           series: [],
           seriesIndex: -1,
           seriesLabel: '',
-          groups: data.GroupDataMap.get(groupLabel) ?? [],
+          group: data.GroupDataMap.get(groupLabel) ?? [],
           groupIndex,
           groupLabel,
           event,
@@ -879,7 +896,7 @@ export const GroupAux = defineGridPlugin(pluginConfig)(({ selection, rootSelecti
           series: [],
           seriesIndex: -1,
           seriesLabel: '',
-          groups: data.GroupDataMap.get(groupLabel) ?? [],
+          group: data.GroupDataMap.get(groupLabel) ?? [],
           groupIndex,
           groupLabel,
           event,
@@ -902,7 +919,7 @@ export const GroupAux = defineGridPlugin(pluginConfig)(({ selection, rootSelecti
           series: [],
           seriesIndex: -1,
           seriesLabel: '',
-          groups: data.GroupDataMap.get(groupLabel) ?? [],
+          group: data.GroupDataMap.get(groupLabel) ?? [],
           groupIndex,
           groupLabel,
           event,
@@ -923,7 +940,7 @@ export const GroupAux = defineGridPlugin(pluginConfig)(({ selection, rootSelecti
           series: [],
           seriesIndex: -1,
           seriesLabel: '',
-          groups: data.GroupDataMap.get(groupLabel) ?? [],
+          group: data.GroupDataMap.get(groupLabel) ?? [],
           groupIndex,
           groupLabel,
           event,
@@ -952,8 +969,8 @@ export const GroupAux = defineGridPlugin(pluginConfig)(({ selection, rootSelecti
   //   takeUntil(destroy$),
   //   switchMap(async d => d)
   // ).subscribe(data => {
-  //   // const groups = data.event.eventName === 'mouseover' || data.event.eventName === 'mousemove'
-  //   //   ? data.event.groups
+  //   // const group = data.event.eventName === 'mouseover' || data.event.eventName === 'mousemove'
+  //   //   ? data.event.group
   //   //   : []
     
   //   // const groupLabel = data.event.eventName === 'mouseover' || data.event.eventName === 'mousemove'
@@ -1004,7 +1021,7 @@ export const GroupAux = defineGridPlugin(pluginConfig)(({ selection, rootSelecti
   //         series: [],
   //         seriesIndex: -1,
   //         seriesLabel: '',
-  //         groups: data.event.groups,
+  //         group: data.event.group,
   //         groupIndex,
   //         groupLabel,
   //         event,
@@ -1024,7 +1041,7 @@ export const GroupAux = defineGridPlugin(pluginConfig)(({ selection, rootSelecti
   //         series: [],
   //         seriesIndex: -1,
   //         seriesLabel: '',
-  //         groups: data.event.groups,
+  //         group: data.event.group,
   //         groupIndex,
   //         groupLabel,
   //         event,
@@ -1044,7 +1061,7 @@ export const GroupAux = defineGridPlugin(pluginConfig)(({ selection, rootSelecti
   //         series: [],
   //         seriesIndex: -1,
   //         seriesLabel: '',
-  //         groups: data.event.groups,
+  //         group: data.event.group,
   //         groupIndex,
   //         groupLabel,
   //         event,
@@ -1064,7 +1081,7 @@ export const GroupAux = defineGridPlugin(pluginConfig)(({ selection, rootSelecti
   //         series: [],
   //         seriesIndex: -1,
   //         seriesLabel: '',
-  //         groups: data.event.groups,
+  //         group: data.event.group,
   //         groupIndex,
   //         groupLabel,
   //         event,

package/src/grid/plugins/GroupAxis.ts

@@ -44,30 +44,6 @@ const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_GROUP_A
           return value === null || value === 'all' || typeof value === 'number'
         }
       },
-      tickFormat: {
-        toBeTypes: ['string', 'Function']
-      },
-      tickLineVisible: {
-        toBeTypes: ['boolean']
-      },
-      tickPadding: {
-        toBeTypes: ['number']
-      },
-      tickFullLine: {
-        toBeTypes: ['boolean']
-      },
-      tickFullLineDasharray: {
-        toBeTypes: ['string']
-      },
-      tickColorType: {
-        toBeOption: 'ColorType',
-      },
-      tickTextRotate: {
-        toBeTypes: ['number']
-      },
-      tickTextColorType: {
-        toBeOption: 'ColorType',
-      }
     })
     return result
   }

package/src/grid/plugins/{GridZoom.ts → GroupZoom.ts}

@@ -13,16 +13,16 @@ import type { DefinePluginConfig } from '../../../lib/core-types'
 import type { DataFormatterGrid } from '../../../lib/core-types'
 import {
   defineGridPlugin, createValueToAxisScale } from '../../../lib/core'
-import { DEFAULT_GRID_ZOOM_PARAMS } from '../defaults'
+import { DEFAULT_GROUP_ZOOM_PARAMS } from '../defaults'
 import { getClassName, getUniID } from '../../utils/orbchartsUtils'
 import { LAYER_INDEX_OF_ROOT } from '../../const'
 
-const pluginName = 'GridZoom'
+const pluginName = 'GroupZoom'
 const rectClassName = getClassName(pluginName, 'rect')
 
-const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_GRID_ZOOM_PARAMS> = {
+const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_GROUP_ZOOM_PARAMS> = {
   name: pluginName,
-  defaultParams: DEFAULT_GRID_ZOOM_PARAMS,
+  defaultParams: DEFAULT_GROUP_ZOOM_PARAMS,
   layerIndex: LAYER_INDEX_OF_ROOT,
   validator: (params, { validateColumns }) => {
     return {
@@ -33,7 +33,7 @@ const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_GRID_ZO
   }
 }
 
-export const GridZoom = defineGridPlugin(pluginConfig)(({ selection, rootSelection, name, observer, subject }) => {
+export const GroupZoom = defineGridPlugin(pluginConfig)(({ selection, rootSelection, name, observer, subject }) => {
 
   const destroy$ = new Subject()
 

package/src/grid/plugins/LineAreas.ts

@@ -40,8 +40,8 @@ export const LineAreas = defineGridPlugin(pluginConfig)(({ selection, name, obse
     selection,
     computedData$: observer.computedData$,
     visibleComputedData$: observer.visibleComputedData$,
-    computedLayoutData$: observer.computedLayoutData$,
-    visibleComputedLayoutData$: observer.visibleComputedLayoutData$,
+    computedAxesData$: observer.computedAxesData$,
+    visibleComputedAxesData$: observer.visibleComputedAxesData$,
     seriesLabels$: observer.seriesLabels$,
     SeriesDataMap$: observer.SeriesDataMap$,
     GroupDataMap$: observer.GroupDataMap$,

package/src/grid/plugins/Lines.ts

@@ -33,9 +33,9 @@ export const Lines = defineGridPlugin(pluginConfig)(({ selection, rootSelection,
   const unsubscribeBaseBars = createBaseLines(pluginName, {
     selection,
     computedData$: observer.computedData$,
-    computedLayoutData$: observer.computedLayoutData$,
+    computedAxesData$: observer.computedAxesData$,
     visibleComputedData$: observer.visibleComputedData$,
-    visibleComputedLayoutData$: observer.visibleComputedLayoutData$,
+    visibleComputedAxesData$: observer.visibleComputedAxesData$,
     seriesLabels$: observer.seriesLabels$,
     SeriesDataMap$: observer.SeriesDataMap$,
     GroupDataMap$: observer.GroupDataMap$,

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

@@ -7,15 +7,15 @@ import {
   Observable } from 'rxjs'
 import type { DefinePluginConfig } from '../../../lib/core-types'
 import { defineGridPlugin } from '../../../lib/core'
-import { DEFAULT_STACKED_BAR_PARAMS } from '../defaults'
+import { DEFAULT_STACKED_BARS_PARAMS } from '../defaults'
 import { LAYER_INDEX_OF_GRAPHIC } from '../../const'
-import { createBaseStackedBar } from '../../base/BaseStackedBar'
+import { createBaseStackedBars } from '../../base/BaseStackedBars'
 
-const pluginName = 'StackedBar'
+const pluginName = 'StackedBars'
 
-const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_STACKED_BAR_PARAMS> = {
+const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_STACKED_BARS_PARAMS> = {
   name: pluginName,
-  defaultParams: DEFAULT_STACKED_BAR_PARAMS,
+  defaultParams: DEFAULT_STACKED_BARS_PARAMS,
   layerIndex: 5,
   validator: (params, { validateColumns }) => {
     const result = validateColumns(params, {
@@ -33,15 +33,15 @@ const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_STACKED
   }
 }
 
-export const StackedBar = defineGridPlugin(pluginConfig)(({ selection, name, subject, observer }) => {
+export const StackedBars = defineGridPlugin(pluginConfig)(({ selection, name, subject, observer }) => {
   const destroy$ = new Subject()
 
-  const unsubscribeBaseBars = createBaseStackedBar(pluginName, {
+  const unsubscribeBaseBars = createBaseStackedBars(pluginName, {
     selection,
     computedData$: observer.computedData$,
-    computedLayoutData$: observer.computedLayoutData$,
+    computedAxesData$: observer.computedAxesData$,
     visibleComputedData$: observer.visibleComputedData$,
-    visibleComputedLayoutData$: observer.visibleComputedLayoutData$,
+    visibleComputedAxesData$: observer.visibleComputedAxesData$,
     seriesLabels$: observer.seriesLabels$,
     SeriesDataMap$: observer.SeriesDataMap$,
     GroupDataMap$: observer.GroupDataMap$,

package/src/multiGrid/defaults.ts

@@ -1,7 +1,7 @@
 import type {
   MultiGridLegendParams,
   MultiBarsParams,
-  MultiStackedBarParams,
+  MultiStackedBarsParams,
   MultiBarsTriangleParams,
   MultiLinesParams,
   MultiLineAreasParams,
@@ -62,7 +62,15 @@ export const DEFAULT_MULTI_VALUE_AXIS_PARAMS: MultiValueAxisParams = {
   axisLineVisible: false,
   axisLineColorType: 'primary',
   ticks: 4,
-  tickFormat: ',.0f',
+  // tickFormat: ',.0f',
+  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,
@@ -70,8 +78,16 @@ export const DEFAULT_MULTI_VALUE_AXIS_PARAMS: MultiValueAxisParams = {
   tickColorType: 'secondary',
   tickTextRotate: 0,
   tickTextColorType: 'primary',
-  gridIndexes: [0]
+  gridIndexes: 'all'
 }
+DEFAULT_MULTI_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_MULTI_STACKED_VALUE_AXIS_PARAMS: MultiStackedValueAxisParams = {
   ...DEFAULT_MULTI_VALUE_AXIS_PARAMS
@@ -85,7 +101,7 @@ export const DEFAULT_MULTI_BARS_PARAMS: MultiBarsParams = {
   gridIndexes: [0]
 }
 
-export const DEFAULT_MULTI_STACKED_BAR_PARAMS: MultiStackedBarParams = {
+export const DEFAULT_MULTI_STACKED_BARS_PARAMS: MultiStackedBarsParams = {
   barWidth: 0,
   barGroupPadding: 10,
   barRadius: false,
@@ -114,7 +130,7 @@ export const DEFAULT_MULTI_LINE_AREAS_PARAMS: MultiLineAreasParams = {
 
 export const DEFAULT_MULTI_DOTS_PARAMS: MultiDotsParams = {
   radius: 4,
-  fillColorType: 'white',
+  fillColorType: 'background',
   strokeColorType: 'label',
   strokeWidth: 2,
   onlyShowHighlighted: false,
@@ -171,15 +187,17 @@ export const DEFAULT_MULTI_GRID_TOOLTIP_PARAMS: MultiGridTooltipParams = {
   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)
@@ -187,7 +205,7 @@ export const DEFAULT_MULTI_GRID_TOOLTIP_PARAMS: MultiGridTooltipParams = {
   <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>`
       })
@@ -200,14 +218,16 @@ DEFAULT_MULTI_GRID_TOOLTIP_PARAMS.renderFn.toString = () => `(eventData, { style
     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)
@@ -215,7 +235,7 @@ DEFAULT_MULTI_GRID_TOOLTIP_PARAMS.renderFn.toString = () => `(eventData, { style
   <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/multiGrid/index.ts

@@ -2,7 +2,7 @@ export * from './defaults'
 // export * from './types'
 export { MultiGridLegend } from './plugins/MultiGridLegend'
 export { MultiBars } from './plugins/MultiBars'
-export { MultiStackedBar } from './plugins/MultiStackedBar'
+export { MultiStackedBars } from './plugins/MultiStackedBars'
 export { MultiBarsTriangle } from './plugins/MultiBarsTriangle'
 export { MultiLines } from './plugins/MultiLines'
 export { MultiLineAreas } from './plugins/MultiLineAreas'

package/src/multiGrid/multiGridObservables.ts

@@ -34,6 +34,7 @@ export const multiGridPluginDetailObservables = (observer: ContextObserverMultiG
     multiGridEachDetail: observer.multiGridEachDetail$,
     gridIndexes: gridIndexes$,
   }).pipe(
+    switchMap(async d => d),
     map(data => {
       // 對應所有grid
       if (data.gridIndexes === 'all') {

package/src/multiGrid/plugins/MultiBars.ts

@@ -82,8 +82,8 @@ export const MultiBars = defineMultiGridPlugin(pluginConfig)(({ selection, name,
             selection: gridSelection,
             computedData$: d.computedData$,
             visibleComputedData$: d.visibleComputedData$,
-            computedLayoutData$: d.computedLayoutData$,
-            visibleComputedLayoutData$: d.visibleComputedLayoutData$,
+            computedAxesData$: d.computedAxesData$,
+            visibleComputedAxesData$: d.visibleComputedAxesData$,
             seriesLabels$: d.seriesLabels$,
             SeriesDataMap$: d.SeriesDataMap$,
             GroupDataMap$: d.GroupDataMap$,
@@ -93,7 +93,7 @@ export const MultiBars = defineMultiGridPlugin(pluginConfig)(({ selection, name,
             gridGraphicTransform$: d.gridGraphicTransform$,
             gridGraphicReverseScale$: d.gridGraphicReverseScale$,
             gridAxesSize$: d.gridAxesSize$,
-            gridHighlight$: d.gridHighlight$,
+            gridHighlight$: observer.multiGridHighlight$,
             gridContainerPosition$: d.gridContainerPosition$,
             isSeriesSeprate$,
             event$: subject.event$ as Subject<any>,

package/src/multiGrid/plugins/MultiBarsTriangle.ts

@@ -88,8 +88,8 @@ export const MultiBarsTriangle = defineMultiGridPlugin(pluginConfig)(({ selectio
             selection: gridSelection,
             computedData$: d.computedData$,
             visibleComputedData$: d.visibleComputedData$,
-            computedLayoutData$: d.computedLayoutData$,
-            visibleComputedLayoutData$: d.visibleComputedLayoutData$,
+            computedAxesData$: d.computedAxesData$,
+            visibleComputedAxesData$: d.visibleComputedAxesData$,
             seriesLabels$: d.seriesLabels$,
             SeriesDataMap$: d.SeriesDataMap$,
             GroupDataMap$: d.GroupDataMap$,
@@ -99,7 +99,7 @@ export const MultiBarsTriangle = defineMultiGridPlugin(pluginConfig)(({ selectio
             gridAxesTransform$: d.gridAxesTransform$,
             gridGraphicTransform$: d.gridGraphicTransform$,
             gridAxesSize$: d.gridAxesSize$,
-            gridHighlight$: d.gridHighlight$,
+            gridHighlight$: observer.multiGridHighlight$,
             gridContainerPosition$: d.gridContainerPosition$,
             isSeriesSeprate$: isSeriesSeprate$,
             event$: subject.event$ as Subject<any>,

package/src/multiGrid/plugins/MultiDots.ts

@@ -77,8 +77,8 @@ export const MultiDots = defineMultiGridPlugin(pluginConfig)(({ selection, name,
             selection: gridSelection,
             computedData$: d.computedData$,
             visibleComputedData$: d.visibleComputedData$,
-            computedLayoutData$: d.computedLayoutData$,
-            visibleComputedLayoutData$: d.visibleComputedLayoutData$,
+            computedAxesData$: d.computedAxesData$,
+            visibleComputedAxesData$: d.visibleComputedAxesData$,
             seriesLabels$: d.seriesLabels$,
             SeriesDataMap$: d.SeriesDataMap$,
             GroupDataMap$: d.GroupDataMap$,
@@ -88,7 +88,7 @@ export const MultiDots = defineMultiGridPlugin(pluginConfig)(({ selection, name,
             gridGraphicTransform$: d.gridGraphicTransform$,
             gridGraphicReverseScale$: d.gridGraphicReverseScale$,
             gridAxesSize$: d.gridAxesSize$,
-            gridHighlight$: d.gridHighlight$,
+            gridHighlight$: observer.multiGridHighlight$,
             gridContainerPosition$: d.gridContainerPosition$,
             event$: subject.event$ as Subject<any>,
           })