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

package/src/relationship/plugins/RelationshipLegend.ts

@@ -0,0 +1,100 @@
+import * as d3 from 'd3'
+import {
+  combineLatest,
+  map,
+  switchMap,
+  takeUntil,
+  Observable,
+  Subject } from 'rxjs'
+import type { DefinePluginConfig } from '../../../lib/core-types'
+import {
+  defineRelationshipPlugin } from '../../../lib/core'
+import { DEFAULT_RELATIONSHIP_LEGEND_PARAMS } from '../defaults'
+import { createBaseLegend } from '../../base/BaseLegend'
+import { LAYER_INDEX_OF_INFO } from '../../const'
+
+const pluginName = 'RelationshipLegend'
+
+const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_RELATIONSHIP_LEGEND_PARAMS> = {
+  name: pluginName,
+  defaultParams: DEFAULT_RELATIONSHIP_LEGEND_PARAMS,
+  layerIndex: LAYER_INDEX_OF_INFO,
+  validator: (params, { validateColumns }) => {
+    const result = validateColumns(params, {
+      placement: {
+        toBe: '"top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end"',
+        test: (value) => {
+          return [
+            'top', 'top-start', 'top-end',
+            'bottom', 'bottom-start', 'bottom-end',
+            'left', 'left-start', 'left-end',
+            'right', 'right-start', 'right-end'
+          ].includes(value)
+        }
+      },
+      padding: {
+        toBeTypes: ['number']
+      },
+      backgroundFill: {
+        toBeOption: 'ColorType',
+      },
+      backgroundStroke: {
+        toBeOption: 'ColorType',
+      },
+      gap: {
+        toBeTypes: ['number']
+      },
+      listRectWidth: {
+        toBeTypes: ['number']
+      },
+      listRectHeight: {
+        toBeTypes: ['number']
+      },
+      listRectRadius: {
+        toBeTypes: ['number']
+      },
+      textColorType: {
+        toBeOption: 'ColorType',
+      }
+    })
+    return result
+  }
+}
+
+export const RelationshipLegend = defineRelationshipPlugin(pluginConfig)(({ selection, rootSelection, observer, subject }) => {
+  
+  const destroy$ = new Subject()
+
+  // 全部列點矩型使用相同樣式參數
+  const fullParams$ = observer.fullParams$.pipe(
+    takeUntil(destroy$),
+    map(d => {
+      const labelList = [
+        {
+          listRectWidth: d.listRectWidth,
+          listRectHeight: d.listRectHeight,
+          listRectRadius: d.listRectRadius,
+        }
+      ]
+      return {
+        ...d,
+        labelList
+      }
+    })
+  )
+
+  const unsubscribeBaseLegend = createBaseLegend(pluginName, {
+    rootSelection,
+    legendLabels$: observer.categoryLabels$,
+    fullParams$,
+    layout$: observer.layout$,
+    fullChartParams$: observer.fullChartParams$,
+    textSizePx$: observer.textSizePx$
+  })
+
+  return () => {
+    destroy$.next(undefined)
+    unsubscribeBaseLegend()
+  }
+})
+

package/src/relationship/plugins/RelationshipTooltip.ts

