@orbcharts/plugins-basic 3.0.0-alpha.33 → 3.0.0-alpha.35

package/src/multiGrid/multiGridObservables.ts

@@ -0,0 +1,279 @@
+import type { Observable } from 'rxjs'
+import {
+  Subject,
+  takeUntil,
+  of,
+  map,
+  switchMap,
+  combineLatest,
+  distinctUntilChanged,
+  shareReplay
+} from 'rxjs'
+import type { ContextObserverMultiGrid, ComputedDataGrid, DataFormatterGrid, ContextObserverGridDetail } from '@orbcharts/core'
+// import { DATA_FORMATTER_MULTI_GRID_GRID_DEFAULT } from '@orbcharts/core/src/defaults'
+
+// interface GridPluginParams {
+//   gridIndex: number
+// }
+
+// interface GridPluginObservables extends ContextObserverGridDetail {
+//   gridComputedData$: Observable<ComputedDataGrid>
+//   gridDataFormatter$: Observable<DataFormatterGrid>
+// }
+
+// // 對應grid資料的plugin所需Observable（必須有gridIndex）
+// export const gridPluginObservables = (observer: ContextObserverMultiGrid<GridPluginParams>): GridPluginObservables => {
+//   const gridIndex$ = observer.fullParams$.pipe(
+//     map(fullParams => fullParams.gridIndex),
+//     distinctUntilChanged(),
+//     shareReplay(1)
+//   )
+
+//   const gridComputedData$: Observable<ComputedDataGrid> = combineLatest({
+//     computedData: observer.computedData$,
+//     gridIndex: gridIndex$,
+//   }).pipe(
+//     map((data) => {
+//       return data.computedData[data.gridIndex] ?? data.computedData[0]
+//     })
+//   )
+
+//   const gridDataFormatter$: Observable<DataFormatterGrid> = combineLatest({
+//     fullDataFormatter: observer.fullDataFormatter$,
+//     gridIndex: gridIndex$,
+//   }).pipe(
+//     map((data) => {
+//       const defaultGrid = data.fullDataFormatter.gridList[0] // ?? DATA_FORMATTER_MULTI_GRID_GRID_DEFAULT
+      
+//       return {
+//         type: 'grid',
+//         grid: {
+//           ...data.fullDataFormatter.gridList[data.gridIndex] ?? defaultGrid
+//         },
+//         container: {
+//           ...data.fullDataFormatter.container
+//         }
+//       }
+//     })
+//   )
+
+//   const gridDetail$ = combineLatest({
+//     multiGridEachDetail: observer.multiGridEachDetail$,
+//     gridIndex: gridIndex$,
+//   }).pipe(
+//     switchMap(async d => d),
+//     map(data => {
+//       return data.multiGridEachDetail[data.gridIndex] ?? data.multiGridEachDetail[0]
+//     }),
+//     shareReplay(1)
+//   )
+
+//   const isSeriesPositionSeprate$ = gridDetail$.pipe(
+//     switchMap(d => d.isSeriesPositionSeprate$)
+//   )
+
+//   const gridContainer$ = gridDetail$.pipe(
+//     switchMap(d => d.gridContainer$)
+//   )
+
+//   const gridAxesTransform$ = gridDetail$.pipe(
+//     switchMap(d => d.gridAxesTransform$)
+//   )
+
+//   const gridAxesReverseTransform$ = gridDetail$.pipe(
+//     switchMap(d => d.gridAxesReverseTransform$)
+//   )
+  
+//   const gridAxesSize$ = gridDetail$.pipe(
+//     switchMap(d => d.gridAxesSize$)
+//   )
+  
+//   const gridGraphicTransform$ = gridDetail$.pipe(
+//     switchMap(d => d.gridGraphicTransform$)
+//   )
+
+//   const gridGraphicReverseScale$ = gridDetail$.pipe(
+//     switchMap(d => d.gridGraphicReverseScale$)
+//   )
+
+//   const gridHighlight$ = gridDetail$.pipe(
+//     switchMap(d => d.gridHighlight$)
+//   )
+
+//   const existedSeriesLabels$ = gridDetail$.pipe(
+//     switchMap(d => d.existedSeriesLabels$)
+//   )
+
+//   const SeriesDataMap$ = gridDetail$.pipe(
+//     switchMap(d => d.SeriesDataMap$)
+//   )
+
+//   const GroupDataMap$ = gridDetail$.pipe(
+//     switchMap(d => d.GroupDataMap$)
+//   )
+
+//   const visibleComputedData$ = gridDetail$.pipe(
+//     switchMap(d => d.visibleComputedData$)
+//   )
+
+  
+
+//   return {
+//     gridComputedData$,
+//     gridDataFormatter$,
+//     gridAxesTransform$,
+//     gridGraphicTransform$,
+//     gridGraphicReverseScale$,
+//     gridAxesReverseTransform$,
+//     gridAxesSize$,
+//     gridHighlight$,
+//     existedSeriesLabels$,
+//     SeriesDataMap$,
+//     GroupDataMap$,
+//     visibleComputedData$,
+//     isSeriesPositionSeprate$,
+//     gridContainer$
+//   }
+// }
+
+// 可設定多個gridIndex的params
+interface MultiGridPluginParams {
+  gridIndexes: number[]
+}
+
+interface MultiGridDetailObservables extends ContextObserverGridDetail {
+  gridComputedData$: Observable<ComputedDataGrid>
+  gridDataFormatter$: Observable<DataFormatterGrid>
+}
+
+
+// 對應grid資料的plugin所需Observable（必須有gridIndexes）
+export const multiGridDetailObservables = (observer: ContextObserverMultiGrid<MultiGridPluginParams>): Observable<MultiGridDetailObservables[]> => {
+  const gridIndexes$ = observer.fullParams$.pipe(
+    map(fullParams => fullParams.gridIndexes),
+    distinctUntilChanged(),
+    shareReplay(1)
+  )
+  const destroy$ = new Subject()
+
+  return gridIndexes$.pipe(
+    map(gridIndexes => {
+      return gridIndexes.map(gridIndex => {
+        // 每次重新計算時，清除之前的訂閱
+        destroy$.next(undefined)
+
+        const gridIndex$ = of(gridIndex).pipe(
+          takeUntil(destroy$),
+          shareReplay(1)
+        )
+
+        const gridComputedData$: Observable<ComputedDataGrid> = combineLatest({
+          computedData: observer.computedData$,
+          gridIndex: gridIndex$,
+        }).pipe(
+          takeUntil(destroy$),
+          map((data) => {
+            return data.computedData[data.gridIndex] ?? data.computedData[0]
+          })
+        )
+      
+        const gridDataFormatter$: Observable<DataFormatterGrid> = combineLatest({
+          fullDataFormatter: observer.fullDataFormatter$,
+          gridIndex: gridIndex$,
+        }).pipe(
+          takeUntil(destroy$),
+          map((data) => {
+            const defaultGrid = data.fullDataFormatter.gridList[0] // ?? DATA_FORMATTER_MULTI_GRID_GRID_DEFAULT
+            
+            return {
+              type: 'grid',
+              grid: {
+                ...data.fullDataFormatter.gridList[data.gridIndex] ?? defaultGrid
+              },
+              container: {
+                ...data.fullDataFormatter.container
+              }
+            }
+          })
+        )
+      
+        const gridDetail$ = combineLatest({
+          multiGridEachDetail: observer.multiGridEachDetail$,
+          gridIndex: gridIndex$,
+        }).pipe(
+          takeUntil(destroy$),
+          switchMap(async d => d),
+          map(data => {
+            return data.multiGridEachDetail[data.gridIndex] ?? data.multiGridEachDetail[0]
+          }),
+          shareReplay(1)
+        )
+      
+        const isSeriesPositionSeprate$ = gridDetail$.pipe(
+          switchMap(d => d.isSeriesPositionSeprate$)
+        )
+      
+        const gridContainer$ = gridDetail$.pipe(
+          switchMap(d => d.gridContainer$)
+        )
+      
+        const gridAxesTransform$ = gridDetail$.pipe(
+          switchMap(d => d.gridAxesTransform$)
+        )
+      
+        const gridAxesReverseTransform$ = gridDetail$.pipe(
+          switchMap(d => d.gridAxesReverseTransform$)
+        )
+        
+        const gridAxesSize$ = gridDetail$.pipe(
+          switchMap(d => d.gridAxesSize$)
+        )
+        
+        const gridGraphicTransform$ = gridDetail$.pipe(
+          switchMap(d => d.gridGraphicTransform$)
+        )
+      
+        const gridGraphicReverseScale$ = gridDetail$.pipe(
+          switchMap(d => d.gridGraphicReverseScale$)
+        )
+      
+        const gridHighlight$ = gridDetail$.pipe(
+          switchMap(d => d.gridHighlight$)
+        )
+      
+        const existedSeriesLabels$ = gridDetail$.pipe(
+          switchMap(d => d.existedSeriesLabels$)
+        )
+      
+        const SeriesDataMap$ = gridDetail$.pipe(
+          switchMap(d => d.SeriesDataMap$)
+        )
+      
+        const GroupDataMap$ = gridDetail$.pipe(
+          switchMap(d => d.GroupDataMap$)
+        )
+      
+        const visibleComputedData$ = gridDetail$.pipe(
+          switchMap(d => d.visibleComputedData$)
+        )
+      
+        return {
+          gridComputedData$,
+          gridDataFormatter$,
+          gridAxesTransform$,
+          gridGraphicTransform$,
+          gridGraphicReverseScale$,
+          gridAxesReverseTransform$,
+          gridAxesSize$,
+          gridHighlight$,
+          existedSeriesLabels$,
+          SeriesDataMap$,
+          GroupDataMap$,
+          visibleComputedData$,
+          isSeriesPositionSeprate$,
+          gridContainer$
+        }
+      })
+    })
+  )
+}

