@orbcharts/core 3.0.0-beta.4 → 3.0.0-beta.6

package/dist/src/defaults.d.ts

@@ -1,24 +1,24 @@
 import { ChartOptionsPartial, DataSeries, DataGrid, DataMultiGrid, DataMultiValue, DataTree, DataRelationship, DataFormatterValueAxis, DataFormatterGroupAxis, DataFormatterContainer, DataFormatterSeries, DataFormatterGrid, DataFormatterGridGrid, DataFormatterMultiGrid, DataFormatterMultiGridGrid, DataFormatterMultiValue, DataFormatterTree, DataFormatterRelationship, ChartParams, Padding } from '../lib/core-types';
 
-export declare const CHART_OPTIONS_DEFAULT: ChartOptionsPartial<any>;
-export declare const PADDING_DEFAULT: Padding;
-export declare const CHART_PARAMS_DEFAULT: ChartParams;
-export declare const CHART_WIDTH_DEFAULT = 800;
-export declare const CHART_HEIGHT_DEFAULT = 500;
-export declare const DATA_SERIES_DEFAULT: DataSeries;
-export declare const DATA_GRID_DEFAULT: DataGrid;
-export declare const DATA_MULTI_GRID_DEFAULT: DataMultiGrid;
-export declare const DATA_MULTI_VALUE_DEFAULT: DataMultiValue;
-export declare const DATA_TREE_DEFAULT: DataTree;
-export declare const DATA_RELATIONA_DEFAULTL: DataRelationship;
-export declare const DATA_FORMATTER_VALUE_AXIS_DEFAULT: DataFormatterValueAxis;
-export declare const DATA_FORMATTER_GROUP_AXIS_DEFAULT: DataFormatterGroupAxis;
-export declare const DATA_FORMATTER_CONTAINER_DEFAULT: DataFormatterContainer;
-export declare const DATA_FORMATTER_SERIES_DEFAULT: DataFormatterSeries;
-export declare const DATA_FORMATTER_GRID_GRID_DEFAULT: DataFormatterGridGrid;
-export declare const DATA_FORMATTER_GRID_DEFAULT: DataFormatterGrid;
-export declare const DATA_FORMATTER_MULTI_GRID_GRID_DEFAULT: DataFormatterMultiGridGrid;
-export declare const DATA_FORMATTER_MULTI_GRID_DEFAULT: DataFormatterMultiGrid;
-export declare const DATA_FORMATTER_MULTI_VALUE_DEFAULT: DataFormatterMultiValue;
-export declare const DATA_FORMATTER_TREE_DEFAULT: DataFormatterTree;
-export declare const DATA_FORMATTER_RELATIONAL_DEFAULT: DataFormatterRelationship;
+export declare const DEFAULT_CHART_OPTIONS: ChartOptionsPartial<any>;
+export declare const DEFAULT_PADDING: Padding;
+export declare const DEFAULT_CHART_PARAMS: ChartParams;
+export declare const DEFAULT_CHART_WIDTH = 800;
+export declare const DEFAULT_CHART_HEIGHT = 500;
+export declare const DEFAULT_DATA_SERIES: DataSeries;
+export declare const DEFAULT_DATA_GRID: DataGrid;
+export declare const DEFAULT_DATA_MULTI_GRID: DataMultiGrid;
+export declare const DEFAULT_DATA_MULTI_VALUE: DataMultiValue;
+export declare const DEFAULT_DATA_TREE: DataTree;
+export declare const DEFAULTL_DATA_RELATIONA: DataRelationship;
+export declare const DEFAULT_DATA_FORMATTER_VALUE_AXIS: DataFormatterValueAxis;
+export declare const DEFAULT_DATA_FORMATTER_GROUP_AXIS: DataFormatterGroupAxis;
+export declare const DEFAULT_DATA_FORMATTER_CONTAINER: DataFormatterContainer;
+export declare const DEFAULT_DATA_FORMATTER_SERIES: DataFormatterSeries;
+export declare const DEFAULT_DATA_FORMATTER_GRID_GRID: DataFormatterGridGrid;
+export declare const DEFAULT_DATA_FORMATTER_GRID: DataFormatterGrid;
+export declare const DEFAULT_DATA_FORMATTER_MULTI_GRID_GRID: DataFormatterMultiGridGrid;
+export declare const DEFAULT_DATA_FORMATTER_MULTI_GRID: DataFormatterMultiGrid;
+export declare const DEFAULT_DATA_FORMATTER_MULTI_VALUE: DataFormatterMultiValue;
+export declare const DEFAULT_DATA_FORMATTER_TREE: DataFormatterTree;
+export declare const DEFAULT_DATA_FORMATTER_RELATIONAL: DataFormatterRelationship;

