@orbcharts/core 3.0.0-alpha.25 → 3.0.0-alpha.27

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

@@ -1,5 +1,5 @@
 import { DataGridDatum, DataGridValue } from './DataGrid';
-import { DataFormatterBase, DataFormatterValueAxis, DataFormatterGroupAxis, DataFormatterContext } from './DataFormatter';
+import { DataFormatterBase, DataFormatterBasePartial, DataFormatterValueAxis, DataFormatterGroupAxis, DataFormatterContext } from './DataFormatter';
 
 export type SeriesType = 'row' | 'column';
 export interface DataFormatterGrid extends DataFormatterBase<'grid'> {
@@ -8,11 +8,12 @@ export interface DataFormatterGrid extends DataFormatterBase<'grid'> {
     groupAxis: DataFormatterGroupAxis;
     colorsPredicate: (datum: DataGridDatum | DataGridValue, rowIndex: number, columnIndex: number, context: DataFormatterContext<'grid'>) => string;
 }
-export type DataFormatterGridPartial = Partial<DataFormatterGrid> & Partial<{
-    grid: Partial<DataFormatterGridGrid>;
-    valueAxis: Partial<DataFormatterValueAxis>;
-    groupAxis: Partial<DataFormatterGroupAxis>;
-}>;
+export interface DataFormatterGridPartial extends DataFormatterBasePartial<'grid'> {
+    grid?: Partial<DataFormatterGridGrid>;
+    valueAxis?: Partial<DataFormatterValueAxis>;
+    groupAxis?: Partial<DataFormatterGroupAxis>;
+    colorsPredicate?: (datum: DataGridDatum | DataGridValue, rowIndex: number, columnIndex: number, context: DataFormatterContext<'grid'>) => string;
+}
 export interface DataFormatterGridGrid {
     rowLabels: string[];
     columnLabels: string[];

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

@@ -1,16 +1,9 @@
-import { DataGridDatum, DataGridValue } from './DataGrid';
-import { DataFormatterGridGrid } from './DataFormatterGrid';
-import { DataFormatterBase, DataFormatterValueAxis, DataFormatterGroupAxis, DataFormatterContext } from './DataFormatter';
+import { DataFormatterGrid } from './DataFormatterGrid';
+import { DataFormatterBase, DataFormatterBasePartial } from './DataFormatter';
 
 export interface DataFormatterMultiGrid extends DataFormatterBase<'multiGrid'> {
-    multiGrid: Array<DataFormatterMultiGridMultiGrid>;
+    multiGrid: Array<DataFormatterGrid>;
 }
-export type DataFormatterMultiGridPartial = Partial<DataFormatterMultiGrid> & Partial<{
-    multiGrid: Array<Partial<DataFormatterMultiGridMultiGrid>>;
-}>;
-export interface DataFormatterMultiGridMultiGrid {
-    grid: DataFormatterGridGrid;
-    valueAxis: DataFormatterValueAxis;
-    groupAxis: DataFormatterGroupAxis;
-    colorsPredicate: (datum: DataGridDatum | DataGridValue, rowIndex: number, columnIndex: number, context: DataFormatterContext<'grid'>) => string;
+export interface DataFormatterMultiGridPartial extends DataFormatterBasePartial<'multiGrid'> {
+    multiGrid?: Array<Partial<DataFormatterGrid>>;
 }

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

@@ -1,13 +1,15 @@
-import { DataFormatterBase, DataFormatterValueAxis } from './DataFormatter';
+import { DataFormatterBase, DataFormatterBasePartial, DataFormatterValueAxis } from './DataFormatter';
 
 export interface DataFormatterMultiValue extends DataFormatterBase<'multiValue'> {
     multiValue: Array<DataFormatterMultiValueMultiValue>;
     xAxis: DataFormatterValueAxis;
     yAxis: DataFormatterValueAxis;
 }
-export type DataFormatterMultiValuePartial = Partial<DataFormatterMultiValue> & Partial<{
-    multiValue: Array<Partial<DataFormatterMultiValueMultiValue>>;
-}>;
+export interface DataFormatterMultiValuePartial extends DataFormatterBasePartial<'multiValue'> {
+    multiValue?: Array<Partial<DataFormatterMultiValueMultiValue>>;
+    xAxis?: Partial<DataFormatterValueAxis>;
+    yAxis?: Partial<DataFormatterValueAxis>;
+}
 export interface DataFormatterMultiValueMultiValue {
     unitLabel: string;
 }

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

@@ -1,5 +1,6 @@
-import { DataFormatterBase } from './DataFormatter';
+import { DataFormatterBase, DataFormatterBasePartial } from './DataFormatter';
 
 export interface DataFormatterRelationship extends DataFormatterBase<'relationship'> {
 }
-export type DataFormatterRelationshipPartial = Partial<DataFormatterRelationship> & Partial<{}>;
+export interface DataFormatterRelationshipPartial extends DataFormatterBasePartial<'relationship'> {
+}

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

@@ -1,5 +1,5 @@
 import { DataSeriesDatum, DataSeriesValue } from './DataSeries';
-import { DataFormatterBase, DataFormatterContext } from './DataFormatter';
+import { DataFormatterBase, DataFormatterBasePartial, DataFormatterContext } from './DataFormatter';
 
 export interface DataFormatterSeries extends DataFormatterBase<'series'> {
     unitLabel: string;
@@ -7,4 +7,9 @@ export interface DataFormatterSeries extends DataFormatterBase<'series'> {
     colorsPredicate: (datum: DataSeriesDatum | DataSeriesValue, rowIndex: number, columnIndex: number, context: DataFormatterContext<'series'>) => string;
     sort: ((a: DataSeriesDatum | DataSeriesValue, b: DataSeriesDatum | number) => number) | null;
 }
-export type DataFormatterSeriesPartial = Partial<DataFormatterSeries> & Partial<{}>;
+export interface DataFormatterSeriesPartial extends DataFormatterBasePartial<'series'> {
+    unitLabel?: string;
+    seriesLabels?: string[];
+    colorsPredicate?: (datum: DataSeriesDatum | DataSeriesValue, rowIndex: number, columnIndex: number, context: DataFormatterContext<'series'>) => string;
+    sort?: ((a: DataSeriesDatum | DataSeriesValue, b: DataSeriesDatum | number) => number) | null;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orbcharts/core",
-  "version": "3.0.0-alpha.25",
+  "version": "3.0.0-alpha.27",
   "description": "OrbCharts is an open source chart library based on d3.js and rx.js",
   "author": "Blue Planet Inc.",
   "license": "Apache-2.0",

package/src/defaults.ts

@@ -2,7 +2,7 @@
 // import { ChartRenderOptions } from './types/Chart'
 import type { ChartType, ChartOptionsPartial } from './types/Chart'
 import type { DataSeries } from './types/DataSeries'
-import type { DataGrid } from './types/DataGrid'
+import type { DataGrid, DataGridDatum } from './types/DataGrid'
 import type { DataMultiGrid } from './types/DataMultiGrid'
 import type { DataMultiValue } from './types/DataMultiValue'
 import type { DataTree } from './types/DataTree'
@@ -197,7 +197,24 @@ export const DATA_FORMATTER_GRID_DEFAULT: DataFormatterGrid = {
 export const DATA_FORMATTER_MULTI_GRID_DEFAULT: DataFormatterMultiGrid = {
   ...DATA_FORMATTER,
   type: 'multiGrid',
-  multiGrid: [], // 預設無資料，由各plugin定義預設值
+  multiGrid: [
+    {
+      ...DATA_FORMATTER_GRID_DEFAULT
+    },
+    {
+      ...DATA_FORMATTER_GRID_DEFAULT,
+      valueAxis: {
+        ...DATA_FORMATTER_VALUE_AXIS,
+        position: 'right'
+      },
+      colorsPredicate: (datum, rowIndex, columnIndex, { chartParams, dataFormatter }) => {
+        const seriesIndex = dataFormatter.grid.seriesType === 'row' ? rowIndex : columnIndex
+        // @Q@ 暫時性的邏輯，之後改寫成接續前一個grid的series index
+        const reverseIndex = chartParams.colors[chartParams.colorScheme].series.length - 1 - seriesIndex
+        return chartParams.colors[chartParams.colorScheme].series[reverseIndex]
+      },
+    }
+  ],
   // visibleGroupRange: null,
 }
 
@@ -205,7 +222,7 @@ export const DATA_FORMATTER_MULTI_VALUE_DEFAULT: DataFormatterMultiValue = {
   ...DATA_FORMATTER,
   type: 'multiValue',
   // labelFormat: (datum: any) => (datum && datum.label) ?? '',
-  multiValue: [], // 預設無資料，由各plugin定義預設值
+  multiValue: [],
   xAxis: { ...DATA_FORMATTER_VALUE_AXIS },
   yAxis: { ...DATA_FORMATTER_VALUE_AXIS },
 }

package/src/grid/gridObservables.ts

@@ -127,7 +127,8 @@ export const gridAxesTransformObservable = ({ fullDataFormatter$, layout$ }: {
       fullDataFormatter: fullDataFormatter$,
       layout: layout$
     }).pipe(
-      takeUntil(destroy$)
+      takeUntil(destroy$),
+      switchMap(async (d) => d),
     ).subscribe(data => {
       const axesTransformData = calcAxesTransform({
         xAxis: data.fullDataFormatter.groupAxis,
@@ -238,7 +239,8 @@ export const gridGraphicTransformObservable = ({ computedData$, fullDataFormatte
       fullDataFormatter: fullDataFormatter$,
       layout: layout$
     }).pipe(
-      takeUntil(destroy$)
+      takeUntil(destroy$),
+      switchMap(async (d) => d),
     ).subscribe(data => {
       const dataAreaTransformData = calcGridDataAreaTransform ({
         data: data.computedData,
@@ -311,7 +313,6 @@ export const gridAxesSizeObservable = ({ fullDataFormatter$, layout$ }: {
       layout: layout$
     }).pipe(
       takeUntil(destroy$),
-      // 轉換後會退訂前一個未完成的訂閱事件，因此可以取到「同時間」最後一次的訂閱事件
       switchMap(async (d) => d),
     ).subscribe(data => {
       

package/src/multiGrid/createMultiGridContextObserver.ts

@@ -1,12 +1,26 @@
+import {
+  shareReplay } from 'rxjs'
 import type { ContextObserverFn } from '../types'
+import { multiGridObservable } from './multiGridObservables'
 
 export const createMultiGridContextObserver: ContextObserverFn<'multiGrid'> = ({ subject, observer }) => {
 
+  const multiGrid$ = multiGridObservable({
+    fullDataFormatter$: observer.fullDataFormatter$,
+    computedData$: observer.computedData$,
+    layout$: observer.layout$,
+    fullChartParams$: observer.fullChartParams$,
+    event$: subject.event$
+  }).pipe(
+    shareReplay(1)
+  )
+
   return {
     fullParams$: observer.fullParams$,
     fullChartParams$: observer.fullChartParams$,
     fullDataFormatter$: observer.fullDataFormatter$,
     computedData$: observer.computedData$,
     layout$: observer.layout$,
+    multiGrid$
   }
 }

package/src/multiGrid/multiGridObservables.ts

@@ -0,0 +1,152 @@
+import {
+  combineLatest,
+  distinctUntilChanged,
+  filter,
+  of,
+  map,
+  merge,
+  takeUntil,
+  shareReplay,
+  switchMap,
+  Subject,
+  Observable, 
+  combineLatestAll} from 'rxjs'
+import type {
+  AxisPosition,
+  ChartType,
+  ChartParams,
+  ComputedDataTypeMap,
+  ComputedDatumTypeMap,
+  ContextObserverFn,
+  DataTypeMap,
+  DataFormatterTypeMap,
+  DataFormatterGrid,
+  DataFormatterContext,
+  DataFormatterValueAxis,
+  DataFormatterGroupAxis,
+  EventMultiGrid,
+  HighlightTarget,
+  Layout,
+  TransformData } from '../types'
+import { getMinAndMaxGrid, transposeData } from '../utils/orbchartsUtils'
+import { createAxisLinearScale, createAxisPointScale, createAxisQuantizeScale } from '../utils/d3Utils'
+import {
+  highlightObservable,
+  seriesDataMapObservable,
+  groupDataMapObservable } from '../utils/observables'
+import {
+  gridAxesTransformObservable,
+  gridGraphicTransformObservable,
+  gridAxesOppositeTransformObservable,
+  gridAxesSizeObservable,
+  gridVisibleComputedDataObservable } from '../grid/gridObservables'
+
+export const multiGridObservable = ({ fullDataFormatter$, computedData$, layout$, fullChartParams$, event$ }: {
+  fullDataFormatter$: Observable<DataFormatterTypeMap<'multiGrid'>>
+  computedData$: Observable<ComputedDataTypeMap<'multiGrid'>>
+  layout$: Observable<Layout>
+  fullChartParams$: Observable<ChartParams>
+  event$: Subject<EventMultiGrid>
+}) => {
+  const destroy$ = new Subject()
+
+  return combineLatest({
+    fullDataFormatter: fullDataFormatter$,
+    computedData: computedData$,
+  }).pipe(
+    switchMap(async (d) => d),
+    distinctUntilChanged((a, b) => {
+      return a.fullDataFormatter.multiGrid.length === b.fullDataFormatter.multiGrid.length
+        && a.computedData.length === b.computedData.length
+    }),
+    map(data => {
+      // 每次重新計算時，清除之前的訂閱
+      destroy$.next(undefined)
+
+      return data.fullDataFormatter.multiGrid.map((gridDataFormatter, gridIndex) => {
+
+        // -- 取得該grid的data和dataFormatter
+        const gridDataFormatter$ = of(gridDataFormatter).pipe(
+          takeUntil(destroy$),
+          shareReplay(1)
+        )
+        const gridComputedData$ = of(data.computedData[gridIndex] || []).pipe(
+          takeUntil(destroy$),
+          shareReplay(1)
+        )
+
+        // -- 建立Observables --
+        const gridAxesTransform$ = gridAxesTransformObservable({
+          fullDataFormatter$: gridDataFormatter$,
+          layout$: layout$
+        }).pipe(
+          shareReplay(1)
+        )
+      
+        const gridGraphicTransform$ = gridGraphicTransformObservable({
+          computedData$: gridComputedData$,
+          fullDataFormatter$: gridDataFormatter$,
+          layout$: layout$
+        }).pipe(
+          shareReplay(1)
+        )
+      
+        const gridAxesOppositeTransform$ = gridAxesOppositeTransformObservable({
+          gridAxesTransform$
+        }).pipe(
+          shareReplay(1)
+        )
+      
+        const gridAxesSize$ = gridAxesSizeObservable({
+          fullDataFormatter$: gridDataFormatter$,
+          layout$: layout$
+        }).pipe(
+          shareReplay(1)
+        )
+      
+        const datumList$ = gridComputedData$.pipe(
+          map(d => d.flat())
+        ).pipe(
+          shareReplay(1)
+        )
+      
+        const gridHighlight$ = highlightObservable({
+          datumList$,
+          fullChartParams$: fullChartParams$,
+          event$: event$
+        }).pipe(
+          shareReplay(1)
+        )
+      
+        const SeriesDataMap$ = seriesDataMapObservable({
+          datumList$: datumList$
+        }).pipe(
+          shareReplay(1)
+        )
+      
+        const GroupDataMap$ = groupDataMapObservable({
+          datumList$: datumList$
+        }).pipe(
+          shareReplay(1)
+        )
+      
+        const visibleComputedData$ = gridVisibleComputedDataObservable({
+          computedData$: gridComputedData$,
+        }).pipe(
+          shareReplay(1)
+        )
+      
+        return {
+          gridAxesTransform$,
+          gridGraphicTransform$,
+          gridAxesOppositeTransform$,
+          gridAxesSize$,
+          gridHighlight$,
+          SeriesDataMap$,
+          GroupDataMap$,
+          visibleComputedData$
+        }
+      })
+    })
+  )
+}

package/src/types/ChartParams.ts

@@ -15,7 +15,7 @@ export interface ChartParams {
   // [key: string]: any
 }
 
-export type ChartParamsPartial = Partial<ChartParams> & Partial<{
+export type ChartParamsPartial = Partial<ChartParams | {
   padding: Partial<Padding>,
   colors: Partial<{
     light: Partial<ColorScheme>
@@ -24,6 +24,15 @@ export type ChartParamsPartial = Partial<ChartParams> & Partial<{
   styles: Partial<Styles>
 }>
 
+function test (): ChartParamsPartial {
+  return {
+    colorScheme: 'dark',
+    padding: {
+      top: 10
+    }
+  }
+}
+
 export type HighlightTarget = 'series' | 'group' | 'datum' | 'none'
 
 export interface Styles {

package/src/types/ContextObserverMultiGrid.ts

@@ -1,5 +1,19 @@
+import { Observable } from 'rxjs'
 import type { ContextObserverBase } from './ContextObserver'
+import type { ComputedDataGrid, ComputedDatumGrid } from './ComputedDataGrid'
+import type { TransformData } from './TransformData'
 
 export interface ContextObserverMultiGrid<PluginParams> extends ContextObserverBase<'multiGrid', PluginParams> {
+  multiGrid$: Observable<MultiGridObservableAll[]>
+}
 
+export interface MultiGridObservableAll {
+  gridAxesTransform$: Observable<TransformData>
+  gridGraphicTransform$: Observable<TransformData>
+  gridAxesOppositeTransform$: Observable<TransformData>
+  gridAxesSize$: Observable<{ width: number; height: number; }>
+  gridHighlight$: Observable<string[]>
+  SeriesDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
+  GroupDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
+  visibleComputedData$: Observable<ComputedDataGrid>
 }

package/src/types/DataFormatterGrid.ts

@@ -4,8 +4,7 @@ import type { DataFormatterBase, DataFormatterBasePartial, DataFormatterValueAxi
 
 export type SeriesType = 'row' | 'column' // default: 'row'
 
-export interface DataFormatterGrid
-  extends DataFormatterBase<'grid'> {
+export interface DataFormatterGrid extends DataFormatterBase<'grid'> {
   grid: DataFormatterGridGrid
   valueAxis: DataFormatterValueAxis
   groupAxis: DataFormatterGroupAxis
@@ -13,11 +12,12 @@ export interface DataFormatterGrid
   colorsPredicate: (datum: DataGridDatum | DataGridValue, rowIndex: number, columnIndex: number, context: DataFormatterContext<'grid'>) => string
 }
 
-export type DataFormatterGridPartial = Partial<DataFormatterGrid> & Partial<{
-  grid: Partial<DataFormatterGridGrid>
-  valueAxis: Partial<DataFormatterValueAxis>
-  groupAxis: Partial<DataFormatterGroupAxis>
-}>
+export interface DataFormatterGridPartial extends DataFormatterBasePartial<'grid'> {
+  grid?: Partial<DataFormatterGridGrid>
+  valueAxis?: Partial<DataFormatterValueAxis>
+  groupAxis?: Partial<DataFormatterGroupAxis>
+  colorsPredicate?: (datum: DataGridDatum | DataGridValue, rowIndex: number, columnIndex: number, context: DataFormatterContext<'grid'>) => string
+}
 
 // grid欄位
 export interface DataFormatterGridGrid {

package/src/types/DataFormatterMultiGrid.ts

@@ -1,23 +1,27 @@
 import { DataGridDatum, DataGridValue } from './DataGrid'
-import { DataFormatterGridGrid } from './DataFormatterGrid'
-import { DataFormatterBase, DataFormatterValueAxis, DataFormatterGroupAxis, DataFormatterContext } from './DataFormatter'
+import { DataFormatterGrid, DataFormatterGridGrid } from './DataFormatterGrid'
+import {
+  DataFormatterBase,
+  DataFormatterBasePartial,
+  DataFormatterValueAxis,
+  DataFormatterGroupAxis,
+  DataFormatterContext } from './DataFormatter'
 import { AxisPosition } from './Axis'
 
-export interface DataFormatterMultiGrid
-  extends DataFormatterBase<'multiGrid'> {
-  multiGrid: Array<DataFormatterMultiGridMultiGrid>
+export interface DataFormatterMultiGrid extends DataFormatterBase<'multiGrid'> {
+  multiGrid: Array<DataFormatterGrid>
   // visibleGroupRange: [number, number] | null
 }
 
-export type DataFormatterMultiGridPartial = Partial<DataFormatterMultiGrid> & Partial<{
-  multiGrid: Array<Partial<DataFormatterMultiGridMultiGrid>>
-}>
+export interface DataFormatterMultiGridPartial extends DataFormatterBasePartial<'multiGrid'> {
+  multiGrid?: Array<Partial<DataFormatterGrid>>
+}
 
-// multiGrid欄位
-export interface DataFormatterMultiGridMultiGrid {
-  grid: DataFormatterGridGrid
-  valueAxis: DataFormatterValueAxis // default: 'left'
-  groupAxis: DataFormatterGroupAxis // default: 'bottom'
-  colorsPredicate: (datum: DataGridDatum | DataGridValue, rowIndex: number, columnIndex: number, context: DataFormatterContext<'grid'>) => string
-  // colors: Colors
-}
+// // multiGrid欄位
+// export interface DataFormatterMultiGridMultiGrid {
+//   grid: DataFormatterGridGrid
+//   valueAxis: DataFormatterValueAxis // default: 'left'
+//   groupAxis: DataFormatterGroupAxis // default: 'bottom'
+//   colorsPredicate: (datum: DataGridDatum | DataGridValue, rowIndex: number, columnIndex: number, context: DataFormatterContext<'grid'>) => string
+//   // colors: Colors
+// }

package/src/types/DataFormatterMultiValue.ts

@@ -1,17 +1,18 @@
 import { DataMultiValueDatum, DataMultiValue } from './DataMultiValue'
-import { DataFormatterBase, DataFormatterValueAxis } from './DataFormatter'
+import { DataFormatterBase, DataFormatterBasePartial, DataFormatterValueAxis } from './DataFormatter'
 
-export interface DataFormatterMultiValue
-  extends DataFormatterBase<'multiValue'> {
+export interface DataFormatterMultiValue extends DataFormatterBase<'multiValue'> {
   // labelFormat: (datum: unknown) => string
   multiValue: Array<DataFormatterMultiValueMultiValue>
   xAxis: DataFormatterValueAxis
   yAxis: DataFormatterValueAxis
 }
 
-export type DataFormatterMultiValuePartial = Partial<DataFormatterMultiValue> & Partial<{
-  multiValue: Array<Partial<DataFormatterMultiValueMultiValue>>
-}>
+export interface DataFormatterMultiValuePartial extends DataFormatterBasePartial<'multiValue'> {
+  multiValue?: Array<Partial<DataFormatterMultiValueMultiValue>>
+  xAxis?: Partial<DataFormatterValueAxis>
+  yAxis?: Partial<DataFormatterValueAxis>
+}
 
 // multiValue欄位
 export interface DataFormatterMultiValueMultiValue {

package/src/types/DataFormatterRelationship.ts

@@ -1,16 +1,15 @@
 import { Node, Edge, DataRelationship } from './DataRelationship'
-import { DataFormatterBase } from './DataFormatter'
+import { DataFormatterBase, DataFormatterBasePartial } from './DataFormatter'
 
-export interface DataFormatterRelationship
-  extends DataFormatterBase<'relationship'> {
+export interface DataFormatterRelationship extends DataFormatterBase<'relationship'> {
   // node: DataFormatterRelationshipNode
   // edge: DataFormatterRelationshipEdge
 }
 
-export type DataFormatterRelationshipPartial = Partial<DataFormatterRelationship> & Partial<{
+export interface DataFormatterRelationshipPartial extends DataFormatterBasePartial<'relationship'> {
   // node: Partial<DataFormatterRelationshipNode>
   // edge: Partial<DataFormatterRelationshipEdge>
-}>
+}
 
 // export interface DataFormatterRelationshipNode {
 //   labelFormat: (node: unknown) => string

package/src/types/DataFormatterSeries.ts

@@ -1,9 +1,8 @@
 import { DataSeriesDatum, DataSeriesValue, DataSeries } from './DataSeries'
-import { DataFormatterBase, DataFormatterContext } from './DataFormatter'
+import { DataFormatterBase, DataFormatterBasePartial, DataFormatterContext } from './DataFormatter'
 // import { ComputedDatumSeries } from './ComputedDataSeries'
 
-export interface DataFormatterSeries
-  extends DataFormatterBase<'series'> {
+export interface DataFormatterSeries extends DataFormatterBase<'series'> {
   // series: DataFormatterSeriesSeries
   unitLabel: string
   seriesLabels: string[]
@@ -14,9 +13,13 @@ export interface DataFormatterSeries
   // colors: Colors
 }
 
-export type DataFormatterSeriesPartial = Partial<DataFormatterSeries> & Partial<{
+export interface DataFormatterSeriesPartial extends DataFormatterBasePartial<'series'> {
   // series: Partial<DataFormatterSeriesSeries>
-}>
+  unitLabel?: string
+  seriesLabels?: string[]
+  colorsPredicate?: (datum: DataSeriesDatum | DataSeriesValue, rowIndex: number, columnIndex: number, context: DataFormatterContext<'series'>) => string
+  sort?: ((a: DataSeriesDatum | DataSeriesValue, b: DataSeriesDatum | number) => number) | null
+}
 
 // export interface DataFormatterSeriesSeries {
 //   unitLabel: string