@orbcharts/core 3.0.0-beta.10 → 3.0.0-beta.12

package/dist/src/defaults.d.ts

@@ -1,4 +1,4 @@
-import { ChartOptionsPartial, DataSeries, DataGrid, DataMultiGrid, DataMultiValue, DataTree, DataRelationship, DataFormatterValueAxis, DataFormatterGroupAxis, DataFormatterAxis, DataFormatterContainer, DataFormatterSeries, DataFormatterGrid, DataFormatterGridGrid, DataFormatterMultiGrid, DataFormatterMultiGridGrid, DataFormatterMultiValue, DataFormatterTree, DataFormatterRelationship, ChartParams, Padding } from '../lib/core-types';
+import { ChartOptionsPartial, DataSeries, DataGrid, DataMultiGrid, DataMultiValue, DataTree, DataRelationship, DataFormatterValueAxis, DataFormatterGroupAxis, DataFormatterXYAxis, DataFormatterContainer, DataFormatterSeries, DataFormatterGrid, DataFormatterGridGrid, DataFormatterMultiGrid, DataFormatterMultiGridGrid, DataFormatterMultiValue, DataFormatterTree, DataFormatterRelationship, ChartParams, Padding } from '../lib/core-types';
 
 export declare const DEFAULT_CHART_OPTIONS: ChartOptionsPartial<any>;
 export declare const DEFAULT_PADDING: Padding;
@@ -13,7 +13,7 @@ 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_AXIS: DataFormatterAxis;
+export declare const DEFAULT_DATA_FORMATTER_X_Y_AXIS: DataFormatterXYAxis;
 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;

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

@@ -1,7 +1,7 @@
 import { Observable } from 'rxjs';
-import { ComputedDataTypeMap, ComputedDataGrid, ComputedDatumGrid, DataFormatterTypeMap, DataFormatterGrid, ComputedLayoutDatumGrid, ComputedLayoutDataGrid, ContainerPositionScaled, Layout, TransformData } from '../../lib/core-types';
+import { ComputedDataTypeMap, ComputedDataGrid, ContainerSize, ComputedDatumGrid, DataFormatterTypeMap, DataFormatterGrid, ComputedLayoutDatumGrid, ComputedAxesDataGrid, ContainerPositionScaled, Layout, TransformData } from '../../lib/core-types';
 
