@orbcharts/plugins-basic 3.0.0-alpha.42 → 3.0.0-alpha.44

package/dist/src/base/BaseBarStack.d.ts

@@ -24,7 +24,7 @@ interface BaseBarStackContext {
         width: number;
         height: number;
     }>;
-    gridHighlight$: Observable<string[]>;
+    gridHighlight$: Observable<ComputedDatumGrid[]>;
     gridContainer$: Observable<ContainerPosition[]>;
     isSeriesPositionSeprate$: Observable<boolean>;
     event$: Subject<EventGrid>;

package/dist/src/base/BaseBars.d.ts

@@ -24,7 +24,7 @@ interface BaseBarsContext {
         width: number;
         height: number;
     }>;
-    gridHighlight$: Observable<string[]>;
+    gridHighlight$: Observable<ComputedDatumGrid[]>;
     gridContainer$: Observable<ContainerPosition[]>;
     isSeriesPositionSeprate$: Observable<boolean>;
     event$: Subject<EventGrid>;

package/dist/src/base/BaseBarsTriangle.d.ts

@@ -23,7 +23,7 @@ interface BaseBarsContext {
         width: number;
         height: number;
     }>;
-    gridHighlight$: Observable<string[]>;
+    gridHighlight$: Observable<ComputedDatumGrid[]>;
     gridContainer$: Observable<ContainerPosition[]>;
     isSeriesPositionSeprate$: Observable<boolean>;
     event$: Subject<EventGrid>;

package/dist/src/base/BaseDots.d.ts

@@ -25,7 +25,7 @@ interface BaseDotsContext {
         width: number;
         height: number;
     }>;
-    gridHighlight$: Observable<string[]>;
+    gridHighlight$: Observable<ComputedDatumGrid[]>;
     gridContainer$: Observable<ContainerPosition[]>;
     event$: Subject<EventGrid>;
 }

package/dist/src/base/BaseLegend.d.ts

@@ -22,6 +22,7 @@ interface BaseLegendContext {
     fullParams$: Observable<BaseLegendParams>;
     layout$: Observable<Layout>;
     fullChartParams$: Observable<ChartParams>;
+    textSizePx$: Observable<number>;
 }
 export declare const createBaseLegend: BasePluginFn<BaseLegendContext>;
 export {};

package/dist/src/base/BaseLineAreas.d.ts

@@ -21,7 +21,7 @@ interface BaseLineAreasContext {
         width: number;
         height: number;
     }>;
-    gridHighlight$: Observable<string[]>;
+    gridHighlight$: Observable<ComputedDatumGrid[]>;
     gridContainer$: Observable<ContainerPosition[]>;
     layout$: Observable<Layout>;
     event$: Subject<EventGrid>;

package/dist/src/base/BaseLines.d.ts

@@ -21,7 +21,7 @@ interface BaseLinesContext {
         width: number;
         height: number;
     }>;
-    gridHighlight$: Observable<string[]>;
+    gridHighlight$: Observable<ComputedDatumGrid[]>;
     gridContainer$: Observable<ContainerPosition[]>;
     event$: Subject<EventGrid>;
 }

package/dist/src/multiGrid/defaults.d.ts

@@ -1,4 +1,4 @@
-import { MultiGridLegendParams, MultiBarsParams, MultiBarStackParams, MultiBarsTriangleParams, MultiLinesParams, MultiDotsParams, MultiGroupAxisParams, MultiValueAxisParams, OverlappingValueAxesParams } from './types';
+import { MultiGridLegendParams, MultiBarsParams, MultiBarStackParams, MultiBarsTriangleParams, MultiLinesParams, MultiLineAreasParams, MultiDotsParams, MultiGroupAxisParams, MultiValueAxisParams, OverlappingValueAxesParams } from './types';
 
 export declare const DEFAULT_MULTI_GRID_LEGEND_PARAMS: MultiGridLegendParams;
 export declare const DEFAULT_MULTI_GROUP_AXIS_PARAMS: MultiGroupAxisParams;