package/src/multiGrid/plugins/MultiBarStack.ts

@@ -0,0 +1,60 @@
+import * as d3 from 'd3'
+import {
+  Subject } from 'rxjs'
+import {
+  defineMultiGridPlugin } from '@orbcharts/core'
+import { DEFAULT_MULTI_BAR_STACK_PARAMS } from '../defaults'
+import { createBaseBarStack } from '../../base/BaseBarStack'
+import { multiGridDetailObservables } from '../multiGridObservables'
+import { getClassName, getUniID } from '../../utils/orbchartsUtils'
+
+const pluginName = 'MultiBarStack'
+
+const gridClassName = getClassName(pluginName, 'grid')
+
+export const MultiBarStack = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_BAR_STACK_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] = createBaseBarStack(pluginName, {
+          selection: gridSelection,
+          computedData$: d.gridComputedData$,
+          visibleComputedData$: d.visibleComputedData$,
+          existedSeriesLabels$: d.existedSeriesLabels$,
+          SeriesDataMap$: d.SeriesDataMap$,
+          GroupDataMap$: d.GroupDataMap$,
+          fullParams$: observer.fullParams$,
+          fullDataFormatter$: d.gridDataFormatter$,
+          fullChartParams$: observer.fullChartParams$,
+          gridAxesTransform$: d.gridAxesTransform$,
+          gridGraphicTransform$: d.gridGraphicTransform$,
+          gridGraphicReverseScale$: d.gridGraphicReverseScale$,
+          gridAxesSize$: d.gridAxesSize$,
+          gridHighlight$: d.gridHighlight$,
+          gridContainer$: d.gridContainer$,
+          isSeriesPositionSeprate$: d.isSeriesPositionSeprate$,
+          event$: subject.event$ as Subject<any>,
+        })
+      })
+  })
+
+  return () => {
+    destroy$.next(undefined)
+    unsubscribeFnArr.forEach(fn => fn())
+  }
+})

