@orbcharts/core 3.0.0-beta.8 → 3.0.0

package/dist/src/defaults.d.ts

@@ -1,4 +1,4 @@
-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';
+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,6 +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_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/lib/core-types.ts

@@ -1,7 +1,7 @@
-
-
-export * from '@orbcharts/core-types'
-
-// test
-// export * from '../../orbcharts-core-types/src'
-
+
+
+export * from '@orbcharts/core-types'
+
+// test
+// export * from '../../orbcharts-core-types/src'
+

package/package.json

@@ -1,42 +1,42 @@
-{
-  "name": "@orbcharts/core",
-  "version": "3.0.0-beta.8",
-  "description": "OrbCharts is an open source chart library based on d3.js and rx.js",
-  "author": "Blue Planet Inc.",
-  "license": "Apache-2.0",
-  "keywords": [
-    "d3",
-    "rxjs",
-    "svg",
-    "visualization",
-    "infographic",
-    "graph",
-    "chart"
-  ],
-  "private": false,
-  "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org/"
-  },
-  "files": [
-    "*"
-  ],
-  "module": "./dist/orbcharts-core.es.js",
-  "types": "./dist/src/index.d.ts",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "vite build --mode production"
-  },
-  "devDependencies": {
-    "@types/d3": "^7.4.0",
-    "ts-loader": "^9.4.2",
-    "typescript": "^5.0.4",
-    "vite": "^5.3.5",
-    "vite-plugin-dts": "^3.7.3"
-  },
-  "dependencies": {
-    "@orbcharts/core-types": "^3.0.0-beta.5",
-    "d3": "^7.8.5",
-    "rxjs": "^7.8.1"
-  }
-}
+{
+  "name": "@orbcharts/core",
+  "version": "3.0.0",
+  "description": "OrbCharts is an open source chart library based on d3.js and rx.js",
+  "author": "Blue Planet Inc.",
+  "license": "Apache-2.0",
+  "keywords": [
+    "d3",
+    "rxjs",
+    "svg",
+    "visualization",
+    "infographic",
+    "graph",
+    "chart"
+  ],
+  "private": false,
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "files": [
+    "*"
+  ],
+  "module": "./dist/orbcharts-core.es.js",
+  "types": "./dist/src/index.d.ts",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "vite build --mode production"
+  },
+  "devDependencies": {
+    "@types/d3": "^7.4.0",
+    "ts-loader": "^9.4.2",
+    "typescript": "^5.0.4",
+    "vite": "^5.3.5",
+    "vite-plugin-dts": "^3.7.3"
+  },
+  "dependencies": {
+    "@orbcharts/core-types": "^3.0.0",
+    "d3": "^7.8.5",
+    "rxjs": "^7.8.1"
+  }
+}

package/src/AbstractChart.ts