@@ -7,5 +7,6 @@ export declare const DEFAULT_MULTI_BARS_PARAMS: MultiBarsParams;
 export declare const DEFAULT_MULTI_BAR_STACK_PARAMS: MultiBarStackParams;
 export declare const DEFAULT_MULTI_BARS_TRIANGLE_PARAMS: MultiBarsTriangleParams;
 export declare const DEFAULT_MULTI_LINES_PARAMS: MultiLinesParams;
+export declare const DEFAULT_MULTI_LINE_AREAS_PARAMS: MultiLineAreasParams;
 export declare const DEFAULT_MULTI_DOTS_PARAMS: MultiDotsParams;
 export declare const DEFAULT_OVERLAPPING_VALUE_AXES_PARAMS: OverlappingValueAxesParams;

package/dist/src/multiGrid/index.d.ts

@@ -5,6 +5,7 @@ export { MultiBars } from './plugins/MultiBars';
 export { MultiBarStack } from './plugins/MultiBarStack';
 export { MultiBarsTriangle } from './plugins/MultiBarsTriangle';
 export { MultiLines } from './plugins/MultiLines';
+export { MultiLineAreas } from './plugins/MultiLineAreas';
 export { MultiDots } from './plugins/MultiDots';
 export { MultiGroupAxis } from './plugins/MultiGroupAxis';
 export { MultiValueAxis } from './plugins/MultiValueAxis';

package/dist/src/multiGrid/plugins/MultiLineAreas.d.ts

@@ -0,0 +1 @@
+export declare const MultiLineAreas: import('@orbcharts/core').PluginConstructor<"multiGrid", string, import('..').MultiLineAreasParams>;

package/dist/src/multiGrid/types.d.ts

@@ -2,15 +2,12 @@ import { BaseBarsParams } from '../base/BaseBars';
 import { BaseBarStackParams } from '../base/BaseBarStack';
 import { BaseBarsTriangleParams } from '../base/BaseBarsTriangle';
 import { BaseLinesParams } from '../base/BaseLines';
+import { BaseLineAreasParams } from '../base/BaseLineAreas';
 import { BaseDotsParams } from '../base/BaseDots';
 import { BaseGroupAxisParams } from '../base/BaseGroupAxis';
 import { BaseValueAxisParams } from '../base/BaseValueAxis';
 import { ColorType } from '@orbcharts/core';
 