package/src/multiGrid/plugins/MultiBars.ts

@@ -0,0 +1,59 @@
+import * as d3 from 'd3'
+import {
+  Subject } from 'rxjs'
+import {
+  defineMultiGridPlugin } from '@orbcharts/core'
+import { DEFAULT_MULTI_BARS_PARAMS } from '../defaults'
+import { createBaseBars } from '../../base/BaseBars'
+import { multiGridDetailObservables } from '../multiGridObservables'
+import { getClassName, getUniID } from '../../utils/orbchartsUtils'
+
+const pluginName = 'MultiBars'
+
+const gridClassName = getClassName(pluginName, 'grid')
+
+export const MultiBars = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_BARS_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] = createBaseBars(pluginName, {
+          selection: gridSelection,
+          computedData$: d.gridComputedData$,
+          visibleComputedData$: d.visibleComputedData$,
+          existedSeriesLabels$: d.existedSeriesLabels$,
+          SeriesDataMap$: d.SeriesDataMap$,
+          GroupDataMap$: d.GroupDataMap$,
+          fullParams$: observer.fullParams$,
+          fullChartParams$: observer.fullChartParams$,
+          gridAxesTransform$: d.gridAxesTransform$,
+          gridGraphicTransform$: d.gridGraphicTransform$,
+          gridGraphicReverseScale$: d.gridGraphicReverseScale$,
+          gridAxesSize$: d.gridAxesSize$,
+          gridHighlight$: d.gridHighlight$,
+          gridContainer$: d.gridContainer$,
+          isSeriesPositionSeprate$: d.isSeriesPositionSeprate$,
+          event$: subject.event$ as Subject<any>,
+        })
+      })
+  })
+
+  return () => {
+    destroy$.next(undefined)
+    unsubscribeFnArr.forEach(fn => fn())
+  }
+})

