@orbcharts/plugins-basic 3.0.0-alpha.31 → 3.0.0-alpha.32

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

@@ -9,9 +9,11 @@ export interface BaseLegendParams {
     backgroundFill: ColorType;
     backgroundStroke: ColorType;
     gap: number;
-    listRectWidth: number;
-    listRectHeight: number;
-    listRectRadius: number;
+    seriesList: Array<{
+        listRectWidth: number;
+        listRectHeight: number;
+        listRectRadius: number;
+    }>;
 }
 interface BaseLegendContext {
     rootSelection: d3.Selection<any, unknown, any, unknown>;

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

@@ -1,13 +1,13 @@
 import { LinesParams, GroupAreaParams, DotsParams, BarsParams, BarStackParams, BarsTriangleParams, GroupAxisParams, ValueAxisParams, ValueStackAxisParams, ScalingAreaParams, GridLegendParams } from './types';
 
-export declare const DEFAULT_LINES_PLUGIN_PARAMS: LinesParams;
-export declare const DEFAULT_DOTS_PLUGIN_PARAMS: DotsParams;
-export declare const DEFAULT_GROUP_AREA_PLUGIN_PARAMS: GroupAreaParams;
-export declare const DEFAULT_BARS_PLUGIN_PARAMS: BarsParams;
-export declare const DEFAULT_BAR_STACK_PLUGIN_PARAMS: BarStackParams;
-export declare const DEFAULT_BARS_TRIANGLE_PLUGIN_PARAMS: BarsTriangleParams;
-export declare const DEFAULT_GROUPING_AXIS_PLUGIN_PARAMS: GroupAxisParams;
-export declare const DEFAULT_VALUE_AXIS_PLUGIN_PARAMS: ValueAxisParams;
-export declare const DEFAULT_VALUE_STACK_AXIS_PLUGIN_PARAMS: ValueStackAxisParams;
-export declare const DEFAULT_SCALING_AREA_PLUGIN_PARAMS: ScalingAreaParams;
+export declare const DEFAULT_LINES_PARAMS: LinesParams;
+export declare const DEFAULT_DOTS_PARAMS: DotsParams;
+export declare const DEFAULT_GROUP_AREA_PARAMS: GroupAreaParams;
+export declare const DEFAULT_BARS_PARAMS: BarsParams;
+export declare const DEFAULT_BAR_STACK_PARAMS: BarStackParams;
+export declare const DEFAULT_BARS_TRIANGLE_PARAMS: BarsTriangleParams;
+export declare const DEFAULT_GROUPING_AXIS_PARAMS: GroupAxisParams;
+export declare const DEFAULT_VALUE_AXIS_PARAMS: ValueAxisParams;
+export declare const DEFAULT_VALUE_STACK_AXIS_PARAMS: ValueStackAxisParams;
+export declare const DEFAULT_SCALING_AREA_PARAMS: ScalingAreaParams;
 export declare const DEFAULT_GRID_LEGEND_PARAMS: GridLegendParams;

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

@@ -1,5 +1,4 @@
 import { ColorType } from '@orbcharts/core';
-import { BaseLegendParams } from '../base/BaseLegend';
 
 export interface LinesParams {
     lineCurve: string;
@@ -72,5 +71,14 @@ export interface ValueStackAxisParams extends ValueAxisParams {
 }
 export interface ScalingAreaParams {
 }
-export interface GridLegendParams extends BaseLegendParams {
+export interface GridLegendParams {
+    position: 'top' | 'bottom' | 'left' | 'right';
+    justify: 'start' | 'center' | 'end';
+    padding: number;
+    backgroundFill: ColorType;
+    backgroundStroke: ColorType;
+    gap: number;
+    listRectWidth: number;
+    listRectHeight: number;
+    listRectRadius: number;
 }

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

@@ -1,3 +1,4 @@
-import { BarsAndLinesParams } from './types';
+import { BarsAndLinesParams, MultiGridLegendParams } from './types';
 
 export declare const DEFAULT_BARS_AND_LINES_PARAMS: BarsAndLinesParams;
+export declare const DEFAULT_MULTI_GRID_LEGEND_PARAMS: MultiGridLegendParams;

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

@@ -1,3 +1,4 @@
 export * from './defaults';
 export * from './types';
 export { BarsAndLines } from './plugins/BarsAndLines';
+export { MultiGridLegend } from './plugins/MultiGridLegend';

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

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

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

@@ -1,7 +1,24 @@
 import { BaseBarsParams } from '../base/BaseBars';
 import { BaseLinesParams } from '../base/BaseLines';
+import { ColorType } from '@orbcharts/core';
 
 export interface BarsAndLinesParams {
     bars: BaseBarsParams;
     lines: BaseLinesParams;
 }
+export interface MultiGridLegendParams {
+    position: 'top' | 'bottom' | 'left' | 'right';
+    justify: 'start' | 'center' | 'end';
+    padding: number;
+    backgroundFill: ColorType;
+    backgroundStroke: ColorType;
+    gap: number;
+    listRectWidth: number;
+    listRectHeight: number;
+    listRectRadius: number;
+    gridList: Array<{
+        listRectWidth: number;
+        listRectHeight: number;
+        listRectRadius: number;
+    }>;
+}

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

@@ -1,7 +1,7 @@
 import { BubblesParams, PieParams, PieEventTextsParams, PieLabelsParams, SeriesLegendParams } from './types';
 
-export declare const DEFAULT_BUBBLES_PLUGIN_PARAMS: BubblesParams;
-export declare const DEFAULT_PIE_PLUGIN_PARAMS: PieParams;
+export declare const DEFAULT_BUBBLES_PARAMS: BubblesParams;
+export declare const DEFAULT_PIE_PARAMS: PieParams;
 export declare const DEFAULT_PIE_EVENT_TEXTS_PARAMS: PieEventTextsParams;
 export declare const DEFAULT_PIE_LABELS_PARAMS: PieLabelsParams;
 export declare const DEFAULT_SERIES_LEGEND_PARAMS: SeriesLegendParams;

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

@@ -1,5 +1,4 @@
 import { ComputedDatumSeries, EventSeries, EventName, ColorType } from '@orbcharts/core';
-import { BaseLegendParams } from '../base/BaseLegend';
 
 export type BubbleScaleType = 'area' | 'radius';
 export interface BubblesParams {
@@ -44,5 +43,14 @@ export interface PieLabelsParams {
     labelFn: ((d: ComputedDatumSeries) => string);
     labelColorType: ColorType;
 }
-export interface SeriesLegendParams extends BaseLegendParams {
+export interface SeriesLegendParams {
+    position: 'top' | 'bottom' | 'left' | 'right';
+    justify: 'start' | 'center' | 'end';
+    padding: number;
+    backgroundFill: ColorType;
+    backgroundStroke: ColorType;
+    gap: number;
+    listRectWidth: number;
+    listRectHeight: number;
+    listRectRadius: number;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orbcharts/plugins-basic",
-  "version": "3.0.0-alpha.31",
+  "version": "3.0.0-alpha.32",
   "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.27",
+    "@orbcharts/core": "^3.0.0-alpha.29",
     "d3": "^7.8.5",
     "rxjs": "^7.8.1"
   }

package/src/base/BaseLegend.ts

@@ -20,9 +20,11 @@ export interface BaseLegendParams {
   backgroundFill: ColorType
   backgroundStroke: ColorType
   gap: number
-  listRectWidth: number
-  listRectHeight: number
-  listRectRadius: number
+  seriesList: Array<{
+    listRectWidth: number
+    listRectHeight: number
+    listRectRadius: number
+  }>
   // highlightEvent: boolean
 }
 
@@ -70,8 +72,21 @@ interface LegendItem {
   translateX: number
   translateY: number
   color: string
-  // fontSize: number
-  // listRectRadius: number
+  listRectWidth: number
+  listRectHeight: number
+  listRectRadius: number
+}
+
+interface ListStyle {
+  listRectWidth: number
+  listRectHeight: number
+  listRectRadius: number
+}
+
+const defaultListStyle: ListStyle = {
+  listRectWidth: 14,
+  listRectHeight: 14,
+  listRectRadius: 0,
 }
 
 export const createBaseLegend: BasePluginFn<BaseLegendContext> = (pluginName: string, {
@@ -198,13 +213,21 @@ export const createBaseLegend: BasePluginFn<BaseLegendContext> = (pluginName: st
     })
   )
 
+  const defaultListStyle$ = fullParams$.pipe(
+    takeUntil(destroy$),
+    map(data => {
+      return data.seriesList[0] ? data.seriesList[0] : defaultListStyle
+    })
+  )
+
   // 先計算list內每個item
   const lengendItems$: Observable<LegendItem[][]> = combineLatest({
     fullParams: fullParams$,
     fullChartParams: fullChartParams$,
     seriesLabels: seriesLabels$,
     lineDirection: lineDirection$,
-    lineMaxSize: lineMaxSize$
+    lineMaxSize: lineMaxSize$,
+    defaultListStyle: defaultListStyle$
   }).pipe(
     takeUntil(destroy$),
     switchMap(async d => d),
@@ -268,6 +291,8 @@ export const createBaseLegend: BasePluginFn<BaseLegendContext> = (pluginName: st
           prev[lineIndex] = []
         }
 
+        const listStyle = data.fullParams.seriesList[itemIndex] ? data.fullParams.seriesList[itemIndex] : data.defaultListStyle
+
         prev[lineIndex].push({
           id: current,
           seriesLabel: current,
@@ -279,8 +304,11 @@ export const createBaseLegend: BasePluginFn<BaseLegendContext> = (pluginName: st
           translateX,
           translateY,
           color,
+          listRectWidth: listStyle.listRectWidth,
+          listRectHeight: listStyle.listRectHeight,
+          listRectRadius: listStyle.listRectRadius
         })
-        console.log('items', prev)
+        
         return prev
       }, [])
     })
@@ -501,8 +529,8 @@ export const createBaseLegend: BasePluginFn<BaseLegendContext> = (pluginName: st
         })
         .each((d, i, g) => {
           const rectCenterX = data.fullChartParams.styles.textSize / 2
-          const rectWidth = data.fullParams.listRectWidth
-          const rectHeight = data.fullParams.listRectHeight
+          const transformRectWidth = - d.listRectWidth / 2
+          const transformRectHeight = - d.listRectHeight / 2
           // 方塊
           d3.select(g[i])
             .selectAll('rect')
@@ -510,11 +538,11 @@ export const createBaseLegend: BasePluginFn<BaseLegendContext> = (pluginName: st
             .join('rect')
             .attr('x', rectCenterX)
             .attr('y', rectCenterX)
-            .attr('width', rectWidth)
-            .attr('height', rectHeight)
-            .attr('transform', `translate(${- rectWidth / 2}, ${- rectHeight / 2})`)
+            .attr('width', _d => _d.listRectWidth)
+            .attr('height', _d => _d.listRectHeight)
+            .attr('transform', _d => `translate(${transformRectWidth}, ${transformRectHeight})`)
             .attr('fill', _d => _d.color)
-            .attr('rx', data.fullParams.listRectRadius)
+            .attr('rx', _d => _d.listRectRadius)
           // 文字
           d3.select(g[i])
             .selectAll('text')

package/src/grid/defaults.ts

@@ -11,12 +11,12 @@ import type {
   ScalingAreaParams,
   GridLegendParams } from './types'
 
-export const DEFAULT_LINES_PLUGIN_PARAMS: LinesParams = {
+export const DEFAULT_LINES_PARAMS: LinesParams = {
   lineCurve: 'curveLinear',
   lineWidth: 2
 }
 
-export const DEFAULT_DOTS_PLUGIN_PARAMS: DotsParams = {
+export const DEFAULT_DOTS_PARAMS: DotsParams = {
   radius: 4,
   fillColorType: 'white',
   strokeColorType: 'series',
@@ -24,7 +24,7 @@ export const DEFAULT_DOTS_PLUGIN_PARAMS: DotsParams = {
   onlyShowHighlighted: false
 }
 
-export const DEFAULT_GROUP_AREA_PLUGIN_PARAMS: GroupAreaParams = {
+export const DEFAULT_GROUP_AREA_PARAMS: GroupAreaParams = {
   showLine: true,
   showLabel: true,
   lineDashArray: '3, 3',
@@ -35,7 +35,7 @@ export const DEFAULT_GROUP_AREA_PLUGIN_PARAMS: GroupAreaParams = {
   labelPadding: 24,
 }
 
-export const DEFAULT_BARS_PLUGIN_PARAMS: BarsParams = {
+export const DEFAULT_BARS_PARAMS: BarsParams = {
   // barType: 'rect',
   barWidth: 0,
   barPadding: 1,
@@ -43,20 +43,20 @@ export const DEFAULT_BARS_PLUGIN_PARAMS: BarsParams = {
   barRadius: false,
 }
 
-export const DEFAULT_BAR_STACK_PLUGIN_PARAMS: BarStackParams = {
+export const DEFAULT_BAR_STACK_PARAMS: BarStackParams = {
   barWidth: 0,
   barGroupPadding: 10,
   barRadius: false,
 }
 
-export const DEFAULT_BARS_TRIANGLE_PLUGIN_PARAMS: BarsTriangleParams = {
+export const DEFAULT_BARS_TRIANGLE_PARAMS: BarsTriangleParams = {
   barWidth: 0,
   barPadding: 1,
   barGroupPadding: 20,
   linearGradientOpacity: [1, 0]
 }
 
-export const DEFAULT_GROUPING_AXIS_PLUGIN_PARAMS: GroupAxisParams = {
+export const DEFAULT_GROUPING_AXIS_PARAMS: GroupAxisParams = {
   // labelAnchor: 'start',
   labelOffset: [0, 0],
   labelColorType: 'primary',
@@ -72,7 +72,7 @@ export const DEFAULT_GROUPING_AXIS_PLUGIN_PARAMS: GroupAxisParams = {
   tickTextColorType: 'primary'
 }
 
-export const DEFAULT_VALUE_AXIS_PLUGIN_PARAMS: ValueAxisParams = {
+export const DEFAULT_VALUE_AXIS_PARAMS: ValueAxisParams = {
   // labelAnchor: 'end',
   labelOffset: [0, 0],
   labelColorType: 'primary',
@@ -89,9 +89,9 @@ export const DEFAULT_VALUE_AXIS_PLUGIN_PARAMS: ValueAxisParams = {
   tickTextColorType: 'primary'
 }
 
-export const DEFAULT_VALUE_STACK_AXIS_PLUGIN_PARAMS: ValueStackAxisParams = DEFAULT_VALUE_AXIS_PLUGIN_PARAMS
+export const DEFAULT_VALUE_STACK_AXIS_PARAMS: ValueStackAxisParams = DEFAULT_VALUE_AXIS_PARAMS
 
-export const DEFAULT_SCALING_AREA_PLUGIN_PARAMS: ScalingAreaParams = {
+export const DEFAULT_SCALING_AREA_PARAMS: ScalingAreaParams = {
 
 }
 

package/src/grid/plugins/BarStack.ts

@@ -2,13 +2,13 @@ import {
   Subject,
   Observable } from 'rxjs'
 import { defineGridPlugin } from '@orbcharts/core'
-import { DEFAULT_BAR_STACK_PLUGIN_PARAMS } from '../defaults'
+import { DEFAULT_BAR_STACK_PARAMS } from '../defaults'
 import { createBaseBarStack } from '../../base/BaseBarStack'
 
 const pluginName = 'BarStack'
 
 
-export const BarStack = defineGridPlugin(pluginName, DEFAULT_BAR_STACK_PLUGIN_PARAMS)(({ selection, name, subject, observer }) => {
+export const BarStack = defineGridPlugin(pluginName, DEFAULT_BAR_STACK_PARAMS)(({ selection, name, subject, observer }) => {
   const destroy$ = new Subject()
 
   const unsubscribeBaseBars = createBaseBarStack(pluginName, {

package/src/grid/plugins/Bars.ts

@@ -3,12 +3,12 @@ import {
   Observable } from 'rxjs'
 import {
   defineGridPlugin } from '@orbcharts/core'
-import { DEFAULT_BARS_PLUGIN_PARAMS } from '../defaults'
+import { DEFAULT_BARS_PARAMS } from '../defaults'
 import { createBaseBars } from '../../base/BaseBars'
 
 const pluginName = 'Bars'
 
-export const Bars = defineGridPlugin(pluginName, DEFAULT_BARS_PLUGIN_PARAMS)(({ selection, name, subject, observer }) => {
+export const Bars = defineGridPlugin(pluginName, DEFAULT_BARS_PARAMS)(({ selection, name, subject, observer }) => {
   const destroy$ = new Subject()
 
   const unsubscribeBaseBars = createBaseBars(pluginName, {

package/src/grid/plugins/BarsTriangle.ts

@@ -2,12 +2,12 @@ import {
   Subject,
   Observable } from 'rxjs'
 import { defineGridPlugin } from '@orbcharts/core'
-import { DEFAULT_BARS_TRIANGLE_PLUGIN_PARAMS } from '../defaults'
+import { DEFAULT_BARS_TRIANGLE_PARAMS } from '../defaults'
 import { createBaseBarsTriangle } from '../../base/BaseBarsTriangle'
 
 const pluginName = 'BarsTriangle'
 
-export const BarsTriangle = defineGridPlugin(pluginName, DEFAULT_BARS_TRIANGLE_PLUGIN_PARAMS)(({ selection, name, subject, observer }) => {
+export const BarsTriangle = defineGridPlugin(pluginName, DEFAULT_BARS_TRIANGLE_PARAMS)(({ selection, name, subject, observer }) => {
   const destroy$ = new Subject()
 
   const unsubscribeBaseBars = createBaseBarsTriangle(pluginName, {

package/src/grid/plugins/Dots.ts

@@ -16,7 +16,7 @@ import type {
   ComputedDatumGrid,
   Layout } from '@orbcharts/core'
 import type { DotsParams } from '../types'
-import { DEFAULT_DOTS_PLUGIN_PARAMS } from '../defaults'
+import { DEFAULT_DOTS_PARAMS } from '../defaults'
 import { getDatumColor, getClassName, getUniID } from '../../utils/orbchartsUtils'
 
 type ClipPathDatum = {
@@ -162,7 +162,7 @@ function renderClipPath ({ defsSelection, clipPathData }: {
 
 }
 
-export const Dots = defineGridPlugin(pluginName, DEFAULT_DOTS_PLUGIN_PARAMS)(({ selection, name, subject, observer }) => {
+export const Dots = defineGridPlugin(pluginName, DEFAULT_DOTS_PARAMS)(({ selection, name, subject, observer }) => {
   // const axisGUpdate = selection
   //   .selectAll('g')
   //   .data()

package/src/grid/plugins/GridLegend.ts

@@ -24,10 +24,28 @@ export const GridLegend = defineGridPlugin(pluginName, DEFAULT_GRID_LEGEND_PARAM
     })
   )
 
+  // 全部列點矩型使用相同樣式參數
+  const fullParams$ = observer.fullParams$.pipe(
+    takeUntil(destroy$),
+    map(d => {
+      const seriesList = [
+        {
+          listRectWidth: d.listRectWidth,
+          listRectHeight: d.listRectHeight,
+          listRectRadius: d.listRectRadius,
+        }
+      ]
+      return {
+        ...d,
+        seriesList
+      }
+    })
+  )
+
   const unsubscribeBaseLegend = createBaseLegend(pluginName, {
     rootSelection,
     seriesLabels$,
-    fullParams$: observer.fullParams$,
+    fullParams$,
     layout$: observer.layout$,
     fullChartParams$: observer.fullChartParams$
   })

package/src/grid/plugins/GroupArea.ts

@@ -17,7 +17,7 @@ import {
 import type {
   TransformData,
   ChartParams } from '@orbcharts/core'
-import { DEFAULT_GROUP_AREA_PLUGIN_PARAMS } from '../defaults'
+import { DEFAULT_GROUP_AREA_PARAMS } from '../defaults'
 import { parseTickFormatValue } from '../../utils/d3Utils'
 import { measureTextWidth } from '../../utils/commonUtils'
 import { getColor, getClassName, getUniID } from '../../utils/orbchartsUtils'
@@ -208,7 +208,7 @@ function removeLabel (selection: d3.Selection<any, unknown, any, unknown>) {
   gUpdate.exit().remove()
 }
 
-export const GroupArea = defineGridPlugin(pluginName, DEFAULT_GROUP_AREA_PLUGIN_PARAMS)(({ selection, rootSelection, name, subject, observer }) => {
+export const GroupArea = defineGridPlugin(pluginName, DEFAULT_GROUP_AREA_PARAMS)(({ selection, rootSelection, name, subject, observer }) => {
   const destroy$ = new Subject()
 
   const rootRectSelection: d3.Selection<SVGRectElement, any, any, any> = rootSelection

package/src/grid/plugins/GroupAxis.ts

@@ -16,7 +16,7 @@ import type {
   ChartParams,
   TransformData } from '@orbcharts/core'
 import type { GroupAxisParams } from '../types'
-import { DEFAULT_GROUPING_AXIS_PLUGIN_PARAMS } from '../defaults'
+import { DEFAULT_GROUPING_AXIS_PARAMS } from '../defaults'
 import { parseTickFormatValue } from '../../utils/d3Utils'
 import { getColor, getClassName } from '../../utils/orbchartsUtils'
 
@@ -126,7 +126,7 @@ function renderPointAxis ({ selection, params, tickTextAlign, axisLabelAlign, gr
 }
 
 
-export const GroupAxis = defineGridPlugin(pluginName, DEFAULT_GROUPING_AXIS_PLUGIN_PARAMS)(({ selection, name, observer, subject }) => {
+export const GroupAxis = defineGridPlugin(pluginName, DEFAULT_GROUPING_AXIS_PARAMS)(({ selection, name, observer, subject }) => {
   
   const destroy$ = new Subject()
 

package/src/grid/plugins/Lines.ts

@@ -2,12 +2,12 @@ import {
   Subject } from 'rxjs'
 import {
   defineGridPlugin } from '@orbcharts/core'
-import { DEFAULT_LINES_PLUGIN_PARAMS } from '../defaults'
+import { DEFAULT_LINES_PARAMS } from '../defaults'
 import { createBaseLines } from '../../base/BaseLines'
 
 const pluginName = 'Lines'
 
-export const Lines = defineGridPlugin(pluginName, DEFAULT_LINES_PLUGIN_PARAMS)(({ selection, name, observer, subject }) => {
+export const Lines = defineGridPlugin(pluginName, DEFAULT_LINES_PARAMS)(({ selection, name, observer, subject }) => {
 
   const destroy$ = new Subject()
 

package/src/grid/plugins/ScalingArea.ts

@@ -11,14 +11,14 @@ import {
   Subject } from 'rxjs'
 import {
   defineGridPlugin } from '@orbcharts/core'
-import { DEFAULT_SCALING_AREA_PLUGIN_PARAMS } from '../defaults'
+import { DEFAULT_SCALING_AREA_PARAMS } from '../defaults'
 import { getClassName, getUniID } from '../../utils/orbchartsUtils'
 import { createAxisPointScale, createAxisLinearScale } from '@orbcharts/core'
 
 const pluginName = 'ScalingArea'
 const rectClassName = getClassName(pluginName, 'rect')
 
-export const ScalingArea = defineGridPlugin(pluginName, DEFAULT_SCALING_AREA_PLUGIN_PARAMS)(({ selection, rootSelection, name, observer, subject }) => {
+export const ScalingArea = defineGridPlugin(pluginName, DEFAULT_SCALING_AREA_PARAMS)(({ selection, rootSelection, name, observer, subject }) => {
 
   const destroy$ = new Subject()
 

package/src/grid/plugins/ValueAxis.ts

@@ -16,7 +16,7 @@ import type {
   ChartParams,
   TransformData } from '@orbcharts/core'
 import type { ValueAxisParams } from '../types'
-import { DEFAULT_VALUE_AXIS_PLUGIN_PARAMS } from '../defaults'
+import { DEFAULT_VALUE_AXIS_PARAMS } from '../defaults'
 import { parseTickFormatValue } from '../../utils/d3Utils'
 import { getColor, getMinAndMaxValue, getClassName, getUniID } from '../../utils/orbchartsUtils'
 
@@ -123,7 +123,7 @@ function renderLinearAxis ({ selection, fullParams, tickTextAlign, axisLabelAlig
 }
 
 
-export const ValueAxis = defineGridPlugin(pluginName, DEFAULT_VALUE_AXIS_PLUGIN_PARAMS)(({ selection, name, observer, subject }) => {
+export const ValueAxis = defineGridPlugin(pluginName, DEFAULT_VALUE_AXIS_PARAMS)(({ selection, name, observer, subject }) => {
   
   const destroy$ = new Subject()
 

package/src/grid/plugins/ValueStackAxis.ts

@@ -16,7 +16,7 @@ import type {
   ChartParams,
   TransformData } from '@orbcharts/core'
 import type { ValueStackAxisParams } from '../types'
-import { DEFAULT_VALUE_STACK_AXIS_PLUGIN_PARAMS } from '../defaults'
+import { DEFAULT_VALUE_STACK_AXIS_PARAMS } from '../defaults'
 import { getMinAndMax } from '../../utils/commonUtils'
 import { parseTickFormatValue } from '../../utils/d3Utils'
 import { getColor, getClassName } from '../../utils/orbchartsUtils'
@@ -125,7 +125,7 @@ function renderLinearAxis ({ selection, fullParams, tickTextAlign, axisLabelAlig
 }
 
 
-export const ValueStackAxis = defineGridPlugin(pluginName, DEFAULT_VALUE_STACK_AXIS_PLUGIN_PARAMS)(({ selection, name, observer, subject }) => {
+export const ValueStackAxis = defineGridPlugin(pluginName, DEFAULT_VALUE_STACK_AXIS_PARAMS)(({ selection, name, observer, subject }) => {
   
   const destroy$ = new Subject()
 

package/src/grid/types.ts

@@ -1,5 +1,5 @@
 import type { ColorType } from '@orbcharts/core'
-import type { BaseLegendParams } from '../base/BaseLegend'
+// import type { BaseLegendParams } from '../base/BaseLegend'
 
 // export type LineType = 'line' | 'area' | 'gradientArea'
 // export type BarType = 'rect' | 'triangle'
@@ -101,4 +101,14 @@ export interface ScalingAreaParams {
 
 }
 
-export interface GridLegendParams extends BaseLegendParams {}
+export interface GridLegendParams {
+  position: 'top' | 'bottom' | 'left' | 'right'
+  justify: 'start' | 'center' | 'end'
+  padding: number
+  backgroundFill: ColorType
+  backgroundStroke: ColorType
+  gap: number
+  listRectWidth: number
+  listRectHeight: number
+  listRectRadius: number
+}

package/src/multiGrid/defaults.ts

@@ -1,4 +1,4 @@
-import type { BarsAndLinesParams } from './types'
+import type { BarsAndLinesParams, MultiGridLegendParams } from './types'
 
 export const DEFAULT_BARS_AND_LINES_PARAMS: BarsAndLinesParams = {
   bars: {
@@ -12,3 +12,22 @@ export const DEFAULT_BARS_AND_LINES_PARAMS: BarsAndLinesParams = {
     lineWidth: 2
   }
 }
+
+export const DEFAULT_MULTI_GRID_LEGEND_PARAMS: MultiGridLegendParams = {
+  position: 'right',
+  justify: 'end',
+  padding: 28,
+  backgroundFill: 'none',
+  backgroundStroke: 'none',
+  gap: 10,
+  listRectWidth: 14,
+  listRectHeight: 14,
+  listRectRadius: 0,
+  gridList: [
+    {
+      listRectWidth: 14,
+      listRectHeight: 14,
+      listRectRadius: 0,
+    }
+  ]
+}

package/src/multiGrid/index.ts

@@ -1,3 +1,4 @@
 export * from './defaults'
 export * from './types'
-export { BarsAndLines } from './plugins/BarsAndLines'
+export { BarsAndLines } from './plugins/BarsAndLines'
+export { MultiGridLegend } from './plugins/MultiGridLegend'