@orbcharts/core 3.0.0-alpha.42 → 3.0.0-alpha.44

package/src/series/computeSeriesData.ts

@@ -1,149 +1,86 @@
 import type { DataSeries, DataSeriesDatum } from '../types/DataSeries'
 import type { ComputedDataFn } from '../types/ComputedData'
-import type { ComputedDataSeries, ComputedDatumSeries } from '../types/ComputedDataSeries'
+import type { ComputedDatumSeries } from '../types/ComputedDataSeries'
 import { formatValueToLabel, createDefaultDatumId, createDefaultSeriesLabel, seriesColorPredicate } from '../utils/orbchartsUtils'
 
-interface SortValue {
-  rowIndex: number
-  columnIndex: number
-  index: number
-  datum: number | DataSeriesDatum
-}
-
-type GetSortedIndex = (computedDataSeries: ComputedDatumSeries[], rowIndex: number, columnIndex: number) => number
-
-function createSortedIndexMap (data: DataSeries, sort: (a: number | DataSeriesDatum, b: number | DataSeriesDatum) => number): Map<string, number> {
-  
-  const SortedIndexMap: Map<string, number> = new Map() // Map<[rowIndex, columnIndex], sortedIndex>
-  
-  let _data = Object.assign([], data) as DataSeries
-  // 建立排序所需資料的物件
-  let sortValueData: SortValue[] = []
-  _data.forEach((d, i) => {
-    if (Array.isArray(d)) {
-      d.forEach((_d, _i) => {
-        sortValueData.push({
-          rowIndex: i,
-          columnIndex: _i,
-          index: -1,
-          datum: _d
-        })
-      })
-    } else {
-      sortValueData.push({
-        rowIndex: i,
-        columnIndex: 0,
-        index: -1,
-        datum: d
-      })
-    }
-  })
-  // 排序
-  sortValueData.sort((a, b) => sort(a.datum, b.datum))
-  // 取得排序後的index
-  sortValueData = sortValueData.map((d, i) => {
-    return {
-      ...d,
-      index: i
-    }
-  })
-  // 建立SortedIndexMap
-  sortValueData.forEach(d => {
-    SortedIndexMap.set(String([d.rowIndex, d.columnIndex]), d.index)
-  })
-
-  return SortedIndexMap
-}
-
 export const computeSeriesData: ComputedDataFn<'series'> = (context) => {
   const { data = [], dataFormatter, chartParams } = context
   if (!data.length) {
     return []
   }
 
-  const computedDataSeries: ComputedDatumSeries[] = []
+  let computedDataSeries: ComputedDatumSeries[][] = []
   
   try {
-    // 取得排序後的索引
-    const getSortedIndex: GetSortedIndex = ((hasSort: boolean) => {
-      if (hasSort) {
-        // 資料索引對應排序後的索引  Map<[rowIndex, columnIndex], sortedIndex>
-        const SortedIndexMap: Map<string, number> = createSortedIndexMap(data, dataFormatter.sort)
-        return (computedDataSeries: ComputedDatumSeries[], rowIndex: number, columnIndex: number) => {
-          return SortedIndexMap.get(String([rowIndex, columnIndex]))
-        }
-      } else {
-        return (computedDataSeries: ComputedDatumSeries[], rowIndex: number, columnIndex: number) => {
-          return computedDataSeries.length
-        }
-      }
-    })(dataFormatter.sort != null)
-
-    // 資料索引對應排序後的索引  Map<[rowIndex, columnIndex], sortedIndex>
-    // let SortedIndexMap: Map<string, number> = new Map()
-    // if (dataFormatter.sort) {
-    //   SortedIndexMap = createSortedIndexMap(data, dataFormatter.sort)
-    // }
 
-    const createComputedDatumSeries = (detailData: number | DataSeriesDatum, rowIndex: number, columnIndex: number, currentIndex: number, sortedIndex: number): ComputedDatumSeries => {
-      const defaultId = createDefaultDatumId(dataFormatter.type, rowIndex, columnIndex)
-      // const seriesLabel = dataFormatter.mapSeries(detailData, rowIndex, columnIndex, context)
-      const seriesLabel = dataFormatter.seriesLabels[rowIndex] || createDefaultSeriesLabel('series', rowIndex)
-      // const color = dataFormatter.colorsPredicate(detailData, rowIndex, columnIndex, context)
-      const color = seriesColorPredicate(rowIndex, chartParams)
-      const visible = dataFormatter.visibleFilter(detailData, rowIndex, columnIndex, context)
-      if (typeof detailData === 'number') {
+    const createComputedDatumSeries = (seriesData: number | DataSeriesDatum, seriesIndex: number, itemIndex: number, currentIndex: number): ComputedDatumSeries => {
+      const defaultId = createDefaultDatumId(dataFormatter.type, seriesIndex, itemIndex)
+      const seriesLabel = dataFormatter.seriesLabels[seriesIndex] || createDefaultSeriesLabel('series', seriesIndex)
+      const color = seriesColorPredicate(seriesIndex, chartParams)
+      if (typeof seriesData === 'number') {
         return {
           id: defaultId,
           index: currentIndex,
-          sortedIndex,
+          seq: 0, // 先給預設值
           label: defaultId,
           description: '',
-          // tooltipContent: dataFormatter.tooltipContentFormat(detailData, rowIndex, columnIndex, context),
           data: {},
-          value: detailData,
-          // valueLabel: formatValueToLabel(detailData, dataFormatter.valueFormat),
-          seriesIndex: rowIndex,
+          value: seriesData,
+          seriesIndex: seriesIndex,
           seriesLabel,
           color,
-          visible
+          visible: true // 先給預設值
         }
       } else {
         return {
-          id: detailData.id ? detailData.id : defaultId,
+          id: seriesData.id ? seriesData.id : defaultId,
           index: currentIndex,
-          sortedIndex,
-          label: detailData.label ? detailData.label : defaultId,
-          description: detailData.description,
-          // tooltipContent: detailData.tooltipContent ? detailData.tooltipContent : dataFormatter.tooltipContentFormat(detailData, rowIndex, columnIndex, context),
-          data: detailData.data ?? {},
-          value: detailData.value,
-          // valueLabel: formatValueToLabel(detailData.value, dataFormatter.valueFormat),
-          seriesIndex: rowIndex,
+          seq: 0, // 先給預設值
+          label: seriesData.label ? seriesData.label : defaultId,
+          description: seriesData.description,
+          data: seriesData.data ?? {},
+          value: seriesData.value,
+          seriesIndex: seriesIndex,
           seriesLabel,
           color,
-          visible
+          visible: true // 先給預設值
         }
       }
     }
     
-    data.forEach((mainData, rowIndex) => {
-      if (Array.isArray(mainData)) {
-        mainData.forEach((detailData, columnIndex) => {
-          const sortedIndex = getSortedIndex(computedDataSeries, rowIndex, columnIndex)
-          const datum = createComputedDatumSeries(detailData, rowIndex, columnIndex, computedDataSeries.length, sortedIndex)
-          computedDataSeries.push(datum)
-        })
-      } else {
-        const sortedIndex = getSortedIndex(computedDataSeries, rowIndex, 0)
-        const datum = createComputedDatumSeries(mainData, rowIndex, 0, computedDataSeries.length, sortedIndex) // 只有一維陣列所以columnIndex為0
-        computedDataSeries.push(datum)
-      }
-    })
+    computedDataSeries = data
+      .map((seriesData, seriesIndex) => {
+        if (Array.isArray(seriesData)) {
+          return seriesData.map((item, itemIndex) => 
+            createComputedDatumSeries(item, seriesIndex, itemIndex, computedDataSeries.length + itemIndex)
+          )
+        } else {
+          return createComputedDatumSeries(seriesData, seriesIndex, 0, computedDataSeries.length)
+        }
+      })
+      // 攤為一維陣列
+      .flat()
+      // 排序後給 seq
+      .sort(dataFormatter.sort ?? undefined)
+      .map((datum, index) => {
+        datum.seq = index
+        return datum
+      })
+      .map(datum => {
+        datum.visible = dataFormatter.visibleFilter(datum, context)
+        return datum
+      })
+      // 恢復原排序
+      .sort((a, b) => a.index - b.index)
+      // 依seriesIndex分組（二維陣列）
+      .reduce((acc, datum) => {
+        if (!acc[datum.seriesIndex]) {
+          acc[datum.seriesIndex] = []
+        }
+        acc[datum.seriesIndex].push(datum)
+        return acc
+      }, [])
 
-    // if (dataFormatter.sort != null) {
-    //   computedDataSeries.sort((a, b) => a.sortedIndex - b.sortedIndex)
-    // }
   } catch (e) {
     // console.error(e)
     throw Error(e)

package/src/series/createSeriesContextObserver.ts

@@ -1,26 +1,74 @@
-import { shareReplay } from 'rxjs'
+import { map, shareReplay } from 'rxjs'
 import type { ContextObserverFn } from '../types'
 import {
   seriesDataMapObservable,
   groupDataMapObservable } from '../utils/observables'
 import { highlightObservable, textSizePxObservable } from '../utils/observables'
 
+import { separateSeriesObservable, visibleComputedDataObservable, computedLayoutDataObservable, seriesLabelsObservable, seriesContainerPositionObservable, seriesContainerPositionMapObservable } from './seriesObservables'
+
 export const createSeriesContextObserver: ContextObserverFn<'series'> = ({ subject, observer }) => {
 
   const textSizePx$ = textSizePxObservable(observer.fullChartParams$).pipe(
     shareReplay(1)
   )
 
+  const separateSeries$ = separateSeriesObservable({
+    fullDataFormatter$: observer.fullDataFormatter$
+  })
+
+  const visibleComputedData$ = visibleComputedDataObservable({
+    computedData$: observer.computedData$,
+  })
+
+  const computedLayoutData$ = computedLayoutDataObservable({
+    computedData$: observer.computedData$,
+    fullDataFormatter$: observer.fullDataFormatter$
+  }).pipe(
+    shareReplay(1)
+  )
+
+  const visibleComputedLayoutData$ = visibleComputedDataObservable({
+    computedData$: computedLayoutData$,
+  })
+
+  const datumList$ = observer.computedData$.pipe(
+    map(d => d.flat())
+  ).pipe(
+    shareReplay(1)
+  )
+
   const seriesHighlight$ = highlightObservable({
-    datumList$: observer.computedData$,
+    datumList$,
     fullChartParams$: observer.fullChartParams$,
     event$: subject.event$
   }).pipe(
     shareReplay(1)
   )
 
+  const seriesLabels$ = seriesLabelsObservable({
+    computedData$: observer.computedData$,
+  })
+
+
   const SeriesDataMap$ = seriesDataMapObservable({
-    datumList$: observer.computedData$
+    datumList$
+  }).pipe(
+    shareReplay(1)
+  )
+
+  const seriesContainerPosition$ = seriesContainerPositionObservable({
+    computedData$: observer.computedData$,
+    fullDataFormatter$: observer.fullDataFormatter$,
+    layout$: observer.layout$,
+  }).pipe(
+    shareReplay(1)
+  )
+
+  const SeriesContainerPositionMap$ = seriesContainerPositionMapObservable({
+    seriesContainerPosition$: seriesContainerPosition$,
+    seriesLabels$: seriesLabels$,
+    separateSeries$: separateSeries$,
   }).pipe(
     shareReplay(1)
   )
@@ -32,7 +80,14 @@ export const createSeriesContextObserver: ContextObserverFn<'series'> = ({ subje
     computedData$: observer.computedData$,
     layout$: observer.layout$,
     textSizePx$,
+    visibleComputedData$,
+    visibleComputedLayoutData$,
+    separateSeries$,
+    computedLayoutData$,
     seriesHighlight$,
-    SeriesDataMap$
+    seriesLabels$,
+    SeriesDataMap$,
+    seriesContainerPosition$,
+    SeriesContainerPositionMap$,
   }
 }

package/src/series/seriesObservables.ts

@@ -12,13 +12,165 @@ import {
 import type {
   ChartParams,
   ComputedDatumSeries,
-  ComputedDataTypeMap } from '../types'
-import { highlightObservable } from '../utils/observables'
-
-// export const seriesHighlightObservable = ({ computedData$, fullChartParams$, event$ }: {
-//   computedData$: Observable<ComputedDataTypeMap<'series'>>
-//   fullChartParams$: Observable<ChartParams>
-//   event$: Subject<any>
-// }): Observable<string[]> => {
-//   return highlightObservable ({ datumList$: computedData$, fullChartParams$, event$ })
-// }
+  ComputedDataTypeMap,
+  DataFormatterTypeMap,
+  SeriesContainerPosition,
+  Layout } from '../types'
+import { calcSeriesContainerLayout } from '../utils/orbchartsUtils'
+
+export const separateSeriesObservable = ({ fullDataFormatter$ }: { fullDataFormatter$: Observable<DataFormatterTypeMap<'series'>> }) => {
+  return fullDataFormatter$.pipe(
+    map(data => data.separateSeries),
+    distinctUntilChanged(),
+  )
+}
+
+export const seriesLabelsObservable = ({ computedData$ }: { computedData$: Observable<ComputedDataTypeMap<'series'>> }) => {
+  return computedData$.pipe(
+    map(data => {
+      return data
+        .filter(series => series.length)
+        .map(series => {
+          return series[0].seriesLabel
+        })
+    }),
+    distinctUntilChanged((a, b) => {
+      return JSON.stringify(a).length === JSON.stringify(b).length
+    }),
+  )
+}
+
+export const visibleComputedDataObservable = ({ computedData$ }: { computedData$: Observable<ComputedDataTypeMap<'series'>> }) => {
+  return computedData$.pipe(
+    map(data => {
+      return data.map(series => {
+        return series.filter(datum => datum.visible != false)
+      })
+    })
+  )
+}
+
+export const computedLayoutDataObservable = ({ computedData$, fullDataFormatter$ }: {
+  computedData$: Observable<ComputedDataTypeMap<'series'>>,
+  fullDataFormatter$: Observable<DataFormatterTypeMap<'series'>>
+}) => {
+  return combineLatest({
+    computedData: computedData$,
+    fullDataFormatter: fullDataFormatter$
+  }).pipe(
+    switchMap(async (d) => d),
+    map(data => {
+      const sumData: ComputedDatumSeries[][] = data.fullDataFormatter.sumSeries == true
+        ? data.computedData.map(d => {
+            return [
+              // 加總為一筆資料
+              d.reduce((acc, current) => {
+                if (acc == null) {
+                  return current // 取得第一筆資料
+                }
+                acc.value = acc.value + current.value
+                return acc
+              }, null)
+            ]
+          })
+        : data.computedData
+      
+      return data.fullDataFormatter.separateSeries == true
+        // 有拆分的話每個series為一組
+        ? sumData
+          .map(series => {
+            return series.sort((a, b) => a.seq - b.seq)
+          })
+        // 無拆分的話所有資料為一組
+        : [
+          sumData
+            .flat()
+            .sort((a, b) => a.seq - b.seq)
+        ]
+    })
+  )
+}
+
+
+// 所有container位置（對應series）
+export const seriesContainerPositionObservable = ({ computedData$, fullDataFormatter$, layout$ }: {
+  computedData$: Observable<ComputedDataTypeMap<'series'>>
+  fullDataFormatter$: Observable<DataFormatterTypeMap<'series'>>
+  layout$: Observable<Layout>
+}): Observable<SeriesContainerPosition[]> => {
+
+  const gridContainerPosition$ = combineLatest({
+    computedData: computedData$,
+    fullDataFormatter: fullDataFormatter$,
+    layout: layout$,
+  }).pipe(
+    switchMap(async (d) => d),
+    map(data => {
+      
+      if (data.fullDataFormatter.separateSeries) {
+        // -- 依slotIndexes計算 --
+        return calcSeriesContainerLayout(data.layout, data.fullDataFormatter.container, data.computedData.length)
+        // return data.computedData.map((seriesData, seriesIndex) => {
+        //   const columnIndex = seriesIndex % data.fullDataFormatter.container.columnAmount
+        //   const rowIndex = Math.floor(seriesIndex / data.fullDataFormatter.container.columnAmount)
+        //   const { startX, startY, centerX, centerY, width, height } = calcSeriesContainerPosition(data.layout, data.fullDataFormatter.container, rowIndex, columnIndex)
+        //   return {
+        //     slotIndex: seriesIndex,
+        //     rowIndex,
+        //     columnIndex,
+        //     startX,
+        //     startY,
+        //     centerX,
+        //     centerY,
+        //     width,
+        //     height,
+        //   }
+        // })
+      } else {
+        // -- 無拆分 --
+        return calcSeriesContainerLayout(data.layout, data.fullDataFormatter.container, 1)
+        // const columnIndex = 0
+        // const rowIndex = 0
+        // return data.computedData.map((seriesData, seriesIndex) => {
+        //   const { startX, startY, centerX, centerY, width, height } = calcSeriesContainerPosition(data.layout, data.fullDataFormatter.container, rowIndex, columnIndex)
+        //   return {
+        //     slotIndex: 0,
+        //     rowIndex,
+        //     columnIndex,
+        //     startX,
+        //     startY,
+        //     centerX,
+        //     centerY,
+        //     width,
+        //     height,
+        //   }
+        // })
+      }
+    })
+  )
+
+  return gridContainerPosition$
+}
+
+export const seriesContainerPositionMapObservable = ({ seriesContainerPosition$, seriesLabels$, separateSeries$ }: {
+  seriesContainerPosition$: Observable<SeriesContainerPosition[]>
+  seriesLabels$: Observable<string[]>
+  separateSeries$: Observable<boolean>
+}) => {
+  return combineLatest({
+    seriesContainerPosition: seriesContainerPosition$,
+    seriesLabels: seriesLabels$,
+    separateSeries: separateSeries$,
+  }).pipe(
+    switchMap(async (d) => d),
+    map(data => {
+      return data.separateSeries
+        ? new Map<string, SeriesContainerPosition>(data.seriesLabels.map((seriesLabel, seriesIndex) => {
+          return [seriesLabel, data.seriesContainerPosition[seriesIndex] ?? data.seriesContainerPosition[0]]
+        }))
+        : new Map<string, SeriesContainerPosition>(data.seriesLabels.map((seriesLabel, seriesIndex) => {
+          return [seriesLabel, data.seriesContainerPosition[0]]
+        }))
+    })
+  )
+}

package/src/tree/computeTreeData.ts

@@ -85,7 +85,6 @@ export const computeTreeData: ComputedDataFn<'tree'> = (context) => {
     
     const formatBranchData = (branch: DataTreeObj, level: number, seq: number): ComputedDataTree => {
       const childLayer = level + 1
-      const visible = dataFormatter.visibleFilter(branch, level, seq, context)
       const categoryLabel: string | null = branch.categoryLabel ?? null
       let categoryIndex = 0
       if (categoryLabel != null) {
@@ -97,7 +96,7 @@ export const computeTreeData: ComputedDataFn<'tree'> = (context) => {
 
       const currentIndex = index
       index++
-      return {
+      const formattedBranchData: ComputedDataTree = {
         id: branch.id,
         index: currentIndex,
         level,
@@ -110,12 +109,16 @@ export const computeTreeData: ComputedDataFn<'tree'> = (context) => {
         data: branch.data ?? {},
         // tooltipContent: branch.tooltipContent ? branch.tooltipContent : dataFormatter.tooltipContentFormat(branch, level, seq, context),
         value: branch.value,
-        visible,
+        visible: true, // 先給預設值
         children: (branch.children ?? []).map((d, i) => {
           // 遞迴
           return formatBranchData(d, childLayer, i)
         })
       }
+
+      formattedBranchData.visible = dataFormatter.visibleFilter(formattedBranchData, context)
+
+      return formattedBranchData
     }
     computedBranchData = formatBranchData(dataTreeObj, 0, 0)
   } catch (e) {

package/src/types/ComputedData.ts

@@ -45,6 +45,7 @@ export interface ComputedDatumSeriesValue {
   color: string
   seriesIndex: number
   seriesLabel: string
+  seq: number
 }
 
 // datum - 矩陣資料

package/src/types/ComputedDataGrid.ts

@@ -6,9 +6,9 @@ export interface ComputedDatumGrid
   // gridIndex: number
   // groupIndex: number
   // groupLabel: string
-  axisX: number
-  axisY: number
-  axisYFromZero: number
+  // axisX: number
+  // axisY: number
+  // axisYFromZero: number
 }
 
 export type ComputedDataGrid = ComputedDatumGrid[][]

package/src/types/ComputedDataSeries.ts

@@ -2,7 +2,7 @@ import { ComputedDatumBase, ComputedDatumSeriesValue } from './ComputedData'
 
 export interface ComputedDatumSeries
   extends ComputedDatumBase, ComputedDatumSeriesValue {
-  sortedIndex: number
+  
 }
 
-export type ComputedDataSeries = ComputedDatumSeries[]
+export type ComputedDataSeries = ComputedDatumSeries[][]

package/src/types/ContextObserverGrid.ts

@@ -3,29 +3,37 @@ import type { ContextObserverBase } from './ContextObserver'
 import type { ComputedDataGrid, ComputedDatumGrid } from './ComputedDataGrid'
 import type { TransformData } from './TransformData'
 
-export interface ContextObserverGrid<PluginParams>
-  extends
-    ContextObserverBase<'grid', PluginParams>,
-    ContextObserverGridDetail {
-      textSizePx$: Observable<number>
-    }
+export interface ContextObserverGrid<PluginParams> extends
+ContextObserverBase<'grid', PluginParams>, ContextObserverGridDetail {
+  textSizePx$: Observable<number>
+}
 
 export interface ContextObserverGridDetail {
-  gridContainer$: Observable<ContainerPosition[]>
+  gridContainerPosition$: Observable<GridContainerPosition[]>
   gridAxesTransform$: Observable<TransformData>
   gridAxesReverseTransform$: Observable<TransformData>
   gridGraphicTransform$: Observable<TransformData>
   gridGraphicReverseScale$: Observable<[number, number][]>
   gridAxesSize$: Observable<{ width: number; height: number; }>
   gridHighlight$: Observable<ComputedDatumGrid[]>
-  existSeriesLabels$: Observable<string[]>
+  seriesLabels$: Observable<string[]>
   SeriesDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
   GroupDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
+  computedLayoutData$: Observable<ComputedLayoutDataGrid>
   visibleComputedData$: Observable<ComputedDataGrid>
-  isSeriesPositionSeprate$: Observable<boolean>
+  visibleComputedLayoutData$: Observable<ComputedLayoutDataGrid>
+  // isSeriesSeprate$: Observable<boolean>
+}
+
+export type ComputedLayoutDataGrid = ComputedLayoutDatumGrid[][]
+
+export interface ComputedLayoutDatumGrid extends ComputedDatumGrid {
+  axisX: number
+  axisY: number
+  axisYFromZero: number
 }
 
-export interface ContainerPosition {
+export interface GridContainerPosition {
   slotIndex: number
   rowIndex: number
   columnIndex: number

package/src/types/ContextObserverMultiGrid.ts

@@ -1,28 +1,16 @@
 import { Observable } from 'rxjs'
 import type { ContextObserverBase } from './ContextObserver'
 import type { ComputedDataGrid, ComputedDatumGrid } from './ComputedDataGrid'
-import type { ContainerPosition } from './ContextObserverGrid'
-import type { TransformData } from './TransformData'
+import type { DataFormatterGrid } from './DataFormatterGrid'
 import type { ContextObserverGridDetail } from './ContextObserverGrid'
 
 export interface ContextObserverMultiGrid<PluginParams> extends ContextObserverBase<'multiGrid', PluginParams> {
   textSizePx$: Observable<number>
-  multiGridEachDetail$: Observable<ContextObserverGridDetail[]>
-  multiGridContainer$: Observable<ContainerPosition[][]>
+  multiGridEachDetail$: Observable<ContextObserverMultiGridDetail[]>
 }
 
-// export interface MultiGridObservableAll {
-//   isSeriesPositionSeprate$: Observable<boolean>
-//   gridContainer$: Observable<ContainerPosition[]>
-//   gridAxesTransform$: Observable<TransformData>
-//   gridAxesReverseTransform$: Observable<TransformData>
-//   gridGraphicTransform$: Observable<TransformData>
-//   gridGraphicReverseScale$: Observable<[number, number][]>
-//   gridAxesSize$: Observable<{ width: number; height: number; }>
-//   gridHighlight$: Observable<string[]>
-//   existSeriesLabels$: Observable<string[]>
-//   SeriesDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
-//   GroupDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
-//   visibleComputedData$: Observable<ComputedDataGrid>
-// }
 
+export interface ContextObserverMultiGridDetail extends ContextObserverGridDetail {
+  computedData$: Observable<ComputedDataGrid>
+  dataFormatter$: Observable<DataFormatterGrid>
+}

package/src/types/ContextObserverSeries.ts

@@ -4,6 +4,26 @@ import type { ComputedDatumSeries } from './ComputedDataSeries'
 
 export interface ContextObserverSeries<PluginParams> extends ContextObserverBase<'series', PluginParams> {
   textSizePx$: Observable<number>
+  separateSeries$: Observable<boolean>
+  visibleComputedData$: Observable<ComputedDatumSeries[][]>
+  computedLayoutData$: Observable<ComputedDatumSeries[][]>
+  visibleComputedLayoutData$: Observable<ComputedDatumSeries[][]>
   seriesHighlight$: Observable<ComputedDatumSeries[]>
+  seriesLabels$: Observable<string[]>
   SeriesDataMap$: Observable<Map<string, ComputedDatumSeries[]>>
-}
+  seriesContainerPosition$: Observable<SeriesContainerPosition[]>
+  SeriesContainerPositionMap$: Observable<Map<string, SeriesContainerPosition>>
+}
+
+export interface SeriesContainerPosition {
+  slotIndex: number
+  rowIndex: number
+  columnIndex: number
+  // translate: [number, number]
+  startX: number
+  startY: number
+  centerX: number
+  centerY: number
+  width: number
+  height: number
+}