@oliasoft-open-source/charts-library 5.15.0 → 5.16.0-beta-2

package/dist/index.js

@@ -1232,12 +1232,10 @@ var elasticOut = (t, s, p) => Math.pow(2, -10 * t) * Math.sin((t - s) * TAU / p)
 		return atEdge(t) ? t : t < .5 ? .5 * elasticIn(t * 2, s, p) : .5 + .5 * elasticOut(t * 2 - 1, s, p);
 	},
 	easeInBack(t) {
-		const s = 1.70158;
-		return t * t * ((s + 1) * t - s);
+		return t * t * (2.70158 * t - 1.70158);
 	},
 	easeOutBack(t) {
-		const s = 1.70158;
-		return (t -= 1) * t * ((s + 1) * t + s) + 1;
+		return (t -= 1) * t * (2.70158 * t + 1.70158) + 1;
 	},
 	easeInOutBack(t) {
 		let s = 1.70158;
@@ -19162,7 +19160,7 @@ var getMinorTickPositions = (majorTickPositions, scale) => {
 	const minorTickWidth = getLargestMajorTickWidth(majorTickPositions) / 10;
 	const startPosition = majorTickPositions[0];
 	const numMinorTicks = (majorTickPositions.length + 1) * MINOR_TICKS_PER_MAJOR;
-	return [...Array(numMinorTicks)]?.map((_, index) => {
+	return [...Array(numMinorTicks)].map((_, index) => {
 		const minorTickPosition = startPosition + (index - MINOR_TICKS_PER_MAJOR + 1) * minorTickWidth;
 		return parseFloat(minorTickPosition?.toFixed(1));
 	})?.filter((position) => isValidPosition(position, sortedMajorTickPositions, scale));
@@ -22511,7 +22509,7 @@ var useChartOptions = ({ chartRef, state, options, dispatch, generatedDatasets,
 	]);
 	const lineMarkersAnnotation = options?.annotations?.lineMarkersAnnotation ?? {};
 	const lineMarkersPluginEnabled = Boolean(options?.plugins?.lineMarkersPlugin?.enabled ?? lineMarkersAnnotation?.enabled);
-	const plugins = {
+	const plugins = useMemo(() => ({
 		datalabels,
 		annotationDraggerPlugin: { enabled: state?.enableDragAnnotation },
 		calloutConnectorPlugin: { enableCalloutAnnotation: options?.annotations.enableCalloutAnnotation },
@@ -22540,7 +22538,27 @@ var useChartOptions = ({ chartRef, state, options, dispatch, generatedDatasets,
 			lineHeight
 		},
 		...dragData
-	};
+	}), [
+		annotation,
+		customLegendPlugin,
+		datalabels,
+		dragData,
+		fontSize,
+		legend,
+		lineHeight,
+		lineMarkersPluginEnabled,
+		maxWidth,
+		options?.annotations.enableCalloutAnnotation,
+		panOptions,
+		position,
+		showLabel,
+		state?.enableDragAnnotation,
+		text,
+		tooltip,
+		xOffset,
+		yOffset,
+		zoomOptions
+	]);
 	return useMemo(() => ({
 		persistenceId,
 		layout: { padding: layoutPadding },
@@ -22568,6 +22586,7 @@ var useChartOptions = ({ chartRef, state, options, dispatch, generatedDatasets,
 		layoutPadding,
 		lineEnabled,
 		onAnimationComplete,
+		onChartHover,
 		options?.annotations,
 		options?.chartStyling?.maintainAspectRatio,
 		options?.chartStyling?.performanceMode,
@@ -24705,8 +24724,8 @@ var defaultGraph$2 = (graph) => ({
 var defaultLegend$2 = (legend) => ({
 	display: legend?.display ?? true,
 	useDataset: legend?.useDataset || false,
-	position: legend?.position || Position.Bottom,
-	align: legend?.align || AlignOptions.Center
+	position: normalizeLegendPosition(legend?.position, Position.Bottom),
+	align: normalizeLegendAlign(legend?.align, AlignOptions.Center)
 });
 var defaultChartOptions$2 = (options) => ({
 	enableZoom: options?.enableZoom || false,
@@ -24720,7 +24739,7 @@ var defaultInteractions$2 = (interactions) => ({
 var defaultChartData$1 = (data) => {
 	return {
 		labels: data?.labels || [],
-		datasets: data?.datasets || []
+		datasets: Array.isArray(data?.datasets) ? data.datasets : []
 	};
 };
 var getDefaultProps$2 = (props) => {
@@ -24730,7 +24749,7 @@ var getDefaultProps$2 = (props) => {
 		testId: chart?.testId ?? null,
 		data: defaultChartData$1(chart?.data),
 		options: {
-			title: options?.title || "",
+			title: normalizeTitle(options?.title),
 			chartStyling: defaultChartStyling$2(options?.chartStyling),
 			tooltip: defaultTooltip$2(options?.tooltip),
 			graph: defaultGraph$2(options?.graph),
@@ -26188,12 +26207,10 @@ var require_helpers_dataset = /* @__PURE__ */ __commonJSMin(((exports) => {
 			return atEdge(t) ? t : t < .5 ? .5 * elasticIn(t * 2, s, p) : .5 + .5 * elasticOut(t * 2 - 1, s, p);
 		},
 		easeInBack(t) {
-			const s = 1.70158;
-			return t * t * ((s + 1) * t - s);
+			return t * t * (2.70158 * t - 1.70158);
 		},
 		easeOutBack(t) {
-			const s = 1.70158;
-			return (t -= 1) * t * ((s + 1) * t + s) + 1;
+			return (t -= 1) * t * (2.70158 * t + 1.70158) + 1;
 		},
 		easeInOutBack(t) {
 			let s = 1.70158;

package/dist/src/components/bar-chart/bar-chart.interface.d.ts

@@ -55,17 +55,17 @@ export interface IBarChartData extends ICommonData {
     data: IBarChartBaseData;
     options: IBarOptions;
 }
-type ILooseBarAxis = DeepPartial<ICommonAxis<string>> & {
+type ILooseBarAxis = Omit<DeepPartial<ICommonAxis<string>>, 'gridLines'> & {
     [key: string]: unknown;
+    gridLines?: unknown;
 };
-type ILooseBarAnnotation = DeepPartial<ICommonAnnotationsData> & {
+type ILooseBarAnnotation = Omit<DeepPartial<ICommonAnnotationsData>, 'annotationAxis'> & {
     [key: string]: unknown;
-} & {
     annotationAxis?: string;
     type?: string;
     value?: number | string | null;
 };
-export type IBarOptionsInput = Omit<DeepPartial<IBarOptions>, 'title' | 'direction' | 'axes' | 'legend' | 'chartStyling' | 'interactions' | 'annotations'> & {
+export type IBarOptionsInput = Omit<DeepPartial<IBarOptions>, 'title' | 'direction' | 'axes' | 'legend' | 'chartStyling' | 'interactions' | 'annotations' | 'additionalAxesOptions' | 'scales'> & {
     [key: string]: unknown;
     title?: unknown;
     direction?: string;
@@ -84,12 +84,17 @@ export type IBarOptionsInput = Omit<DeepPartial<IBarOptions>, 'title' | 'directi
         minHeight?: number | string;
         [key: string]: unknown;
     };
+    additionalAxesOptions?: Omit<DeepPartial<IBarAdditionalAxesOptions>, 'chartScaleType'> & {
+        chartScaleType?: string;
+        [key: string]: unknown;
+    };
+    scales?: Record<string, unknown>;
     interactions?: DeepPartial<ICommonInteractions> & {
         enableZoom?: boolean;
         enablePan?: boolean;
         [key: string]: unknown;
     };
-    annotations?: (DeepPartial<ICommonAnnotations> & {
+    annotations?: (Omit<DeepPartial<ICommonAnnotations>, 'annotationsData'> & {
         annotationsData?: ILooseBarAnnotation[];
     }) | null;
 };

package/dist/src/components/common/common.interface.d.ts

@@ -5,7 +5,7 @@ import { AnnotationType as DraggableAnnotationType, DragAxis } from './plugins/a
 import { AlignOptions, Position } from './enums';
 import { ILineMarkersAnnotation } from '../line-chart/plugins/line-markers-plugin/types';
 export type TAxisPosition = 'top' | 'bottom' | 'left' | 'right';
-export type DeepPartial<T> = T extends (...args: unknown[]) => unknown ? T : T extends Array<infer U> ? Array<DeepPartial<U>> : T extends object ? {
+export type DeepPartial<T> = T extends (...args: any[]) => any ? T : T extends Array<infer U> ? Array<DeepPartial<U>> : T extends object ? {
     [K in keyof T]?: DeepPartial<T[K]>;
 } : T;
 export interface ICommonDataValue {
@@ -139,9 +139,9 @@ export interface ICommonLegend {
     align?: AlignOptions;
 }
 export interface ICommonTooltipCallbacks {
-    title?: () => void;
-    label?: () => void;
-    afterLabel?: () => void;
+    title?: (...args: unknown[]) => unknown;
+    label?: (...args: unknown[]) => unknown;
+    afterLabel?: (...args: unknown[]) => unknown;
 }
 export interface ICommonTooltip {
     tooltips?: boolean;
@@ -204,9 +204,9 @@ export interface ICommonDragData {
     roundPoints?: boolean;
     dragX?: boolean;
     dragY?: boolean;
-    onDragStart?: () => void;
-    onDrag?: () => void;
-    onDragEnd?: () => void;
+    onDragStart?: (event: unknown, element: unknown) => unknown;
+    onDrag?: (event: unknown, datasetIndex: number, index: number, value: unknown) => unknown;
+    onDragEnd?: (event: unknown, datasetIndex: number, index: number, value: unknown) => unknown;
 }
 export interface ICommonOptions {
     title?: string | string[];

package/dist/src/components/common/helpers/get-custom-legend-plugin-example.d.ts

@@ -1,8 +1,6 @@
-import { Chart, ChartConfiguration, Plugin } from 'chart.js';
+import { Plugin } from 'chart.js';
 /**
  * Gets an example custom legend plugin for use in storybook.
  * @param {string} customLegendContainerID - the id of the div container to put the generated legend in
  */
-export declare const getCustomLegendPlugin: (customLegendContainerID: string) => {
-    afterUpdate(chart: Chart, _args: Plugin, _options: ChartConfiguration): void;
-};
+export declare const getCustomLegendPlugin: (customLegendContainerID: string) => Plugin;

package/dist/src/components/line-chart/hooks/use-chart-options.d.ts

@@ -1,5 +1,5 @@
 import { Dispatch, RefObject } from 'react';
-import { Chart } from 'chart.js';
+import { Chart, ChartOptions } from 'chart.js';
 import { IState } from '../state/state.interfaces';
 import { ILineChartOptions, TGeneratedLineChartDatasets } from '../line-chart.interface';
 interface IUseChartOptions {
@@ -13,7 +13,7 @@ interface IUseChartOptions {
 /**
  * Custom hook to generate chart options.
  */
-export declare const useChartOptions: ({ chartRef, state, options, dispatch, generatedDatasets, persistenceId, }: IUseChartOptions) => import('node_modules/chart.js/dist/types/utils')._DeepPartialObject<import('chart.js').CoreChartOptions<"line"> & import('chart.js').ElementChartOptions<"line"> & import('chart.js').PluginChartOptions<"line"> & import('chart.js').DatasetChartOptions<"line"> & import('chart.js').ScaleChartOptions<"line"> & import('chart.js').LineControllerChartOptions> & {
+export declare const useChartOptions: ({ chartRef, state, options, dispatch, generatedDatasets, persistenceId, }: IUseChartOptions) => ChartOptions<"line"> & {
     persistenceId?: string;
 };
 export {};

package/dist/src/components/line-chart/line-chart.interface.d.ts

@@ -7,6 +7,7 @@ export interface ILChartOptions extends ICommonChartOptions {
     enableZoom?: boolean;
     enablePan?: boolean;
     enableDragAnnotation?: boolean;
+    enableDragPoints?: boolean;
 }
 export interface ILineChartGraph {
     lineTension?: number;
@@ -38,7 +39,7 @@ export interface ILineChartAdditionalAxesOptions {
 export interface IUnitOptions {
     options: string[];
     selectedUnit: string;
-    setSelectedUnit: () => void;
+    setSelectedUnit: (value: string) => void;
 }
 export interface ILineChartAxis<PositionType = TAxisPosition> {
     id?: string;
@@ -59,7 +60,7 @@ export interface ILineChartAxes {
 export interface IDepthType {
     options: string[];
     selectedUnit: string;
-    setSelectedUnit: () => void;
+    setSelectedUnit: (value: string) => void;
 }
 export interface ILineChartStyling extends ICommonStyling {
     squareAspectRatio?: number | boolean;
@@ -92,9 +93,10 @@ export interface ILineChartOptions extends ICommonOptions {
     dragData?: ICommonDragData;
     depthType?: IDepthType | object;
 }
-type ILooseLineAxis = DeepPartial<ILineChartAxis<string>> & {
+type ILooseLineAxis = Omit<DeepPartial<ILineChartAxis<string>>, 'gridLines'> & {
     [key: string]: unknown;
     stepSize?: unknown;
+    gridLines?: unknown;
 };
 type ILooseLineAnnotation = {
     [key: string]: unknown;
@@ -122,7 +124,7 @@ type ILooseLineAnnotation = {
     onDrag?: (...args: unknown[]) => void;
     onDragEnd?: (...args: unknown[]) => void;
 };
-export type ILineChartOptionsInput = Omit<DeepPartial<ILineChartOptions>, 'title' | 'axes' | 'legend' | 'chartStyling' | 'interactions' | 'graph' | 'annotations' | 'additionalAxesOptions'> & {
+export type ILineChartOptionsInput = Omit<DeepPartial<ILineChartOptions>, 'title' | 'axes' | 'legend' | 'chartStyling' | 'interactions' | 'graph' | 'annotations' | 'additionalAxesOptions' | 'scales' | 'plugins'> & {
     [key: string]: unknown;
     title?: unknown;
     direction?: string;
@@ -131,6 +133,8 @@ export type ILineChartOptionsInput = Omit<DeepPartial<ILineChartOptions>, 'title
         y?: ILooseLineAxis[];
         [key: string]: ILooseLineAxis[] | undefined;
     };
+    scales?: Record<string, unknown>;
+    plugins?: Record<string, unknown>;
     legend?: Omit<DeepPartial<ILineLegend>, 'position' | 'align'> & {
         position?: string;
         align?: string;
@@ -153,7 +157,8 @@ export type ILineChartOptionsInput = Omit<DeepPartial<ILineChartOptions>, 'title
     annotations?: (Omit<DeepPartial<ICommonAnnotations>, 'annotationsData'> & {
         annotationsData?: ILooseLineAnnotation[];
     }) | ILooseLineAnnotation[] | null;
-    additionalAxesOptions?: DeepPartial<ILineChartAdditionalAxesOptions> & {
+    additionalAxesOptions?: Omit<DeepPartial<ILineChartAdditionalAxesOptions>, 'chartScaleType'> & {
+        chartScaleType?: string;
         stepSize?: unknown;
         range?: ILineRange | ILineChartRange | Record<string, ILineChartRange | undefined>;
     } & Record<string, unknown>;

package/dist/src/components/line-chart/utils/get-line-chart-tooltips.d.ts

@@ -22,9 +22,9 @@ declare const getLineChartToolTips: (options: ILineChartOptions) => {
     boxHeight: number;
     boxPadding: number;
     callbacks: {
-        title: (() => void) | ((tooltipItem: TooltipItem<any>[]) => string);
-        label: (() => void) | ((tooltipItem: TooltipItem<any>) => string);
-        afterLabel: (() => void) | ((tooltipItem: Record<string, any>) => string);
+        title: ((...args: unknown[]) => unknown) | ((tooltipItem: TooltipItem<any>[]) => string);
+        label: ((...args: unknown[]) => unknown) | ((tooltipItem: TooltipItem<any>) => string);
+        afterLabel: ((...args: unknown[]) => unknown) | ((tooltipItem: Record<string, any>) => string);
     };
 };
 export default getLineChartToolTips;

package/dist/src/components/pie-chart/pie-chart.interface.d.ts

@@ -1,4 +1,4 @@
-import { IChartDataLabelsOptions, IChartGeneratedLabel, IChartLegendItemFilter, ICommonData, ICommonDataValue, ICommonDataset, ICommonLegend, ICommonOptions } from '../common/common.interface';
+import { DeepPartial, IChartDataLabelsOptions, IChartGeneratedLabel, IChartLegendItemFilter, ICommonChartOptions, ICommonData, ICommonDataValue, ICommonDataset, ICommonLegend, ICommonOptions, ICommonStyling, ICommonTooltip } from '../common/common.interface';
 export interface IPieLegend extends ICommonLegend {
     useDataset?: boolean;
 }
@@ -35,8 +35,35 @@ export interface IPieChartData extends ICommonData {
     data: IPieData;
     options: IPieOptions;
 }
+export type IPieOptionsInput = Omit<DeepPartial<IPieOptions>, 'title' | 'graph' | 'legend' | 'chartStyling' | 'tooltip' | 'chartOptions' | 'interactions'> & {
+    [key: string]: unknown;
+    title?: unknown;
+    graph?: DeepPartial<IPieGraph>;
+    legend?: Omit<DeepPartial<IPieLegend>, 'position' | 'align'> & {
+        position?: string;
+        align?: string;
+        [key: string]: unknown;
+    };
+    chartStyling?: DeepPartial<ICommonStyling> & {
+        [key: string]: unknown;
+    };
+    tooltip?: DeepPartial<ICommonTooltip>;
+    chartOptions?: DeepPartial<ICommonChartOptions>;
+    interactions?: DeepPartial<ICommonOptions['interactions']> & {
+        [key: string]: unknown;
+    };
+};
+export interface IPieChartDataInput extends Omit<IPieChartData, 'data' | 'options'> {
+    data?: Omit<DeepPartial<IPieChartData['data']>, 'datasets'> & {
+        datasets?: Array<(Omit<DeepPartial<IPieChartDataset>, 'data'> & {
+            data?: Array<DeepPartial<IPieDataValue> | number>;
+            [key: string]: unknown;
+        }) | object | null>;
+    };
+    options?: IPieOptionsInput;
+}
 export interface IPieChartProps {
-    chart: IPieChartData;
+    chart: IPieChartDataInput;
     testId?: string | null;
 }
 export type IPieGeneratedLabel = IChartGeneratedLabel;

package/dist/src/components/scatter-chart/scatter-chart.interface.d.ts

@@ -48,14 +48,13 @@ export interface IScatterChartData extends ICommonData {
 type ILooseScatterAxis = DeepPartial<ICommonAxis<string>> & {
     [key: string]: unknown;
 };
-type ILooseScatterAnnotation = DeepPartial<ICommonAnnotationsData> & {
+type ILooseScatterAnnotation = Omit<DeepPartial<ICommonAnnotationsData>, 'annotationAxis'> & {
     [key: string]: unknown;
-} & {
     annotationAxis?: string;
     type?: string;
     value?: number | string | null;
 };
-export type IScatterOptionsInput = Omit<DeepPartial<IScatterOptions>, 'title' | 'direction' | 'axes' | 'legend' | 'chartStyling' | 'interactions' | 'annotations'> & {
+export type IScatterOptionsInput = Omit<DeepPartial<IScatterOptions>, 'title' | 'direction' | 'axes' | 'legend' | 'chartStyling' | 'interactions' | 'annotations' | 'scales'> & {
     [key: string]: unknown;
     title?: unknown;
     direction?: string;
@@ -64,6 +63,7 @@ export type IScatterOptionsInput = Omit<DeepPartial<IScatterOptions>, 'title' |
         y?: ILooseScatterAxis[];
         [key: string]: ILooseScatterAxis[] | undefined;
     };
+    scales?: Record<string, unknown>;
     legend?: Omit<DeepPartial<IScatterLegend>, 'position' | 'align'> & {
         position?: string;
         align?: string;
@@ -77,7 +77,7 @@ export type IScatterOptionsInput = Omit<DeepPartial<IScatterOptions>, 'title' |
         enablePan?: boolean;
         [key: string]: unknown;
     };
-    annotations?: (DeepPartial<ICommonAnnotations> & {
+    annotations?: (Omit<DeepPartial<ICommonAnnotations>, 'annotationsData'> & {
         annotationsData?: ILooseScatterAnnotation[];
     }) | null;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oliasoft-open-source/charts-library",
-  "version": "5.15.0",
+  "version": "5.16.0-beta-2",
   "description": "React Chart Library (based on Chart.js and react-chart-js-2)",
   "homepage": "https://gitlab.com/oliasoft-open-source/charts-library",
   "bugs": {
@@ -46,20 +46,18 @@
     "react-use": "^17.6.0"
   },
   "devDependencies": {
-    "@oliasoft-open-source/react-ui-library": "^5.21.5",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@oliasoft-open-source/react-ui-library": "6.0.0-beta-3",
     "@oliasoft-open-source/units": "^5.0.0",
-    "@storybook/addon-docs": "^10.2.17",
-    "@storybook/addon-themes": "^10.2.17",
-    "@storybook/react-vite": "^10.3.6",
-    "@storybook/testing-library": "^0.2.2",
+    "@storybook/addon-docs": "^10.4.0",
+    "@storybook/addon-themes": "^10.4.0",
+    "@storybook/react-vite": "^10.4.0",
     "@types/node": "^22.15.17",
     "@types/object-hash": "^3.0.6",
     "@types/react": "^18.2.24",
-    "@vitejs/plugin-react": "^6.0.1",
-    "@vitest/coverage-v8": "4.1.6",
-    "ajv": "8.17.1",
-    "ajv-errors": "^3.0.0",
-    "ajv-keywords": "^5.1.0",
+    "@types/react-dom": "^18.3.7",
+    "@vitejs/plugin-react": "^6.0.2",
+    "@vitest/coverage-v8": "4.1.7",
     "classnames": "^2.5.1",
     "es-toolkit": "^1.44.0",
     "http-server": "^14.1.1",
@@ -73,27 +71,22 @@
     "prettier": "3.5.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
-    "storybook": "^10.2.17",
-    "typescript": "^5.9.3",
-    "vite": "8.0.12",
+    "storybook": "^10.4.0",
+    "typescript": "^6.0.3",
+    "vite": "8.0.14",
     "vite-plugin-css-injected-by-js": "^5.0.1",
-    "vite-plugin-dts": "^5.0.0",
-    "vite-plugin-optimize-persist": "^0.1.2",
+    "vite-plugin-dts": "^5.0.1",
     "vite-plugin-svgr": "^5.2.0",
-    "vitest": "^4.1.6"
+    "vitest": "^4.1.7"
   },
   "peerDependencies": {
-    "@oliasoft-open-source/react-ui-library": "^5",
-    "@oliasoft-open-source/units": "^4",
-    "ajv": "^8.17.1",
-    "ajv-errors": "^3.0.0",
-    "ajv-keywords": "^5.1.0",
+    "@oliasoft-open-source/react-ui-library": "^6",
+    "@oliasoft-open-source/units": "^5",
     "classnames": "^2.5.1",
     "es-toolkit": "^1",
     "immer": "^9 || ^10",
-    "react": "^17 || ^18",
-    "react-dom": "^17 || ^18"
+    "react": "^18",
+    "react-dom": "^18"
   },
   "scripts": {
     "build:package": "tsc && vite build",
@@ -106,6 +99,7 @@
     "prettier:fix": "prettier --write \"**/*.{ts,tsx,js,jsx,json,css,less}\"",
     "preview:storybook": "pnpm exec http-server ./public -o -p 9005 -c-1",
     "test": "pnpm run prettier:check && pnpm run lint:check && pnpm run test:unit",
+    "test:stories:types": "tsc -p tsconfig.stories.json",
     "test:unit": "vitest run",
     "test:unit:coverage": "vitest run --coverage"
   }