@oliasoft-open-source/charts-library 5.9.0-beta-9 → 5.9.0-beta-10

package/dist/index.d.ts

@@ -43,6 +43,7 @@ export declare enum ChartType {
     LINE = "line",
     BAR = "bar",
     PIE = "pie",
+    DOUGHNUT = "doughnut",
     SCATTER = "scatter"
 }
 
@@ -57,6 +58,10 @@ export declare enum CursorStyle {
     Move = "move"
 }
 
+export declare type DeepPartial<T> = T extends (...args: unknown[]) => unknown ? T : T extends Array<infer U> ? Array<DeepPartial<U>> : T extends object ? {
+    [K in keyof T]?: DeepPartial<T[K]>;
+} : T;
+
 export declare enum DragAxis {
     X = "x",
     Y = "y",
@@ -93,6 +98,17 @@ export declare enum GradientDirection {
     TopRightToBottomLeft = 7
 }
 
+export declare interface IAnnotationLabelConfig {
+    backgroundColor?: string;
+    display?: boolean;
+    position?: string;
+    color?: string;
+    font?: string;
+    borderColor?: string;
+    callout?: Record<string, unknown>;
+    [key: string]: unknown;
+}
+
 export declare interface IBarAdditionalAxesOptions extends ICommonAdditionalAxesOptions {
     stackedX?: boolean;
     stackedY?: boolean;
@@ -116,6 +132,11 @@ export declare interface IBarChartData extends ICommonData {
     options: IBarOptions;
 }
 
+export declare interface IBarChartDataInput extends Omit<IBarChartData, 'options' | 'data'> {
+    data?: DeepPartial<IBarChartData['data']>;
+    options?: IBarOptionsInput;
+}
+
 export declare interface IBarChartDataset extends ICommonDataset {
     isAnnotation?: boolean;
     annotationIndex?: number;
@@ -129,7 +150,7 @@ export declare interface IBarChartDataset extends ICommonDataset {
 }
 
 export declare interface IBarChartProps {
-    chart: IBarChartData;
+    chart: IBarChartDataInput;
 }
 
 export declare interface IBarDefaultProps {
@@ -162,7 +183,7 @@ export declare interface IBarLegend extends ICommonLegend {
 }
 
 export declare interface IBarOptions extends ICommonOptions {
-    direction: 'vertical' | 'horizontal';
+    direction?: 'vertical' | 'horizontal';
     axes: IBarAxes;
     scales?: ICommonScales;
     additionalAxesOptions?: IBarAdditionalAxesOptions;
@@ -173,6 +194,8 @@ export declare interface IBarOptions extends ICommonOptions {
     dragData?: ICommonDragData;
 }
 
+export declare type IBarOptionsInput = DeepPartial<IBarOptions>;
+
 export declare interface IBarStyling extends ICommonStyling {
     squareAspectRatio?: boolean;
     layoutPadding?: string | number | {
@@ -183,11 +206,30 @@ export declare interface IBarStyling extends ICommonStyling {
     };
 }
 
+export declare interface ICalloutLabelConfig {
+    enabled?: boolean;
+    color?: string;
+    font?: string;
+    borderColor?: string;
+    strokeStyle?: string;
+    lineWidth?: number;
+    startOffset?: number;
+    endOffset?: number;
+    margin?: number;
+    xValue?: number;
+    yValue?: number;
+    xAdjust?: number;
+    yAdjust?: number;
+    onDragStart?: (coordinates: ICoordinates, annotation: ICommonAnnotationsData) => void;
+    onDrag?: (coordinates: ICoordinates, annotation: ICommonAnnotationsData) => void;
+    onDragEnd?: (coordinates: ICoordinates, annotation: ICommonAnnotationsData) => void;
+}
+
 export declare interface IChartDataLabelsOptions {
     display?: 'auto' | boolean;
     align?: 'center';
     anchor?: 'center';
-    formatter?: (_value: any, context: any) => any;
+    formatter?: (_value: unknown, context: unknown) => unknown;
 }
 
 export declare interface IChartGeneratedLabel {
@@ -198,7 +240,7 @@ export declare interface IChartGeneratedLabel {
 }
 
 declare interface IChartGraph {
-    showMinorGridlines: boolean;
+    showMinorGridlines?: boolean;
 }
 
 export declare interface IChartLegendItemFilter {
@@ -209,8 +251,8 @@ export declare interface IChartLegendItemFilter {
 
 export declare interface ICommonAdditionalAxesOptions {
     chartScaleType?: 'linear' | 'logarithmic';
-    reverse: boolean;
-    beginAtZero: boolean;
+    reverse?: boolean;
+    beginAtZero?: boolean;
     stepSize?: number;
     stacked?: boolean;
     suggestedMin?: number;
@@ -220,14 +262,14 @@ export declare interface ICommonAdditionalAxesOptions {
 }
 
 export declare interface ICommonAnnotation {
-    showLabel: boolean;
-    text: string | string[];
-    position: string;
-    fontSize: number;
-    xOffset: number;
-    yOffset: number;
-    maxWidth: number;
-    lineHeight: number;
+    showLabel?: boolean;
+    text?: string | string[];
+    position?: string;
+    fontSize?: number;
+    xOffset?: number;
+    yOffset?: number;
+    maxWidth?: number;
+    lineHeight?: number;
 }
 
 export declare interface ICommonAnnotationElement {
@@ -268,21 +310,21 @@ export declare interface ICommonAnnotationsData {
     hideLegend?: boolean;
     labelOffsetPx?: number;
     id?: string;
-    adjustScaleRange: boolean;
-    annotationAxis: 'x' | 'y';
-    rotation: number;
-    color: string;
-    endValue: number;
+    adjustScaleRange?: boolean;
+    annotationAxis?: 'x' | 'y';
+    rotation?: number;
+    color?: string;
+    endValue?: number;
     borderWidth?: number;
     backgroundColor?: string;
-    label: string;
-    labelConfig?: Record<string, any>;
-    type: DraggableAnnotationType;
-    value: number;
-    xMin: number;
-    xMax: number;
-    yMin: number;
-    yMax: number;
+    label?: string;
+    labelConfig?: IAnnotationLabelConfig;
+    type?: DraggableAnnotationType;
+    value?: number;
+    xMin?: number;
+    xMax?: number;
+    yMin?: number;
+    yMax?: number;
     xValue?: number;
     yValue?: number;
     radius?: number;
@@ -303,18 +345,18 @@ export declare interface ICommonAnnotationsData {
     opacity?: number;
 }
 
-export declare interface ICommonAxis<PositionType = any> {
-    label: string;
-    position: PositionType;
-    color: string | string[];
+export declare interface ICommonAxis<PositionType = string> {
+    label?: string;
+    position?: PositionType;
+    color?: string | string[];
     unit?: string;
     gridLines?: boolean;
     stepSize?: number;
 }
 
 export declare interface ICommonChartOptions {
-    enableZoom: boolean;
-    enablePan: boolean;
+    enableZoom?: boolean;
+    enablePan?: boolean;
 }
 
 export declare interface ICommonChartPlugins {
@@ -398,8 +440,8 @@ export declare interface ICommonInteractions {
 
 export declare interface ICommonLegend {
     display: boolean;
-    position: Position;
-    align: AlignOptions;
+    position?: Position;
+    align?: AlignOptions;
 }
 
 export declare interface ICommonOptions {
@@ -433,9 +475,9 @@ export declare interface ICommonStyling {
 }
 
 export declare interface ICommonTooltip {
-    tooltips: boolean;
-    showLabelsInTooltips: boolean;
-    scientificNotation: boolean;
+    tooltips?: boolean;
+    showLabelsInTooltips?: boolean;
+    scientificNotation?: boolean;
     callbacks?: ICommonTooltipCallbacks;
 }
 
@@ -528,21 +570,23 @@ export declare interface IGeneratedScatterChartDataset {
 }
 
 export declare interface ILChartOptions extends ICommonChartOptions {
-    showPoints: boolean;
-    closeOnOutsideClick: boolean;
-    showLine: boolean;
+    showPoints?: boolean;
+    closeOnOutsideClick?: boolean;
+    showLine?: boolean;
+    enableZoom?: boolean;
+    enablePan?: boolean;
     enableDragAnnotation?: boolean;
 }
 
 export declare interface ILineChartAdditionalAxesOptions {
-    chartScaleType: 'linear' | 'logarithmic';
-    reverse: boolean;
-    beginAtZero: boolean;
+    chartScaleType?: 'linear' | 'logarithmic';
+    reverse?: boolean;
+    beginAtZero?: boolean;
     stepSize?: number;
     suggestedMin?: number;
     suggestedMax?: number;
     range?: ILineRange;
-    autoAxisPadding: boolean;
+    autoAxisPadding?: boolean;
 }
 
 export declare interface ILineChartAxes {
@@ -551,12 +595,12 @@ export declare interface ILineChartAxes {
     [key: string]: ILineChartAxis[];
 }
 
-export declare interface ILineChartAxis<PositionType = any> {
+export declare interface ILineChartAxis<PositionType = TAxisPosition> {
     id?: string;
-    label: string;
-    position: PositionType;
-    color: string | string[];
-    unit?: IUnitOptions;
+    label?: string;
+    position?: PositionType;
+    color?: string | string[];
+    unit?: IUnitOptions | string;
     stepSize?: number;
     gridLines?: ILineChartGraph;
     min?: number | string;
@@ -572,6 +616,11 @@ export declare interface ILineChartData extends ICommonData {
     controlsPortalId?: string;
 }
 
+export declare interface ILineChartDataInput extends Omit<ILineChartData, 'data' | 'options'> {
+    data?: DeepPartial<ILineChartData['data']>;
+    options?: ILineChartOptionsInput;
+}
+
 export declare interface ILineChartDataset extends ICommonDataset {
     lineTension?: number;
     pointBackgroundColor?: string;
@@ -587,10 +636,10 @@ export declare interface ILineChartDataset extends ICommonDataset {
 }
 
 export declare interface ILineChartGraph {
-    lineTension: number;
-    spanGaps: boolean;
-    showDataLabels: boolean;
-    showMinorGridlines: boolean;
+    lineTension?: number;
+    spanGaps?: boolean;
+    showDataLabels?: boolean;
+    showMinorGridlines?: boolean;
 }
 
 export declare interface ILineChartOptions extends ICommonOptions {
@@ -609,8 +658,10 @@ export declare interface ILineChartOptions extends ICommonOptions {
     depthType?: IDepthType | object;
 }
 
+export declare type ILineChartOptionsInput = DeepPartial<ILineChartOptions>;
+
 export declare interface ILineChartProps {
-    chart: ILineChartData;
+    chart: ILineChartDataInput;
     table?: ReactNode;
     headerComponent?: ReactNode;
     subheaderComponent?: ReactNode;
@@ -632,8 +683,8 @@ export declare interface ILineChartStyling extends ICommonStyling {
 }
 
 export declare interface ILineChartTooltip extends ICommonTooltip {
-    hideSimulationName: boolean;
-    scientificNotation: boolean;
+    hideSimulationName?: boolean;
+    scientificNotation?: boolean;
 }
 
 export declare interface ILineInteractions extends ICommonInteractions {
@@ -725,13 +776,18 @@ export declare interface IScatterChartData extends ICommonData {
     options: IScatterOptions;
 }
 
+export declare interface IScatterChartDataInput extends Omit<IScatterChartData, 'data' | 'options'> {
+    data?: DeepPartial<IScatterChartData['data']>;
+    options?: IScatterOptionsInput;
+}
+
 export declare interface IScatterChartDataset extends ICommonDataset {
     data: IScatterDataValue[];
     hideLegend?: boolean;
 }
 
 export declare interface IScatterChartProps {
-    chart: IScatterChartData;
+    chart: IScatterChartDataInput;
     testId?: string | null;
 }
 
@@ -766,9 +822,11 @@ export declare interface IScatterOptions extends ICommonOptions {
     legend?: IScatterLegend;
     axes?: IScatterAxes;
     additionalAxesOptions?: ICommonAdditionalAxesOptions;
-    direction: ChartDirection;
+    direction?: ChartDirection;
 }
 
+export declare type IScatterOptionsInput = DeepPartial<IScatterOptions>;
+
 export declare interface IScatterTooltip {
     enabled?: boolean;
     tooltips?: boolean;
@@ -893,7 +951,7 @@ export declare type TVerticalMarkerTick = {
     labelOffsetPx?: number;
 };
 
-export declare type UnusedParameter = unknown | any;
+export declare type UnusedParameter = unknown;
 
 export { }
 

package/dist/index.js

@@ -18682,6 +18682,7 @@ var ChartType = /* @__PURE__ */ function(ChartType) {
 	ChartType["LINE"] = "line";
 	ChartType["BAR"] = "bar";
 	ChartType["PIE"] = "pie";
+	ChartType["DOUGHNUT"] = "doughnut";
 	ChartType["SCATTER"] = "scatter";
 	return ChartType;
 }({});
@@ -20062,10 +20063,34 @@ var defaultAxis = (position) => ({
 		setSelectedUnit: () => {}
 	}
 });
-var defaultAxes$2 = (axes) => ({
-	x: axes?.x || [defaultAxis("bottom")],
-	y: axes?.y || [defaultAxis("left")]
+var normalizeUnit = (unit) => {
+	if (!unit) return {
+		options: [],
+		selectedUnit: "",
+		setSelectedUnit: () => {}
+	};
+	if (typeof unit === "string") return unit;
+	return {
+		options: unit.options ?? [],
+		selectedUnit: unit.selectedUnit ?? "",
+		setSelectedUnit: unit.setSelectedUnit ?? (() => {})
+	};
+};
+var normalizeAxis = (axis, fallbackPosition) => ({
+	...defaultAxis(fallbackPosition),
+	...axis || {},
+	position: axis?.position ?? fallbackPosition,
+	color: axis?.color ?? "",
+	unit: normalizeUnit(axis?.unit)
 });
+var defaultAxes$2 = (axes) => {
+	const xAxes = Array.isArray(axes?.x) ? axes.x : [];
+	const yAxes = Array.isArray(axes?.y) ? axes.y : [];
+	return {
+		x: xAxes.length > 0 ? xAxes.map((axis, index) => normalizeAxis(axis, index % 2 === 0 ? "bottom" : "top")) : [defaultAxis("bottom")],
+		y: yAxes.length > 0 ? yAxes.map((axis, index) => normalizeAxis(axis, index % 2 === 0 ? "left" : "right")) : [defaultAxis("left")]
+	};
+};
 var defaultAdditionalAxesOptions$2 = (options) => ({
 	chartScaleType: options?.chartScaleType || "linear",
 	reverse: options?.reverse || false,
@@ -20073,23 +20098,30 @@ var defaultAdditionalAxesOptions$2 = (options) => ({
 	stepSize: options?.stepSize,
 	suggestedMin: options?.suggestedMin,
 	suggestedMax: options?.suggestedMax,
-	range: options?.range,
+	range: options?.range ? Object.fromEntries(Object.entries(options.range).map(([key, value]) => [key, {
+		min: value?.min ?? 0,
+		max: value?.max ?? 0
+	}])) : void 0,
 	autoAxisPadding: options?.autoAxisPadding ?? false
 });
-var defaultChartStyling$3 = (options) => ({
-	width: options?.width,
-	height: options?.height,
-	maintainAspectRatio: options?.maintainAspectRatio ?? false,
-	staticChartHeight: options?.staticChartHeight ?? false,
-	performanceMode: options?.performanceMode ?? true,
-	squareAspectRatio: options?.squareAspectRatio ?? false,
-	layoutPadding: options?.layoutPadding || {
-		top: 0,
-		bottom: 20,
-		left: 0,
-		right: 0
-	}
-});
+var defaultChartStyling$3 = (options) => {
+	const layoutPadding = options?.layoutPadding;
+	const normalizedLayoutPadding = typeof layoutPadding === "number" ? layoutPadding : {
+		top: layoutPadding?.top ?? 0,
+		bottom: layoutPadding?.bottom ?? 20,
+		left: layoutPadding?.left ?? 0,
+		right: layoutPadding?.right ?? 0
+	};
+	return {
+		width: options?.width,
+		height: options?.height,
+		maintainAspectRatio: options?.maintainAspectRatio ?? false,
+		staticChartHeight: options?.staticChartHeight ?? false,
+		performanceMode: options?.performanceMode ?? true,
+		squareAspectRatio: options?.squareAspectRatio ?? false,
+		layoutPadding: normalizedLayoutPadding
+	};
+};
 var defaultTooltip$3 = (tooltip) => ({
 	tooltips: tooltip?.tooltips ?? true,
 	showLabelsInTooltips: tooltip?.showLabelsInTooltips ?? false,
@@ -20104,9 +20136,18 @@ var defaultGraph$3 = (graph) => ({
 	showMinorGridlines: graph?.showMinorGridlines ?? false
 });
 var defaultAnnotationsData$2 = (annotationsData) => {
+	const normalizeDragRange = (range) => ({
+		x: Array.isArray(range?.x) && range.x.length >= 2 ? [range.x[0], range.x[1]] : void 0,
+		y: Array.isArray(range?.y) && range.y.length >= 2 ? [range.y[0], range.y[1]] : void 0
+	});
+	const asCallback = (fn) => typeof fn === "function" ? fn : void 0;
 	return annotationsData ? annotationsData.map((ann) => ({
 		...ann,
-		display: ann?.display ?? true
+		display: ann?.display ?? true,
+		onDragStart: asCallback(ann?.onDragStart),
+		onDrag: asCallback(ann?.onDrag),
+		onDragEnd: asCallback(ann?.onDragEnd),
+		dragRange: normalizeDragRange(ann?.dragRange)
 	})) : [];
 };
 var defaultAnnotations$2 = (annotations) => ({
@@ -20145,9 +20186,9 @@ var defaultLegend$3 = (legend) => ({
 	display: legend?.display ?? true,
 	position: legend?.position ?? Position.BottomLeft,
 	align: legend?.align ?? AlignOptions.Center,
-	customLegend: legend?.customLegend ?? {
-		customLegendPlugin: null,
-		customLegendContainerID: ""
+	customLegend: {
+		customLegendPlugin: legend?.customLegend?.customLegendPlugin && typeof legend.customLegend.customLegendPlugin === "object" && "id" in legend.customLegend.customLegendPlugin ? legend.customLegend.customLegendPlugin : null,
+		customLegendContainerID: typeof legend?.customLegend?.customLegendContainerID === "string" ? legend.customLegend.customLegendContainerID : ""
 	},
 	usePointStyle: legend?.usePointStyle ?? true
 });
@@ -20160,9 +20201,9 @@ var defaultChartOptions$3 = (options) => ({
 	closeOnOutsideClick: options?.closeOnOutsideClick ?? false
 });
 var defaultInteractions$3 = (interactions) => ({
-	onLegendClick: interactions?.onLegendClick,
-	onHover: interactions?.onHover,
-	onUnhover: interactions?.onUnhover,
+	onLegendClick: typeof interactions?.onLegendClick === "function" ? interactions.onLegendClick : void 0,
+	onHover: typeof interactions?.onHover === "function" ? interactions.onHover : void 0,
+	onUnhover: typeof interactions?.onUnhover === "function" ? interactions.onUnhover : void 0,
 	onAnimationComplete: interactions?.onAnimationComplete
 });
 var defaultDragData$1 = (dragData) => ({
@@ -20175,6 +20216,28 @@ var defaultDragData$1 = (dragData) => ({
 	onDrag: dragData?.onDrag,
 	onDragEnd: dragData?.onDragEnd
 });
+var normalizeLineChartOptions = (options = {}) => ({
+	title: options?.title ?? "",
+	scales: options?.scales ?? {
+		x: {},
+		y: {}
+	},
+	axes: defaultAxes$2(options?.axes),
+	additionalAxesOptions: defaultAdditionalAxesOptions$2(options?.additionalAxesOptions),
+	chartStyling: defaultChartStyling$3(options?.chartStyling),
+	tooltip: defaultTooltip$3(options?.tooltip),
+	graph: defaultGraph$3(options?.graph),
+	annotations: defaultAnnotations$2(options?.annotations),
+	legend: defaultLegend$3(options?.legend),
+	chartOptions: defaultChartOptions$3(options?.chartOptions),
+	interactions: defaultInteractions$3(options?.interactions),
+	dragData: defaultDragData$1(options?.dragData),
+	depthType: options?.depthType ?? {}
+});
+var normalizeLineDatasets = (datasets) => (datasets ?? []).map((dataset) => ({
+	...dataset,
+	data: dataset?.data ?? []
+}));
 var getDefaultProps$3 = (props) => {
 	const chart = props?.chart || {};
 	const options = chart?.options || {};
@@ -20182,22 +20245,8 @@ var getDefaultProps$3 = (props) => {
 		persistenceId: chart?.persistenceId ?? "",
 		controlsPortalId: chart?.controlsPortalId ?? "",
 		testId: chart?.testId ?? void 0,
-		data: chart?.data ?? { datasets: [] },
-		options: {
-			title: options?.title ?? "",
-			scales: options?.scales ?? {},
-			axes: defaultAxes$2(options?.axes),
-			additionalAxesOptions: defaultAdditionalAxesOptions$2(options?.additionalAxesOptions),
-			chartStyling: defaultChartStyling$3(options?.chartStyling),
-			tooltip: defaultTooltip$3(options?.tooltip),
-			graph: defaultGraph$3(options?.graph),
-			annotations: defaultAnnotations$2(options?.annotations),
-			legend: defaultLegend$3(options?.legend),
-			chartOptions: defaultChartOptions$3(options?.chartOptions),
-			interactions: defaultInteractions$3(options?.interactions),
-			dragData: defaultDragData$1(options?.dragData),
-			depthType: options?.depthType ?? {}
-		}
+		data: { datasets: normalizeLineDatasets(chart?.data?.datasets) },
+		options: normalizeLineChartOptions(options)
 	};
 };
 //#endregion
@@ -20537,6 +20586,7 @@ var getAxesDataFromMetasets = (generatedDatasets, scalesKeys, annotationsData) =
 };
 //#endregion
 //#region src/components/line-chart/utils/axis-scales/axis-scales.ts
+var toScalesMap = (scales) => scales ?? {};
 var shouldCalculate = (min, max) => !isNil(min) || !isNil(max);
 /**
 * Auto scales axis ranges (mix, max) if no explicit range is set
@@ -20546,7 +20596,7 @@ var shouldCalculate = (min, max) => !isNil(min) || !isNil(max);
 */
 var autoScale = (options, state, generatedDatasets) => {
 	const { additionalAxesOptions, annotations: { annotationsData = [], controlAnnotation = false } = {} } = options || {};
-	const scales = getLineChartScales(options, state) || {};
+	const scales = toScalesMap(getLineChartScales(options, state));
 	const datasets = controlAnnotation ? generatedDatasets.filter(({ isAnnotation }) => !isAnnotation) : generatedDatasets;
 	if (!additionalAxesOptions?.autoAxisPadding && !estimateDataSeriesHaveCloseValues(datasets)) return scales;
 	const scalesKeys = Object.keys(scales) ?? [];
@@ -20555,9 +20605,9 @@ var autoScale = (options, state, generatedDatasets) => {
 		const scale = scales[key];
 		const { min: propMin = void 0, max: propMax = void 0 } = scale;
 		const { min: suggestedMin, max: suggestedMax } = getSuggestedAxisRange({
-			data: data[key],
-			beginAtZero: additionalAxesOptions?.beginAtZero,
-			autoAxisPadding: additionalAxesOptions?.autoAxisPadding
+			data: (data[key] ?? []).filter((value) => typeof value === "number"),
+			beginAtZero: additionalAxesOptions?.beginAtZero ?? false,
+			autoAxisPadding: additionalAxesOptions?.autoAxisPadding ?? false
 		});
 		const res = { [key]: {
 			...scale,
@@ -20657,7 +20707,7 @@ var getLineChartToolTips = (options) => {
 			callbacks: {}
 		};
 	}
-	const { scientificNotation } = options?.tooltip ?? {};
+	const { scientificNotation = true } = options?.tooltip ?? {};
 	const getTooltipLabels = ({ xAxisID = "", yAxisID = "" }) => {
 		const xIndex = xAxisID?.length > 1 ? Number(xAxisID?.[1]) - 1 : 0;
 		const yIndex = yAxisID?.length > 1 ? Number(yAxisID?.[1]) - 1 : 0;
@@ -20682,7 +20732,7 @@ var getLineChartToolTips = (options) => {
 		return `${customFormatNumber$1(titleLabel === TooltipLabel.Y ? tooltipItem?.[0]?.parsed?.y : tooltipItem?.[0]?.parsed?.x, scientificNotation)} ${titleAxisLabel}`;
 	};
 	const labelCallback = (tooltipItem) => {
-		const { showLabelsInTooltips } = options?.tooltip ?? {};
+		const { showLabelsInTooltips = false } = options?.tooltip ?? {};
 		let label = tooltipItem?.dataset?.label || "";
 		const { valueLabel = "", valueAxisLabel = "" } = getTooltipLabels(tooltipItem?.dataset) ?? {};
 		const getTooltipItemValue = () => {
@@ -21185,6 +21235,9 @@ var getCalloutAnnotation = (refAnnotation, index) => {
 	const color = calloutCfg?.color ?? "hsl(60, 10.34482759%, 12.5%)";
 	const font = calloutCfg?.font ?? `12px "Roobert", "Noto Sans", sans-serif`;
 	const borderColor = calloutCfg?.borderColor ?? "transparent";
+	const onCalloutDragStart = typeof calloutCfg?.onDragStart === "function" ? calloutCfg.onDragStart : void 0;
+	const onCalloutDrag = typeof calloutCfg?.onDrag === "function" ? calloutCfg.onDrag : void 0;
+	const onCalloutDragEnd = typeof calloutCfg?.onDragEnd === "function" ? calloutCfg.onDragEnd : void 0;
 	const strokeStyle = calloutCfg.strokeStyle ?? baseAnnotation.borderColor;
 	const lineWidth = typeof calloutCfg.lineWidth === "number" ? calloutCfg.lineWidth : 1;
 	const startOffset = typeof calloutCfg.startOffset === "number" ? calloutCfg.startOffset : 6;
@@ -21227,14 +21280,14 @@ var getCalloutAnnotation = (refAnnotation, index) => {
 		leave: ({ element }, { chart }) => {
 			return handleLabelLeave(element, chart, { enableDrag: true });
 		},
-		onDragStart: calloutCfg?.onDragStart ? () => (coords) => {
-			return calloutCfg.onDragStart?.(coords, refAnnotation);
+		onDragStart: onCalloutDragStart ? () => (coords) => {
+			return onCalloutDragStart(coords, refAnnotation);
 		} : void 0,
-		onDrag: calloutCfg?.onDrag ? () => (coords) => {
-			return calloutCfg.onDrag?.(coords, refAnnotation);
+		onDrag: onCalloutDrag ? () => (coords) => {
+			return onCalloutDrag(coords, refAnnotation);
 		} : void 0,
-		onDragEnd: calloutCfg?.onDragEnd ? () => (coords) => {
-			return calloutCfg.onDragEnd?.(coords, refAnnotation);
+		onDragEnd: onCalloutDragEnd ? () => (coords) => {
+			return onCalloutDragEnd(coords, refAnnotation);
 		} : void 0,
 		calloutConnector: {
 			enabled: true,
@@ -21580,8 +21633,9 @@ var useChartPlugins = ({ options, resetZoom }) => {
 */
 var useToggleCustomLegendVisibility = (memoState, memoOptions) => {
 	useEffect(() => {
-		if (memoOptions?.legend?.customLegend?.customLegendPlugin) {
-			const parent = document.getElementById(memoOptions.legend.customLegend.customLegendContainerID);
+		const containerId = memoOptions?.legend?.customLegend?.customLegendContainerID;
+		if (memoOptions?.legend?.customLegend?.customLegendPlugin && typeof containerId === "string") {
+			const parent = document.getElementById(containerId);
 			if (parent !== null) parent.style.visibility = memoState.legendEnabled ? "visible" : "hidden";
 		}
 	}, [
@@ -22557,7 +22611,8 @@ var renderLegendItemSymbol = (dataset, chartType, index) => {
 				children: /* @__PURE__ */ jsx(TbSquareFilled, { color })
 			});
 		}
-		case ChartType.PIE: return /* @__PURE__ */ jsx("span", {
+		case ChartType.PIE:
+		case ChartType.DOUGHNUT: return /* @__PURE__ */ jsx("span", {
 			className: legend_module_default.legendItemPoint,
 			children: /* @__PURE__ */ jsx(Icon, { icon: /* @__PURE__ */ jsx(SvgCircle, {}) })
 		});
@@ -37217,7 +37272,7 @@ var getBarChartDataLabels = (options) => {
 */
 var getBarChartToolTips = (options) => {
 	const getTooltipLabels = (dataset) => {
-		const isDirectionVertical = isVertical(options.direction);
+		const isDirectionVertical = isVertical(options.direction ?? "vertical");
 		const x = Array.isArray(options.axes?.x) ? options.axes.x : [];
 		const y = Array.isArray(options.axes?.y) ? options.axes.y : [];
 		const getAxisIndex = (axisID) => {
@@ -37335,8 +37390,8 @@ var bar_chart_module_default = {
 //#endregion
 //#region src/components/bar-chart/bar-chart-default-props.ts
 var defaultAxes$1 = (axes) => ({
-	x: axes?.x || [{}],
-	y: axes?.y || [{}]
+	x: axes?.x ?? [{}],
+	y: axes?.y ?? [{}]
 });
 var defaultAdditionalAxesOptions$1 = (options) => ({
 	chartScaleType: options?.chartScaleType || "linear",
@@ -37368,9 +37423,18 @@ var defaultGraph$1 = (graph) => ({
 	showMinorGridlines: graph?.showMinorGridlines || false
 });
 var defaultAnnotationsData$1 = (annotationsData) => {
+	const normalizeDragRange = (range) => ({
+		x: Array.isArray(range?.x) && range.x.length >= 2 ? [range.x[0], range.x[1]] : void 0,
+		y: Array.isArray(range?.y) && range.y.length >= 2 ? [range.y[0], range.y[1]] : void 0
+	});
+	const asCallback = (fn) => typeof fn === "function" ? fn : void 0;
 	return annotationsData ? annotationsData.map((ann) => ({
 		...ann,
-		display: ann?.display ?? true
+		display: ann?.display ?? true,
+		onDragStart: asCallback(ann?.onDragStart),
+		onDrag: asCallback(ann?.onDrag),
+		onDragEnd: asCallback(ann?.onDragEnd),
+		dragRange: normalizeDragRange(ann?.dragRange)
 	})) : [];
 };
 var defaultAnnotations$1 = (annotations) => ({
@@ -37382,9 +37446,9 @@ var defaultLegend$1 = (legend) => ({
 	display: legend?.display ?? true,
 	position: legend?.position || Position.TopLeft,
 	align: legend?.align || AlignOptions.Center,
-	customLegend: legend?.customLegend || {
-		customLegendPlugin: null,
-		customLegendContainerID: ""
+	customLegend: {
+		customLegendPlugin: legend?.customLegend?.customLegendPlugin && typeof legend.customLegend.customLegendPlugin === "object" && "id" in legend.customLegend.customLegendPlugin ? legend.customLegend.customLegendPlugin : null,
+		customLegendContainerID: typeof legend?.customLegend?.customLegendContainerID === "string" ? legend.customLegend.customLegendContainerID : ""
 	}
 });
 var defaultChartOptions$1 = (options) => ({
@@ -37392,9 +37456,9 @@ var defaultChartOptions$1 = (options) => ({
 	enablePan: options?.enablePan || false
 });
 var defaultInteractions$1 = (interactions) => ({
-	onLegendClick: interactions?.onLegendClick,
-	onHover: interactions?.onHover,
-	onUnhover: interactions?.onUnhover
+	onLegendClick: typeof interactions?.onLegendClick === "function" ? interactions.onLegendClick : void 0,
+	onHover: typeof interactions?.onHover === "function" ? interactions.onHover : void 0,
+	onUnhover: typeof interactions?.onUnhover === "function" ? interactions.onUnhover : void 0
 });
 var defaultDragData = (dragData) => ({
 	enableDragData: dragData?.enableDragData ?? false,
@@ -37406,27 +37470,35 @@ var defaultDragData = (dragData) => ({
 	onDrag: dragData?.onDrag,
 	onDragEnd: dragData?.onDragEnd
 });
+var normalizeBarOptions = (options = {}) => ({
+	title: options?.title || "",
+	direction: options?.direction || "vertical",
+	axes: defaultAxes$1(options?.axes),
+	additionalAxesOptions: defaultAdditionalAxesOptions$1(options?.additionalAxesOptions),
+	chartStyling: defaultChartStyling$1(options?.chartStyling),
+	tooltip: defaultTooltip$1(options?.tooltip),
+	graph: defaultGraph$1(options?.graph),
+	annotations: defaultAnnotations$1(options?.annotations),
+	legend: defaultLegend$1(options?.legend),
+	chartOptions: defaultChartOptions$1(options?.chartOptions),
+	interactions: defaultInteractions$1(options?.interactions),
+	dragData: defaultDragData(options?.dragData)
+});
+var normalizeBarDatasets = (datasets) => (datasets ?? []).map((dataset) => ({
+	...dataset,
+	data: dataset?.data ?? []
+}));
 var getDefaultProps$1 = (props) => {
 	const chart = props?.chart || {};
 	const options = chart?.options || {};
 	return {
 		testId: chart?.testId ?? "",
 		controlsPortalId: chart?.controlsPortalId ?? "",
-		data: chart?.data,
-		options: {
-			title: options?.title || "",
-			direction: options?.direction || "vertical",
-			axes: defaultAxes$1(options?.axes),
-			additionalAxesOptions: defaultAdditionalAxesOptions$1(options?.additionalAxesOptions),
-			chartStyling: defaultChartStyling$1(options?.chartStyling),
-			tooltip: defaultTooltip$1(options?.tooltip),
-			graph: defaultGraph$1(options?.graph),
-			annotations: defaultAnnotations$1(options?.annotations),
-			legend: defaultLegend$1(options?.legend),
-			chartOptions: defaultChartOptions$1(options?.chartOptions),
-			interactions: defaultInteractions$1(options?.interactions),
-			dragData: defaultDragData(options?.dragData)
-		}
+		data: {
+			labels: chart?.data?.labels ?? [],
+			datasets: normalizeBarDatasets(chart?.data?.datasets)
+		},
+		options: normalizeBarOptions(options)
 	};
 };
 //#endregion
@@ -37661,25 +37733,29 @@ var useScatterChartConfig = (chart, chartRef) => {
 };
 //#endregion
 //#region src/components/scatter-chart/scatter-chart-get-default-props.ts
+var normalizeGradientColors = (colors) => (colors ?? GRADIENT_COLORS).map((item, index) => ({
+	offset: item.offset ?? index / Math.max((colors?.length ?? 2) - 1, 1),
+	color: item.color ?? GRADIENT_COLORS[index % GRADIENT_COLORS.length].color
+}));
 var defaultChartGradient = (gradient) => ({
 	display: gradient?.display ?? false,
-	gradientColors: gradient?.gradientColors ?? GRADIENT_COLORS,
+	gradientColors: normalizeGradientColors(gradient?.gradientColors),
 	direction: gradient?.direction ?? GradientDirection.BottomLeftToTopRight
 });
 var defaultChartStyling = (styling) => ({
 	width: styling?.width ?? "auto",
 	height: styling?.height ?? "auto",
-	maintainAspectRatio: styling?.maintainAspectRatio || false,
-	staticChartHeight: styling?.staticChartHeight || false,
+	maintainAspectRatio: styling?.maintainAspectRatio ?? false,
+	staticChartHeight: styling?.staticChartHeight ?? false,
 	performanceMode: styling?.performanceMode ?? true,
 	gradient: defaultChartGradient(styling?.gradient)
 });
 var defaultTooltip = (tooltip) => ({
 	enabled: tooltip?.enabled ?? true,
 	tooltips: tooltip?.tooltips ?? true,
-	showLabelsInTooltips: tooltip?.showLabelsInTooltips || false,
-	backgroundColor: tooltip?.backgroundColor || "#333",
-	displayColors: tooltip?.displayColors || false,
+	showLabelsInTooltips: tooltip?.showLabelsInTooltips ?? false,
+	backgroundColor: tooltip?.backgroundColor ?? "#333",
+	displayColors: tooltip?.displayColors ?? false,
 	scientificNotation: tooltip?.scientificNotation ?? true
 });
 var defaultGraph = (graph) => ({
@@ -37688,44 +37764,51 @@ var defaultGraph = (graph) => ({
 });
 var defaultLegend = (legend) => ({
 	display: legend?.display ?? true,
-	useDataset: legend?.useDataset || false,
-	position: legend?.position || Position.BottomLeft,
-	align: legend?.align || AlignOptions.Center
+	useDataset: legend?.useDataset ?? false,
+	position: legend?.position ?? Position.BottomLeft,
+	align: legend?.align ?? AlignOptions.Center
 });
 var defaultChartOptions = (options) => ({
-	enableZoom: options?.enableZoom || false,
-	enablePan: options?.enablePan || false
+	enableZoom: options?.enableZoom ?? false,
+	enablePan: options?.enablePan ?? false
 });
 var defaultInteractions = (interactions) => ({
-	onLegendClick: interactions?.onLegendClick,
-	onHover: interactions?.onHover,
-	onUnhover: interactions?.onUnhover,
-	onAnimationComplete: interactions?.onAnimationComplete
+	onLegendClick: typeof interactions?.onLegendClick === "function" ? interactions.onLegendClick : void 0,
+	onHover: typeof interactions?.onHover === "function" ? interactions.onHover : void 0,
+	onUnhover: typeof interactions?.onUnhover === "function" ? interactions.onUnhover : void 0,
+	onAnimationComplete: void 0
 });
-var defaultChartData = (data) => {
-	return {
-		labels: data?.labels || [],
-		datasets: data?.datasets || []
-	};
-};
-var defaultAnnotationsData = (annotationsData) => {
-	return annotationsData ? annotationsData.map((ann) => ({
-		...ann,
-		display: ann?.display ?? true
-	})) : [];
-};
+var defaultChartData = (data) => ({
+	labels: data?.labels ?? [],
+	datasets: (data?.datasets ?? []).map((dataset) => ({
+		...dataset,
+		data: dataset?.data ?? []
+	}))
+});
+var normalizeDragRange = (range) => ({
+	x: Array.isArray(range?.x) && range.x.length >= 2 ? [range.x[0], range.x[1]] : void 0,
+	y: Array.isArray(range?.y) && range.y.length >= 2 ? [range.y[0], range.y[1]] : void 0
+});
+var defaultAnnotationsData = (annotationsData) => (annotationsData ?? []).map((ann) => ({
+	...ann,
+	display: ann.display ?? true,
+	onDragStart: typeof ann.onDragStart === "function" ? ann.onDragStart : void 0,
+	onDrag: typeof ann.onDrag === "function" ? ann.onDrag : void 0,
+	onDragEnd: typeof ann.onDragEnd === "function" ? ann.onDragEnd : void 0,
+	dragRange: normalizeDragRange(ann.dragRange)
+}));
 var defaultAnnotations = (annotations) => ({
 	showAnnotations: annotations?.showAnnotations ?? true,
-	controlAnnotation: annotations?.controlAnnotation || false,
+	controlAnnotation: annotations?.controlAnnotation ?? false,
 	annotationsData: defaultAnnotationsData(annotations?.annotationsData)
 });
 var defaultAxes = (axes) => ({
-	x: axes?.x || [{}],
-	y: axes?.y || [{}]
+	x: axes?.x ?? [{}],
+	y: axes?.y ?? [{}]
 });
 var defaultAdditionalAxesOptions = (options) => ({
-	reverse: options?.reverse || false,
-	stacked: options?.stacked || false,
+	reverse: options?.reverse ?? false,
+	stacked: options?.stacked ?? false,
 	beginAtZero: options?.beginAtZero ?? true,
 	stepSize: options?.stepSize,
 	suggestedMin: options?.suggestedMin,
@@ -37733,25 +37816,26 @@ var defaultAdditionalAxesOptions = (options) => ({
 	min: options?.min,
 	max: options?.max
 });
+var normalizeScatterOptions = (options = {}) => ({
+	title: options?.title ?? "",
+	axes: defaultAxes(options?.axes),
+	additionalAxesOptions: defaultAdditionalAxesOptions(options?.additionalAxesOptions),
+	direction: options?.direction ?? ChartDirection.VERTICAL,
+	chartStyling: defaultChartStyling(options?.chartStyling),
+	tooltip: defaultTooltip(options?.tooltip),
+	graph: defaultGraph(options?.graph),
+	legend: defaultLegend(options?.legend),
+	annotations: defaultAnnotations(options?.annotations),
+	chartOptions: defaultChartOptions(options?.chartOptions),
+	interactions: defaultInteractions(options?.interactions)
+});
 var getDefaultProps = (props) => {
 	const chart = props?.chart || {};
 	const options = chart?.options || {};
 	return {
 		testId: chart?.testId ?? null,
 		data: defaultChartData(chart?.data),
-		options: {
-			title: options?.title || "",
-			axes: defaultAxes(options?.axes),
-			additionalAxesOptions: defaultAdditionalAxesOptions(options?.additionalAxesOptions),
-			direction: options?.direction || ChartDirection.VERTICAL,
-			chartStyling: defaultChartStyling(options?.chartStyling),
-			tooltip: defaultTooltip(options?.tooltip),
-			graph: defaultGraph(options?.graph),
-			legend: defaultLegend(options?.legend),
-			annotations: defaultAnnotations(options?.annotations),
-			chartOptions: defaultChartOptions(options?.chartOptions),
-			interactions: defaultInteractions(options?.interactions)
-		}
+		options: normalizeScatterOptions(options)
 	};
 };
 //#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oliasoft-open-source/charts-library",
-  "version": "5.9.0-beta-9",
+  "version": "5.9.0-beta-10",
   "description": "React Chart Library (based on Chart.js and react-chart-js-2)",
   "homepage": "https://gitlab.com/oliasoft-open-source/charts-library",
   "bugs": {
@@ -94,14 +94,14 @@
   },
   "scripts": {
     "build:package": "tsc && vite build",
-    "build:storybook": "storybook build --quiet --output-dir ./storybook-static",
+    "build:storybook": "storybook build --quiet --output-dir ./public",
     "build": "pnpm build:package && pnpm build:storybook",
     "dev:storybook": "storybook dev -p 6006",
     "lint:check": "oxlint -c .oxlintrc.json .",
     "lint:fix": "oxlint -c .oxlintrc.json --fix .",
     "prettier:check": "prettier --check \"**/*.{ts,tsx,js,jsx,json,css,less}\"",
     "prettier:fix": "prettier --write \"**/*.{ts,tsx,js,jsx,json,css,less}\"",
-    "preview:storybook": "pnpm exec http-server ./storybook-static -o -p 9005 -c-1",
+    "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:unit": "vitest run",
     "test:unit:coverage": "vitest run --coverage"