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

package/src/base/createBasePlugin.ts

@@ -1,89 +1,89 @@
-import { takeUntil, map, shareReplay, startWith, Subject, Observable } from 'rxjs'
-import type { ChartType, CreateBasePlugin, PluginInitFn, PluginContext } from '../types'
-import { mergeOptionsWithDefault } from '../utils'
-
-// 建立plugin實例
-function createPlugin <T extends ChartType, PluginName, PluginParams>({ name, defaultParams, initFn }: {
-  name: PluginName
-  defaultParams: PluginParams
-  initFn: PluginInitFn<T, PluginName, PluginParams>
-}) {
-        
-  const destroy$ = new Subject()
-  const params$: Subject<Partial<typeof defaultParams>> = new Subject()
-  const StoreMap = new WeakMap() // 避免memory leak
-  let pluginDestroyFn = () => {}
-  let pluginContext: PluginContext<T, PluginName, PluginParams> | undefined
-  let mergedDefaultParams: PluginParams = defaultParams
-
-  // 建立plugin實例
-  return {
-    params$,
-    name,
-    defaultParams,
-    init () {
-      if (!pluginContext) {
-        return
-      }
-      // 執行
-      pluginDestroyFn = (initFn(pluginContext) ?? (() => {})) // plugin執行會回傳destroy函式
-      StoreMap.set(pluginContext.selection, pluginContext)
-    },
-    destroy () {
-      pluginDestroyFn()
-      if (pluginContext) {
-        pluginContext.selection.remove()
-        pluginContext = undefined
-      }
-      destroy$.next(undefined)
-    },
-    setPresetParams: (presetParams: Partial<PluginParams>) => {
-      mergedDefaultParams = mergeOptionsWithDefault(presetParams, defaultParams)
-    },
-    setContext: (_pluginContext: PluginContext<T, PluginName, PluginParams>) => {
-      pluginContext = _pluginContext
-      pluginContext.observer.fullParams$ = params$
-        .pipe(
-          takeUntil(destroy$),
-          startWith({}),
-          map(d => mergeOptionsWithDefault(d, mergedDefaultParams)),
-          shareReplay(1),
-        )
-    }
-  }
-}
-
-// 建立plugin類別
-export const createBasePlugin: CreateBasePlugin = <T extends ChartType>() => {
-  
-  // 定義plugin
-  return function definePlugin<PluginName, PluginParams>(name: PluginName, defaultParams: PluginParams) {
-
-    // 定義plugin的初始化function
-    return function definePluginInitFn (initFn: PluginInitFn<T, PluginName, PluginParams>) {
-
-      return class Plugin  {
-        params$: Subject<Partial<PluginParams>>
-        name: PluginName
-        defaultParams: PluginParams
-        // presetParams: Partial<PluginParams>
-        init: () => void
-        destroy: () => void
-        setPresetParams: (presetParams: Partial<PluginParams>) => void
-        setContext: (pluginContext: PluginContext<T, PluginName, PluginParams>) => void
-        constructor () {
-          const pluginEntity = createPlugin<T, PluginName, PluginParams>({ name, defaultParams, initFn })
-          
-          this.params$ = pluginEntity.params$
-          this.name = pluginEntity.name
-          this.defaultParams = pluginEntity.defaultParams
-          // this.presetParams = pluginEntity.presetParams
-          this.init = pluginEntity.init
-          this.destroy = pluginEntity.destroy
-          this.setPresetParams = pluginEntity.setPresetParams
-          this.setContext = pluginEntity.setContext
-        }
-      }
-    }
-  }
-}
+import { takeUntil, map, shareReplay, startWith, Subject, Observable } from 'rxjs'
+import type { ChartType, CreateBasePlugin, PluginInitFn, PluginContext } from '../types'
+import { mergeOptionsWithDefault } from '../utils'
+
+// 建立plugin實例
+function createPlugin <T extends ChartType, PluginName, PluginParams>({ name, defaultParams, initFn }: {
+  name: PluginName
+  defaultParams: PluginParams
+  initFn: PluginInitFn<T, PluginName, PluginParams>
+}) {
+        
+  const destroy$ = new Subject()
+  const params$: Subject<Partial<typeof defaultParams>> = new Subject()
+  const StoreMap = new WeakMap() // 避免memory leak
+  let pluginDestroyFn = () => {}
+  let pluginContext: PluginContext<T, PluginName, PluginParams> | undefined
+  let mergedDefaultParams: PluginParams = defaultParams
+
+  // 建立plugin實例
+  return {
+    params$,
+    name,
+    defaultParams,
+    init () {
+      if (!pluginContext) {
+        return
+      }
+      // 執行
+      pluginDestroyFn = (initFn(pluginContext) ?? (() => {})) // plugin執行會回傳destroy函式
+      StoreMap.set(pluginContext.selection, pluginContext)
+    },
+    destroy () {
+      pluginDestroyFn()
+      if (pluginContext) {
+        pluginContext.selection.remove()
+        pluginContext = undefined
+      }
+      destroy$.next(undefined)
+    },
+    setPresetParams: (presetParams: Partial<PluginParams>) => {
+      mergedDefaultParams = mergeOptionsWithDefault(presetParams, defaultParams)
+    },
+    setContext: (_pluginContext: PluginContext<T, PluginName, PluginParams>) => {
+      pluginContext = _pluginContext
+      pluginContext.observer.fullParams$ = params$
+        .pipe(
+          takeUntil(destroy$),
+          startWith({}),
+          map(d => mergeOptionsWithDefault(d, mergedDefaultParams)),
+          shareReplay(1),
+        )
+    }
+  }
+}
+
+// 建立plugin類別
+export const createBasePlugin: CreateBasePlugin = <T extends ChartType>() => {
+  
+  // 定義plugin
+  return function definePlugin<PluginName, PluginParams>(name: PluginName, defaultParams: PluginParams) {
+
+    // 定義plugin的初始化function
+    return function definePluginInitFn (initFn: PluginInitFn<T, PluginName, PluginParams>) {
+
+      return class Plugin  {
+        params$: Subject<Partial<PluginParams>>
+        name: PluginName
+        defaultParams: PluginParams
+        // presetParams: Partial<PluginParams>
+        init: () => void
+        destroy: () => void
+        setPresetParams: (presetParams: Partial<PluginParams>) => void
+        setContext: (pluginContext: PluginContext<T, PluginName, PluginParams>) => void
+        constructor () {
+          const pluginEntity = createPlugin<T, PluginName, PluginParams>({ name, defaultParams, initFn })
+          
+          this.params$ = pluginEntity.params$
+          this.name = pluginEntity.name
+          this.defaultParams = pluginEntity.defaultParams
+          // this.presetParams = pluginEntity.presetParams
+          this.init = pluginEntity.init
+          this.destroy = pluginEntity.destroy
+          this.setPresetParams = pluginEntity.setPresetParams
+          this.setContext = pluginEntity.setContext
+        }
+      }
+    }
+  }
+}