package/src/multiGrid/plugins/MultiBarsTriangle.ts

@@ -0,0 +1,58 @@
+import * as d3 from 'd3'
+import {
+  Subject } from 'rxjs'
+import {
+  defineMultiGridPlugin } from '@orbcharts/core'
+import { DEFAULT_MULTI_BARS_TRIANGLE_PARAMS } from '../defaults'
+import { createBaseBarsTriangle } from '../../base/BaseBarsTriangle'
+import { multiGridDetailObservables } from '../multiGridObservables'
+import { getClassName, getUniID } from '../../utils/orbchartsUtils'
+
+const pluginName = 'MultiBarsTriangle'
+
+const gridClassName = getClassName(pluginName, 'grid')
+
+export const MultiBarsTriangle = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_BARS_TRIANGLE_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] = createBaseBarsTriangle(pluginName, {
+          selection: gridSelection,
+          computedData$: d.gridComputedData$,
+          visibleComputedData$: d.visibleComputedData$,
+          existedSeriesLabels$: d.existedSeriesLabels$,
+          SeriesDataMap$: d.SeriesDataMap$,
+          GroupDataMap$: d.GroupDataMap$,
+          fullParams$: observer.fullParams$,
+          fullChartParams$: observer.fullChartParams$,
+          gridAxesTransform$: d.gridAxesTransform$,
+          gridGraphicTransform$: d.gridGraphicTransform$,
+          gridAxesSize$: d.gridAxesSize$,
+          gridHighlight$: d.gridHighlight$,
+          gridContainer$: d.gridContainer$,
+          isSeriesPositionSeprate$: d.isSeriesPositionSeprate$,
+          event$: subject.event$ as Subject<any>,
+        })
+      })
+  })
+
+  return () => {
+    destroy$.next(undefined)
+    unsubscribeFnArr.forEach(fn => fn())
+  }
+})

package/src/multiGrid/plugins/MultiDots.ts

@@ -0,0 +1,58 @@
+import * as d3 from 'd3'
+import {
+  Subject } from 'rxjs'
+import {
+  defineMultiGridPlugin } from '@orbcharts/core'
+import { DEFAULT_MULTI_DOTS_PARAMS } from '../defaults'
+import { createBaseDots } from '../../base/BaseDots'
+import { multiGridDetailObservables } from '../multiGridObservables'
+import { getClassName, getUniID } from '../../utils/orbchartsUtils'
+
+const pluginName = 'MultiDots'
+
+const gridClassName = getClassName(pluginName, 'grid')
+
+export const MultiDots = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_DOTS_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] = createBaseDots(pluginName, {
+          selection: gridSelection,
+          computedData$: d.gridComputedData$,
+          visibleComputedData$: d.visibleComputedData$,
+          existedSeriesLabels$: d.existedSeriesLabels$,
+          SeriesDataMap$: d.SeriesDataMap$,
+          GroupDataMap$: d.GroupDataMap$,
+          fullParams$: observer.fullParams$,
+          fullChartParams$: observer.fullChartParams$,
+          gridAxesTransform$: d.gridAxesTransform$,
+          gridGraphicTransform$: d.gridGraphicTransform$,
+          gridGraphicReverseScale$: d.gridGraphicReverseScale$,
+          gridAxesSize$: d.gridAxesSize$,
+          gridHighlight$: d.gridHighlight$,
+          gridContainer$: d.gridContainer$,
+          event$: subject.event$ as Subject<any>,
+        })
+      })
+  })
+
+  return () => {
+    destroy$.next(undefined)
+    unsubscribeFnArr.forEach(fn => fn())
+  }
+})

package/src/multiGrid/plugins/MultiGridLegend.ts

@@ -7,7 +7,7 @@ import {
   Observable,
   Subject } from 'rxjs'
 import {
-  defineMultiGridPlugin } from '@orbcharts/core'
+  defineMultiGridPlugin, mergeOptionsWithDefault } from '@orbcharts/core'
 import { DEFAULT_MULTI_GRID_LEGEND_PARAMS } from '../defaults'
 import { createBaseLegend } from '../../base/BaseLegend'
 import type { BaseLegendParams } from '../../base/BaseLegend'
@@ -18,7 +18,7 @@ export const MultiGridLegend = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_G
   
   const destroy$ = new Subject()
 