package/dist/src/utils/orbchartsUtils.d.ts

@@ -27,13 +27,13 @@ export declare function createMultiGridGroupLabels({ transposedDataGrid, dataFor
     chartType?: ChartType;
     gridIndex?: number;
 }): string[];
-export declare function getMinAndMax(data: number[]): [number, number];
-export declare function getMinAndMaxValue(data: DatumValue[]): [number, number];
-export declare function getMinAndMaxSeries(data: DataSeries): [number, number];
-export declare function getMinAndMaxGrid(data: DataGrid): [number, number];
-export declare function getMinAndMaxMultiGrid(data: DataMultiGrid): [number, number];
-export declare function getMinAndMaxMultiValue(data: DataMultiValue, valueIndex: number): [number, number];
-export declare function getMinAndMaxMultiValueXY({ data, minX, maxX, minY, maxY }: {
+export declare function getMinMax(data: number[]): [number, number];
+export declare function getMinMaxValue(data: DatumValue[]): [number, number];
+export declare function getMinMaxSeries(data: DataSeries): [number, number];
+export declare function getMinMaxGrid(data: DataGrid): [number, number];
+export declare function getMinMaxMultiGrid(data: DataMultiGrid): [number, number];
+export declare function getMinMaxMultiValue(data: DataMultiValue, valueIndex: number): [number, number];
+export declare function getMinMaxMultiValueXY({ data, minX, maxX, minY, maxY }: {
     data: ComputedLayoutDatumMultiValue[][];
     minX: number;
     maxX: number;

package/dist/src/utils/relationshipObservables.d.ts

@@ -0,0 +1,13 @@
+import { Observable } from 'rxjs';
+import { ComputedDataRelationship, ComputedNode, ComputedEdge } from '../../lib/core-types';
+
+export declare const categoryLabelsObservable: (CategoryNodeMap$: Observable<Map<string, ComputedNode[]>>, CategoryEdgeMap$: Observable<Map<string, ComputedEdge[]>>) => Observable<string[]>;
+export declare const NodeMapObservable: (computedData$: Observable<ComputedDataRelationship>) => Observable<Map<string, ComputedNode>>;
+export declare const EdgeMapObservable: (computedData$: Observable<ComputedDataRelationship>) => Observable<Map<string, ComputedEdge>>;
+export declare const relationshipVisibleComputedDataObservable: ({ computedData$, NodeMap$ }: {
+    computedData$: Observable<ComputedDataRelationship>;
+    NodeMap$: Observable<Map<string, ComputedNode>>;
+}) => Observable<{
+    nodes: ComputedNode[];
+    edges: ComputedEdge[];
+}>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orbcharts/core",
-  "version": "3.0.0-beta.4",
+  "version": "3.0.0-beta.6",
   "description": "OrbCharts is an open source chart library based on d3.js and rx.js",
   "author": "Blue Planet Inc.",
   "license": "Apache-2.0",
@@ -35,7 +35,7 @@
     "vite-plugin-dts": "^3.7.3"
   },
   "dependencies": {
-    "@orbcharts/core-types": "^3.0.0-beta.3",
+    "@orbcharts/core-types": "^3.0.0-beta.5",
     "d3": "^7.8.5",
     "rxjs": "^7.8.1"
   }

package/src/GridChart.ts

@@ -1,7 +1,7 @@
 import type {
   ChartEntity,
   ChartOptionsPartial } from '../lib/core-types'
-import { DATA_FORMATTER_GRID_DEFAULT } from './defaults'
+import { DEFAULT_DATA_FORMATTER_GRID } from './defaults'
 import { dataFormatterValidator } from './grid/dataFormatterValidator'
 import { computedDataFn } from './grid/computedDataFn'
 import { dataValidator } from './grid/dataValidator'
@@ -12,7 +12,7 @@ export class GridChart extends AbstractChart<'grid'> implements ChartEntity<'gri
   constructor (element: HTMLElement | Element, options?: ChartOptionsPartial<'grid'>) {
     super(
       {
-        defaultDataFormatter: DATA_FORMATTER_GRID_DEFAULT,
+        defaultDataFormatter: DEFAULT_DATA_FORMATTER_GRID,
         dataFormatterValidator,
         computedDataFn,
         dataValidator,

package/src/MultiGridChart.ts

@@ -1,7 +1,7 @@
 import type {
   ChartEntity,
   ChartOptionsPartial } from '../lib/core-types'
-import { DATA_FORMATTER_MULTI_GRID_DEFAULT } from './defaults'
+import { DEFAULT_DATA_FORMATTER_MULTI_GRID } from './defaults'
 import { dataFormatterValidator } from './multiGrid/dataFormatterValidator'
 import { computedDataFn } from './multiGrid/computedDataFn'
 import { dataValidator } from './multiGrid/dataValidator'
@@ -12,7 +12,7 @@ export class MultiGridChart extends AbstractChart<'multiGrid'> implements ChartE
   constructor (element: HTMLElement | Element, options?: ChartOptionsPartial<'multiGrid'>) {
     super(
       {
-        defaultDataFormatter: DATA_FORMATTER_MULTI_GRID_DEFAULT,
+        defaultDataFormatter: DEFAULT_DATA_FORMATTER_MULTI_GRID,
         dataFormatterValidator,
         computedDataFn,
         dataValidator,

package/src/MultiValueChart.ts

@@ -1,7 +1,7 @@
 import type {
   ChartEntity,
   ChartOptionsPartial } from '../lib/core-types'
-import { DATA_FORMATTER_MULTI_VALUE_DEFAULT } from './defaults'
+import { DEFAULT_DATA_FORMATTER_MULTI_VALUE } from './defaults'
 import { dataFormatterValidator } from './multiValue/dataFormatterValidator'
 import { computedDataFn } from './multiValue/computedDataFn'
 import { dataValidator } from './multiValue/dataValidator'
@@ -12,7 +12,7 @@ export class MultiValueChart extends AbstractChart<'multiValue'> implements Char
   constructor (element: HTMLElement | Element, options?: ChartOptionsPartial<'multiValue'>) {
     super(
       {
-        defaultDataFormatter: DATA_FORMATTER_MULTI_VALUE_DEFAULT,
+        defaultDataFormatter: DEFAULT_DATA_FORMATTER_MULTI_VALUE,
         dataFormatterValidator,
         computedDataFn,
         dataValidator,

package/src/RelationshipChart.ts

@@ -1,7 +1,7 @@
 import type {
   ChartEntity,
   ChartOptionsPartial } from '../lib/core-types'
-import { DATA_FORMATTER_RELATIONAL_DEFAULT} from './defaults'
+import { DEFAULT_DATA_FORMATTER_RELATIONAL} from './defaults'
 import { dataFormatterValidator } from './relationship/dataFormatterValidator'
 import { computedDataFn } from './relationship/computedDataFn'
 import { dataValidator } from './relationship/dataValidator'
@@ -12,7 +12,7 @@ export class RelationshipChart extends AbstractChart<'relationship'> implements
   constructor (element: HTMLElement | Element, options?: ChartOptionsPartial<'relationship'>) {
     super(
       {
-        defaultDataFormatter: DATA_FORMATTER_RELATIONAL_DEFAULT,
+        defaultDataFormatter: DEFAULT_DATA_FORMATTER_RELATIONAL,
         dataFormatterValidator,
         computedDataFn,
         dataValidator,

package/src/SeriesChart.ts

@@ -1,7 +1,7 @@
 import type {
   ChartEntity,
   ChartOptionsPartial } from '../lib/core-types'
-import { DATA_FORMATTER_SERIES_DEFAULT } from './defaults'
+import { DEFAULT_DATA_FORMATTER_SERIES } from './defaults'
 import { dataFormatterValidator } from './series/dataFormatterValidator'
 import { computedDataFn } from './series/computedDataFn'
 import { dataValidator } from './series/dataValidator'
@@ -12,7 +12,7 @@ export class SeriesChart extends AbstractChart<'series'> implements ChartEntity<
   constructor (element: HTMLElement | Element, options?: ChartOptionsPartial<'series'>) {
     super(
       {
-        defaultDataFormatter: DATA_FORMATTER_SERIES_DEFAULT,
+        defaultDataFormatter: DEFAULT_DATA_FORMATTER_SERIES,
         dataFormatterValidator,
         computedDataFn,
         dataValidator,

package/src/TreeChart.ts

@@ -1,7 +1,7 @@
 import type {
   ChartEntity,
   ChartOptionsPartial } from '../lib/core-types'
-import { DATA_FORMATTER_TREE_DEFAULT } from './defaults'
+import { DEFAULT_DATA_FORMATTER_TREE } from './defaults'
 import { dataFormatterValidator } from './tree/dataFormatterValidator'
 import { computedDataFn } from './tree/computedDataFn'
 import { dataValidator } from './tree/dataValidator'
@@ -12,7 +12,7 @@ export class TreeChart extends AbstractChart<'tree'> implements ChartEntity<'tre
   constructor (element: HTMLElement | Element, options?: ChartOptionsPartial<'tree'>) {
     super(
       {
-        defaultDataFormatter: DATA_FORMATTER_TREE_DEFAULT,
+        defaultDataFormatter: DEFAULT_DATA_FORMATTER_TREE,
         dataFormatterValidator,
         computedDataFn,
         dataValidator,

package/src/base/createBaseChart.ts

@@ -61,11 +61,11 @@ import { elementValidator } from './validators/elementValidator'
 import { chartParamsValidator } from './validators/chartParamsValidator'
 import { pluginsValidator } from './validators/pluginsValidator'
 import {
-  CHART_OPTIONS_DEFAULT,
-  PADDING_DEFAULT,
-  CHART_PARAMS_DEFAULT,
-  CHART_WIDTH_DEFAULT,
-  CHART_HEIGHT_DEFAULT } from '../defaults'
+  DEFAULT_CHART_OPTIONS,
+  DEFAULT_PADDING,
+  DEFAULT_CHART_PARAMS,
+  DEFAULT_CHART_WIDTH,
+  DEFAULT_CHART_HEIGHT } from '../defaults'
 
 // 判斷dataFormatter是否需要size參數
 // const isAxesTypeMap: {[key in ChartType]: Boolean} = {
@@ -174,15 +174,15 @@ export const createBaseChart: CreateBaseChart = <T extends ChartType>({
 
     // options
     const mergedPresetWithDefault: Preset<T, any> = ((options) => {
-      const _options = options ? options : CHART_OPTIONS_DEFAULT as ChartOptionsPartial<T>
+      const _options = options ? options : DEFAULT_CHART_OPTIONS as ChartOptionsPartial<T>
       const preset = _options.preset ? _options.preset : {} as PresetPartial<T, any>
 
       return {
         name: preset.name ?? '',
         description: preset.description ?? '',
         chartParams: preset.chartParams
-          ? mergeOptionsWithDefault(preset.chartParams, CHART_PARAMS_DEFAULT)
-          : CHART_PARAMS_DEFAULT,
+          ? mergeOptionsWithDefault(preset.chartParams, DEFAULT_CHART_PARAMS)
+          : DEFAULT_CHART_PARAMS,
         dataFormatter: preset.dataFormatter
           // ? mergeOptionsWithDefault(preset.dataFormatter, defaultDataFormatter)
           ? mergeDataFormatter(preset.dataFormatter, defaultDataFormatter, chartType)
@@ -270,7 +270,7 @@ export const createBaseChart: CreateBaseChart = <T extends ChartType>({
         takeUntil(destroy$),
         startWith({}),
         map((d: any) => {
-          return mergeOptionsWithDefault(d.padding ?? {}, PADDING_DEFAULT)
+          return mergeOptionsWithDefault(d.padding ?? {}, DEFAULT_PADDING)
         })
       )
     mergedPadding$
@@ -290,8 +290,8 @@ export const createBaseChart: CreateBaseChart = <T extends ChartType>({
 
     // 監聽外層的element尺寸
     const rootSize$: Observable<{ width: number; height: number }> = of({
-      width: options?.width ?? CHART_OPTIONS_DEFAULT.width,
-      height: options?.height ?? CHART_OPTIONS_DEFAULT.height
+      width: options?.width ?? DEFAULT_CHART_OPTIONS.width,
+      height: options?.height ?? DEFAULT_CHART_OPTIONS.height
     }).pipe(
         switchMap(size => {
           return iif(
@@ -334,10 +334,10 @@ export const createBaseChart: CreateBaseChart = <T extends ChartType>({
       switchMap(async (d) => {
         const rootWidth = d.rootSize.width > 0
           ? d.rootSize.width
-          : CHART_WIDTH_DEFAULT
+          : DEFAULT_CHART_WIDTH
         const rootHeight = d.rootSize.height > 0
           ? d.rootSize.height
-          : CHART_HEIGHT_DEFAULT
+          : DEFAULT_CHART_HEIGHT
         return {
           width: rootWidth - d.mergedPadding.left - d.mergedPadding.right,
           height: rootHeight - d.mergedPadding.top - d.mergedPadding.bottom,

package/src/base/validators/chartParamsValidator.ts

@@ -83,7 +83,7 @@ export function chartParamsValidator (chartType: ChartType, chartParamsPartial:
 
     if (chartParamsPartial.colors.light) {
       const lightResult = validateColumns(chartParamsPartial.colors.light, {
-        series: {
+        label: {
           toBeTypes: ['string[]'],
         },
         primary: {
@@ -107,7 +107,7 @@ export function chartParamsValidator (chartType: ChartType, chartParamsPartial:
 
     if (chartParamsPartial.colors.dark) {
       const darkResult = validateColumns(chartParamsPartial.colors.dark, {
-        series: {
+        label: {
           toBeTypes: ['string[]'],
         },
         primary: {

package/src/defaults.ts

@@ -21,7 +21,7 @@ import type {
   Padding
 } from '../lib/core-types'
 
-export const CHART_OPTIONS_DEFAULT: ChartOptionsPartial<any> = {
+export const DEFAULT_CHART_OPTIONS: ChartOptionsPartial<any> = {
   // preset: {} // 預設為空
   width: 'auto',
   height: 'auto'
@@ -42,21 +42,21 @@ export const CHART_OPTIONS_DEFAULT: ChartOptionsPartial<any> = {
 // 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 = {
+export const DEFAULT_PADDING: Padding = {
   top: 60,
   right: 60,
   bottom: 60,
   left: 60
 }
 
-export const CHART_PARAMS_DEFAULT: ChartParams = {
-  padding: PADDING_DEFAULT,
+export const DEFAULT_CHART_PARAMS: ChartParams = {
+  padding: DEFAULT_PADDING,
   highlightTarget: 'datum',
   highlightDefault: null,
   colorScheme: 'light',
   colors: {
     light: {
-      series: ['#67B7DC', '#6794DC', '#6771DC', '#8067DC', '#A367DC', '#C767DC', '#DC67CE', '#DC67AB', '#DC6788', '#DC6967', '#DC8C67', '#DCAF67'],
+      label: ['#67B7DC', '#6794DC', '#6771DC', '#8067DC', '#A367DC', '#C767DC', '#DC67CE', '#DC67AB', '#DC6788', '#DC6967', '#DC8C67', '#DCAF67'],
       // primary: '#454545',
       primary: '#1b1e23',
       secondary: '#e1e1e1',
@@ -64,7 +64,7 @@ export const CHART_PARAMS_DEFAULT: ChartParams = {
       background: '#ffffff'
     },
     dark: {
-      series: ['#67B7DC', '#6794DC', '#6771DC', '#8067DC', '#A367DC', '#C767DC', '#DC67CE', '#DC67AB', '#DC6788', '#DC6967', '#DC8C67', '#DCAF67'],
+      label: ['#67B7DC', '#6794DC', '#6771DC', '#8067DC', '#A367DC', '#C767DC', '#DC67CE', '#DC67AB', '#DC6788', '#DC6967', '#DC8C67', '#DCAF67'],
       primary: '#f0f0f0',
       secondary: '#e1e1e1',
       white: '#ffffff',
@@ -80,56 +80,56 @@ export const CHART_PARAMS_DEFAULT: ChartParams = {
   transitionEase: 'easeCubic'
 }
 
-export const CHART_WIDTH_DEFAULT = 800
+export const DEFAULT_CHART_WIDTH = 800
 
-export const CHART_HEIGHT_DEFAULT = 500
+export const DEFAULT_CHART_HEIGHT = 500
 
 // -- Data --
 
-export const DATA_SERIES_DEFAULT: DataSeries = []
+export const DEFAULT_DATA_SERIES: DataSeries = []
 
-export const DATA_GRID_DEFAULT: DataGrid = []
+export const DEFAULT_DATA_GRID: DataGrid = []
 
-export const DATA_MULTI_GRID_DEFAULT: DataMultiGrid = []
+export const DEFAULT_DATA_MULTI_GRID: DataMultiGrid = []
 
-export const DATA_MULTI_VALUE_DEFAULT: DataMultiValue = []
+export const DEFAULT_DATA_MULTI_VALUE: DataMultiValue = []
 
-export const DATA_TREE_DEFAULT: DataTree = []
+export const DEFAULT_DATA_TREE: DataTree = []
 
-export const DATA_RELATIONA_DEFAULTL: DataRelationship = {
+export const DEFAULTL_DATA_RELATIONA: DataRelationship = {
   nodes: [],
   edges: []
 }
 
 // -- Data Formatter --
 
-export const DATA_FORMATTER_VALUE_AXIS_DEFAULT: DataFormatterValueAxis = {
+export const DEFAULT_DATA_FORMATTER_VALUE_AXIS: DataFormatterValueAxis = {
   position: 'left',
   scaleDomain: ['auto', 'auto'],
   scaleRange: [0, 0.9],
   label: '',
 }
 
-export const DATA_FORMATTER_GROUP_AXIS_DEFAULT: DataFormatterGroupAxis = {
+export const DEFAULT_DATA_FORMATTER_GROUP_AXIS: DataFormatterGroupAxis = {
   position: 'bottom',
   scaleDomain: [0, 'max'],
   scalePadding: 0.5,
   label: ''
 }
 
-export const DATA_FORMATTER_CONTAINER_DEFAULT: DataFormatterContainer = {
+export const DEFAULT_DATA_FORMATTER_CONTAINER: DataFormatterContainer = {
   gap: 120,
   rowAmount: 1,
   columnAmount: 1
 }
 
-export const DATA_FORMATTER_SERIES_DEFAULT: DataFormatterSeries = {
+export const DEFAULT_DATA_FORMATTER_SERIES: DataFormatterSeries = {
   type: 'series',
   visibleFilter: (datum, context) => true,
   sort: null,
   seriesLabels: [],
   container: {
-    ...DATA_FORMATTER_CONTAINER_DEFAULT
+    ...DEFAULT_DATA_FORMATTER_CONTAINER
   },
   separateSeries: false,
   sumSeries: false
@@ -147,78 +147,78 @@ export const DATA_FORMATTER_SERIES_DEFAULT: DataFormatterSeries = {
   //     ]
   // },
 }
-DATA_FORMATTER_SERIES_DEFAULT.visibleFilter.toString = () => `(datum, context) => true`
+DEFAULT_DATA_FORMATTER_SERIES.visibleFilter.toString = () => `(datum, context) => true`
 
-export const DATA_FORMATTER_GRID_GRID_DEFAULT: DataFormatterGridGrid = {
+export const DEFAULT_DATA_FORMATTER_GRID_GRID: DataFormatterGridGrid = {
   seriesDirection: 'row',
   rowLabels: [],
   columnLabels: [],
-  valueAxis: { ...DATA_FORMATTER_VALUE_AXIS_DEFAULT },
-  groupAxis: { ...DATA_FORMATTER_GROUP_AXIS_DEFAULT, },
+  valueAxis: { ...DEFAULT_DATA_FORMATTER_VALUE_AXIS },
+  groupAxis: { ...DEFAULT_DATA_FORMATTER_GROUP_AXIS, },
   separateSeries: false,
   // slotIndex: 0,
   // seriesSlotIndexes: null
 }
 
-export const DATA_FORMATTER_GRID_DEFAULT: DataFormatterGrid = {
+export const DEFAULT_DATA_FORMATTER_GRID: DataFormatterGrid = {
   type: 'grid',
   visibleFilter: (datum, context) => true,
-  grid: {
-    ...DATA_FORMATTER_GRID_GRID_DEFAULT
-  },
+  // grid: {
+    ...DEFAULT_DATA_FORMATTER_GRID_GRID,
+  // },
   container: {
-    ...DATA_FORMATTER_CONTAINER_DEFAULT
+    ...DEFAULT_DATA_FORMATTER_CONTAINER
   }
 }
-DATA_FORMATTER_GRID_DEFAULT.visibleFilter.toString = () => `(datum, context) => true`
+DEFAULT_DATA_FORMATTER_GRID.visibleFilter.toString = () => `(datum, context) => true`
 
 // export const DATA_FORMATTER_MULTI_GRID_MULTI_GRID_DEFAULT: DataFormatterMultiGridMultiGrid = {
-//   ...DATA_FORMATTER_GRID_DEFAULT,
+//   ...DEFAULT_DATA_FORMATTER_GRID,
 //   slotIndex: 0,
 //   seriesSlotIndexes: null
 // }
 
-export const DATA_FORMATTER_MULTI_GRID_GRID_DEFAULT: DataFormatterMultiGridGrid = {
-  ...DATA_FORMATTER_GRID_GRID_DEFAULT
+export const DEFAULT_DATA_FORMATTER_MULTI_GRID_GRID: DataFormatterMultiGridGrid = {
+  ...DEFAULT_DATA_FORMATTER_GRID_GRID
 }
 
-export const DATA_FORMATTER_MULTI_GRID_DEFAULT: DataFormatterMultiGrid = {
+export const DEFAULT_DATA_FORMATTER_MULTI_GRID: DataFormatterMultiGrid = {
   type: 'multiGrid',
   visibleFilter: (datum, context) => true,
   gridList: [
     {
-      ...DATA_FORMATTER_MULTI_GRID_GRID_DEFAULT
+      ...DEFAULT_DATA_FORMATTER_MULTI_GRID_GRID
     },
   ],
   separateGrid: false,
   container: {
-    ...DATA_FORMATTER_CONTAINER_DEFAULT
+    ...DEFAULT_DATA_FORMATTER_CONTAINER
   }
 }
-DATA_FORMATTER_MULTI_GRID_DEFAULT.visibleFilter.toString = () => `(datum, context) => true`
+DEFAULT_DATA_FORMATTER_MULTI_GRID.visibleFilter.toString = () => `(datum, context) => true`
 
-export const DATA_FORMATTER_MULTI_VALUE_DEFAULT: DataFormatterMultiValue = {
+export const DEFAULT_DATA_FORMATTER_MULTI_VALUE: DataFormatterMultiValue = {
   type: 'multiValue',
   visibleFilter: (datum, context) => true,
   categoryLabels: [],
-  xAxis: { ...DATA_FORMATTER_VALUE_AXIS_DEFAULT },
-  yAxis: { ...DATA_FORMATTER_VALUE_AXIS_DEFAULT },
+  xAxis: { ...DEFAULT_DATA_FORMATTER_VALUE_AXIS },
+  yAxis: { ...DEFAULT_DATA_FORMATTER_VALUE_AXIS },
   container: {
-    ...DATA_FORMATTER_CONTAINER_DEFAULT
+    ...DEFAULT_DATA_FORMATTER_CONTAINER
   },
   separateCategory: false
 }
-DATA_FORMATTER_MULTI_VALUE_DEFAULT.visibleFilter.toString = () => `(datum, context) => true`
+DEFAULT_DATA_FORMATTER_MULTI_VALUE.visibleFilter.toString = () => `(datum, context) => true`
 
-export const DATA_FORMATTER_TREE_DEFAULT: DataFormatterTree = {
+export const DEFAULT_DATA_FORMATTER_TREE: DataFormatterTree = {
   type: 'tree',
   visibleFilter: (datum, context) => true,
   // labelFormat: (datum: any) => (datum && datum.label) ?? '',
   categoryLabels: []
 }
-DATA_FORMATTER_TREE_DEFAULT.visibleFilter.toString = () => `(datum, context) => true`
+DEFAULT_DATA_FORMATTER_TREE.visibleFilter.toString = () => `(datum, context) => true`
 
-export const DATA_FORMATTER_RELATIONAL_DEFAULT: DataFormatterRelationship = {
+export const DEFAULT_DATA_FORMATTER_RELATIONAL: DataFormatterRelationship = {
   type: 'relationship',
   visibleFilter: (datum, context) => true,
   categoryLabels: []
@@ -231,5 +231,5 @@ export const DATA_FORMATTER_RELATIONAL_DEFAULT: DataFormatterRelationship = {
   //   descriptionFormat: (edge: any) => (edge && edge.label) ?? ''
   // },
 }
-DATA_FORMATTER_RELATIONAL_DEFAULT.visibleFilter.toString = () => `(datum, context) => true`
+DEFAULT_DATA_FORMATTER_RELATIONAL.visibleFilter.toString = () => `(datum, context) => true`
 

package/src/grid/computedDataFn.ts

@@ -1,7 +1,7 @@
 // import * as d3 from 'd3'
 import type { ComputedDataFn, DataGrid, DataGridDatum, DataFormatterGridGrid, ComputedDatumGrid } from '../../lib/core-types'
 import { formatValueToLabel, createDefaultDatumId, createDefaultSeriesLabel, createDefaultGroupLabel } from '../utils/orbchartsUtils'
-import { getMinAndMaxValue, transposeData, createGridSeriesLabels, createGridGroupLabels, seriesColorPredicate } from '../utils/orbchartsUtils'
+import { getMinMaxValue, transposeData, createGridSeriesLabels, createGridGroupLabels, seriesColorPredicate } from '../utils/orbchartsUtils'
 
 // 統一 DataGrid 格式、並欄列資料轉置為一致方式
 export function createTransposedDataGrid (data: DataGrid, dataFormatterGrid: DataFormatterGridGrid): DataGridDatum[][] {
@@ -76,16 +76,16 @@ export const computedDataFn: ComputedDataFn<'grid'> = (context) => {
   try {
     
     // 依seriesDirection轉置資料矩陣
-    const transposedDataGrid = createTransposedDataGrid(data, dataFormatter.grid)
+    const transposedDataGrid = createTransposedDataGrid(data, dataFormatter)
 
     const seriesLabels = createGridSeriesLabels({
       transposedDataGrid,
-      dataFormatterGrid: dataFormatter.grid,
+      dataFormatterGrid: dataFormatter,
       chartType: 'grid'
     })
     const groupLabels = createGridGroupLabels({
       transposedDataGrid,
-      dataFormatterGrid: dataFormatter.grid,
+      dataFormatterGrid: dataFormatter,
       chartType: 'grid'
     })
 

package/src/grid/contextObserverCallback.ts

@@ -29,7 +29,7 @@ export const contextObserverCallback: ContextObserverCallback<'grid'> = ({ subje
   )
 
   const isSeriesSeprate$ = observer.fullDataFormatter$.pipe(
-    map(d => d.grid.separateSeries),
+    map(d => d.separateSeries),
     distinctUntilChanged(),
     shareReplay(1)
   )

package/src/grid/dataFormatterValidator.ts

@@ -6,15 +6,15 @@ export const dataFormatterValidator: DataFormatterValidator<'grid'> = (dataForma
     visibleFilter: {
       toBeTypes: ['Function']
     },
-    grid: {
-      toBeTypes: ['object']
-    },
+    // grid: {
+    //   toBeTypes: ['object']
+    // },
     container: {
       toBeTypes: ['object']
     }
   })
-  if (dataFormatter.grid) {
-    const visibleFilterResult = validateColumns(dataFormatter.grid, {
+  // if (dataFormatter.grid) {
+    const visibleFilterResult = validateColumns(dataFormatter, {
       seriesDirection: {
         toBe: '"row" | "column"',
         test: (value) => value === 'row' || value === 'column'
@@ -38,8 +38,8 @@ export const dataFormatterValidator: DataFormatterValidator<'grid'> = (dataForma
     if (visibleFilterResult.status === 'error') {
       return visibleFilterResult
     }
-    if (dataFormatter.grid.valueAxis) {
-      const valueAxisResult = validateColumns(dataFormatter.grid.valueAxis, {
+    if (dataFormatter.valueAxis) {
+      const valueAxisResult = validateColumns(dataFormatter.valueAxis, {
         position: {
           toBe: '"bottom" | "left" | "top" | "right"',
           test: (value) => value === 'bottom' || value === 'left' || value === 'top' || value === 'right'
@@ -60,8 +60,8 @@ export const dataFormatterValidator: DataFormatterValidator<'grid'> = (dataForma
         return valueAxisResult
       }
     }
-    if (dataFormatter.grid.groupAxis) {
-      const groupAxisResult = validateColumns(dataFormatter.grid.groupAxis, {
+    if (dataFormatter.groupAxis) {
+      const groupAxisResult = validateColumns(dataFormatter.groupAxis, {
         position: {
           toBe: '"bottom" | "left" | "top" | "right"',
           test: (value) => value === 'bottom' || value === 'left' || value === 'top' || value === 'right'
@@ -81,7 +81,7 @@ export const dataFormatterValidator: DataFormatterValidator<'grid'> = (dataForma
         return groupAxisResult
       }
     }
-  }
+  // }
   if (dataFormatter.container) {
     const containerResult = validateColumns(dataFormatter.container, {
       gap: {

package/src/multiGrid/computedDataFn.ts

@@ -1,5 +1,5 @@
 import type { ComputedDataFn, ComputedDatumGrid, DataFormatterGridGrid, ComputedDataMultiGrid } from '../../lib/core-types'
-import { DATA_FORMATTER_MULTI_GRID_GRID_DEFAULT } from '../defaults'
+import { DEFAULT_DATA_FORMATTER_MULTI_GRID_GRID } from '../defaults'
 import {
   createDefaultDatumId,
   seriesColorPredicate,
@@ -18,7 +18,7 @@ export const computedDataFn: ComputedDataFn<'multiGrid'> = (context) => {
   let multiGridData: ComputedDataMultiGrid = []
 
   try {
-    const defaultGrid = dataFormatter.gridList[0] || DATA_FORMATTER_MULTI_GRID_GRID_DEFAULT
+    const defaultGrid = dataFormatter.gridList[0] || DEFAULT_DATA_FORMATTER_MULTI_GRID_GRID
 
     // 計算每個grid的dataFormatter
     const gridDataFormatterList: DataFormatterGridGrid[] = data.map((gridData, gridIndex) => {