-export interface BarsAndLinesParams {
-    bars: BaseBarsParams;
-    lines: BaseLinesParams;
-}
 export interface MultiGridLegendParams {
     position: 'top' | 'bottom' | 'left' | 'right';
     justify: 'start' | 'center' | 'end';
@@ -46,6 +43,9 @@ export interface MultiBarsTriangleParams extends BaseBarsTriangleParams {
 export interface MultiLinesParams extends BaseLinesParams {
     gridIndexes: number[];
 }
+export interface MultiLineAreasParams extends BaseLineAreasParams {
+    gridIndexes: number[];
+}
 export interface MultiDotsParams extends BaseDotsParams {
     gridIndexes: number[];
 }

package/package.json

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

package/src/base/BaseBarStack.ts

@@ -45,7 +45,7 @@ interface BaseBarStackContext {
     width: number;
     height: number;
   }>
-  gridHighlight$: Observable<string[]>
+  gridHighlight$: Observable<ComputedDatumGrid[]>
   gridContainer$: Observable<ContainerPosition[]>
   isSeriesPositionSeprate$: Observable<boolean>
   event$: Subject<EventGrid>
@@ -861,7 +861,9 @@ export const createBaseBarStack: BasePluginFn<BaseBarStackContext> = (pluginName
   
   combineLatest({
     barSelection: barSelection$,
-    highlight: gridHighlight$,
+    highlight: gridHighlight$.pipe(
+      map(data => data.map(d => d.id))
+    ),
     fullChartParams: fullChartParams$
   }).pipe(
     takeUntil(destroy$),

package/src/base/BaseBars.ts

@@ -44,7 +44,7 @@ interface BaseBarsContext {
     width: number;
     height: number;
   }>
-  gridHighlight$: Observable<string[]>
+  gridHighlight$: Observable<ComputedDatumGrid[]>
   gridContainer$: Observable<ContainerPosition[]>
   isSeriesPositionSeprate$: Observable<boolean>
   event$: Subject<EventGrid>
@@ -729,7 +729,9 @@ export const createBaseBars: BasePluginFn<BaseBarsContext> = (pluginName: string
   
   combineLatest({
     barSelection: barSelection$,
-    highlight: gridHighlight$,
+    highlight: gridHighlight$.pipe(
+      map(data => data.map(d => d.id))
+    ),
     fullChartParams: fullChartParams$
   }).pipe(
     takeUntil(destroy$),

package/src/base/BaseBarsTriangle.ts

@@ -42,7 +42,7 @@ interface BaseBarsContext {
     width: number;
     height: number;
   }>
-  gridHighlight$: Observable<string[]>
+  gridHighlight$: Observable<ComputedDatumGrid[]>
   gridContainer$: Observable<ContainerPosition[]>
   isSeriesPositionSeprate$: Observable<boolean>
   event$: Subject<EventGrid>
@@ -639,7 +639,9 @@ export const createBaseBarsTriangle: BasePluginFn<BaseBarsContext> = (pluginName
   
   combineLatest({
     barSelection: barSelection$,
-    highlight: gridHighlight$,
+    highlight: gridHighlight$.pipe(
+      map(data => data.map(d => d.id))
+    ),
     fullChartParams: fullChartParams$
   }).pipe(
     takeUntil(destroy$),

package/src/base/BaseDots.ts

@@ -44,7 +44,7 @@ interface BaseDotsContext {
     width: number;
     height: number;
   }>
-  gridHighlight$: Observable<string[]>
+  gridHighlight$: Observable<ComputedDatumGrid[]>
   gridContainer$: Observable<ContainerPosition[]>
   event$: Subject<EventGrid>
 }
@@ -604,7 +604,7 @@ export const createBaseDots: BasePluginFn<BaseDotsContext> = (pluginName: string
   //   map(d => d.flat())
   // )
   // const highlight$ = highlightObservable({ datumList$, fullChartParams$, event$: store.event$ })
-  const highlightSubscription = gridHighlight$.subscribe()
+  // const highlightSubscription = gridHighlight$.subscribe()
   const onlyShowHighlighted$ = fullParams$.pipe(
     takeUntil(destroy$),
     map(d => d.onlyShowHighlighted),
@@ -615,7 +615,9 @@ export const createBaseDots: BasePluginFn<BaseDotsContext> = (pluginName: string
     takeUntil(destroy$),
     switchMap(d => combineLatest({
       graphicSelection: graphicSelection$,
-      highlight: gridHighlight$,
+      highlight: gridHighlight$.pipe(
+        map(data => data.map(d => d.id))
+      ),
       onlyShowHighlighted: onlyShowHighlighted$,
       fullChartParams: fullChartParams$
     }).pipe(
@@ -633,6 +635,6 @@ export const createBaseDots: BasePluginFn<BaseDotsContext> = (pluginName: string
 
   return () => {
     destroy$.next(undefined)
-    highlightSubscription.unsubscribe()
+    // highlightSubscription.unsubscribe()
   }
 }

package/src/base/BaseGroupAxis.ts

@@ -108,7 +108,7 @@ function renderPointAxis ({ selection, xAxisClassName, groupingLabelClassName, p
         )
         .attr('text-anchor', axisLabelAlign.textAnchor)
         .attr('dominant-baseline', axisLabelAlign.dominantBaseline)
-        .style('font-size', `${chartParams.styles.textSize}px`)
+        .attr('font-size', chartParams.styles.textSize)
         .style('fill', getColor(params.labelColorType, chartParams))
         .style('transform', textTransform)
         .text(d => fullDataFormatter.grid.groupAxis.label)
@@ -161,8 +161,8 @@ function renderPointAxis ({ selection, xAxisClassName, groupingLabelClassName, p
   //     .style('transform', textTransform)
   // })
   const xText = xAxisSelection.selectAll('text')
-    .style('font-family', 'sans-serif')
-    .style('font-size', `${chartParams.styles.textSize}px`)
+    // .style('font-family', 'sans-serif')
+    .attr('font-size', chartParams.styles.textSize)
     // .style('font-weight', 'bold')
     .style('color', getColor(params.tickTextColorType, chartParams))
     .attr('text-anchor', tickTextAlign.textAnchor)

package/src/base/BaseLegend.ts

@@ -36,6 +36,7 @@ interface BaseLegendContext {
   fullParams$: Observable<BaseLegendParams>
   layout$: Observable<Layout>
   fullChartParams$: Observable<ChartParams>
+  textSizePx$: Observable<number>
 }
 
 // 第1層 - 定位的容器
@@ -107,7 +108,8 @@ export const createBaseLegend: BasePluginFn<BaseLegendContext> = (pluginName: st
   seriesLabels$,
   fullParams$,
   layout$,
-  fullChartParams$
+  fullChartParams$,
+  textSizePx$
 }) => {
 
   const rootPositionClassName = getClassName(pluginName, 'root-position')
@@ -280,7 +282,8 @@ export const createBaseLegend: BasePluginFn<BaseLegendContext> = (pluginName: st
     lineDirection: lineDirection$,
     lineMaxSize: lineMaxSize$,
     defaultListStyle: defaultListStyle$,
-    SeriesLabelColorMap: SeriesLabelColorMap$
+    SeriesLabelColorMap: SeriesLabelColorMap$,
+    textSizePx: textSizePx$
   }).pipe(
     takeUntil(destroy$),
     switchMap(async d => d),
@@ -291,8 +294,8 @@ export const createBaseLegend: BasePluginFn<BaseLegendContext> = (pluginName: st
           return prev
         }
         
-        const textWidth = measureTextWidth(current, data.fullChartParams.styles.textSize)
-        const itemWidth = (data.fullChartParams.styles.textSize * 1.5) + textWidth
+        const textWidth = measureTextWidth(current, data.textSizePx)
+        const itemWidth = (data.textSizePx * 1.5) + textWidth
         // const color = getSeriesColor(currentIndex, data.fullChartParams)
         const color = data.SeriesLabelColorMap.get(current)
         const lastItem: LegendItem | null = prev[0] && prev[0][0]
@@ -307,10 +310,10 @@ export const createBaseLegend: BasePluginFn<BaseLegendContext> = (pluginName: st
 
           if (_data.lineDirection === 'column') {
             let tempTranslateY = _lastItem
-              ? _lastItem.translateY + _data.fullChartParams.styles.textSize + _data.fullParams.gap
+              ? _lastItem.translateY + _data.textSizePx + _data.fullParams.gap
               : 0
             
-            if ((tempTranslateY + _data.fullChartParams.styles.textSize) > _data.lineMaxSize) {
+            if ((tempTranslateY + _data.textSizePx) > _data.lineMaxSize) {
               // 換行
               lineIndex = _lastItem.lineIndex + 1
               itemIndex = 0
@@ -340,7 +343,7 @@ export const createBaseLegend: BasePluginFn<BaseLegendContext> = (pluginName: st
               itemIndex = _lastItem ? _lastItem.itemIndex + 1 : 0
               translateX = tempTranslateX
             }
-            translateY = (_data.fullChartParams.styles.textSize + _data.fullParams.gap) * lineIndex
+            translateY = (_data.textSizePx + _data.fullParams.gap) * lineIndex
           }
           
           return { translateX, translateY, lineIndex, itemIndex }
@@ -379,7 +382,8 @@ export const createBaseLegend: BasePluginFn<BaseLegendContext> = (pluginName: st
     fullParams: fullParams$,
     fullChartParams: fullChartParams$,
     lineDirection: lineDirection$,
-    lengendItems: lengendItems$
+    lengendItems: lengendItems$,
+    textSizePx: textSizePx$
   }).pipe(
     takeUntil(destroy$),
     switchMap(async d => d),
@@ -404,10 +408,10 @@ export const createBaseLegend: BasePluginFn<BaseLegendContext> = (pluginName: st
             return p + maxWidthInLine
           }, 0)
           width += _data.fullParams.gap * (_lengendItems.length - 1)
-          height = firstLineLastItem.translateY + _data.fullChartParams.styles.textSize
+          height = firstLineLastItem.translateY + _data.textSizePx
         } else {
           width = firstLineLastItem.translateX + firstLineLastItem.itemWidth
-          height = (_data.fullChartParams.styles.textSize * _lengendItems.length) + (_data.fullParams.gap * (_lengendItems.length - 1))
+          height = (_data.textSizePx * _lengendItems.length) + (_data.fullParams.gap * (_lengendItems.length - 1))
         }
 
         return { width, height }
@@ -565,7 +569,8 @@ export const createBaseLegend: BasePluginFn<BaseLegendContext> = (pluginName: st
     lengendListSelection: lengendListSelection$,
     fullParams: fullParams$,
     fullChartParams: fullChartParams$,
-    lengendItems: lengendItems$
+    lengendItems: lengendItems$,
+    textSizePx: textSizePx$
   }).pipe(
     takeUntil(destroy$),
     switchMap(async d => d),
@@ -589,7 +594,7 @@ export const createBaseLegend: BasePluginFn<BaseLegendContext> = (pluginName: st
           return `translate(${d.translateX}, ${d.translateY})`
         })
         .each((d, i, g) => {
-          const rectCenterX = data.fullChartParams.styles.textSize / 2
+          const rectCenterX = data.textSizePx / 2
           const transformRectWidth = - d.listRectWidth / 2
           const transformRectHeight = - d.listRectHeight / 2
           // 方塊
@@ -619,7 +624,7 @@ export const createBaseLegend: BasePluginFn<BaseLegendContext> = (pluginName: st
               },
               exit => exit.remove()
             )
-            .attr('x', data.fullChartParams.styles.textSize * 1.5)
+            .attr('x', data.textSizePx * 1.5)
             .attr('font-size', data.fullChartParams.styles.textSize)
             .attr('fill', d => data.fullParams.textColorType === 'series'
               ? getSeriesColor(d.seriesIndex, data.fullChartParams)

package/src/base/BaseLineAreas.ts

@@ -46,7 +46,7 @@ interface BaseLineAreasContext {
     width: number;
     height: number;
   }>
-  gridHighlight$: Observable<string[]>
+  gridHighlight$: Observable<ComputedDatumGrid[]>
   gridContainer$: Observable<ContainerPosition[]>
   layout$: Observable<Layout>
   event$: Subject<EventGrid>
@@ -599,7 +599,7 @@ export const createBaseLineAreas: BasePluginFn<BaseLineAreasContext> = (pluginNa
     filter(d => d.highlightTarget === 'series'),
     switchMap(d => combineLatest({
       graphicGSelection: graphicGSelection$,
-      highlight: gridHighlight$,
+      gridHighlight: gridHighlight$,
       DataMap: DataMap$,
       fullChartParams: fullChartParams$
     }).pipe(
@@ -607,13 +607,10 @@ export const createBaseLineAreas: BasePluginFn<BaseLineAreasContext> = (pluginNa
       switchMap(async d => d)
     ))
   ).subscribe(data => {
-    const datum = data.DataMap.get(data.highlight[0])
-    // if (!datum) {
-    //   return
-    // }
+    const seriesLabel = data.gridHighlight[0] ? data.gridHighlight[0].seriesLabel : null
     highlightLineAreas({
       selection: data.graphicGSelection,
-      seriesLabel: (datum && datum.seriesLabel) ? datum.seriesLabel : null,
+      seriesLabel,
       fullChartParams: data.fullChartParams
     })
   })

package/src/base/BaseLines.ts

@@ -50,7 +50,7 @@ interface BaseLinesContext {
     width: number;
     height: number;
   }>
-  gridHighlight$: Observable<string[]>
+  gridHighlight$: Observable<ComputedDatumGrid[]>
   gridContainer$: Observable<ContainerPosition[]>
   event$: Subject<EventGrid>
 }
@@ -670,7 +670,7 @@ export const createBaseLines: BasePluginFn<BaseLinesContext> = (pluginName: stri
     filter(d => d.highlightTarget === 'series'),
     switchMap(d => combineLatest({
       graphicGSelection: graphicGSelection$,
-      highlight: gridHighlight$,
+      gridHighlight: gridHighlight$,
       DataMap: DataMap$,
       fullChartParams: fullChartParams$
     }).pipe(
@@ -678,13 +678,10 @@ export const createBaseLines: BasePluginFn<BaseLinesContext> = (pluginName: stri
       switchMap(async d => d)
     ))
   ).subscribe(data => {
-    const datum = data.DataMap.get(data.highlight[0])
-    // if (!datum) {
-    //   return
-    // }
+    const seriesLabel = data.gridHighlight[0] ? data.gridHighlight[0].seriesLabel : null
     highlightLines({
       selection: data.graphicGSelection,
-      seriesLabel: (datum && datum.seriesLabel) ? datum.seriesLabel : null,
+      seriesLabel,
       fullChartParams: data.fullChartParams
     })
   })

package/src/base/BaseValueAxis.ts

@@ -107,7 +107,7 @@ function renderLinearAxis ({ selection, yAxisClassName, textClassName, fullParam
         )
         .attr('text-anchor', axisLabelAlign.textAnchor)
         .attr('dominant-baseline', axisLabelAlign.dominantBaseline)
-        .style('font-size', `${fullChartParams.styles.textSize}px`)
+        .attr('font-size', fullChartParams.styles.textSize)
         .style('fill', getColor(fullParams.labelColorType, fullChartParams))
         .style('transform', textTransform)
         .text(d => fullDataFormatter.grid.valueAxis.label)
@@ -153,8 +153,8 @@ function renderLinearAxis ({ selection, yAxisClassName, textClassName, fullParam
   
   // const yText = yAxisEl.selectAll('text')
   const yText = yAxisSelection.selectAll('text')
-    .style('font-family', 'sans-serif')
-    .style('font-size', `${fullChartParams.styles.textSize}px`)
+    // .style('font-family', 'sans-serif')
+    .attr('font-size', fullChartParams.styles.textSize)
     .style('color', getColor(fullParams.tickTextColorType, fullChartParams))
     .attr('text-anchor', tickTextAlign.textAnchor)
     .attr('dominant-baseline', tickTextAlign.dominantBaseline)

package/src/grid/plugins/GridLegend.ts

@@ -47,7 +47,8 @@ export const GridLegend = defineGridPlugin(pluginName, DEFAULT_GRID_LEGEND_PARAM
     seriesLabels$,
     fullParams$,
     layout$: observer.layout$,
-    fullChartParams$: observer.fullChartParams$
+    fullChartParams$: observer.fullChartParams$,
+    textSizePx$: observer.textSizePx$
   })
 
   return () => {

package/src/grid/plugins/GroupAux.ts

@@ -126,14 +126,15 @@ function createLabelData ({ groupLabel, axisX, fullParams }: {
     : []
 }
 
-function renderLabel ({ selection, labelData, fullParams, fullChartParams, gridAxesReverseTransformValue }: {
+function renderLabel ({ selection, labelData, fullParams, fullChartParams, gridAxesReverseTransformValue, textSizePx }: {
   selection: d3.Selection<any, unknown, any, unknown>
   labelData: LabelDatum[]
   fullParams: GroupAuxParams
   fullChartParams: ChartParams
   gridAxesReverseTransformValue: string
+  textSizePx: number
 }) {
-  const rectHeight = fullChartParams.styles.textSize + 4
+  const rectHeight = textSizePx + 4
 
   const gUpdate = selection
     .selectAll<SVGGElement, LabelDatum>(`g.${labelClassName}`)
@@ -157,7 +158,7 @@ function renderLabel ({ selection, labelData, fullParams, fullChartParams, gridA
   gUpdate.exit().remove()
 
   axisLabelSelection.each((datum, i, n) => {
-    const rectWidth = measureTextWidth(datum.text, fullChartParams.styles.textSize) + 12
+    const rectWidth = measureTextWidth(datum.text, textSizePx) + 12
     const rectX = - rectWidth / 2
 
     const rectUpdate = d3.select(n[i])
@@ -503,6 +504,7 @@ export const GroupAux = defineGridPlugin(pluginName, DEFAULT_GROUP_AREA_PARAMS)(
     gridAxesReverseTransform: observer.gridAxesReverseTransform$,
     GroupDataMap: observer.GroupDataMap$,
     gridGroupPositionFn: gridGroupPositionFn$,
+    textSizePx: observer.textSizePx$
   }).pipe(
     takeUntil(destroy$),
     switchMap(async d => d)
@@ -539,7 +541,8 @@ export const GroupAux = defineGridPlugin(pluginName, DEFAULT_GROUP_AREA_PARAMS)(
       labelData,
       fullParams: data.fullParams,
       fullChartParams: data.fullChartParams,
-      gridAxesReverseTransformValue: data.gridAxesReverseTransform.value
+      gridAxesReverseTransformValue: data.gridAxesReverseTransform.value,
+      textSizePx: data.textSizePx
     })
 
     // label的事件

package/src/multiGrid/defaults.ts

@@ -4,6 +4,7 @@ import type {
   MultiBarStackParams,
   MultiBarsTriangleParams,
   MultiLinesParams,
+  MultiLineAreasParams,
   MultiDotsParams,
   MultiGroupAxisParams,
   MultiValueAxisParams,
@@ -94,6 +95,12 @@ export const DEFAULT_MULTI_LINES_PARAMS: MultiLinesParams = {
   gridIndexes: [1]
 }
 
+export const DEFAULT_MULTI_LINE_AREAS_PARAMS: MultiLineAreasParams = {
+  lineCurve: 'curveLinear',
+  linearGradientOpacity: [1, 0],
+  gridIndexes: [1]
+}
+
 export const DEFAULT_MULTI_DOTS_PARAMS: MultiDotsParams = {
   radius: 4,
   fillColorType: 'white',

package/src/multiGrid/index.ts

@@ -5,6 +5,7 @@ export { MultiBars } from './plugins/MultiBars'
 export { MultiBarStack } from './plugins/MultiBarStack'
 export { MultiBarsTriangle } from './plugins/MultiBarsTriangle'
 export { MultiLines } from './plugins/MultiLines'
+export { MultiLineAreas } from './plugins/MultiLineAreas'
 export { MultiDots } from './plugins/MultiDots'
 export { MultiGroupAxis } from './plugins/MultiGroupAxis'
 export { MultiValueAxis } from './plugins/MultiValueAxis'

package/src/multiGrid/multiGridObservables.ts

@@ -4,6 +4,7 @@ import {
   takeUntil,
   of,
   map,
+  reduce,
   switchMap,
   combineLatest,
   distinctUntilChanged,
@@ -156,6 +157,16 @@ export const multiGridDetailObservables = (observer: ContextObserverMultiGrid<Mu
   )
   const destroy$ = new Subject()
 
+  // 合併所有gridHighlight$
+  const gridHighlight$ = observer.multiGridEachDetail$.pipe(
+    // switchMap(data => concat(...data.map(d => d.gridHighlight$))),
+    switchMap(data => {
+      return combineLatest(data.map(d => d.gridHighlight$))
+    }),
+    map(d => d.flat()),
+    shareReplay(1)
+  )
+
   return gridIndexes$.pipe(
     map(gridIndexes => {
       return gridIndexes.map(gridIndex => {
@@ -237,9 +248,9 @@ export const multiGridDetailObservables = (observer: ContextObserverMultiGrid<Mu
           switchMap(d => d.gridGraphicReverseScale$)
         )
       
-        const gridHighlight$ = gridDetail$.pipe(
-          switchMap(d => d.gridHighlight$)
-        )
+        // const gridHighlight$ = gridDetail$.pipe(
+        //   switchMap(d => d.gridHighlight$)
+        // )
       
         const existSeriesLabels$ = gridDetail$.pipe(
           switchMap(d => d.existSeriesLabels$)

package/src/multiGrid/plugins/MultiGridLegend.ts

@@ -77,7 +77,8 @@ export const MultiGridLegend = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_G
     seriesLabels$,
     fullParams$,
     layout$: observer.layout$,
-    fullChartParams$: observer.fullChartParams$
+    fullChartParams$: observer.fullChartParams$,
+    textSizePx$: observer.textSizePx$
   })
 
   return () => {

package/src/multiGrid/plugins/MultiLineAreas.ts

@@ -0,0 +1,59 @@
+import * as d3 from 'd3'
+import {
+  Subject } from 'rxjs'
+import {
+  defineMultiGridPlugin } from '@orbcharts/core'
+
+import { DEFAULT_MULTI_LINE_AREAS_PARAMS } from '../defaults'
+import { createBaseLineAreas } from '../../base/BaseLineAreas'
+import { multiGridDetailObservables } from '../multiGridObservables'
+import { getClassName, getUniID } from '../../utils/orbchartsUtils'
+
+const pluginName = 'MultiLineAreas'
+
+const gridClassName = getClassName(pluginName, 'grid')
+
+export const MultiLineAreas = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_LINE_AREAS_PARAMS)(({ selection, name, subject, observer }) => {
+  const destroy$ = new Subject()
+  
+  const unsubscribeFnArr: (() => void)[] = []
+
+  const multiGridPlugin$ = multiGridDetailObservables(observer)
+
+  multiGridPlugin$.subscribe(data => {
+    // 每次重新計算時，清除之前的訂閱
+    unsubscribeFnArr.forEach(fn => fn())
+
+    selection.selectAll(`g.${gridClassName}`)
+      .data(data)
+      .join('g')
+      .attr('class', gridClassName)
+      .each((d, i, g) => {
+
+        const gridSelection = d3.select(g[i])
+
+        unsubscribeFnArr[i] = createBaseLineAreas(pluginName, {
+          selection: gridSelection,
+          computedData$: d.gridComputedData$,
+          existSeriesLabels$: d.existSeriesLabels$,
+          SeriesDataMap$: d.SeriesDataMap$,
+          GroupDataMap$: d.GroupDataMap$,
+          fullDataFormatter$: d.gridDataFormatter$,
+          fullParams$: observer.fullParams$,
+          fullChartParams$: observer.fullChartParams$,
+          gridAxesTransform$: d.gridAxesTransform$,
+          gridGraphicTransform$: d.gridGraphicTransform$,
+          gridAxesSize$: d.gridAxesSize$,
+          gridHighlight$: d.gridHighlight$,
+          gridContainer$: d.gridContainer$,
+          layout$: observer.layout$,
+          event$: subject.event$ as Subject<any>,
+        })
+      })
+  })
+
+  return () => {
+    destroy$.next(undefined)
+    unsubscribeFnArr.forEach(fn => fn())
+  }
+})