@@ -0,0 +1,66 @@
+import {
+  Subject,
+} from 'rxjs'
+import type { DefinePluginConfig } from '../../../lib/core-types'
+import {
+  defineRelationshipPlugin } from '../../../lib/core'
+import { DEFAULT_RELATIONSHIP_TOOLTIP_PARAMS } from '../defaults'
+import { LAYER_INDEX_OF_TOOLTIP } from '../../const'
+import { createBaseTooltip } from '../../base/BaseTooltip'
+
+const pluginName = 'RelationshipTooltip'
+
+const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_RELATIONSHIP_TOOLTIP_PARAMS> = {
+  name: pluginName,
+  defaultParams: DEFAULT_RELATIONSHIP_TOOLTIP_PARAMS,
+  layerIndex: LAYER_INDEX_OF_TOOLTIP,
+  validator: (params, { validateColumns }) => {
+    const result = validateColumns(params, {
+      backgroundColorType: {
+        toBeOption: 'ColorType',
+      },
+      backgroundOpacity: {
+        toBeTypes: ['number']
+      },
+      strokeColorType: {
+        toBeOption: 'ColorType',
+      },
+      offset: {
+        toBe: '[number, number]',
+        test: (value: any) => {
+          return Array.isArray(value)
+            && value.length === 2
+            && typeof value[0] === 'number'
+            && typeof value[1] === 'number'
+        }
+      },
+      padding: {
+        toBeTypes: ['number']
+      },
+      textColorType: {
+        toBeOption: 'ColorType',
+      },
+      renderFn: {
+        toBeTypes: ['Function']
+      },
+    })
+    return result
+  }
+}
+
+export const RelationshipTooltip = defineRelationshipPlugin(pluginConfig)(({ selection, rootSelection, name, subject, observer }) => {
+  const destroy$ = new Subject()
+
+  const unsubscribeTooltip = createBaseTooltip(pluginName, {
+    rootSelection,
+    fullParams$: observer.fullParams$,
+    fullChartParams$: observer.fullChartParams$,
+    layout$: observer.layout$,
+    event$: subject.event$,
+  })
+
+  return () => {
+    destroy$.next(undefined)
+    unsubscribeTooltip()
+  }
+})

package/src/relationship/relationshipObservables.ts

@@ -0,0 +1,50 @@
+import * as d3 from 'd3'
+import {
+  Observable,
+  Subject,
+  of,
+  takeUntil,
+  filter,
+  first,
+  map,
+  switchMap,
+  combineLatest,
+  merge,
+  shareReplay,
+  distinctUntilChanged
+} from 'rxjs'
+import type {
+  ContainerPosition } from '../../lib/core-types'
+import { getClassName, getUniID } from '../utils/orbchartsUtils'
+
+// function createRelationshipSelection ({ selection, pluginName, separateSeries$, seriesLabels$ }: {
+//   selection: d3.Selection<any, unknown, any, unknown>
+//   pluginName: string
+//   separateSeries$: Observable<boolean>
+//   seriesLabels$: Observable<string[]>
+// }) {
+//   const seriesClassName = getClassName(pluginName, 'series')
+  
+//   return combineLatest({
+//     seriesLabels: seriesLabels$,
+//     separateSeries: separateSeries$
+//   }).pipe(
+//     switchMap(async d => d),
+//     map((data, i) => {
+//       const selectionData = data.separateSeries ? data.seriesLabels : [data.seriesLabels.join('')]
+//       return selection
+//         .selectAll<SVGGElement, string>(`g.${seriesClassName}`)
+//         .data(selectionData, d => d)
+//         .join(
+//           enter => {
+//             return enter
+//               .append('g')
+//               .classed(seriesClassName, true)
+//           },
+//           update => update,
+//           exit => exit.remove()
+//         )
+//     }),
+//     shareReplay(1)
+//   )
+// }

package/src/series/defaults.ts

@@ -17,10 +17,11 @@ export const DEFAULT_BUBBLES_PARAMS: BubblesParams = {
     velocityDecay: 0.3, // 衰減數
     collisionSpacing: 2 // 泡泡間距
   },
-  bubbleText: {
+  bubbleLabel: {
     fillRate: 0.6,
-    lineHeight: 12,
-    lineLengthMin: 4
+    lineHeight: 1,
+    maxLineLength: 6,
+    wordBreakAll: true,
   },
   // highlightRIncrease: 0,
   arcScaleType: 'area'
@@ -51,8 +52,8 @@ export const DEFAULT_PIE_PARAMS: PieParams = {
 }
 
 export const DEFAULT_PIE_EVENT_TEXTS_PARAMS: PieEventTextsParams = {
-  eventFn: (eventData: EventSeries, eventName: EventName, t: number) => {
-    if (eventName === 'mouseover' || eventName === 'mousemove') {
+  renderFn: (eventData: EventSeries) => {
+    if (eventData.eventName === 'mouseover' || eventData.eventName === 'mousemove') {
       return [String(eventData.datum!.value)]
     }
     return [
@@ -62,7 +63,7 @@ export const DEFAULT_PIE_EVENT_TEXTS_PARAMS: PieEventTextsParams = {
             return acc + seriesData.reduce((_acc, data) => {
               return _acc + (data.value ?? 0)
             }, 0)
-          }, 0) * t
+          }, 0) * (eventData.tween ?? 1)
         )
       )
     ]
