@orbcharts/plugins-basic 3.0.0-alpha.26 → 3.0.0-alpha.28

package/src/grid/defaults.ts

@@ -5,10 +5,11 @@ import type {
   BarsPluginParams,
   BarStackPluginParams,
   BarsTrianglePluginParams,
-  GroupingAxisParams,
+  GroupAxisParams,
   ValueAxisParams,
   ValueStackAxisParams,
-  ScalingAreaParams } from './types'
+  ScalingAreaParams,
+  GridLegendParams } from './types'
 
 export const DEFAULT_LINES_PLUGIN_PARAMS: LinesPluginParams = {
   lineCurve: 'curveLinear',
@@ -55,7 +56,7 @@ export const DEFAULT_BARS_TRIANGLE_PLUGIN_PARAMS: BarsTrianglePluginParams = {
   linearGradientOpacity: [1, 0]
 }
 
-export const DEFAULT_GROUPING_AXIS_PLUGIN_PARAMS: GroupingAxisParams = {
+export const DEFAULT_GROUPING_AXIS_PLUGIN_PARAMS: GroupAxisParams = {
   // labelAnchor: 'start',
   labelOffset: [0, 0],
   labelColorType: 'primary',
@@ -92,4 +93,18 @@ export const DEFAULT_VALUE_STACK_AXIS_PLUGIN_PARAMS: ValueStackAxisParams = DEFA
 
 export const DEFAULT_SCALING_AREA_PLUGIN_PARAMS: ScalingAreaParams = {
 
-}
+}
+
+export const DEFAULT_GRID_LEGEND_PARAMS: GridLegendParams = {
+  position: 'right',
+  justify: 'end',
+  padding: 28,
+  // offset: [0, 0],
+  backgroundFill: 'none',
+  backgroundStroke: 'none',
+  gap: 10,
+  listRectWidth: 14,
+  listRectHeight: 14,
+  listRectRadius: 0,
+  // highlightEvent: false
+}

package/src/grid/index.ts

@@ -5,6 +5,7 @@ export { Bars } from './plugins/Bars'
 export { BarStack } from './plugins/BarStack'
 export { BarsTriangle } from './plugins/BarsTriangle'
 export { Dots } from './plugins/Dots'
+export { GridLegend } from './plugins/GridLegend'
 export { GroupAxis } from './plugins/GroupAxis'
 export { ValueAxis } from './plugins/ValueAxis'
 export { ValueStackAxis } from './plugins/ValueStackAxis'

package/src/grid/plugins/GridLegend.ts

@@ -0,0 +1,40 @@
+import * as d3 from 'd3'
+import {
+  combineLatest,
+  map,
+  switchMap,
+  takeUntil,
+  Observable,
+  Subject } from 'rxjs'
+import {
+  defineGridPlugin } from '@orbcharts/core'
+import { DEFAULT_GRID_LEGEND_PARAMS } from '../defaults'
+import { createBaseLegend } from '../../base/BaseLegend'
+
+const pluginName = 'GridLegend'
+
+export const GridLegend = defineGridPlugin(pluginName, DEFAULT_GRID_LEGEND_PARAMS)(({ selection, rootSelection, observer, subject }) => {
+  
+  const destroy$ = new Subject()
+
+  const seriesLabels$: Observable<string[]> = observer.SeriesDataMap$.pipe(
+    takeUntil(destroy$),
+    map(data => {
+      return Array.from(data.keys())
+    })
+  )
+
+  const unsubscribeBaseLegend = createBaseLegend(pluginName, {
+    rootSelection,
+    seriesLabels$,
+    fullParams$: observer.fullParams$,
+    layout$: observer.layout$,
+    fullChartParams$: observer.fullChartParams$
+  })
+
+  return () => {
+    destroy$.next(undefined)
+    unsubscribeBaseLegend()
+  }
+})
+

package/src/grid/plugins/GroupAxis.ts

@@ -15,7 +15,7 @@ import type {
   DataFormatterGrid,
   ChartParams,
   TransformData } from '@orbcharts/core'
-import type { GroupingAxisParams } from '../types'
+import type { GroupAxisParams } from '../types'
 import { DEFAULT_GROUPING_AXIS_PLUGIN_PARAMS } from '../defaults'
 import { parseTickFormatValue } from '../../utils/d3Utils'
 import { getColor, getClassName } from '../../utils/orbchartsUtils'
@@ -32,7 +32,7 @@ const defaultTickSize = 6
 
 function renderPointAxis ({ selection, params, tickTextAlign, axisLabelAlign, gridAxesSize, fullDataFormatter, chartParams, groupScale, contentTransform }: {
   selection: d3.Selection<SVGGElement, any, any, any>,
-  params: GroupingAxisParams
+  params: GroupAxisParams
   tickTextAlign: TextAlign
   axisLabelAlign: TextAlign
   gridAxesSize: { width: number, height: number }
@@ -44,19 +44,19 @@ function renderPointAxis ({ selection, params, tickTextAlign, axisLabelAlign, gr
 }) {
 
   const xAxisSelection = selection
-    .selectAll<SVGGElement, GroupingAxisParams>(`g.${xAxisClassName}`)
+    .selectAll<SVGGElement, GroupAxisParams>(`g.${xAxisClassName}`)
     .data([params])
     .join('g')
     .classed(xAxisClassName, true)
 
   const axisLabelSelection = selection
-    .selectAll<SVGGElement, GroupingAxisParams>(`g.${groupingLabelClassName}`)
+    .selectAll<SVGGElement, GroupAxisParams>(`g.${groupingLabelClassName}`)
     .data([params])
     .join('g')
     .classed(groupingLabelClassName, true)
     .each((d, i, g) => {
       const text = d3.select(g[i])
-        .selectAll<SVGTextElement, GroupingAxisParams>('text')
+        .selectAll<SVGTextElement, GroupAxisParams>('text')
         .data([d])
         .join(
           enter => {

package/src/grid/types.ts

@@ -1,4 +1,5 @@
 import type { ColorType } from '@orbcharts/core'
+import type { BaseLegendParams } from '../base/BaseLegend'
 
 // export type LineType = 'line' | 'area' | 'gradientArea'
 // export type BarType = 'rect' | 'triangle'
@@ -55,7 +56,7 @@ export interface BarsTrianglePluginParams {
   linearGradientOpacity: [number, number]
 }
 
-export interface GroupingAxisParams {
+export interface GroupAxisParams {
   // xLabel: string
   // labelAnchor: 'start' | 'end'
   labelOffset: [number, number]
@@ -100,3 +101,4 @@ export interface ScalingAreaParams {
 
 }
 
+export interface GridLegendParams extends BaseLegendParams {}

package/src/series/defaults.ts

@@ -6,6 +6,7 @@ import type {
   PieLabelsPluginParams,
   SeriesLegendParams } from './types'
 
+  
 export const DEFAULT_BUBBLES_PLUGIN_PARAMS: BubblesPluginParams = {
   force: {
     strength: 0.03, // 泡泡引力
@@ -18,7 +19,7 @@ export const DEFAULT_BUBBLES_PLUGIN_PARAMS: BubblesPluginParams = {
     lineLengthMin: 4
   },
   highlightRIncrease: 0,
-  scaleType: 'area'
+  bubbleScaleType: 'area'
 }
 
 export const DEFAULT_PIE_PLUGIN_PARAMS: PiePluginParams = {
@@ -87,7 +88,11 @@ export const DEFAULT_SERIES_LEGEND_PARAMS: SeriesLegendParams = {
   justify: 'end',
   padding: 28,
   // offset: [0, 0],
+  backgroundFill: 'none',
+  backgroundStroke: 'none',
   gap: 10,
-  rectRadius: 0,
+  listRectWidth: 14,
+  listRectHeight: 14,
+  listRectRadius: 0,
   // highlightEvent: false
 }

package/src/series/plugins/Bubbles.ts

@@ -17,7 +17,7 @@ import type {
   ComputedDatumSeries } from '@orbcharts/core'
 import {
   defineSeriesPlugin } from '@orbcharts/core'
-import type { BubblesPluginParams, ScaleType } from '../types'
+import type { BubblesPluginParams, BubbleScaleType } from '../types'
 import { DEFAULT_BUBBLES_PLUGIN_PARAMS } from '../defaults'
 import { renderCircleText } from '../../utils/d3Graphics'
 
@@ -86,7 +86,7 @@ function createBubblesData ({ data, LastBubbleDataMap, graphicWidth, graphicHeig
   LastBubbleDataMap: Map<string, BubblesDatum>
   graphicWidth: number
   graphicHeight: number
-  scaleType: ScaleType
+  scaleType: BubbleScaleType
   // highlightIds: string[]
 }) {
   const bubbleGroupR = Math.min(...[graphicWidth, graphicHeight]) / 2
@@ -363,7 +363,7 @@ export const Bubbles = defineSeriesPlugin('Bubbles', DEFAULT_BUBBLES_PLUGIN_PARA
 
   const scaleType$ = observer.fullParams$.pipe(
     takeUntil(destroy$),
-    map(d => d.scaleType),
+    map(d => d.bubbleScaleType),
     distinctUntilChanged()
   )
 

package/src/series/plugins/SeriesLegend.ts

@@ -8,90 +8,10 @@ import {
   Subject } from 'rxjs'
 import {
   defineSeriesPlugin } from '@orbcharts/core'
-import type {
-  ChartParams } from '@orbcharts/core'
-import type { SeriesLegendParams } from '../types'
 import { DEFAULT_SERIES_LEGEND_PARAMS } from '../defaults'
-import { getSeriesColor, getClassName } from '../../utils/orbchartsUtils'
-import { measureTextWidth } from '../../utils/commonUtils'
-
-
-// 第1層 - 定位的容器（絕對位置）
-interface Position {
-  x:number
-  y:number
-}
-
-// 第2層 - 圖例列表
-interface LegendList {
-  direction: 'row' | 'column'
-  width: number
-  height: number
-  translateX:number
-  translateY:number
-  list: LegendItem[][]
-}
-
-// 第3層 - 圖例項目
-interface LegendItem {
-  id: string // seriesLabel
-  seriesLabel: string
-  seriesIndex: number
-  lineIndex: number
-  itemIndex: number // 行內的item
-  text: string
-  itemWidth: number
-  translateX: number
-  translateY: number
-  color: string
-  // fontSize: number
-  // rectRadius: number
-}
+import { createBaseLegend } from '../../base/BaseLegend'
 
 const pluginName = 'SeriesLegend'
-const boxClassName = getClassName(pluginName, 'box')
-const legendListClassName = getClassName(pluginName, 'legend-list')
-const itemClassName = getClassName(pluginName, 'item')
-
-function renderSeriesLegend ({ itemSelection, lengendList, seriesLabel, fullParams, fullChartParams }: {
-  itemSelection: d3.Selection<SVGGElement, LegendItem, any, any>
-  lengendList: LegendList
-  seriesLabel: string[]
-  fullParams: SeriesLegendParams
-  fullChartParams: ChartParams
-}) {
-  itemSelection
-    .each((d, i, g) => {
-      // 方塊
-      d3.select(g[i])
-        .selectAll('rect')
-        .data([d])
-        .join('rect')
-        .attr('width', fullChartParams.styles.textSize)
-        .attr('height', fullChartParams.styles.textSize)
-        .attr('fill', _d => _d.color)
-        .attr('rx', fullParams.rectRadius)
-      // 文字
-      d3.select(g[i])
-        .selectAll('text')
-        .data([d])
-        .join(
-          enter => {
-            return enter
-              .append('text')
-              .attr('dominant-baseline', 'hanging')
-          },
-          update => {
-            return update
-          },
-          exit => exit.remove()
-        )
-        .attr('x', fullChartParams.styles.textSize * 1.5)
-        .attr('font-size', fullChartParams.styles.textSize)
-        .text(d => d.text)
-    })
-}
-
 
 export const SeriesLegend = defineSeriesPlugin(pluginName, DEFAULT_SERIES_LEGEND_PARAMS)(({ selection, rootSelection, observer, subject }) => {
   
@@ -104,354 +24,17 @@ export const SeriesLegend = defineSeriesPlugin(pluginName, DEFAULT_SERIES_LEGEND
     })
   )
 
-  const lineDirection$ = observer.fullParams$.pipe(
-    takeUntil(destroy$),
-    map(data => {
-      return data.position === 'bottom' || data.position === 'top'
-        ? 'row'
-        : 'column'
-    })
-  )
-
-  const lineMaxSize$ = combineLatest({
-    fullParams: observer.fullParams$,
-    layout: observer.layout$
-  }).pipe(
-    takeUntil(destroy$),
-    map(data => {
-      return data.fullParams.position === 'bottom' || data.fullParams.position === 'top'
-        ? data.layout.rootWidth - 2 // 減2是避免完全貼到邊線上
-        : data.layout.rootHeight - 2
-    })
-  )
-
-  const boxPosition$ = combineLatest({
-    layout: observer.layout$,
-    fullParams: observer.fullParams$,
-  }).pipe(
-    takeUntil(destroy$),
-    switchMap(async d => d),
-    map(data => {
-      let x = 0
-      let y = 0
-      if (data.fullParams.position === 'bottom') {
-        y = data.layout.rootHeight
-        if (data.fullParams.justify === 'start') {
-          x = 0
-        } else if (data.fullParams.justify === 'center') {
-          x = data.layout.rootWidth / 2
-        } else if (data.fullParams.justify === 'end') {
-          x = data.layout.rootWidth
-        }
-      } else if (data.fullParams.position === 'right') {
-        x = data.layout.rootWidth
-        if (data.fullParams.justify === 'start') {
-          y = 0
-        } else if (data.fullParams.justify === 'center') {
-          y = data.layout.rootHeight / 2
-        } else if (data.fullParams.justify === 'end') {
-          y = data.layout.rootHeight
-        }
-      } else if (data.fullParams.position === 'top') {
-        y = 0
-        if (data.fullParams.justify === 'start') {
-          x = 0
-        } else if (data.fullParams.justify === 'center') {
-          x = data.layout.rootWidth / 2
-        } else if (data.fullParams.justify === 'end') {
-          x = data.layout.rootWidth
-        }
-      } else if (data.fullParams.position === 'left') {
-        x = 0
-        if (data.fullParams.justify === 'start') {
-          y = 0
-        } else if (data.fullParams.justify === 'center') {
-          y = data.layout.rootHeight / 2
-        } else if (data.fullParams.justify === 'end') {
-          y = data.layout.rootHeight
-        }
-      }
-      
-      return {
-        x,
-        y
-      }
-    })
-  )
-  
-  const boxSelection$: Observable<d3.Selection<SVGGElement, Position, any, any>> = boxPosition$.pipe(
-    takeUntil(destroy$),
-    map(data => {
-
-      return rootSelection
-        .selectAll<SVGGElement, Position>(`g.${boxClassName}`)
-        .data([data])
-        .join(
-          enter => {
-            return enter
-              .append('g')
-              .classed(boxClassName, true)
-              .attr('transform', d => `translate(${d.x}, ${d.y})`)
-          },
-          update => {
-            return update
-              .transition()
-              .attr('transform', d => `translate(${d.x}, ${d.y})`)
-          },
-          exit => exit.remove()
-        )
-    })
-  )
-
-  const lengendList$: Observable<LegendList> = combineLatest({
-    layout: observer.layout$,
-    fullParams: observer.fullParams$,
-    fullChartParams: observer.fullChartParams$,
-    seriesLabels: seriesLabels$,
-    lineDirection: lineDirection$,
-    lineMaxSize: lineMaxSize$
-  }).pipe(
-    takeUntil(destroy$),
-    switchMap(async d => d),
-    map(data => {
-      const list: LegendItem[][] = data.seriesLabels.reduce((prev: LegendItem[][], current, currentIndex) => {
-        const textWidth = measureTextWidth(current, data.fullChartParams.styles.textSize)
-        const itemWidth = (data.fullChartParams.styles.textSize * 1.5) + textWidth
-        const color = getSeriesColor(currentIndex, data.fullChartParams)
-        const lastItem: LegendItem | null = prev[0] && prev[0][0]
-          ? prev[prev.length - 1][prev[prev.length - 1].length - 1]
-          : null
-
-        const { translateX, translateY, lineIndex, itemIndex } = ((_data, _prev, _lastItem) => {
-          let translateX = 0
-          let translateY = 0
-          let lineIndex = 0
-          let itemIndex = 0
-
-          if (_data.lineDirection === 'column') {
-            let tempTranslateY = _lastItem
-              ? _lastItem.translateY + _data.fullChartParams.styles.textSize + _data.fullParams.gap
-              : 0
-            
-            if ((tempTranslateY + _data.fullChartParams.styles.textSize) > _data.lineMaxSize) {
-              // 換行
-              lineIndex = _lastItem.lineIndex + 1
-              itemIndex = 0
-              translateY = 0
-              // 前一行最寬寬度
-              const maxItemWidthInLastLine = _prev[_prev.length - 1].reduce((p, c) => {
-                return c.itemWidth > p ? c.itemWidth : p
-              }, 0)
-              translateX = _lastItem.translateX + maxItemWidthInLastLine + _data.fullParams.gap
-            } else {
-              lineIndex = _lastItem ? _lastItem.lineIndex : 0
-              itemIndex = _lastItem ? _lastItem.itemIndex + 1 : 0
-              translateY = tempTranslateY
-              translateX = _lastItem ? _lastItem.translateX : 0
-            }
-          } else {
-            let tempTranslateX = _lastItem
-              ? _lastItem.translateX + _lastItem.itemWidth + _data.fullParams.gap
-              : 0
-            if ((tempTranslateX + itemWidth) > _data.lineMaxSize) {
-              // 換行
-              lineIndex = _lastItem.lineIndex + 1
-              itemIndex = 0
-              translateX = 0
-            } else {
-              lineIndex = _lastItem ? _lastItem.lineIndex : 0
-              itemIndex = _lastItem ? _lastItem.itemIndex + 1 : 0
-              translateX = tempTranslateX
-            }
-            translateY = (_data.fullChartParams.styles.textSize + _data.fullParams.gap) * lineIndex
-          }
-          
-          return { translateX, translateY, lineIndex, itemIndex }
-        })(data, prev, lastItem)
-
-        if (!prev[lineIndex]) {
-          prev[lineIndex] = []
-        }
-
-        prev[lineIndex].push({
-          id: current,
-          seriesLabel: current,
-          seriesIndex: currentIndex,
-          lineIndex,
-          itemIndex,
-          text: current,
-          itemWidth,
-          translateX,
-          translateY,
-          color,
-        })
-        
-        return prev
-      }, [])
-
-      // 依list計算出來的排序位置來計算整體的偏移位置
-      const { width, height, translateX, translateY } = ((_data, _list) => {
-        let width = 0
-        let height = 0
-        let translateX = 0
-        let translateY = 0
-
-        if (!_list.length || !_list[0].length) {
-          return { width, height, translateX, translateY }
-        }
-
-        const firstLineLastItem = _list[0][_list[0].length - 1]
-        if (_data.lineDirection === 'column') {
-          width = _list.reduce((p, c) => {
-            const maxWidthInLine = c.reduce((_p, _c) => {
-              // 找出最寬的寬度
-              return _c.itemWidth > _p ? _c.itemWidth : _p
-            }, 0)
-            // 每行寬度加總
-            return p + maxWidthInLine
-          }, 0)
-          height = firstLineLastItem.translateY + _data.fullChartParams.styles.textSize + _data.fullParams.gap
-        } else {
-          width = firstLineLastItem.translateX + firstLineLastItem.itemWidth
-          height = (_data.fullChartParams.styles.textSize * _list.length) + (_data.fullParams.gap * (_list.length - 1))
-        }
-
-        if (_data.fullParams.position === 'left') {
-          if (_data.fullParams.justify === 'start') {
-            translateX = _data.fullParams.padding
-            translateY = _data.fullParams.padding
-          } else if (_data.fullParams.justify === 'center') {
-            translateX = _data.fullParams.padding
-            translateY = - height / 2
-          } else if (_data.fullParams.justify === 'end') {
-            translateX = _data.fullParams.padding
-            translateY = - height - _data.fullParams.padding
-          }
-        } else if (_data.fullParams.position === 'right') {
-          if (_data.fullParams.justify === 'start') {
-            translateX = - width - _data.fullParams.padding
-            translateY = _data.fullParams.padding
-          } else if (_data.fullParams.justify === 'center') {
-            translateX = - width - _data.fullParams.padding
-            translateY = - height / 2
-          } else if (_data.fullParams.justify === 'end') {
-            translateX = - width - _data.fullParams.padding
-            translateY = - height - _data.fullParams.padding
-          }
-        } else if (_data.fullParams.position === 'top') {
-          if (_data.fullParams.justify === 'start') {
-            translateX = _data.fullParams.padding
-            translateY = _data.fullParams.padding
-          } else if (_data.fullParams.justify === 'center') {
-            translateX = - width / 2
-            translateY = _data.fullParams.padding
-          } else if (_data.fullParams.justify === 'end') {
-            translateX = - width - _data.fullParams.padding
-            translateY = _data.fullParams.padding
-          }
-        } else {
-          if (_data.fullParams.justify === 'start') {
-            translateX = _data.fullParams.padding
-            translateY = - height - _data.fullParams.padding
-          } else if (_data.fullParams.justify === 'center') {
-            translateX = - width / 2
-            translateY = - height - _data.fullParams.padding
-          } else if (_data.fullParams.justify === 'end') {
-            translateX = - width - _data.fullParams.padding
-            translateY = - height - _data.fullParams.padding
-          }
-        }
-
-        // translateX += _data.fullParams.offset[0]
-        // translateY += _data.fullParams.offset[1]
-
-        return { width, height, translateX, translateY }
-      })(data, list)
-
-      return {
-        direction: data.lineDirection,
-        width,
-        height,
-        translateX,
-        translateY,
-        list
-      }
-    })
-  )
-
-  const lengendListSelection$ = combineLatest({
-    boxSelection: boxSelection$,
-    fullParams: observer.fullParams$,
-    lengendList: lengendList$
-  }).pipe(
-    takeUntil(destroy$),
-    switchMap(async d => d),
-    map(data => {
-      return data.boxSelection
-        .selectAll<SVGGElement, SeriesLegendParams>('g')
-        .data([data.lengendList])
-        .join(
-          enter => {
-            return enter
-              .append('g')
-              .classed(legendListClassName, true)
-              .attr('transform', d => `translate(${d.translateX}, ${d.translateY})`)
-          },
-          update => {
-            return update
-              .transition()
-              .attr('transform', d => `translate(${d.translateX}, ${d.translateY})`)
-          },
-          exit => exit.remove()
-        )
-    })
-  )
-
-  const itemSelection$ = lengendListSelection$.pipe(
-    takeUntil(destroy$),
-    map(lengendListSelection => {
-      const legendListData = lengendListSelection.data()
-      const data = legendListData[0] ? legendListData[0].list.flat() : []
-      
-      return lengendListSelection
-        .selectAll<SVGGElement, string>(`g.${itemClassName}`)
-        .data(data)
-        .join(
-          enter => {
-            return enter
-              .append('g')
-              .classed(itemClassName, true)
-              .attr('cursor', 'default')
-          },
-          update => update,
-          exit => exit.remove()
-        )
-        .attr('transform', (d, i) => {
-          return `translate(${d.translateX}, ${d.translateY})`
-        })
-    })
-  )
-
-  combineLatest({
-    itemSelection: itemSelection$,
-    lengendList: lengendList$,
-    seriesLabels: seriesLabels$,
-    fullParams: observer.fullParams$,
-    fullChartParams: observer.fullChartParams$
-  }).pipe(
-    takeUntil(destroy$),
-    switchMap(async d => d),
-  ).subscribe(data => {
-    renderSeriesLegend({
-      itemSelection: data.itemSelection,
-      lengendList: data.lengendList,
-      seriesLabel: data.seriesLabels,
-      fullParams: data.fullParams,
-      fullChartParams: data.fullChartParams
-    })
+  const unsubscribeBaseLegend = createBaseLegend(pluginName, {
+    rootSelection,
+    seriesLabels$,
+    fullParams$: observer.fullParams$,
+    layout$: observer.layout$,
+    fullChartParams$: observer.fullChartParams$
   })
 
   return () => {
     destroy$.next(undefined)
+    unsubscribeBaseLegend()
   }
 })
+

package/src/series/types.ts

@@ -1,6 +1,7 @@
 import type { ComputedDatumSeries, EventSeries, EventName, ColorType } from '@orbcharts/core'
+import type { BaseLegendParams } from '../base/BaseLegend'
 
-export type ScaleType = 'area' | 'radius'
+export type BubbleScaleType = 'area' | 'radius'
 
 export interface BubblesPluginParams {
   force: {
@@ -14,7 +15,7 @@ export interface BubblesPluginParams {
     lineLengthMin: number
   }
   highlightRIncrease: number
-  scaleType: ScaleType
+  bubbleScaleType: BubbleScaleType
 }
 
 export interface PiePluginParams {
@@ -52,12 +53,4 @@ export interface PieLabelsPluginParams {
   labelColorType: ColorType
 }
 
-export interface SeriesLegendParams {
-  position: 'top' | 'bottom' | 'left' | 'right'
-  justify: 'start' | 'center' | 'end'
-  padding: number
-  // offset: [number, number]
-  gap: number
-  rectRadius: number
-  // highlightEvent: boolean
-}
+export interface SeriesLegendParams extends BaseLegendParams {}