-  const seriesLabels$ = observer.multiGrid$.pipe(
+  const seriesLabels$ = observer.multiGridEachDetail$.pipe(
     takeUntil(destroy$),
     map(multiGrid => {
       const seriesLabelsObservableArr = multiGrid.map((grid, gridIndex) => {
@@ -35,7 +35,7 @@ export const MultiGridLegend = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_G
 
   const seriesList$ = combineLatest({
     fullParams: observer.fullParams$,
-    multiGrid: observer.multiGrid$,
+    multiGrid: observer.multiGridEachDetail$,
     computedData: observer.computedData$,
   }).pipe(
     takeUntil(destroy$),
@@ -45,13 +45,11 @@ export const MultiGridLegend = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_G
       return data.computedData
         .map((gridData, gridIndex) => {
           // 這個grid全部series要套用的圖例列點樣式
-          const gridListStyle = data.fullParams.gridList[gridIndex]
-            ? data.fullParams.gridList[gridIndex]
-            : {
-              listRectWidth: data.fullParams.listRectWidth,
-              listRectHeight: data.fullParams.listRectHeight,
-              listRectRadius: data.fullParams.listRectRadius,
-            }
+          const gridListStyle = mergeOptionsWithDefault(data.fullParams.gridList[gridIndex] ?? {}, {
+            listRectWidth: data.fullParams.listRectWidth,
+            listRectHeight: data.fullParams.listRectHeight,
+            listRectRadius: data.fullParams.listRectRadius,
+          })
           // series
           return gridData.map(d => gridListStyle)
         })
@@ -65,6 +63,7 @@ export const MultiGridLegend = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_G
     seriesList: seriesList$
   }).pipe(
     takeUntil(destroy$),
+    switchMap(async d => d),
     map(d => {
       return {
         ...d.fullParams,

package/src/multiGrid/plugins/MultiGroupAxis.ts

@@ -0,0 +1,53 @@
+import * as d3 from 'd3'
+import {
+  Subject } from 'rxjs'
+import {
+  defineMultiGridPlugin } from '@orbcharts/core'
+import { DEFAULT_MULTI_GROUP_AXIS_PARAMS } from '../defaults'
+import { createBaseGroupAxis } from '../../base/BaseGroupAxis'
+import { multiGridDetailObservables } from '../multiGridObservables'
+import { getClassName, getUniID } from '../../utils/orbchartsUtils'
+
+const pluginName = 'MultiGroupAxis'
+
+const gridClassName = getClassName(pluginName, 'grid')
+
+export const MultiGroupAxis = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_GROUP_AXIS_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] = createBaseGroupAxis(pluginName, {
+          selection: gridSelection,
+          computedData$: d.gridComputedData$,
+          fullParams$: observer.fullParams$,
+          fullDataFormatter$: d.gridDataFormatter$,
+          fullChartParams$: observer.fullChartParams$,  
+          gridAxesTransform$: d.gridAxesTransform$,
+          gridAxesReverseTransform$: d.gridAxesReverseTransform$,
+          gridAxesSize$: d.gridAxesSize$,
+          gridContainer$: d.gridContainer$,
+          isSeriesPositionSeprate$: d.isSeriesPositionSeprate$,
+        })
+      })
+  })
+
+  return () => {
+    destroy$.next(undefined)
+    unsubscribeFnArr.forEach(fn => fn())
+  }
+})

package/src/multiGrid/plugins/MultiLines.ts

@@ -0,0 +1,58 @@
+import * as d3 from 'd3'
+import {
+  Subject } from 'rxjs'
+import {
+  defineMultiGridPlugin } from '@orbcharts/core'
+
+import { DEFAULT_MULTI_LINES_PARAMS } from '../defaults'
+import { createBaseLines } from '../../base/BaseLines'
+import { multiGridDetailObservables } from '../multiGridObservables'
+import { getClassName, getUniID } from '../../utils/orbchartsUtils'
+
+const pluginName = 'MultiLines'
+
+const gridClassName = getClassName(pluginName, 'grid')
+
+export const MultiLines = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_LINES_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] = createBaseLines(pluginName, {
+          selection: gridSelection,
+          computedData$: d.gridComputedData$,
+          existedSeriesLabels$: d.existedSeriesLabels$,
+          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$,
+          event$: subject.event$ as Subject<any>,
+        })
+      })
+  })
+
+  return () => {
+    destroy$.next(undefined)
+    unsubscribeFnArr.forEach(fn => fn())
+  }
+})