-export declare const gridComputedLayoutDataObservable: ({ computedData$, fullDataFormatter$, layout$ }: {
+export declare const gridComputedAxesDataObservable: ({ computedData$, fullDataFormatter$, layout$ }: {
     computedData$: Observable<ComputedDataTypeMap<"grid">>;
     fullDataFormatter$: Observable<DataFormatterTypeMap<"grid">>;
     layout$: Observable<Layout>;
@@ -13,14 +13,18 @@ export declare const gridAxesSizeObservable: ({ fullDataFormatter$, layout$ }: {
     width: number;
     height: number;
 }>;
+export declare const gridAxesContainerSizeObservable: ({ fullDataFormatter$, containerSize$ }: {
+    containerSize$: Observable<ContainerSize>;
+    fullDataFormatter$: Observable<DataFormatterTypeMap<"grid">>;
+}) => Observable<ContainerSize>;
 export declare const gridSeriesLabelsObservable: ({ computedData$ }: {
     computedData$: Observable<ComputedDataTypeMap<"grid">>;
 }) => Observable<string[]>;
 export declare const gridVisibleComputedDataObservable: ({ computedData$ }: {
     computedData$: Observable<ComputedDataTypeMap<"grid">>;
 }) => Observable<ComputedDatumGrid[][]>;
-export declare const gridVisibleComputedLayoutDataObservable: ({ computedLayoutData$ }: {
-    computedLayoutData$: Observable<ComputedLayoutDataGrid>;
+export declare const gridVisibleComputedAxesDataObservable: ({ computedAxesData$ }: {
+    computedAxesData$: Observable<ComputedAxesDataGrid>;
 }) => Observable<ComputedLayoutDatumGrid[][]>;
 export declare const gridContainerPositionObservable: ({ computedData$, fullDataFormatter$, layout$ }: {
     computedData$: Observable<ComputedDataTypeMap<"grid">>;

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

@@ -1,8 +1,5 @@
 export * from './commonUtils';
 export * from './d3Scale';
 export * from './gridObservables';
-export * from './multiGridObservables';
 export * from './observables';
 export * from './orbchartsUtils';
-export * from './seriesObservables';
-export * from './treeObservables';

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

@@ -1,12 +1,13 @@
 import { Subject, Observable } from 'rxjs';
-import { ChartParams, ComputedDataTypeMap, ContextObserverMultiGridDetail, DataFormatterTypeMap, EventMultiGrid, ContainerPositionScaled, Layout } from '../../lib/core-types';
+import { ChartParams, ComputedDataTypeMap, ContextObserverMultiGridDetail, ContainerSize, DataFormatterTypeMap, EventMultiGrid, ContainerPositionScaled, Layout } from '../../lib/core-types';
 
-export declare const multiGridEachDetailObservable: ({ fullDataFormatter$, computedData$, layout$, fullChartParams$, event$ }: {
+export declare const multiGridEachDetailObservable: ({ fullDataFormatter$, computedData$, layout$, fullChartParams$, event$, containerSize$ }: {
     fullDataFormatter$: Observable<DataFormatterTypeMap<"multiGrid">>;
     computedData$: Observable<ComputedDataTypeMap<"multiGrid">>;
     layout$: Observable<Layout>;
     fullChartParams$: Observable<ChartParams>;
     event$: Subject<EventMultiGrid>;
+    containerSize$: Observable<ContainerSize>;
 }) => Observable<ContextObserverMultiGridDetail[]>;
 export declare const multiGridContainerObservable: ({ computedData$, fullDataFormatter$, layout$ }: {
     computedData$: Observable<ComputedDataTypeMap<"multiGrid">>;

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

@@ -1,73 +1,120 @@
 import { Observable } from 'rxjs';
-import { ComputedDataTypeMap, ComputedDatumMultiValue, DataFormatterTypeMap, ComputedLayoutDatumMultiValue, ComputedLayoutDataMultiValue, ContainerPositionScaled, Layout, TransformData } from '../../lib/core-types';
+import { ComputedDataTypeMap, ComputedDataMultiValue, ComputedDatumMultiValue, ComputedDatumWithSumMultiValue, ContainerSize, DataFormatterTypeMap, DataFormatterMultiValue, ComputedXYDatumMultiValue, ComputedXYDataMultiValue, ContainerPositionScaled, Layout, TransformData } from '../../lib/core-types';
 
-export declare const minMaxXYObservable: ({ computedData$ }: {
+export declare const xyMinMaxObservable: ({ computedData$, xyValueIndex$ }: {
     computedData$: Observable<ComputedDataTypeMap<"multiValue">>;
+    xyValueIndex$: Observable<[number, number]>;
 }) => Observable<{
     minX: number;
     maxX: number;
     minY: number;
     maxY: number;
 }>;
-export declare const multiValueComputedLayoutDataObservable: ({ computedData$, minMaxXY$, fullDataFormatter$, layout$ }: {
+export declare const computedXYDataObservable: ({ computedData$, xyMinMax$, xyValueIndex$, fullDataFormatter$, layout$ }: {
     computedData$: Observable<ComputedDataTypeMap<"multiValue">>;
-    minMaxXY$: Observable<{
+    xyMinMax$: Observable<{
         minX: number;
         maxX: number;
         minY: number;
         maxY: number;
     }>;
+    xyValueIndex$: Observable<[number, number]>;
     fullDataFormatter$: Observable<DataFormatterTypeMap<"multiValue">>;
     layout$: Observable<Layout>;
-}) => Observable<ComputedLayoutDataMultiValue>;
-export declare const multiValueCategoryLabelsObservable: ({ computedData$, fullDataFormatter$ }: {
+}) => Observable<ComputedXYDataMultiValue>;
+export declare const categoryLabelsObservable: ({ computedData$, fullDataFormatter$ }: {
     computedData$: Observable<ComputedDataTypeMap<"multiValue">>;
     fullDataFormatter$: Observable<DataFormatterTypeMap<"multiValue">>;
 }) => Observable<string[]>;
-export declare const multiValueVisibleComputedDataObservable: ({ computedData$ }: {
+export declare const visibleComputedDataObservable: ({ computedData$ }: {
     computedData$: Observable<ComputedDataTypeMap<"multiValue">>;
 }) => Observable<ComputedDatumMultiValue[][]>;
-export declare const multiValueVisibleComputedLayoutDataObservable: ({ computedLayoutData$ }: {
-    computedLayoutData$: Observable<ComputedLayoutDataMultiValue>;
-}) => Observable<ComputedLayoutDatumMultiValue[][]>;
-export declare const multiValueContainerPositionObservable: ({ computedData$, fullDataFormatter$, layout$ }: {
+export declare const visibleComputedSumDataObservable: ({ visibleComputedData$ }: {
+    visibleComputedData$: Observable<ComputedDataMultiValue>;
+}) => Observable<ComputedDatumWithSumMultiValue[][]>;
+export declare const visibleComputedRankingByIndexDataObservable: ({ xyValueIndex$, isCategorySeprate$, visibleComputedData$ }: {
+    xyValueIndex$: Observable<[number, number]>;
+    isCategorySeprate$: Observable<boolean>;
+    visibleComputedData$: Observable<ComputedDatumMultiValue[][]>;
+}) => Observable<ComputedDatumMultiValue[][]>;
+export declare const visibleComputedRankingBySumDataObservable: ({ isCategorySeprate$, visibleComputedSumData$ }: {
+    isCategorySeprate$: Observable<boolean>;
+    visibleComputedSumData$: Observable<ComputedDatumWithSumMultiValue[][]>;
+}) => Observable<ComputedDatumWithSumMultiValue[][]>;
+export declare const visibleComputedXYDataObservable: ({ computedXYData$ }: {
+    computedXYData$: Observable<ComputedXYDataMultiValue>;
+}) => Observable<ComputedXYDatumMultiValue[][]>;
+export declare const containerPositionObservable: ({ computedData$, fullDataFormatter$, layout$ }: {
     computedData$: Observable<ComputedDataTypeMap<"multiValue">>;
     fullDataFormatter$: Observable<DataFormatterTypeMap<"multiValue">>;
     layout$: Observable<Layout>;
 }) => Observable<ContainerPositionScaled[]>;
-export declare const filteredMinMaxXYDataObservable: ({ visibleComputedLayoutData$, minMaxXY$, fullDataFormatter$ }: {
-    visibleComputedLayoutData$: Observable<ComputedLayoutDataMultiValue>;
-    minMaxXY$: Observable<{
+export declare const filteredXYMinMaxDataObservable: ({ visibleComputedXYData$, xyMinMax$, xyValueIndex$, fullDataFormatter$ }: {
+    visibleComputedXYData$: Observable<ComputedXYDataMultiValue>;
+    xyMinMax$: Observable<{
         minX: number;
         maxX: number;
         minY: number;
         maxY: number;
     }>;
+    xyValueIndex$: Observable<[number, number]>;
     fullDataFormatter$: Observable<DataFormatterTypeMap<"multiValue">>;
 }) => Observable<{
-    datumList: ComputedLayoutDatumMultiValue[];
-    minXDatum: ComputedLayoutDatumMultiValue;
-    maxXDatum: ComputedLayoutDatumMultiValue;
-    minYDatum: ComputedLayoutDatumMultiValue;
-    maxYDatum: ComputedLayoutDatumMultiValue;
+    datumList: ComputedXYDatumMultiValue[];
+    minXDatum: ComputedXYDatumMultiValue;
+    maxXDatum: ComputedXYDatumMultiValue;
+    minYDatum: ComputedXYDatumMultiValue;
+    maxYDatum: ComputedXYDatumMultiValue;
 }>;
-export declare const multiValueGraphicTransformObservable: ({ minMaxXY$, filteredMinMaxXYData$, fullDataFormatter$, layout$ }: {
-    minMaxXY$: Observable<{
+export declare const graphicTransformObservable: ({ xyMinMax$, xyValueIndex$, filteredXYMinMaxData$, fullDataFormatter$, layout$ }: {
+    xyMinMax$: Observable<{
         minX: number;
         maxX: number;
         minY: number;
         maxY: number;
     }>;
-    filteredMinMaxXYData$: Observable<{
-        minXDatum: ComputedLayoutDatumMultiValue;
-        maxXDatum: ComputedLayoutDatumMultiValue;
-        minYDatum: ComputedLayoutDatumMultiValue;
-        maxYDatum: ComputedLayoutDatumMultiValue;
+    xyValueIndex$: Observable<[number, number]>;
+    filteredXYMinMaxData$: Observable<{
+        minXDatum: ComputedXYDatumMultiValue;
+        maxXDatum: ComputedXYDatumMultiValue;
+        minYDatum: ComputedXYDatumMultiValue;
+        maxYDatum: ComputedXYDatumMultiValue;
     }>;
     fullDataFormatter$: Observable<DataFormatterTypeMap<"multiValue">>;
     layout$: Observable<Layout>;
 }) => Observable<TransformData>;
-export declare const multiValueGraphicReverseScaleObservable: ({ multiValueContainerPosition$, multiValueGraphicTransform$ }: {
-    multiValueContainerPosition$: Observable<ContainerPositionScaled[]>;
-    multiValueGraphicTransform$: Observable<TransformData>;
+export declare const graphicReverseScaleObservable: ({ containerPosition$, graphicTransform$ }: {
+    containerPosition$: Observable<ContainerPositionScaled[]>;
+    graphicTransform$: Observable<TransformData>;
 }) => Observable<[number, number][]>;
+export declare const xScaleObservable: ({ visibleComputedSumData$, fullDataFormatter$, filteredXYMinMaxData$, containerSize$ }: {
+    visibleComputedSumData$: Observable<ComputedDatumMultiValue[][]>;
+    fullDataFormatter$: Observable<DataFormatterMultiValue>;
+    filteredXYMinMaxData$: Observable<{
+        minXDatum: ComputedXYDatumMultiValue;
+        maxXDatum: ComputedXYDatumMultiValue;
+        minYDatum: ComputedXYDatumMultiValue;
+        maxYDatum: ComputedXYDatumMultiValue;
+    }>;
+    containerSize$: Observable<ContainerSize>;
+}) => Observable<import('d3-scale').ScaleLinear<number, number, never>>;
+export declare const xSumScaleObservable: ({ fullDataFormatter$, filteredXYMinMaxData$, containerSize$ }: {
+    fullDataFormatter$: Observable<DataFormatterMultiValue>;
+    filteredXYMinMaxData$: Observable<{
+        minXDatum: ComputedXYDatumMultiValue;
+        maxXDatum: ComputedXYDatumMultiValue;
+        minYDatum: ComputedXYDatumMultiValue;
+        maxYDatum: ComputedXYDatumMultiValue;
+    }>;
+    containerSize$: Observable<ContainerSize>;
+}) => Observable<import('d3-scale').ScaleLinear<number, number, never>>;
+export declare const yScaleObservable: ({ fullDataFormatter$, filteredXYMinMaxData$, containerSize$ }: {
+    fullDataFormatter$: Observable<DataFormatterMultiValue>;
+    filteredXYMinMaxData$: Observable<{
+        minXDatum: ComputedXYDatumMultiValue;
+        maxXDatum: ComputedXYDatumMultiValue;
+        minYDatum: ComputedXYDatumMultiValue;
+        maxYDatum: ComputedXYDatumMultiValue;
+    }>;
+    containerSize$: Observable<ContainerSize>;
+}) => Observable<import('d3-scale').ScaleLinear<number, number, never>>;

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

@@ -1,5 +1,5 @@
 import { Subject, Observable } from 'rxjs';
-import { ChartType, ChartParams, ComputedDatumTypeMap, EventTypeMap } from '../../lib/core-types';
+import { ChartType, ChartParams, ComputedDatumTypeMap, ContainerPositionScaled, EventTypeMap, Layout } from '../../lib/core-types';
 
 export declare function resizeObservable(elem: HTMLElement | Element): Observable<DOMRectReadOnly>;
 export declare const highlightObservable: <T extends ChartType, D>({ datumList$, fullChartParams$, event$ }: {
@@ -17,3 +17,10 @@ export declare const categoryDataMapObservable: <DatumType extends ComputedDatum
     datumList$: Observable<DatumType[]>;
 }) => Observable<Map<string, DatumType[]>>;
 export declare const textSizePxObservable: (chartParams$: Observable<ChartParams>) => Observable<number>;
+export declare const containerSizeObservable: ({ layout$, containerPosition$ }: {
+    layout$: Observable<Layout>;
+    containerPosition$: Observable<ContainerPositionScaled[]>;
+}) => Observable<{
+    width: number;
+    height: number;
+}>;

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

@@ -1,4 +1,4 @@
-import { ChartType, ChartParams, DatumValue, DataSeries, DataGrid, DataGridDatum, DataMultiGrid, DataMultiValue, ComputedLayoutDatumMultiValue, DataFormatterContainer, SeriesDirection, DataFormatterGridGrid, ContainerPosition, ContainerPositionScaled, Layout } from '../../lib/core-types';
+import { ChartType, ChartParams, DatumValue, DataSeries, DataGrid, DataGridDatum, DataMultiGrid, DataMultiValue, ComputedXYDatumMultiValue, DataFormatterContainer, SeriesDirection, DataFormatterGridGrid, ContainerPosition, ContainerPositionScaled, Layout } from '../../lib/core-types';
 import * as d3 from 'd3';
 export declare function formatValueToLabel(value: any, valueFormatter: string | ((text: d3.NumberValue) => string)): string;
 export declare function createDefaultDatumId(chartTypeOrPrefix: string, levelOneIndex: number, levelTwoIndex?: number, levelThreeIndex?: number): string;
@@ -34,19 +34,19 @@ 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[][];
+    data: ComputedXYDatumMultiValue[][];
     minX: number;
     maxX: number;
     minY: number;
     maxY: number;
 }): {
-    minXDatum: ComputedLayoutDatumMultiValue;
-    maxXDatum: ComputedLayoutDatumMultiValue;
-    minYDatum: ComputedLayoutDatumMultiValue;
-    maxYDatum: ComputedLayoutDatumMultiValue;
-    filteredData: ComputedLayoutDatumMultiValue[][];
+    minXDatum: ComputedXYDatumMultiValue;
+    maxXDatum: ComputedXYDatumMultiValue;
+    minYDatum: ComputedXYDatumMultiValue;
+    maxYDatum: ComputedXYDatumMultiValue;
+    filteredData: ComputedXYDatumMultiValue[][];
 };
 export declare function transposeData<T>(seriesDirection: SeriesDirection, data: T[][]): T[][];
 export declare function seriesColorPredicate(seriesIndex: number, chartParams: ChartParams): string;
-export declare function calcSeriesContainerLayout(layout: Layout, container: DataFormatterContainer, amount: number): ContainerPosition[];
-export declare function calcGridContainerLayout(layout: Layout, container: DataFormatterContainer, amount: number): ContainerPositionScaled[];
+export declare function calcContainerPosition(layout: Layout, container: DataFormatterContainer, amount: number): ContainerPosition[];
+export declare function calcContainerPositionScaled(layout: Layout, container: DataFormatterContainer, amount: number): ContainerPositionScaled[];

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

@@ -10,7 +10,7 @@ export declare const seriesLabelsObservable: ({ computedData$ }: {
 export declare const seriesVisibleComputedDataObservable: ({ computedData$ }: {
     computedData$: Observable<ComputedDataTypeMap<"series">>;
 }) => Observable<ComputedDatumSeries[][]>;
-export declare const seriesComputedLayoutDataObservable: ({ computedData$, fullDataFormatter$ }: {
+export declare const seriesComputedSortedDataObservable: ({ computedData$, fullDataFormatter$ }: {
     computedData$: Observable<ComputedDataTypeMap<"series">>;
     fullDataFormatter$: Observable<DataFormatterTypeMap<"series">>;
 }) => Observable<ComputedDatumSeries[][]>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orbcharts/core",
-  "version": "3.0.0-beta.10",
+  "version": "3.0.0-beta.12",
   "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.7",
+    "@orbcharts/core-types": "^3.0.0-beta.10",
     "d3": "^7.8.5",
     "rxjs": "^7.8.1"
   }

package/src/base/createBaseChart.ts

@@ -180,6 +180,7 @@ export const createBaseChart: CreateBaseChart = <T extends ChartType>({
       return {
         name: preset.name ?? '',
         description: preset.description ?? '',
+        descriptionZh: preset.descriptionZh ?? '',
         chartParams: preset.chartParams
           ? mergeOptionsWithDefault(preset.chartParams, DEFAULT_CHART_PARAMS)
           : DEFAULT_CHART_PARAMS,
@@ -187,8 +188,8 @@ export const createBaseChart: CreateBaseChart = <T extends ChartType>({
           // ? mergeOptionsWithDefault(preset.dataFormatter, defaultDataFormatter)
           ? mergeDataFormatter(preset.dataFormatter, defaultDataFormatter, chartType)
           : defaultDataFormatter,
-        allPluginParams: preset.allPluginParams
-          ? preset.allPluginParams
+        pluginParams: preset.pluginParams
+          ? preset.pluginParams
           : {}
       }
     })(options)
@@ -464,7 +465,7 @@ export const createBaseChart: CreateBaseChart = <T extends ChartType>({
                   observer: pluginObserver
                 }
         
-                plugin.setPresetParams(mergedPresetWithDefault.allPluginParams[plugin.name] ?? {})
+                plugin.setPresetParams(mergedPresetWithDefault.pluginParams[plugin.name] ?? {})
                 // 傳入context
                 plugin.setContext(pluginContext)
           

package/src/base/createBasePlugin.ts

@@ -14,6 +14,7 @@ import {
 import type {
   ChartType,
   CreateBasePlugin,
+  DeepPartial,
   DefinePluginConfig,
   PluginInitFn,
   PluginContext,
@@ -34,7 +35,7 @@ function createPluginEntity <T extends ChartType, PluginName, PluginParams>({ ch
   let pluginDestroyFn = () => {}
   let pluginContext: PluginContext<T, PluginName, PluginParams> | undefined
   const mergedDefaultParams$ = new BehaviorSubject(config.defaultParams)
-  const params$: Subject<Partial<typeof config.defaultParams>> = new BehaviorSubject({})
+  const params$: Subject<DeepPartial<typeof config.defaultParams>> = new BehaviorSubject({})
   const fullParams$ = mergedDefaultParams$.pipe(
     switchMap(mergedDefaultParams => {
       return params$
@@ -98,7 +99,7 @@ function createPluginEntity <T extends ChartType, PluginName, PluginParams>({ ch
       }
       destroy$.next(undefined)
     },
-    setPresetParams: (presetParams: Partial<PluginParams>) => {
+    setPresetParams: (presetParams: DeepPartial<PluginParams>) => {
       mergedDefaultParams$.next(mergeOptionsWithDefault(presetParams, config.defaultParams))
       
     },
@@ -119,7 +120,7 @@ export const createBasePlugin: CreateBasePlugin = <T extends ChartType>(chartTyp
     return function definePluginInitFn (initFn: PluginInitFn<T, PluginName, PluginParams>) {
 
       return class Plugin {
-        params$: Subject<Partial<PluginParams>>
+        params$: Subject<DeepPartial<PluginParams>>
         name: PluginName
         chartType: T
         defaultParams: PluginParams
@@ -127,7 +128,7 @@ export const createBasePlugin: CreateBasePlugin = <T extends ChartType>(chartTyp
         // presetParams: Partial<PluginParams>
         init: () => void
         destroy: () => void
-        setPresetParams: (presetParams: Partial<PluginParams>) => void
+        setPresetParams: (presetParams: DeepPartial<PluginParams>) => void
         setContext: (pluginContext: PluginContext<T, PluginName, PluginParams>) => void
         constructor () {
           const pluginEntity = createPluginEntity<T, PluginName, PluginParams>({

package/src/defaults.ts

@@ -8,7 +8,7 @@ import type {
   DataRelationship,
   DataFormatterValueAxis,
   DataFormatterGroupAxis,
-  DataFormatterAxis,
+  DataFormatterXYAxis,
   DataFormatterContainer,
   DataFormatterSeries,
   DataFormatterGrid,
@@ -57,24 +57,50 @@ export const DEFAULT_CHART_PARAMS: ChartParams = {
   colorScheme: 'light',
   colors: {
     light: {
-      label: ['#67B7DC', '#6794DC', '#6771DC', '#8067DC', '#A367DC', '#C767DC', '#DC67CE', '#DC67AB', '#DC6788', '#DC6967', '#DC8C67', '#DCAF67'],
+      label: [
+        "#6CBAFF",
+        "#FF6C6C",
+        "#F9B052",
+        "#7DD3C4",
+        "#AA93D2",
+        "#0088FF",
+        "#FFBABA",
+        "#86DC72",
+        "#EF76FF",
+        "#C4C4C4"
+      ],
+      // label: ['#67B7DC', '#6794DC', '#6771DC', '#8067DC', '#A367DC', '#C767DC', '#DC67CE', '#DC67AB', '#DC6788', '#DC6967', '#DC8C67', '#DCAF67'],
       // label: ['#F3A356', '#7A60F0', '#38B1AF', '#60A2F0', '#F06062', '#FF383C', '#6580EA', '#079F9C', '#9F65EA', '#EA7465', '#EA7465', '#8657D2', '#59B757', '#2797FF', '#D25786', '#F54BA6', '#4BECF5', '#74FD72', '#CA4BF5', '#EFE26E'],
       // label: ['#60A2F0', '#F3A356', '#7A60F0', '#38B1AF', '#F06062', '#FF383C', '#6580EA', '#079F9C', '#9F65EA', '#EA7465', '#EA7465', '#8657D2', '#59B757', '#2797FF', '#D25786', '#F54BA6', '#4BECF5', '#74FD72', '#CA4BF5', '#EFE26E'],
       // primary: '#454545',
-      primary: '#1b1e23',
-      secondary: '#e1e1e1',
+      // primary: '#1b1e23',
+      primary: '#000000',
+      secondary: '#e0e0e0',
       // white: '#ffffff',
-      labelContrast: ['#ffffff', '#1b1e23'],
+      labelContrast: ['#ffffff', '#000000'],
       background: '#ffffff'
     },
     dark: {
-      label: ['#67B7DC', '#6794DC', '#6771DC', '#8067DC', '#A367DC', '#C767DC', '#DC67CE', '#DC67AB', '#DC6788', '#DC6967', '#DC8C67', '#DCAF67'],
+      label: [
+        "#6CBAFF",
+        "#FF6C6C",
+        "#F9B052",
+        "#7DD3C4",
+        "#AA93D2",
+        "#0088FF",
+        "#FFBABA",
+        "#86DC72",
+        "#EF76FF",
+        "#C4C4C4"
+      ],
+      // label: ['#67B7DC', '#6794DC', '#6771DC', '#8067DC', '#A367DC', '#C767DC', '#DC67CE', '#DC67AB', '#DC6788', '#DC6967', '#DC8C67', '#DCAF67'],
       // label: ['#67B7DC', '#6794DC', '#38B1AF', '#6771DC', '#8067DC', '#A367DC', '#C767DC', '#DC67CE', '#DC67AB', '#DC6788', '#DC6967', '#DC8C67', '#DCAF67'],
       // label: ['#60A2F0', '#F3A356', '#7A60F0', '#38B1AF', '#F06062', '#FF383C', '#6580EA', '#079F9C', '#9F65EA', '#EA7465', '#EA7465', '#8657D2', '#59B757', '#2797FF', '#D25786', '#F54BA6', '#4BECF5', '#74FD72', '#CA4BF5', '#EFE26E'],
-      primary: '#f0f0f0',
-      secondary: '#e1e1e1',
+      // primary: '#f0f0f0',
+      primary: '#ffffff',
+      secondary: '#e0e0e0',
       // white: '#ffffff',
-      labelContrast: ['#ffffff', '#1b1e23'],
+      labelContrast: ['#ffffff', '#000000'],
       background: '#000000'
     }
   },
@@ -124,10 +150,11 @@ export const DEFAULT_DATA_FORMATTER_GROUP_AXIS: DataFormatterGroupAxis = {
   label: ''
 }
 
-export const DEFAULT_DATA_FORMATTER_AXIS: DataFormatterAxis = {
+export const DEFAULT_DATA_FORMATTER_X_Y_AXIS: DataFormatterXYAxis = {
   scaleDomain: ['auto', 'auto'],
   scaleRange: [0, 0.9],
   label: '',
+  valueIndex: 0
 }
 
 export const DEFAULT_DATA_FORMATTER_CONTAINER: DataFormatterContainer = {
@@ -214,8 +241,15 @@ export const DEFAULT_DATA_FORMATTER_MULTI_VALUE: DataFormatterMultiValue = {
   type: 'multiValue',
   visibleFilter: (datum, context) => true,
   categoryLabels: [],
-  xAxis: { ...DEFAULT_DATA_FORMATTER_AXIS },
-  yAxis: { ...DEFAULT_DATA_FORMATTER_AXIS },
+  valueLabels: [],
+  xAxis: {
+    ...DEFAULT_DATA_FORMATTER_X_Y_AXIS,
+    valueIndex: 0
+  },
+  yAxis: {
+    ...DEFAULT_DATA_FORMATTER_X_Y_AXIS,
+    valueIndex: 1
+  },
   container: {
     ...DEFAULT_DATA_FORMATTER_CONTAINER
   },

package/src/grid/contextObserverCallback.ts

@@ -6,11 +6,12 @@ import {
   groupDataMapObservable,
   textSizePxObservable } from '../utils/observables'
 import {
-  gridComputedLayoutDataObservable,
+  gridComputedAxesDataObservable,
   gridAxesSizeObservable,
+  gridAxesContainerSizeObservable,
   gridSeriesLabelsObservable,
   gridVisibleComputedDataObservable,
-  gridVisibleComputedLayoutDataObservable,
+  gridVisibleComputedAxesDataObservable,
   // isSeriesSeprateObservable,
   gridContainerPositionObservable,
   computedStackedDataObservables,
@@ -21,6 +22,7 @@ import {
   gridGraphicTransformObservable,
   gridGraphicReverseScaleObservable,
 } from '../utils/gridObservables'
+import { containerSizeObservable } from '../utils/observables'
 
 export const contextObserverCallback: ContextObserverCallback<'grid'> = ({ subject, observer }) => {
   
@@ -38,7 +40,16 @@ export const contextObserverCallback: ContextObserverCallback<'grid'> = ({ subje
     computedData$: observer.computedData$,
     fullDataFormatter$: observer.fullDataFormatter$,
     layout$: observer.layout$,
-  })
+  }).pipe(
+    shareReplay(1)
+  )
+
+  const containerSize$ = containerSizeObservable({
+    layout$: observer.layout$,
+    containerPosition$: gridContainerPosition$
+  }).pipe(
+    shareReplay(1)
+  )
 
   const gridAxesSize$ = gridAxesSizeObservable({
     fullDataFormatter$: observer.fullDataFormatter$,
@@ -47,6 +58,13 @@ export const contextObserverCallback: ContextObserverCallback<'grid'> = ({ subje
     shareReplay(1)
   )
 
+  const gridAxesContainerSize$ = gridAxesContainerSizeObservable({
+    fullDataFormatter$: observer.fullDataFormatter$,
+    containerSize$: containerSize$
+  }).pipe(
+    shareReplay(1)
+  )
+
   const datumList$ = observer.computedData$.pipe(
     map(d => d.flat())
   ).pipe(
@@ -77,7 +95,7 @@ export const contextObserverCallback: ContextObserverCallback<'grid'> = ({ subje
     shareReplay(1)
   )
 
-  const computedLayoutData$ = gridComputedLayoutDataObservable({
+  const computedAxesData$ = gridComputedAxesDataObservable({
     computedData$: observer.computedData$,
     fullDataFormatter$: observer.fullDataFormatter$,
     layout$: observer.layout$,
@@ -91,8 +109,8 @@ export const contextObserverCallback: ContextObserverCallback<'grid'> = ({ subje
     shareReplay(1)
   )
 
-  const visibleComputedLayoutData$ = gridVisibleComputedLayoutDataObservable({
-    computedLayoutData$: computedLayoutData$,
+  const visibleComputedAxesData$ = gridVisibleComputedAxesDataObservable({
+    computedAxesData$: computedAxesData$,
   }).pipe(
     shareReplay(1)
   )
@@ -145,7 +163,9 @@ export const contextObserverCallback: ContextObserverCallback<'grid'> = ({ subje
     gridContainerPosition$: gridContainerPosition$,
     gridAxesTransform$: gridAxesTransform$,
     gridGraphicTransform$: gridGraphicTransform$,
-  })
+  }).pipe(
+    shareReplay(1)
+  )
 
 
   return {
@@ -157,14 +177,16 @@ export const contextObserverCallback: ContextObserverCallback<'grid'> = ({ subje
     textSizePx$,
     isSeriesSeprate$,
     gridContainerPosition$,
+    containerSize$,
     gridAxesSize$,
+    gridAxesContainerSize$,
     gridHighlight$,
     seriesLabels$,
     SeriesDataMap$,
     GroupDataMap$,
-    computedLayoutData$,
+    computedAxesData$,
     visibleComputedData$,
-    visibleComputedLayoutData$,
+    visibleComputedAxesData$,
     computedStackedData$,
     groupScaleDomainValue$,
     filteredMinMaxValue$,