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

package/dist/src/index.d.ts

@@ -1,5 +1 @@
-export * from './grid';
-export * from './multiGrid';
-export * from './noneData';
-export * from './series';
-export * from './tree';
+export * from '../orbcharts-plugins-basic/src/index'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orbcharts/plugins-basic",
-  "version": "3.0.0-beta.1",
+  "version": "3.0.0-beta.11",
   "description": "plugins for OrbCharts",
   "author": "Blue Planet Inc.",
   "license": "Apache-2.0",
@@ -35,9 +35,9 @@
     "vite-plugin-dts": "^3.7.3"
   },
   "dependencies": {
-    "@orbcharts/core": "^3.0.0-beta.1",
-    "@orbcharts/core-types": "^3.0.0-beta.1",
-    "@orbcharts/plugins-basic-types": "^3.0.0-beta.1",
+    "@orbcharts/core": "^3.0.0-beta.7",
+    "@orbcharts/core-types": "^3.0.0-beta.5",
+    "@orbcharts/plugins-basic-types": "^3.0.0-beta.10",
     "d3": "^7.8.5",
     "rxjs": "^7.8.1"
   }

package/src/base/BaseBars.ts

@@ -14,7 +14,7 @@ import type {
   ComputedDataGrid,
   ComputedLayoutDataGrid,
   DataFormatterTypeMap,
-  GridContainerPosition,
+  ContainerPositionScaled,
   EventGrid,
   ChartParams, 
   Layout,
@@ -51,7 +51,7 @@ interface BaseBarsContext {
     height: number;
   }>
   gridHighlight$: Observable<ComputedDatumGrid[]>
-  gridContainerPosition$: Observable<GridContainerPosition[]>
+  gridContainerPosition$: Observable<ContainerPositionScaled[]>
   isSeriesSeprate$: Observable<boolean>
   event$: Subject<EventGrid>
 }