@@ -83,9 +84,9 @@ export const DEFAULT_PIE_EVENT_TEXTS_PARAMS: PieEventTextsParams = {
     }
   ]
 }
-DEFAULT_PIE_EVENT_TEXTS_PARAMS.eventFn.toString = () => `(eventData: EventSeries, eventName: EventName, t: number) => {
-  if (eventName === 'mouseover' || eventName === 'mousemove') {
-    return [String(eventData.datum!.value)]
+DEFAULT_PIE_EVENT_TEXTS_PARAMS.renderFn.toString = () => `(eventData) => {
+  if (eventData.eventName === 'mouseover' || eventData.eventName === 'mousemove') {
+    return [String(eventData.datum.value)]
   }
   return [
     String(
@@ -94,7 +95,7 @@ DEFAULT_PIE_EVENT_TEXTS_PARAMS.eventFn.toString = () => `(eventData: EventSeries
           return acc + seriesData.reduce((_acc, data) => {
             return _acc + (data.value ?? 0)
           }, 0)
-        }, 0) * t
+        }, 0) * (eventData.tween ?? 1)
       )
     )
   ]
@@ -158,7 +159,7 @@ export const DEFAULT_SERIES_TOOLTIP_PARAMS: SeriesTooltipParams = {
   textColorType: 'primary',
   offset: [20, 5],
   padding: 10,
-  renderFn: (eventData, { styles }) => {
+  renderFn: (eventData, { styles, utils }) => {
     const hasSeriesLabel = eventData.seriesLabel.slice(0, 7) === 'series_' ? false : true
     const hasDatumLabel = eventData.datum.label.slice(0, 7) === 'series_' ? false : true
     const bulletWidth = styles.textSizePx * 0.7
@@ -182,7 +183,7 @@ export const DEFAULT_SERIES_TOOLTIP_PARAMS: SeriesTooltipParams = {
   </g>`
   },
 }
-DEFAULT_SERIES_TOOLTIP_PARAMS.renderFn.toString = () => `(eventData, { styles }) => {
+DEFAULT_SERIES_TOOLTIP_PARAMS.renderFn.toString = () => `(eventData, { styles, utils }) => {
     const hasSeriesLabel = eventData.seriesLabel.slice(0, 7) === 'series_' ? false : true
     const hasDatumLabel = eventData.datum.label.slice(0, 7) === 'series_' ? false : true
     const bulletWidth = styles.textSizePx * 0.7

package/src/series/plugins/Bubbles.ts

@@ -17,7 +17,7 @@ import type {
   EventName,
   ComputedDataSeries,
   ComputedDatumSeries,
-  SeriesContainerPosition } from '../../../lib/core-types'
+  ContainerPosition } from '../../../lib/core-types'
 import {
   defineSeriesPlugin } from '../../../lib/core'
 import type { BubblesParams, ArcScaleType } from '../../../lib/plugins-basic-types'
@@ -36,6 +36,8 @@ type BubblesSimulationDatum = BubblesDatum & d3.SimulationNodeDatum
 
 const pluginName = 'Bubbles'
 
+const baseLineHeight = 12 // 未變形前的字體大小（代入計算用而已，數字多少都不會有影響）
+
 const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_BUBBLES_PARAMS> = {
   name: pluginName,
   defaultParams: DEFAULT_BUBBLES_PARAMS,
@@ -45,7 +47,7 @@ const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_BUBBLES
       force: {
         toBeTypes: ['object']
       },
-      bubbleText: {
+      bubbleLabel: {
         toBeTypes: ['object']
       },
       arcScaleType: {
@@ -69,20 +71,20 @@ const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_BUBBLES
         return forceResult
       }
     }
-    if (params.bubbleText) {
-      const bubbleTextResult = validateColumns(params.bubbleText, {
+    if (params.bubbleLabel) {
+      const bubbleLabelResult = validateColumns(params.bubbleLabel, {
         fillRate: {
           toBeTypes: ['number']
         },
         lineHeight: {
           toBeTypes: ['number']
         },
-        lineLengthMin: {
+        maxLineLength: {
           toBeTypes: ['number']
         },
       })
-      if (bubbleTextResult.status === 'error') {
-        return bubbleTextResult
+      if (bubbleLabelResult.status === 'error') {
+        return bubbleLabelResult
       }
     }
     return result
@@ -91,23 +93,23 @@ const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_BUBBLES
 
 let force: d3.Simulation<d3.SimulationNodeDatum, undefined> | undefined
 
-function makeForce (bubblesSelection: d3.Selection<SVGGElement, any, any, any>, fullParams: BubblesParams) {
+function makeForce (bubblesSelection: d3.Selection<SVGGElement, BubblesDatum, any, any>, fullParams: BubblesParams) {
   return d3.forceSimulation()
     .velocityDecay(fullParams.force!.velocityDecay!)
     // .alphaDecay(0.2)
     .force(
       "collision",
       d3.forceCollide()
-        .radius(d => {
-          // @ts-ignore
+        .radius((d: d3.SimulationNodeDatum & BubblesDatum) => {
           return d.r + fullParams.force!.collisionSpacing
         })
         // .strength(0.01)
     )
-    .force("charge", d3.forceManyBody().strength((d) => {
-      // @ts-ignore
+    .force("charge", d3.forceManyBody().strength((d: d3.SimulationNodeDatum & BubblesDatum) => {
       return - Math.pow(d.r, 2.0) * fullParams.force!.strength
     }))
+    // .force("charge", d3.forceManyBody().strength(-2000))
+    // .force("collision", d3.forceCollide(60).strength(1)) // @Q@ 60為泡泡的R，暫時是先寫死的
     // .force("x", d3.forceX().strength(forceStrength).x(this.graphicWidth / 2))
     // .force("y", d3.forceY().strength(forceStrength).y(this.graphicHeight / 2))
     .on("tick", () => {
@@ -121,6 +123,7 @@ function makeForce (bubblesSelection: d3.Selection<SVGGElement, any, any, any>,
         // .attr("cx", (d) => d.x)
         // .attr("cy", (d) => d.y)
     })
+
 }
 
 
@@ -147,7 +150,7 @@ function createBubblesData ({ visibleComputedLayoutData, LastBubbleDataMap, grap
   LastBubbleDataMap: Map<string, BubblesDatum>
   graphicWidth: number
   graphicHeight: number
-  SeriesContainerPositionMap: Map<string, SeriesContainerPosition>
+  SeriesContainerPositionMap: Map<string, ContainerPosition>
   scaleType: ArcScaleType
   // highlightIds: string[]
 }): BubblesDatum[] {
@@ -214,7 +217,7 @@ function renderBubbles ({ selection, bubblesData, fullParams, sumSeries }: {
         const enterSelection = enter
           .append('g')
           .attr('cursor', 'pointer')
-          .attr('font-size', 12)
+          .attr('font-size', baseLineHeight)
           .style('fill', '#ffffff')
           .attr("text-anchor", "middle")
         
@@ -258,15 +261,12 @@ function renderBubbles ({ selection, bubblesData, fullParams, sumSeries }: {
   bubblesSelection
     .each((d,i,g) => {
       const gSelection = d3.select(g[i])
-      let breakAll = true
-      if (d[textDataColumn].length <= fullParams.bubbleText.lineLengthMin) {
-        breakAll = false
-      }
+      
       gSelection.call(renderCircleText, {
         text: d[textDataColumn],
-        radius: d.r * fullParams.bubbleText.fillRate,
-        lineHeight: fullParams.bubbleText.lineHeight,
-        isBreakAll: breakAll
+        radius: d.r * fullParams.bubbleLabel.fillRate,
+        lineHeight: baseLineHeight * fullParams.bubbleLabel.lineHeight,
+        isBreakAll: fullParams.bubbleLabel.wordBreakAll
       })
 
     })
@@ -330,7 +330,7 @@ function groupBubbles ({ fullParams, SeriesContainerPositionMap }: {
   fullParams: BubblesParams
   // graphicWidth: number
   // graphicHeight: number
-  SeriesContainerPositionMap: Map<string, SeriesContainerPosition>
+  SeriesContainerPositionMap: Map<string, ContainerPosition>
 }) {
   // console.log('groupBubbles')
   force!

package/src/series/plugins/Pie.ts

@@ -12,7 +12,7 @@ import type { DefinePluginConfig } from '../../../lib/core-types'
 import type {
   ComputedDataSeries,
   ComputedDatumSeries,
-  SeriesContainerPosition,
+  ContainerPosition,
   ChartParams,
   EventSeries,
   Layout } from '../../../lib/core-types'
@@ -210,7 +210,7 @@ function createEachPie (pluginName: string, context: {
   fullParams$: Observable<PieParams>
   fullChartParams$: Observable<ChartParams>
   seriesHighlight$: Observable<ComputedDatumSeries[]>
-  seriesContainerPosition$: Observable<SeriesContainerPosition>
+  seriesContainerPosition$: Observable<ContainerPosition>
   event$: Subject<EventSeries>
 }) {
   const destroy$ = new Subject()

package/src/series/plugins/PieEventTexts.ts

@@ -15,7 +15,7 @@ import {
 import type {
   ComputedDatumSeries,
   ChartParams,
-  SeriesContainerPosition,
+  ContainerPosition,
   EventName,
   EventSeries } from '../../../lib/core-types'
 import type { PieEventTextsParams } from '../../../lib/plugins-basic-types'
@@ -40,7 +40,7 @@ const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_PIE_EVE
   layerIndex: LAYER_INDEX_OF_LABEL,
   validator: (params, { validateColumns }) => {
     const result = validateColumns(params, {
-      eventFn: {
+      renderFn: {
         toBeTypes: ['Function'],
       },
       textAttrs: {
@@ -84,16 +84,16 @@ function renderText (
   return text
 }
 
-function makeTextData ({ eventData, eventName, t, eventFn, textAttrs, textStyles }: {
+function createTextData ({ eventData, renderFn, textAttrs, textStyles }: {
   eventData: EventSeries,
-  eventName: EventName,
-  t: number,
-  eventFn: (d: EventSeries, eventName: EventName, t: number) => string[]
+  // t: number,
+  renderFn: (d: EventSeries) => string[] | string
   textAttrs: Array<{ [key:string]: string | number }>
   textStyles: Array<{ [key:string]: string | number }>
 }): TextDatum[] {
-  const callbackText = eventFn(eventData, eventName, t)
-  return callbackText.map((d, i) => {
+  const callbackText = renderFn(eventData)
+  const textArr = Array.isArray(callbackText) ? callbackText : [callbackText]
+  return textArr.map((d, i) => {
     return {
       text: d,
       attr: textAttrs[i],
@@ -110,7 +110,7 @@ function createEachPieEventTexts (pluginName: string, context: {
   fullParams$: Observable<PieEventTextsParams>
   fullChartParams$: Observable<ChartParams>
   seriesHighlight$: Observable<ComputedDatumSeries[]>
-  seriesContainerPosition$: Observable<SeriesContainerPosition>
+  seriesContainerPosition$: Observable<ContainerPosition>
   event$: Subject<EventSeries>
 }) {
   const destroy$ = new Subject()
@@ -159,12 +159,13 @@ function createEachPieEventTexts (pluginName: string, context: {
       // .ease(getD3TransitionEase(data.fullChartParams.transitionEase!))
       .tween('move', (event, datum) => {
         return (t) => {
-          const renderData = makeTextData({
+          const renderData = createTextData({
             eventData: {
               type: 'series',
               pluginName,
               eventName: 'transitionMove',
               event,
+              tween: t,
               highlightTarget: data.highlightTarget,
               data: data.computedData,
               series: [],
@@ -172,9 +173,9 @@ function createEachPieEventTexts (pluginName: string, context: {
               seriesLabel: '',
               datum: null
             },
-            eventName: 'transitionMove',
-            t,
-            eventFn: data.fullParams.eventFn!,
+            // eventName: 'transitionMove',
+            // t,
+            renderFn: data.fullParams.renderFn!,
             textAttrs: data.fullParams.textAttrs!,
             textStyles: data.fullParams.textStyles!
           })
@@ -182,12 +183,13 @@ function createEachPieEventTexts (pluginName: string, context: {
         }
       })
       .on('end', (event, datum) => {
-        const renderData = makeTextData({
+        const renderData = createTextData({
           eventData: {
             type: 'series',
             pluginName,
             eventName: 'transitionEnd',
             event,
+            tween: 1,
             highlightTarget: data.highlightTarget,
             data: data.computedData,
             series: [],
@@ -195,9 +197,9 @@ function createEachPieEventTexts (pluginName: string, context: {
             seriesLabel: '',
             datum: null
           },
-          eventName: 'transitionMove',
-          t: 1,
-          eventFn: data.fullParams.eventFn!,
+          // eventName: 'transitionMove',
+          // t: 1,
+          renderFn: data.fullParams.renderFn!,
           textAttrs: data.fullParams.textAttrs!,
           textStyles: data.fullParams.textStyles!
         })
@@ -208,11 +210,10 @@ function createEachPieEventTexts (pluginName: string, context: {
         }
         storeEventSubscription = context.event$
           .subscribe(eventData => {
-            const renderData = makeTextData({
+            const renderData = createTextData({
               eventData,
-              eventName: eventData.eventName,
-              t: 1,
-              eventFn: data.fullParams.eventFn!,
+              // t: 1,
+              renderFn: data.fullParams.renderFn!,
               textAttrs: data.fullParams.textAttrs!,
               textStyles: data.fullParams.textStyles!
             })

package/src/series/plugins/PieLabels.ts

@@ -14,7 +14,7 @@ import {
   defineSeriesPlugin } from '../../../lib/core'
 import type {
   ComputedDatumSeries,
-  SeriesContainerPosition,
+  ContainerPosition,
   EventSeries,
   ChartParams } from '../../../lib/core-types'
 import type { PieLabelsParams } from '../../../lib/plugins-basic-types'
@@ -453,7 +453,7 @@ function createEachPieLabel (pluginName: string, context: {
   fullChartParams$: Observable<ChartParams>
   textSizePx$: Observable<number>
   seriesHighlight$: Observable<ComputedDatumSeries[]>
-  seriesContainerPosition$: Observable<SeriesContainerPosition>
+  seriesContainerPosition$: Observable<ContainerPosition>
   event$: Subject<EventSeries>
 }) {
   const destroy$ = new Subject()

package/src/series/plugins/Rose.ts

@@ -14,7 +14,7 @@ import type { DefinePluginConfig } from '../../../lib/core-types'
 import type {
   ComputedDataSeries,
   ComputedDatumSeries,
-  SeriesContainerPosition,
+  ContainerPosition,
   ChartParams,
   EventSeries,
   Layout } from '../../../lib/core-types'
@@ -219,7 +219,7 @@ function createEachRose (pluginName: string, context: {
   fullParams$: Observable<RoseParams>
   fullChartParams$: Observable<ChartParams>
   seriesHighlight$: Observable<ComputedDatumSeries[]>
-  seriesContainerPosition$: Observable<SeriesContainerPosition>
+  seriesContainerPosition$: Observable<ContainerPosition>
   event$: Subject<EventSeries>
 }) {
   const destroy$ = new Subject()

package/src/series/plugins/RoseLabels.ts

@@ -14,7 +14,7 @@ import {
   defineSeriesPlugin } from '../../../lib/core'
 import type {
   ComputedDatumSeries,
-  SeriesContainerPosition,
+  ContainerPosition,
   EventSeries,
   ChartParams } from '../../../lib/core-types'
 import type { RoseLabelsParams } from '../../../lib/plugins-basic-types'
@@ -413,7 +413,7 @@ function createEachPieLabel (pluginName: string, context: {
   fullChartParams$: Observable<ChartParams>
   textSizePx$: Observable<number>
   seriesHighlight$: Observable<ComputedDatumSeries[]>
-  seriesContainerPosition$: Observable<SeriesContainerPosition>
+  seriesContainerPosition$: Observable<ContainerPosition>
   event$: Subject<EventSeries>
 }) {
   const destroy$ = new Subject()

package/src/series/plugins/SeriesLegend.ts

@@ -65,7 +65,7 @@ export const SeriesLegend = defineSeriesPlugin(pluginConfig)(({ selection, rootS
   
   const destroy$ = new Subject()
 
-  const seriesLabels$: Observable<string[]> = observer.SeriesDataMap$.pipe(
+  const legendLabels$: Observable<string[]> = observer.SeriesDataMap$.pipe(
     takeUntil(destroy$),
     map(data => {
       return Array.from(data.keys())
@@ -76,7 +76,7 @@ export const SeriesLegend = defineSeriesPlugin(pluginConfig)(({ selection, rootS
   const fullParams$ = observer.fullParams$.pipe(
     takeUntil(destroy$),
     map(d => {
-      const seriesList = [
+      const labelList = [
         {
           listRectWidth: d.listRectWidth,
           listRectHeight: d.listRectHeight,
@@ -85,14 +85,14 @@ export const SeriesLegend = defineSeriesPlugin(pluginConfig)(({ selection, rootS
       ]
       return {
         ...d,
-        seriesList
+        labelList
       }
     })
   )
 
   const unsubscribeBaseLegend = createBaseLegend(pluginName, {
     rootSelection,
-    seriesLabels$,
+    legendLabels$,
     fullParams$,
     layout$: observer.layout$,
     fullChartParams$: observer.fullChartParams$,

package/src/series/seriesObservables.ts

@@ -14,7 +14,7 @@ import {
   distinctUntilChanged
 } from 'rxjs'
 import type {
-  SeriesContainerPosition } from '../../lib/core-types'
+  ContainerPosition } from '../../lib/core-types'
 import { getClassName, getUniID } from '../utils/orbchartsUtils'
 
 function createSeriesSelection ({ selection, pluginName, separateSeries$, seriesLabels$ }: {
@@ -55,7 +55,7 @@ export const seriesStartSelectionObservable = ({ selection, pluginName, separate
   pluginName: string
   separateSeries$: Observable<boolean>
   seriesLabels$: Observable<string[]>
-  seriesContainerPosition$: Observable<SeriesContainerPosition[]>
+  seriesContainerPosition$: Observable<ContainerPosition[]>
 }) => {
   
   const seriesStartSelection$ = createSeriesSelection({ selection, pluginName, separateSeries$, seriesLabels$ })
@@ -102,7 +102,7 @@ export const seriesCenterSelectionObservable = ({ selection, pluginName, separat
   pluginName: string
   separateSeries$: Observable<boolean>
   seriesLabels$: Observable<string[]>
-  seriesContainerPosition$: Observable<SeriesContainerPosition[]>
+  seriesContainerPosition$: Observable<ContainerPosition[]>
 }) => {
   
   const seriesCenterSelection$ = createSeriesSelection({ selection, pluginName, separateSeries$, seriesLabels$ })