@@ -1,57 +1,57 @@
-import * as d3 from 'd3'
-import {
-  Subject } from 'rxjs'
-import type {
-  ComputedDataFn,
-  DataValidator,
-  ChartEntity,
-  ChartType,
-  ChartParamsPartial,
-  ContextObserverCallback,
-  ChartOptionsPartial,
-  DataTypeMap,
-  DataFormatterTypeMap,
-  DataFormatterPartialTypeMap,
-  DataFormatterValidator,
-  EventTypeMap,
-  PluginEntity } from '../lib/core-types'
-import { createBaseChart } from './base/createBaseChart'
-import { createOrbChartsErrorMessage } from './utils/errorMessage'
-
-export abstract class AbstractChart<T extends ChartType> implements ChartEntity<T> {
-  selection: d3.Selection<SVGGElement, unknown, HTMLElement, unknown>
-  destroy: () => void
-  data$: Subject<DataTypeMap<T>> = new Subject()
-  dataFormatter$: Subject<DataFormatterPartialTypeMap<T>> = new Subject()
-  plugins$: Subject<PluginEntity<T, any, any>[]> = new Subject()
-  chartParams$: Subject<ChartParamsPartial> = new Subject()
-  event$: Subject<EventTypeMap<T>> = new Subject()
-
-  constructor (
-    { defaultDataFormatter, dataFormatterValidator, computedDataFn, dataValidator, contextObserverCallback }: {
-      defaultDataFormatter: DataFormatterTypeMap<T>
-      dataFormatterValidator: DataFormatterValidator<T>
-      computedDataFn: ComputedDataFn<T>
-      dataValidator: DataValidator<T>
-      contextObserverCallback: ContextObserverCallback<T>
-    },
-    element: HTMLElement | Element,
-    options?: ChartOptionsPartial<T>
-  ) {
-    try {
-      const baseChart = createBaseChart({ defaultDataFormatter, dataFormatterValidator, computedDataFn, dataValidator, contextObserverCallback })
-      const chartEntity = baseChart(element, options)
-
-      this.selection = chartEntity.selection
-      this.destroy = chartEntity.destroy
-      this.data$ = chartEntity.data$
-      this.dataFormatter$ = chartEntity.dataFormatter$
-      this.plugins$ = chartEntity.plugins$
-      this.chartParams$ = chartEntity.chartParams$
-      this.event$ = chartEntity.event$
-    } catch (e) {
-      console.error(createOrbChartsErrorMessage(e))
-    }
-  }
-  
-}
+import * as d3 from 'd3'
+import {
+  Subject } from 'rxjs'
+import type {
+  ComputedDataFn,
+  DataValidator,
+  ChartEntity,
+  ChartType,
+  ChartParamsPartial,
+  ContextObserverCallback,
+  ChartOptionsPartial,
+  DataTypeMap,
+  DataFormatterTypeMap,
+  DataFormatterPartialTypeMap,
+  DataFormatterValidator,
+  EventTypeMap,
+  PluginEntity } from '../lib/core-types'
+import { createBaseChart } from './base/createBaseChart'
+import { createOrbChartsErrorMessage } from './utils/errorMessage'
+
+export abstract class AbstractChart<T extends ChartType> implements ChartEntity<T> {
+  selection: d3.Selection<SVGGElement, unknown, HTMLElement, unknown>
+  destroy: () => void
+  data$: Subject<DataTypeMap<T>> = new Subject()
+  dataFormatter$: Subject<DataFormatterPartialTypeMap<T>> = new Subject()
+  plugins$: Subject<PluginEntity<T, any, any>[]> = new Subject()
+  chartParams$: Subject<ChartParamsPartial> = new Subject()
+  event$: Subject<EventTypeMap<T>> = new Subject()
+
+  constructor (
+    { defaultDataFormatter, dataFormatterValidator, computedDataFn, dataValidator, contextObserverCallback }: {
+      defaultDataFormatter: DataFormatterTypeMap<T>
+      dataFormatterValidator: DataFormatterValidator<T>
+      computedDataFn: ComputedDataFn<T>
+      dataValidator: DataValidator<T>
+      contextObserverCallback: ContextObserverCallback<T>
+    },
+    element: HTMLElement | Element,
+    options?: ChartOptionsPartial<T>
+  ) {
+    try {
+      const baseChart = createBaseChart({ defaultDataFormatter, dataFormatterValidator, computedDataFn, dataValidator, contextObserverCallback })
+      const chartEntity = baseChart(element, options)
+
+      this.selection = chartEntity.selection
+      this.destroy = chartEntity.destroy
+      this.data$ = chartEntity.data$
+      this.dataFormatter$ = chartEntity.dataFormatter$
+      this.plugins$ = chartEntity.plugins$
+      this.chartParams$ = chartEntity.chartParams$
+      this.event$ = chartEntity.event$
+    } catch (e) {
+      console.error(createOrbChartsErrorMessage(e))
+    }
+  }
+  
+}

package/src/GridChart.ts

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

package/src/MultiGridChart.ts

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