@@ -92,7 +92,7 @@ function calcBarWidth ({ axisWidth, groupAmount, barAmountOfGroup, barPadding =
   barPadding: number
   barGroupPadding: number
 }) {
-  const eachGroupWidth = groupAmount > 1
+  const eachGroupWidth = groupAmount > 1 // 等於 1 時會算出 Infinity
     ? axisWidth / (groupAmount - 1) // -1是因為要扣掉兩側的padding
     : axisWidth
   const width = (eachGroupWidth - barGroupPadding) / barAmountOfGroup - barPadding
@@ -140,7 +140,7 @@ function renderRectBars ({ graphicGSelection, rectClassName, visibleComputedLayo
               .append('rect')
               .classed(rectClassName, true)
               .attr('cursor', 'pointer')
-              .attr('height', d => 0)
+              .attr('height', d => 1)
           },
           update => update,
           exit => exit.remove()
@@ -156,7 +156,7 @@ function renderRectBars ({ graphicGSelection, rectClassName, visibleComputedLayo
         .duration(transitionItem)
         .ease(getD3TransitionEase(chartParams.transitionEase))
         .delay((d, i) => d.groupIndex * delayGroup)
-        .attr('height', d => Math.abs(d.axisYFromZero))
+        .attr('height', d => Math.abs(d.axisYFromZero) || 1) // 無值還是給一個 1 的高度
     })
 
 

package/src/base/BaseBarsTriangle.ts

@@ -17,7 +17,7 @@ import type {
   DataFormatterTypeMap,
   EventGrid,
   ChartParams,
-  GridContainerPosition,
+  ContainerPositionScaled,
   Layout,
   TransformData
 } from '../../lib/core-types'
@@ -52,7 +52,7 @@ interface BaseBarsContext {
     height: number;
   }>
   gridHighlight$: Observable<ComputedDatumGrid[]>
-  gridContainerPosition$: Observable<GridContainerPosition[]>
+  gridContainerPosition$: Observable<ContainerPositionScaled[]>
   isSeriesSeprate$: Observable<boolean>
   event$: Subject<EventGrid>
 }
@@ -100,7 +100,9 @@ function calcBarWidth ({ axisWidth, groupAmount, barAmountOfGroup, barPadding =
   barPadding: number
   barGroupPadding: number
 }) {
-  const eachGroupWidth = axisWidth / (groupAmount - 1)
+  const eachGroupWidth = groupAmount > 1 // 等於 1 時會算出 Infinity
+    ? axisWidth / (groupAmount - 1)
+    : axisWidth
   const width = (eachGroupWidth - barGroupPadding) / barAmountOfGroup - barPadding
   return width > 1 ? width : 1
 }
@@ -164,7 +166,7 @@ function renderTriangleBars ({ graphicGSelection, pathGClassName, pathClassName,
 
       // path
       gSelection.select(`path.${pathClassName}`)
-        .attr('height', d => Math.abs(d.axisYFromZero))
+        .attr('height', d => Math.abs(d.axisYFromZero) || 1) // 無值還是給一個 1 的高度
         .attr('y', d => d.axisY < zeroYArr[seriesIndex] ? d.axisY : zeroYArr[seriesIndex])
         .attr('x', d => isSeriesSeprate ? 0 : barScale(d.seriesLabel)!)
         // .style('fill', d => `url(#${d.linearGradientId})`)

package/src/base/BaseDots.ts

@@ -14,7 +14,7 @@ import type {
   ComputedLayoutDataGrid,
   EventGrid,
   ChartParams, 
-  GridContainerPosition,
+  ContainerPositionScaled,
   Layout,
   TransformData,
   ColorType
@@ -51,7 +51,7 @@ interface BaseDotsContext {
     height: number;
   }>
   gridHighlight$: Observable<ComputedDatumGrid[]>
-  gridContainerPosition$: Observable<GridContainerPosition[]>
+  gridContainerPosition$: Observable<ContainerPositionScaled[]>
   event$: Subject<EventGrid>
 }
 
@@ -138,57 +138,6 @@ function renderDots ({ graphicGSelection, circleGClassName, circleClassName, vis
             .attr('transform', `scale(${graphicReverseScale[seriesIndex][0] ?? 1}, ${graphicReverseScale[seriesIndex][1] ?? 1})`)
         })
     })
-  
-  // const dots = graphicGSelection
-  //   .selectAll<SVGGElement, ComputedDatumGrid>('g')
-  //   .data(data, d => d.id)
-  //   .join(
-  //     enter => {
-  //       // enterDuration
-  //       enterDuration = createEnterDuration(enter)
-
-  //       return enter
-  //         .append('g')
-  //         .classed(circleGClassName, true)     
-  //     },
-  //     update => update,
-  //     exit => exit.remove()
-  //   )
-  //   .attr('transform', d => `translate(${d.axisX}, ${d.axisY})`)
-  //   .each((d, i, g) => {
-  //     const circle = d3.select(g[i])
-  //       .selectAll('circle')
-  //       .data([d])
-  //       .join(
-  //         enter => {
-  //           return enter
-  //             .append('circle')
-  //             .style('cursor', 'pointer')
-  //             .style('vector-effect', 'non-scaling-stroke')
-  //             .classed(circleClassName, true)
-  //             .attr('opacity', 0)
-  //             .transition()
-  //             .delay((_d, _i) => {
-  //               return i * enterDuration
-  //             })
-  //             .attr('opacity', 1)
-  //         },
-  //         update => {
-  //           return update
-  //             .transition()
-  //             .duration(50)
-  //             // .attr('cx', d => d.axisX)
-  //             // .attr('cy', d => d.axisY)
-  //             .attr('opacity', 1)
-  //         },
-  //         exit => exit.remove()
-  //       )
-  //       .attr('r', fullParams.radius)
-  //       .attr('fill', (d, i) => getDatumColor({ datum: d, colorType: fullParams.fillColorType, fullChartParams }))
-  //       .attr('stroke', (d, i) => getDatumColor({ datum: d, colorType: fullParams.strokeColorType, fullChartParams }))
-  //       .attr('stroke-width', fullParams.strokeWidth)
-  //       .attr('transform', `scale(${graphicReverseScale[0]}, ${graphicReverseScale[1]})`)
-  //   })
 
   const graphicCircleSelection: d3.Selection<SVGRectElement, ComputedDatumGrid, SVGGElement, unknown>  = graphicGSelection.selectAll(`circle.${circleClassName}`)
 
@@ -391,7 +340,7 @@ export const createBaseDots: BasePluginFn<BaseDotsContext> = (pluginName: string
     takeUntil(destroy$),
     switchMap(async (d) => d),
   ).subscribe(data => {
-
+    
     data.graphicSelection
       .on('mouseover', (event, datum) => {
         // event.stopPropagation()

package/src/base/BaseGroupAxis.ts

@@ -13,7 +13,7 @@ import {
 import type {
   ColorType,
   ComputedDataGrid,
-  GridContainerPosition,
+  ContainerPositionScaled,
   ComputedDatumGrid,
   DataFormatterGrid,
   ChartParams,
@@ -57,7 +57,7 @@ interface BaseGroupAxisContext {
     width: number;
     height: number;
   }>
-  gridContainerPosition$: Observable<GridContainerPosition[]>
+  gridContainerPosition$: Observable<ContainerPositionScaled[]>
   isSeriesSeprate$: Observable<boolean>
   textSizePx$: Observable<number>
 }
@@ -79,7 +79,7 @@ interface GroupLabelData {
 // const groupingLabelClassName = getClassName(pluginName, 'groupingLabel')
 const defaultTickSize = 6
 
-function createGroupLabelData (groupLabels: string[], tickFormat: string | ((text: any) => string)): GroupLabelData[] {
+function createGroupLabelData (groupLabels: string[], tickFormat: string | ((text: any) => string  | d3.NumberValue)): GroupLabelData[] {
   return groupLabels.map((_text, i) => {
     const text = parseTickFormatValue(_text, tickFormat)
     const textArr = typeof text === 'string' ? text.split('\n') : [text]
@@ -106,32 +106,32 @@ function renderAxisLabel ({ selection, groupingLabelClassName, fullParams, axisL
   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 = 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 = - 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 = - 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
     }
   }
@@ -162,7 +162,7 @@ function renderAxisLabel ({ selection, groupingLabelClassName, fullParams, axisL
         // 偏移使用 x, y 而非 transform 才不會受到外層 scale 變形影響
         .attr('x', labelX)
         .attr('y', labelY)
-        .text(d => fullDataFormatter.grid.groupAxis.label)
+        .text(d => fullDataFormatter.groupAxis.label)
     })
     .attr('transform', d => `translate(${gridAxesSize.width}, 0)`)
     // .attr('transform', d => `translate(${gridAxesSize.width + d.tickPadding + fullParams.labelOffset[0]}, ${- d.tickPadding - fullParams.labelOffset[1]})`)
@@ -197,16 +197,16 @@ function renderAxis ({ selection, xAxisClassName, fullParams, tickTextAlign, gri
   // 刻度文字偏移
   let tickPadding = 0
   let textX = 0
-  if (fullDataFormatter.grid.groupAxis.position === 'left') {
+  if (fullDataFormatter.groupAxis.position === 'left') {
     tickPadding = 0
     textX = - fullParams.tickPadding
-  } else if (fullDataFormatter.grid.groupAxis.position === 'right') {
+  } else if (fullDataFormatter.groupAxis.position === 'right') {
     tickPadding = 0
     textX = fullParams.tickPadding
-  } else if (fullDataFormatter.grid.groupAxis.position === 'bottom') {
+  } else if (fullDataFormatter.groupAxis.position === 'bottom') {
     tickPadding = fullParams.tickPadding
     textX = 0
-  } else if (fullDataFormatter.grid.groupAxis.position === 'top') {
+  } else if (fullDataFormatter.groupAxis.position === 'top') {
     tickPadding = - fullParams.tickPadding
     textX = - 0
   }
@@ -248,7 +248,7 @@ function renderAxis ({ selection, xAxisClassName, fullParams, tickTextAlign, gri
           renderTspansOnAxis(d3.select(n[i]), {
             textArr,
             textSizePx,
-            groupAxisPosition: fullDataFormatter.grid.groupAxis.position
+            groupAxisPosition: fullDataFormatter.groupAxis.position
           })
         })
     })
@@ -275,7 +275,7 @@ function renderAxis ({ selection, xAxisClassName, fullParams, tickTextAlign, gri
     .style('transform', textReverseTransformWithRotate)
   
   // 抵消掉預設的偏移
-  // if (fullDataFormatter.grid.groupAxis.position === 'left' || fullDataFormatter.grid.groupAxis.position === 'right') {
+  // if (fullDataFormatter.groupAxis.position === 'left' || fullDataFormatter.groupAxis.position === 'right') {
     xText.attr('dy', 0)
   // }
     
@@ -386,7 +386,7 @@ export const createBaseGroupAxis: BasePluginFn<BaseGroupAxisContext> = ((pluginN
   // const tickTextFormatter$ = fullDataFormatter$
   //   .pipe(
   //     map(d => {
-  //       return d.grid.seriesDirection === 'row' ? d.grid.columnLabelFormat : d.grid.rowLabelFormat
+  //       return d.seriesDirection === 'row' ? d.columnLabelFormat : d.rowLabelFormat
   //     })
   //   )
 
@@ -472,12 +472,12 @@ export const createBaseGroupAxis: BasePluginFn<BaseGroupAxisContext> = ((pluginN
   //   ).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
@@ -496,9 +496,9 @@ export const createBaseGroupAxis: BasePluginFn<BaseGroupAxisContext> = ((pluginN
   //       })
 
       
-  //     const padding = data.fullDataFormatter.grid.groupAxis.scalePadding
+  //     const padding = data.fullDataFormatter.groupAxis.scalePadding
       
-  //     const groupScale = createAxisPointScale({
+  //     const groupScale = createLabelToAxisScale({
   //       axisLabels,
   //       axisWidth: data.gridAxesSize.width,
   //       padding
@@ -518,13 +518,13 @@ export const createBaseGroupAxis: BasePluginFn<BaseGroupAxisContext> = ((pluginN
     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]
     }),
@@ -559,20 +559,20 @@ export const createBaseGroupAxis: BasePluginFn<BaseGroupAxisContext> = ((pluginN
       let textAnchor: 'start' | 'middle' | 'end' = 'middle'
       let dominantBaseline: 'auto' | 'middle' | 'hanging' = 'hanging'
 
-      if (data.fullDataFormatter.grid.groupAxis.position === 'bottom') {
+      if (data.fullDataFormatter.groupAxis.position === 'bottom') {
         textAnchor = data.fullParams.tickTextRotate
           ? 'end'
           : 'middle'
         dominantBaseline = 'hanging'
-      } else if (data.fullDataFormatter.grid.groupAxis.position === 'top') {
+      } else if (data.fullDataFormatter.groupAxis.position === 'top') {
         textAnchor = data.fullParams.tickTextRotate
           ? 'start'
           : 'middle'
         dominantBaseline = 'auto'
-      } else if (data.fullDataFormatter.grid.groupAxis.position === 'left') {
+      } else if (data.fullDataFormatter.groupAxis.position === 'left') {
         textAnchor = 'end'
         dominantBaseline = 'middle'
-      } else if (data.fullDataFormatter.grid.groupAxis.position === 'right') {
+      } else if (data.fullDataFormatter.groupAxis.position === 'right') {
         textAnchor = 'start'
         dominantBaseline = 'middle'
       }
@@ -589,22 +589,22 @@ export const createBaseGroupAxis: BasePluginFn<BaseGroupAxisContext> = ((pluginN
       let textAnchor: 'start' | 'middle' | 'end' = 'start'
       let dominantBaseline: 'auto' | 'middle' | 'hanging' = 'hanging'
 
-      if (d.grid.groupAxis.position === 'bottom') {
+      if (d.groupAxis.position === 'bottom') {
         dominantBaseline = 'hanging'
-      } else if (d.grid.groupAxis.position === 'top') {
+      } else if (d.groupAxis.position === 'top') {
         dominantBaseline = 'auto'
-      } else if (d.grid.groupAxis.position === 'left') {
+      } else if (d.groupAxis.position === 'left') {
         textAnchor = 'end'
-      } else if (d.grid.groupAxis.position === 'right') {
+      } else if (d.groupAxis.position === 'right') {
         textAnchor = 'start'
       }
-      if (d.grid.valueAxis.position === 'left') {
+      if (d.valueAxis.position === 'left') {
         textAnchor = 'start'
-      } else if (d.grid.valueAxis.position === 'right') {
+      } else if (d.valueAxis.position === 'right') {
         textAnchor = 'end'
-      } else if (d.grid.valueAxis.position === 'bottom') {
+      } else if (d.valueAxis.position === 'bottom') {
         dominantBaseline = 'auto'
-      } else if (d.grid.valueAxis.position === 'top') {
+      } else if (d.valueAxis.position === 'top') {
         dominantBaseline = 'hanging'
       }
       return {

package/src/base/BaseLegend.ts

@@ -25,7 +25,7 @@ import { measureTextWidth } from '../utils/commonUtils'
 //   backgroundStroke: ColorType
 //   textColorType: ColorType
 //   gap: number
-//   seriesList: Array<{
+//   labelList: Array<{
 //     listRectWidth: number
 //     listRectHeight: number
 //     listRectRadius: number
@@ -35,7 +35,7 @@ import { measureTextWidth } from '../utils/commonUtils'
 
 interface BaseLegendContext {
   rootSelection: d3.Selection<any, unknown, any, unknown>
-  seriesLabels$: Observable<string[]>
+  legendLabels$: Observable<string[]>
   fullParams$: Observable<BaseLegendParams>
   layout$: Observable<Layout>
   fullChartParams$: Observable<ChartParams>
@@ -89,6 +89,8 @@ interface ListStyle {
   listRectRadius: number
 }
 
+const noneLabelText = ' - ' // 沒有label時的預設文字
+
 const defaultListStyle: ListStyle = {
   listRectWidth: 14,
   listRectHeight: 14,
@@ -96,16 +98,16 @@ const defaultListStyle: ListStyle = {
 }
 
 function getSeriesColor (seriesIndex: number, fullChartParams: ChartParams) {
-  const colorIndex = seriesIndex < fullChartParams.colors[fullChartParams.colorScheme].series.length
+  const colorIndex = seriesIndex < fullChartParams.colors[fullChartParams.colorScheme].label.length
     ? seriesIndex
-    : seriesIndex % fullChartParams.colors[fullChartParams.colorScheme].series.length
-  return fullChartParams.colors[fullChartParams.colorScheme].series[colorIndex]
+    : seriesIndex % fullChartParams.colors[fullChartParams.colorScheme].label.length
+  return fullChartParams.colors[fullChartParams.colorScheme].label[colorIndex]
 }
 
 
 export const createBaseLegend: BasePluginFn<BaseLegendContext> = (pluginName: string, {
   rootSelection,
-  seriesLabels$,
+  legendLabels$,
   fullParams$,
   layout$,
   fullChartParams$,
@@ -119,7 +121,7 @@ export const createBaseLegend: BasePluginFn<BaseLegendContext> = (pluginName: st
 
   const destroy$ = new Subject()
 
-  // const seriesLabels$: Observable<string[]> = SeriesDataMap$.pipe(
+  // const legendLabels$: Observable<string[]> = SeriesDataMap$.pipe(
   //   takeUntil(destroy$),
   //   map(data => {
   //     return Array.from(data.keys())
@@ -127,7 +129,7 @@ export const createBaseLegend: BasePluginFn<BaseLegendContext> = (pluginName: st
   // )
 
   const SeriesLabelColorMap$ = combineLatest({
-    seriesLabels: seriesLabels$,
+    legendLabels: legendLabels$,
     fullChartParams: fullChartParams$
   }).pipe(
     takeUntil(destroy$),
@@ -135,7 +137,7 @@ export const createBaseLegend: BasePluginFn<BaseLegendContext> = (pluginName: st
     map(data => {
       const SeriesLabelColorMap: Map<string, string> = new Map()
       let accIndex = 0
-      data.seriesLabels.forEach((label, i) => {
+      data.legendLabels.forEach((label, i) => {
         if (!SeriesLabelColorMap.has(label)) {
           const color = getSeriesColor(accIndex, data.fullChartParams)
           SeriesLabelColorMap.set(label, color)
@@ -146,8 +148,8 @@ export const createBaseLegend: BasePluginFn<BaseLegendContext> = (pluginName: st
     })
   )
 
-  // 對應seriesLabels是否顯示（只顯示不重覆的）
-  const visibleList$ = seriesLabels$.pipe(
+  // 對應legendLabels是否顯示（只顯示不重覆的）
+  const visibleList$ = legendLabels$.pipe(
     takeUntil(destroy$),
     map(data => {
       const AccSeriesLabelSet = new Set()
@@ -305,7 +307,7 @@ export const createBaseLegend: BasePluginFn<BaseLegendContext> = (pluginName: st
   const defaultListStyle$ = fullParams$.pipe(
     takeUntil(destroy$),
     map(data => {
-      return data.seriesList[0] ? data.seriesList[0] : defaultListStyle
+      return data.labelList[0] ? data.labelList[0] : defaultListStyle
     })
   )
 
@@ -314,7 +316,7 @@ export const createBaseLegend: BasePluginFn<BaseLegendContext> = (pluginName: st
     visibleList: visibleList$,
     fullParams: fullParams$,
     fullChartParams: fullChartParams$,
-    seriesLabels: seriesLabels$,
+    legendLabels: legendLabels$,
     lineDirection: lineDirection$,
     lineMaxSize: lineMaxSize$,
     defaultListStyle: defaultListStyle$,
@@ -324,16 +326,18 @@ export const createBaseLegend: BasePluginFn<BaseLegendContext> = (pluginName: st
     takeUntil(destroy$),
     switchMap(async d => d),
     map(data => {
-      return data.seriesLabels.reduce((prev: LegendItem[][], current, currentIndex) => {
+      return data.legendLabels.reduce((prev: LegendItem[][], _current, currentIndex) => {
         // visible為flase則不加入
         if (!data.visibleList[currentIndex]) {
           return prev
         }
+
+        const currentText = _current !== '' ? _current : noneLabelText
         
-        const textWidth = measureTextWidth(current, data.textSizePx)
+        const textWidth = measureTextWidth(currentText, data.textSizePx)
         const itemWidth = (data.textSizePx * 1.5) + textWidth
         // const color = getSeriesColor(currentIndex, data.fullChartParams)
-        const color = data.SeriesLabelColorMap.get(current)
+        const color = data.SeriesLabelColorMap.get(_current)
         const lastItem: LegendItem | null = prev[0] && prev[0][0]
           ? prev[prev.length - 1][prev[prev.length - 1].length - 1]
           : null
@@ -389,15 +393,15 @@ export const createBaseLegend: BasePluginFn<BaseLegendContext> = (pluginName: st
           prev[lineIndex] = []
         }
 
-        const listStyle = data.fullParams.seriesList[itemIndex] ? data.fullParams.seriesList[itemIndex] : data.defaultListStyle
+        const listStyle = data.fullParams.labelList[itemIndex] ? data.fullParams.labelList[itemIndex] : data.defaultListStyle
 
         prev[lineIndex].push({
-          id: current,
-          seriesLabel: current,
+          id: currentText,
+          seriesLabel: currentText,
           seriesIndex: currentIndex,
           lineIndex,
           itemIndex,
-          text: current,
+          text: currentText,
           itemWidth,
           translateX,
           translateY,
@@ -664,7 +668,7 @@ export const createBaseLegend: BasePluginFn<BaseLegendContext> = (pluginName: st
             )
             .attr('x', data.textSizePx * 1.5)
             .attr('font-size', data.fullChartParams.styles.textSize)
-            .attr('fill', d => data.fullParams.textColorType === 'series'
+            .attr('fill', d => data.fullParams.textColorType === 'label'
               ? getSeriesColor(d.seriesIndex, data.fullChartParams)
               : getColor(data.fullParams.textColorType, data.fullChartParams))
             .text(d => d.text)

package/src/base/BaseLineAreas.ts

@@ -16,14 +16,14 @@ import type {
   ComputedLayoutDataGrid,
   DataFormatterGrid,
   EventGrid,
-  GridContainerPosition,
+  ContainerPositionScaled,
   ChartParams, 
   Layout,
   TransformData
 } from '../../lib/core-types'
 import type { BaseLineAreasParams } from '../../lib/plugins-basic-types'
 import { getD3TransitionEase } from '../utils/d3Utils'
-import { getClassName, getUniID, getMinAndMaxValue } from '../utils/orbchartsUtils'
+import { getClassName, getUniID, getMinMaxValue } from '../utils/orbchartsUtils'
 import { gridGroupPositionFnObservable } from '../grid/gridObservables'
 import { gridSelectionsObservable } from '../grid/gridObservables'
 
@@ -52,8 +52,8 @@ interface BaseLineAreasContext {
     height: number;
   }>
   gridHighlight$: Observable<ComputedDatumGrid[]>
-  gridContainerPosition$: Observable<GridContainerPosition[]>
-  allContainerPosition$: Observable<GridContainerPosition[]>
+  gridContainerPosition$: Observable<ContainerPositionScaled[]>
+  allContainerPosition$: Observable<ContainerPositionScaled[]>
   layout$: Observable<Layout>
   event$: Subject<EventGrid>
 }

package/src/base/BaseLines.ts

@@ -16,7 +16,7 @@ import type {
   ComputedLayoutDataGrid,
   DataFormatterGrid,
   EventGrid,
-  GridContainerPosition,
+  ContainerPositionScaled,
   ChartParams, 
   Layout,
   TransformData
@@ -58,8 +58,8 @@ interface BaseLinesContext {
     height: number;
   }>
   gridHighlight$: Observable<ComputedDatumGrid[]>
-  gridContainerPosition$: Observable<GridContainerPosition[]>
-  allContainerPosition$: Observable<GridContainerPosition[]>
+  gridContainerPosition$: Observable<ContainerPositionScaled[]>
+  allContainerPosition$: Observable<ContainerPositionScaled[]>
   layout$: Observable<Layout>
   event$: Subject<EventGrid>
 }