package/src/defaults.ts

@@ -1,248 +1,220 @@
-// import type { ChartGlobalDefault } from './types/Chart'
-// import { ChartRenderOptions } from './types/Chart'
-import type { ChartType, ChartOptionsPartial } from './types/Chart'
-import type { DataSeries } from './types/DataSeries'
-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'
-import type { DataRelationship } from './types/DataRelationship'
-import type { DataFormatterBase, DataFormatterValueAxis, DataFormatterGroupAxis } from './types/DataFormatter'
-import type { DataFormatterSeries } from './types/DataFormatterSeries'
-import type { DataFormatterGrid, DataFormatterGridGrid } from './types/DataFormatterGrid'
-import type { DataFormatterMultiGrid, DataFormatterMultiGridGrid } from './types/DataFormatterMultiGrid'
-import type { DataFormatterMultiValue } from './types/DataFormatterMultiValue'
-import type { DataFormatterTree } from './types/DataFormatterTree'
-import type { DataFormatterRelationship } from './types/DataFormatterRelationship'
-import type { ChartParams } from './types/ChartParams'
-import type { Padding } from './types/Padding'
-
-export const CHART_OPTIONS_DEFAULT: ChartOptionsPartial<any> = {
-  preset: {} // 預設為空
-}
-
-// export const GLOBAL_DEFAULT: ChartGlobalDefault = {
-//   colors: ['#67B7DC', '#6794DC', '#6771DC', '#8067DC', '#A367DC', '#C767DC', '#DC67CE', '#DC67AB', '#DC6788', '#DC6967', '#DC8C67', '#DCAF67'],
-//   padding: {
-//     top: 50,
-//     right: 70,
-//     bottom: 50,
-//     left: 70
-//   },
-//   // chartWidth: '100%',
-//   // chartHeight: 500
-// }
-
-// export const COLORS_DEFAULT = ['#67B7DC', '#6794DC', '#6771DC', '#8067DC', '#A367DC', '#C767DC', '#DC67CE', '#DC67AB', '#DC6788', '#DC6967', '#DC8C67', '#DCAF67']
-// ['#ff7ab9', '#66dec8', '#84c8ff', '#30ad1b', '#f8c43e', '#fa5640', '#9d79d7', '#ea4f98']
-
-export const PADDING_DEFAULT: Padding = {
-  top: 60,
-  right: 60,
-  bottom: 60,
-  left: 60
-}
-
-// export const HIGHLIGHT_DEFAULT: HighlightDefault = {
-//   // trigger: 'datum',
-//   id: null,
-//   label: null
-// }
-
-export const CHART_PARAMS_DEFAULT: ChartParams = {
-  padding: PADDING_DEFAULT,
-  highlightTarget: 'datum',
-  // highlightDefault: HIGHLIGHT_DEFAULT,
-  highlightDefault: null,
-  colorScheme: 'light',
-  colors: {
-    light: {
-      series: ['#67B7DC', '#6794DC', '#6771DC', '#8067DC', '#A367DC', '#C767DC', '#DC67CE', '#DC67AB', '#DC6788', '#DC6967', '#DC8C67', '#DCAF67'],
-      // primary: '#454545',
-      primary: '#1b1e23',
-      secondary: '#e1e1e1',
-      white: '#ffffff',
-      background: '#ffffff'
-    },
-    dark: {
-      series: ['#67B7DC', '#6794DC', '#6771DC', '#8067DC', '#A367DC', '#C767DC', '#DC67CE', '#DC67AB', '#DC6788', '#DC6967', '#DC8C67', '#DCAF67'],
-      primary: '#f0f0f0',
-      secondary: '#e1e1e1',
-      white: '#ffffff',
-      background: '#000000'
-    }
-  },
-  styles: {
-    // textSize: 14,
-    textSize: '0.875rem',
-    unhighlightedOpacity: 0.3
-  },
-  transitionDuration: 800,
-  transitionEase: 'easeCubic'
-}
-
-export const CHART_WIDTH_DEFAULT = 800
-
-export const CHART_HEIGHT_DEFAULT = 500
-
-// -- Data --
-
-export const DATA_SERIES_DEFAULT: DataSeries = []
-
-export const DATA_GRID_DEFAULT: DataGrid = []
-
-export const DATA_MULTI_GRID_DEFAULT: DataMultiGrid = []
-
-export const DATA_MULTI_VALUE_DEFAULT: DataMultiValue = []
-
-export const DATA_TREE_DEFAULT: DataTree = []
-
-export const DATA_RELATIONA_DEFAULTL: DataRelationship = {
-  nodes: [],
-  edges: []
-}
-
-// -- Data Formatter --
-
-// 基本欄位
-// export const DATA_FORMATTER: DataFormatterBase<ChartType> = {
-//   // ...GLOBAL_DEFAULT,
-//   type: ('' as any), // 後面需複蓋掉否則會有問題
-// }
-// 有value
-// export const DATA_FORMATTER_WITH_VALUE: DataFormatterValue = {
-//   valueFormat: ',.0f'
-// }
-// 有axis
-// export const DATA_FORMATTER_WITH_AXIS: DataFormatterAxis = {
-//   // domainMinValue: 0,
-//   // domainMaxValue: undefined,
-//   // domainMinRange: undefined,
-//   // domainMaxRange: 0.9
-//   valueDomain: [0, 'auto'],
-//   valueRange: [0, 0.9]
-// }
-
-export const DATA_FORMATTER_VALUE_AXIS: DataFormatterValueAxis = {
-  position: 'left',
-  scaleDomain: [0, 'auto'],
-  scaleRange: [0, 0.9],
-  label: '',
-}
-
-export const DATA_FORMATTER_GROUP_AXIS: DataFormatterGroupAxis = {
-  position: 'bottom',
-  scaleDomain: [0, 'auto'],
-  scalePadding: 0.5,
-  label: ''
-}
-
-export const DATA_FORMATTER_SERIES_DEFAULT: DataFormatterSeries = {
-  // ...DATA_FORMATTER_WITH_VALUE,
-  type: 'series',
-  visibleFilter: (datum, rowIndex, columnIndex, context) => true,
-  // unitLabel: '',
-  seriesLabels: [],
-  // mapSeries: (datum, rowIndex, columnIndex, { data, dataFormatter }) => {
-  //   const seriesIndex = rowIndex >= dataFormatter.seriesLabels.length
-  //     ? rowIndex % dataFormatter.seriesLabels.length // 如果index大於所設定的seriesLabels的數量則從頭回來算
-  //     : rowIndex
-  //   return dataFormatter.seriesLabels[seriesIndex]
-  // },
-  // colorsPredicate: (datum, rowIndex, columnIndex, { chartParams }) => {
-  //   return rowIndex < chartParams.colors[chartParams.colorScheme].series.length
-  //     ? chartParams.colors[chartParams.colorScheme].series[rowIndex]
-  //     : chartParams.colors[chartParams.colorScheme].series[
-  //       rowIndex % chartParams.colors[chartParams.colorScheme].series.length
-  //     ]
-  // },
-  sort: null,
-}
-
-export const DATA_FORMATTER_GRID_GRID_DEFAULT: DataFormatterGridGrid = {
-  visibleFilter: (datum, rowIndex, columnIndex, context) => true,
-  gridData: {
-    seriesDirection: 'row',
-    rowLabels: [],
-    columnLabels: [],
-  },
-  valueAxis: { ...DATA_FORMATTER_VALUE_AXIS },
-  groupAxis: { ...DATA_FORMATTER_GROUP_AXIS, },
-  slotIndex: 0,
-  seriesSlotIndexes: null
-}
-
-export const DATA_FORMATTER_GRID_DEFAULT: DataFormatterGrid = {
-  // ...DATA_FORMATTER_WITH_VALUE,
-  type: 'grid',
-  grid: {
-    ...DATA_FORMATTER_GRID_GRID_DEFAULT
-  },
-  container: {
-    gap: 120,
-    rowAmount: 1,
-    columnAmount: 1
-  }
-  // visibleGroupRange: null,
-  // colorsPredicate: (datum, rowIndex, columnIndex, { chartParams, dataFormatter }) => {
-  //   const seriesIndex = dataFormatter.grid.seriesDirection === 'row' ? rowIndex : columnIndex
-  //   return chartParams.colors[chartParams.colorScheme].series[seriesIndex]
-  // },
-}
-
-// export const DATA_FORMATTER_MULTI_GRID_MULTI_GRID_DEFAULT: DataFormatterMultiGridMultiGrid = {
-//   ...DATA_FORMATTER_GRID_DEFAULT,
-//   slotIndex: 0,
-//   seriesSlotIndexes: null
-// }
-
-export const DATA_FORMATTER_MULTI_GRID_GRID_DEFAULT: DataFormatterMultiGridGrid = {
-  ...DATA_FORMATTER_GRID_GRID_DEFAULT
-}
-
-export const DATA_FORMATTER_MULTI_GRID_DEFAULT: DataFormatterMultiGrid = {
-  type: 'multiGrid',
-  // visibleFilter: (datum, rowIndex, columnIndex, context) => true,
-  gridList: [
-    {
-      ...DATA_FORMATTER_MULTI_GRID_GRID_DEFAULT
-    },
-  ],
-  container: {
-    gap: 120,
-    rowAmount: 1,
-    columnAmount: 1
-  }
-}
-
-export const DATA_FORMATTER_MULTI_VALUE_DEFAULT: DataFormatterMultiValue = {
-  type: 'multiValue',
-  visibleFilter: (datum, rowIndex, columnIndex, context) => true,
-  // labelFormat: (datum: any) => (datum && datum.label) ?? '',
-  multiValue: [],
-  xAxis: { ...DATA_FORMATTER_VALUE_AXIS },
-  yAxis: { ...DATA_FORMATTER_VALUE_AXIS },
-}
-
-export const DATA_FORMATTER_TREE_DEFAULT: DataFormatterTree = {
-  type: 'tree',
-  visibleFilter: (datum, rowIndex, columnIndex, context) => true,
-  // labelFormat: (datum: any) => (datum && datum.label) ?? '',
-  categoryLabels: []
-}
-
-export const DATA_FORMATTER_RELATIONAL_DEFAULT: DataFormatterRelationship = {
-  type: 'relationship',
-  visibleFilter: (datum, rowIndex, columnIndex, context) => true,
-  // node: {
-  //   // labelFormat: (node: any) => (node && node.label) ?? '',
-  //   descriptionFormat: (node: any) => (node && node.label) ?? ''
-  // },
-  // edge: {
-  //   // labelFormat: (edge: any) => (edge && edge.label) ?? '',
-  //   descriptionFormat: (edge: any) => (edge && edge.label) ?? ''
-  // },
-}
-
-// -- Render Data --
-
+// import type { ChartGlobalDefault } from './types/Chart'
+// import { ChartRenderOptions } from './types/Chart'
+import type { ChartType, ChartOptionsPartial } from './types/Chart'
+import type { DataSeries } from './types/DataSeries'
+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'
+import type { DataRelationship } from './types/DataRelationship'
+import type { DataFormatterBase, DataFormatterValueAxis, DataFormatterGroupAxis, DataFormatterContainer } from './types/DataFormatter'
+import type { DataFormatterSeries } from './types/DataFormatterSeries'
+import type { DataFormatterGrid, DataFormatterGridGrid } from './types/DataFormatterGrid'
+import type { DataFormatterMultiGrid, DataFormatterMultiGridGrid } from './types/DataFormatterMultiGrid'
+import type { DataFormatterMultiValue } from './types/DataFormatterMultiValue'
+import type { DataFormatterTree } from './types/DataFormatterTree'
+import type { DataFormatterRelationship } from './types/DataFormatterRelationship'
+import type { ChartParams } from './types/ChartParams'
+import type { Padding } from './types/Padding'
+
+export const CHART_OPTIONS_DEFAULT: ChartOptionsPartial<any> = {
+  preset: {} // 預設為空
+}
+
+// export const GLOBAL_DEFAULT: ChartGlobalDefault = {
+//   colors: ['#67B7DC', '#6794DC', '#6771DC', '#8067DC', '#A367DC', '#C767DC', '#DC67CE', '#DC67AB', '#DC6788', '#DC6967', '#DC8C67', '#DCAF67'],
+//   padding: {
+//     top: 50,
+//     right: 70,
+//     bottom: 50,
+//     left: 70
+//   },
+//   // chartWidth: '100%',
+//   // chartHeight: 500
+// }
+
+// export const COLORS_DEFAULT = ['#67B7DC', '#6794DC', '#6771DC', '#8067DC', '#A367DC', '#C767DC', '#DC67CE', '#DC67AB', '#DC6788', '#DC6967', '#DC8C67', '#DCAF67']
+// ['#ff7ab9', '#66dec8', '#84c8ff', '#30ad1b', '#f8c43e', '#fa5640', '#9d79d7', '#ea4f98']
+
+export const PADDING_DEFAULT: Padding = {
+  top: 60,
+  right: 60,
+  bottom: 60,
+  left: 60
+}
+
+export const CHART_PARAMS_DEFAULT: ChartParams = {
+  padding: PADDING_DEFAULT,
+  highlightTarget: 'datum',
+  highlightDefault: null,
+  colorScheme: 'light',
+  colors: {
+    light: {
+      series: ['#67B7DC', '#6794DC', '#6771DC', '#8067DC', '#A367DC', '#C767DC', '#DC67CE', '#DC67AB', '#DC6788', '#DC6967', '#DC8C67', '#DCAF67'],
+      // primary: '#454545',
+      primary: '#1b1e23',
+      secondary: '#e1e1e1',
+      white: '#ffffff',
+      background: '#ffffff'
+    },
+    dark: {
+      series: ['#67B7DC', '#6794DC', '#6771DC', '#8067DC', '#A367DC', '#C767DC', '#DC67CE', '#DC67AB', '#DC6788', '#DC6967', '#DC8C67', '#DCAF67'],
+      primary: '#f0f0f0',
+      secondary: '#e1e1e1',
+      white: '#ffffff',
+      background: '#000000'
+    }
+  },
+  styles: {
+    // textSize: 14,
+    textSize: '0.875rem',
+    unhighlightedOpacity: 0.3
+  },
+  transitionDuration: 800,
+  transitionEase: 'easeCubic'
+}
+
+export const CHART_WIDTH_DEFAULT = 800
+
+export const CHART_HEIGHT_DEFAULT = 500
+
+// -- Data --
+
+export const DATA_SERIES_DEFAULT: DataSeries = []
+
+export const DATA_GRID_DEFAULT: DataGrid = []
+
+export const DATA_MULTI_GRID_DEFAULT: DataMultiGrid = []
+
+export const DATA_MULTI_VALUE_DEFAULT: DataMultiValue = []
+
+export const DATA_TREE_DEFAULT: DataTree = []
+
+export const DATA_RELATIONA_DEFAULTL: DataRelationship = {
+  nodes: [],
+  edges: []
+}
+
+// -- Data Formatter --
+
+export const DATA_FORMATTER_VALUE_AXIS_DEFAULT: DataFormatterValueAxis = {
+  position: 'left',
+  scaleDomain: [0, 'auto'],
+  scaleRange: [0, 0.9],
+  label: '',
+}
+
+export const DATA_FORMATTER_GROUP_AXIS_DEFAULT: DataFormatterGroupAxis = {
+  position: 'bottom',
+  scaleDomain: [0, 'auto'],
+  scalePadding: 0.5,
+  label: ''
+}
+
+export const DATA_FORMATTER_CONTAINER_DEFAULT: DataFormatterContainer = {
+  gap: 120,
+  rowAmount: 1,
+  columnAmount: 1
+}
+
+export const DATA_FORMATTER_SERIES_DEFAULT: DataFormatterSeries = {
+  type: 'series',
+  visibleFilter: (datum, context) => true,
+  sort: null,
+  seriesLabels: [],
+  container: {
+    ...DATA_FORMATTER_CONTAINER_DEFAULT
+  },
+  separateSeries: false,
+  sumSeries: false
+  // mapSeries: (datum, rowIndex, columnIndex, { data, dataFormatter }) => {
+  //   const seriesIndex = rowIndex >= dataFormatter.seriesLabels.length
+  //     ? rowIndex % dataFormatter.seriesLabels.length // 如果index大於所設定的seriesLabels的數量則從頭回來算
+  //     : rowIndex
+  //   return dataFormatter.seriesLabels[seriesIndex]
+  // },
+  // colorsPredicate: (datum, rowIndex, columnIndex, { chartParams }) => {
+  //   return rowIndex < chartParams.colors[chartParams.colorScheme].series.length
+  //     ? chartParams.colors[chartParams.colorScheme].series[rowIndex]
+  //     : chartParams.colors[chartParams.colorScheme].series[
+  //       rowIndex % chartParams.colors[chartParams.colorScheme].series.length
+  //     ]
+  // },
+}
+
+export const DATA_FORMATTER_GRID_GRID_DEFAULT: DataFormatterGridGrid = {
+  seriesDirection: 'row',
+  rowLabels: [],
+  columnLabels: [],
+  valueAxis: { ...DATA_FORMATTER_VALUE_AXIS_DEFAULT },
+  groupAxis: { ...DATA_FORMATTER_GROUP_AXIS_DEFAULT, },
+  separateSeries: false,
+  // slotIndex: 0,
+  // seriesSlotIndexes: null
+}
+
+export const DATA_FORMATTER_GRID_DEFAULT: DataFormatterGrid = {
+  type: 'grid',
+  visibleFilter: (datum, context) => true,
+  grid: {
+    ...DATA_FORMATTER_GRID_GRID_DEFAULT
+  },
+  container: {
+    ...DATA_FORMATTER_CONTAINER_DEFAULT
+  }
+}
+
+// export const DATA_FORMATTER_MULTI_GRID_MULTI_GRID_DEFAULT: DataFormatterMultiGridMultiGrid = {
+//   ...DATA_FORMATTER_GRID_DEFAULT,
+//   slotIndex: 0,
+//   seriesSlotIndexes: null
+// }
+
+export const DATA_FORMATTER_MULTI_GRID_GRID_DEFAULT: DataFormatterMultiGridGrid = {
+  ...DATA_FORMATTER_GRID_GRID_DEFAULT
+}
+
+export const DATA_FORMATTER_MULTI_GRID_DEFAULT: DataFormatterMultiGrid = {
+  type: 'multiGrid',
+  visibleFilter: (datum, context) => true,
+  gridList: [
+    {
+      ...DATA_FORMATTER_MULTI_GRID_GRID_DEFAULT
+    },
+  ],
+  separateGrid: false,
+  container: {
+    ...DATA_FORMATTER_CONTAINER_DEFAULT
+  }
+}
+
+export const DATA_FORMATTER_MULTI_VALUE_DEFAULT: DataFormatterMultiValue = {
+  type: 'multiValue',
+  visibleFilter: (datum, context) => true,
+  categoryLabels: [],
+  multiValue: [],
+  xAxis: { ...DATA_FORMATTER_VALUE_AXIS_DEFAULT },
+  yAxis: { ...DATA_FORMATTER_VALUE_AXIS_DEFAULT },
+}
+
+export const DATA_FORMATTER_TREE_DEFAULT: DataFormatterTree = {
+  type: 'tree',
+  visibleFilter: (datum, context) => true,
+  // labelFormat: (datum: any) => (datum && datum.label) ?? '',
+  categoryLabels: []
+}
+
+export const DATA_FORMATTER_RELATIONAL_DEFAULT: DataFormatterRelationship = {
+  type: 'relationship',
+  visibleFilter: (datum, context) => true,
+  categoryLabels: []
+  // node: {
+  //   // labelFormat: (node: any) => (node && node.label) ?? '',
+  //   descriptionFormat: (node: any) => (node && node.label) ?? ''
+  // },
+  // edge: {
+  //   // labelFormat: (edge: any) => (edge && edge.label) ?? '',
+  //   descriptionFormat: (edge: any) => (edge && edge.label) ?? ''
+  // },
+}
+