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

package/dist/index.js

@@ -1,10 +1,11 @@
 import { createContext, forwardRef, useCallback, useContext, useEffect, useMemo, useReducer, useRef, useState } from "react";
+import "chartjs-adapter-date-fns";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { DndProvider, useDrag, useDrop } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
-import { displayNumber, isCloseTo, round, roundByMagnitude } from "@oliasoft-open-source/units";
+import { displayNumber, isCloseTo, round, roundByMagnitude, toNum } from "@oliasoft-open-source/units";
 import cx from "classnames";
-import { cloneDeep, debounce, defaultTo, find, findIndex, get, has, isArray, isEmpty, isNil, isNumber, isObject, map, noop, set, some, startCase } from "es-toolkit/compat";
+import { cloneDeep, debounce, defaultTo, find, findIndex, get, has, isArray, isEmpty, isFinite as isFinite$1, isNil, isNumber, isObject, isString, map, noop, set, some, startCase } from "es-toolkit/compat";
 import { produce } from "immer";
 import { Button, ButtonGroup, Field, Flex, Icon, InputGroup, InputGroupAddon, Menu, NumberInput, Popover, Portal, Select, Spacer, Text, Tooltip } from "@oliasoft-open-source/react-ui-library";
 import { useMeasure } from "react-use";
@@ -12094,7 +12095,7 @@ function interpolate(table, val, reverse) {
 	const span = nextSource - prevSource;
 	return span ? prevTarget + (nextTarget - prevTarget) * (val - prevSource) / span : prevTarget;
 }
-(class extends TimeScale {
+var TimeSeriesScale = class extends TimeScale {
 	static id = "timeseries";
 	static defaults = TimeScale.defaults;
 	constructor(props) {
@@ -12163,7 +12164,7 @@ function interpolate(table, val, reverse) {
 		const decimal = this.getDecimalForPixel(pixel) / offsets.factor - offsets.end;
 		return interpolate(this._table, decimal * this._tableRange + this._minPos, true);
 	}
-});
+};
 //#endregion
 //#region node_modules/.pnpm/react-chartjs-2@5.3.1_chart.js@4.5.1_react@18.3.1/node_modules/react-chartjs-2/dist/index.js
 var defaultDatasetIdKey = "label";
@@ -19069,6 +19070,8 @@ var ScaleType = /* @__PURE__ */ function(ScaleType) {
 	ScaleType["Category"] = "category";
 	ScaleType["Linear"] = "linear";
 	ScaleType["Logarithmic"] = "logarithmic";
+	ScaleType["Time"] = "time";
+	ScaleType["TimeSeries"] = "timeseries";
 	return ScaleType;
 }({});
 var ChartDirection = /* @__PURE__ */ function(ChartDirection) {
@@ -19874,7 +19877,7 @@ var isGreaterThanMin = (value, min) => {
 * @param {boolean} [hasMultiAxes] - optional, false by default
 * @return {string} - e.g. x if chart has singular axes; x, x2 - in case of multiple axes
 */
-var generateAxisId = (axisType, index = 0, hasMultiAxes = false) => {
+var generateAxisId$1 = (axisType, index = 0, hasMultiAxes = false) => {
 	return `${axisType}${hasMultiAxes && index !== 0 ? index + 1 : ""}`;
 };
 /**
@@ -19984,7 +19987,7 @@ var useChartFunctions = ({ chartRef, state, options, dispatch }) => {
 			if (!axes[axisType] || !axes[axisType]?.length) return [];
 			else return axes[axisType].map((axisObj, index) => {
 				return {
-					id: generateAxisId(axisType, index, axes[axisType].length > 1),
+					id: generateAxisId$1(axisType, index, axes[axisType].length > 1),
 					label: axisObj?.label || ""
 				};
 			});
@@ -20798,53 +20801,83 @@ var formatAxisLabelNumbers = (tickValue, ticks) => {
 	});
 };
 //#endregion
-//#region src/components/line-chart/utils/get-line-chart-scales.ts
-var getLineChartAxis = (options, axisType, state, currentScales, i = 0) => {
-	const axisData = currentScales || options.axes[axisType][0] || {};
-	const stateAxis = state?.axes.filter((axis) => axis?.id?.startsWith(axisType))[i];
-	const axisKey = `${i === 0 ? axisType : axisType + i}`;
-	const ticksConfigFromProps = options?.scales?.[axisKey]?.ticks;
-	const titleConfigFromProps = options?.scales?.[axisKey]?.title;
-	const { additionalAxesOptions } = options;
-	const getTicks = () => {
-		const isLogarithmic = additionalAxesOptions?.chartScaleType === ScaleType.Logarithmic;
-		const ticksFormattingCallback = (tick, _, ticks) => {
-			return isLogarithmic ? LOGARITHMIC_STEPS.includes(tick) ? formatAxisLabelNumbers(tick, ticks) : "" : formatAxisLabelNumbers(tick, ticks);
-		};
-		return {
-			...!isLogarithmic ? { stepSize: axisData.stepSize ?? (axisType === AxisType.Y ? additionalAxesOptions.stepSize : null) } : {},
-			callback: ticksFormattingCallback,
+//#region src/components/common/helpers/get-cartesian-scale-options.ts
+var isNumericScale = (scaleType) => {
+	return scaleType === ScaleType.Linear || scaleType === ScaleType.Logarithmic;
+};
+var getGridLines = (gridLines) => {
+	return gridLines && typeof gridLines === "object" ? gridLines : {};
+};
+var getCartesianScaleOptions = ({ axisData, scaleType, scaleConfigFromProps, display, beginAtZero, reverse, suggestedMax, suggestedMin, min, max, additionalStepSize, useStepSize = true, stacked, numericTickCallback }) => {
+	const ticksConfigFromProps = scaleConfigFromProps?.ticks;
+	const titleConfigFromProps = scaleConfigFromProps?.title;
+	const titleText = axisData?.label || (typeof axisData?.unit === "string" ? axisData.unit : void 0);
+	const stepSize = useStepSize && isNumericScale(scaleType) && scaleType !== ScaleType.Logarithmic ? { stepSize: axisData?.stepSize ?? additionalStepSize } : {};
+	return {
+		...display !== void 0 ? { display } : {},
+		type: scaleType,
+		position: axisData?.position,
+		beginAtZero,
+		reverse,
+		suggestedMax,
+		suggestedMin,
+		min,
+		max,
+		...stacked !== void 0 ? { stacked } : {},
+		...scaleConfigFromProps,
+		title: {
+			display: Boolean(titleText?.length),
+			text: titleText,
+			padding: 0,
+			...titleConfigFromProps,
+			font: {
+				size: 12,
+				...titleConfigFromProps?.font
+			}
+		},
+		ticks: {
+			...stepSize,
+			...isNumericScale(scaleType) && numericTickCallback ? { callback: numericTickCallback } : {},
 			includeBounds: false,
 			...ticksConfigFromProps,
 			font: {
 				size: 12,
 				...ticksConfigFromProps?.font
 			}
-		};
+		},
+		grid: {
+			...getGridLines(axisData?.gridLines),
+			...scaleConfigFromProps?.grid
+		}
 	};
-	return {
+};
+//#endregion
+//#region src/components/line-chart/utils/get-line-chart-scales.ts
+var getLineChartAxis = (options, axisType, state, currentScales, i = 0) => {
+	const axisData = currentScales || options.axes[axisType][0] || {};
+	const stateAxis = state?.axes.filter((axis) => axis?.id?.startsWith(axisType))[i];
+	const axisKey = generateAxisId$1(axisType, i, true);
+	const scaleConfigFromProps = options?.scales?.[axisKey];
+	const { additionalAxesOptions } = options;
+	const scaleType = scaleConfigFromProps?.type ?? additionalAxesOptions.chartScaleType;
+	const ticksFormattingCallback = (tick, _, ticks) => {
+		const tickValue = Number(tick);
+		return scaleType === ScaleType.Logarithmic ? LOGARITHMIC_STEPS.includes(tickValue) ? formatAxisLabelNumbers(tickValue, ticks) : "" : formatAxisLabelNumbers(tickValue, ticks);
+	};
+	return getCartesianScaleOptions({
+		axisData,
+		scaleType,
+		scaleConfigFromProps,
 		display: true,
-		type: additionalAxesOptions.chartScaleType,
-		position: axisData.position,
 		beginAtZero: additionalAxesOptions.beginAtZero,
 		reverse: axisType === AxisType.Y ? additionalAxesOptions.reverse : false,
 		suggestedMax: additionalAxesOptions.suggestedMax,
 		suggestedMin: additionalAxesOptions.suggestedMin,
 		min: stateAxis?.min ?? additionalAxesOptions?.range?.[axisType]?.min,
 		max: stateAxis?.max ?? additionalAxesOptions?.range?.[axisType]?.max,
-		title: {
-			display: axisData.label?.length,
-			text: axisData.label,
-			padding: 0,
-			...titleConfigFromProps,
-			font: {
-				size: 12,
-				...titleConfigFromProps?.font
-			}
-		},
-		ticks: getTicks(),
-		grid: { ...axisData.gridLines }
-	};
+		additionalStepSize: axisType === AxisType.Y ? additionalAxesOptions.stepSize : null,
+		numericTickCallback: ticksFormattingCallback
+	});
 };
 var getLineChartAxes = (options, axisType, state) => {
 	return options.axes[axisType].reduce((acc, curr, i) => {
@@ -20852,7 +20885,7 @@ var getLineChartAxes = (options, axisType, state) => {
 		axisData.color = curr.color || COLORS[i] || generateRandomColor(COLORS);
 		axisData.position = curr.position || getAxisPosition(axisType, i);
 		const axis = getLineChartAxis(options, axisType, state, axisData, i);
-		const axisId = generateAxisId(axisType, i, true);
+		const axisId = generateAxisId$1(axisType, i, true);
 		return {
 			...acc,
 			[axisId]: axis
@@ -20871,6 +20904,11 @@ var getLineChartScales = (options, state) => {
 };
 //#endregion
 //#region src/components/common/helpers/range/estimate-data-series-have-close-values.ts
+var getFiniteNumber = (value) => {
+	if (!isNumber(value) && !isString(value)) return;
+	const numericValue = toNum(value);
+	return isFinite$1(numericValue) ? numericValue : void 0;
+};
 /**
 * Estimates whether any of the data series has values that are all close together
 * - checks only the first and last values in each series (i.e. assumes they are ordered)
@@ -20884,8 +20922,13 @@ var estimateDataSeriesHaveCloseValues = (generatedDatasets) => {
 		const yAxisId = dataset?.yAxisID ?? "y";
 		const data = dataset?.data ?? [];
 		if (data && data?.length) {
-			const { x: xFirstCurrent, y: yFirstCurrent } = data?.[0] ?? {};
-			const { x: xLastCurrent = 0, y: yLastCurrent = 0 } = data?.at(-1) ?? {};
+			const { x: rawXFirstCurrent, y: rawYFirstCurrent } = data?.[0] ?? {};
+			const { x: rawXLastCurrent, y: rawYLastCurrent } = data?.at(-1) ?? {};
+			const xFirstCurrent = getFiniteNumber(rawXFirstCurrent);
+			const yFirstCurrent = getFiniteNumber(rawYFirstCurrent);
+			const xLastCurrent = getFiniteNumber(rawXLastCurrent);
+			const yLastCurrent = getFiniteNumber(rawYLastCurrent);
+			if (xFirstCurrent === void 0 || yFirstCurrent === void 0 || xLastCurrent === void 0 || yLastCurrent === void 0) return acc;
 			const xFirstAcc = acc?.[xAxisId]?.xFirst ?? xFirstCurrent;
 			const xLastAcc = acc?.[xAxisId]?.xLast ?? xLastCurrent;
 			const yFirstAcc = acc?.[yAxisId]?.yFirst ?? yFirstCurrent;
@@ -24506,7 +24549,7 @@ var Legend = ({ chartRef, legendConfig }) => {
 };
 //#endregion
 //#region src/components/line-chart/line-chart.tsx
-Chart$1.register(LinearScale, PointElement, LineElement, CategoryScale, LogarithmicScale, plugin_legend, plugin_tooltip, plugin_title, index, plugin$1, plugin, annotation, chartAreaTextPlugin, annotationDraggerPlugin, ellipsisAnnotationPlugin, calloutConnectorPlugin, lineMarkersPlugin);
+Chart$1.register(LinearScale, PointElement, LineElement, CategoryScale, LogarithmicScale, TimeScale, TimeSeriesScale, plugin_legend, plugin_tooltip, plugin_title, index, plugin$1, plugin, annotation, chartAreaTextPlugin, annotationDraggerPlugin, ellipsisAnnotationPlugin, calloutConnectorPlugin, lineMarkersPlugin);
 var LineChart = (props) => {
 	setDefaultTheme();
 	const chartRef = useRef(null);
@@ -38830,68 +38873,42 @@ var getStackedOptions = (axisType, { stacked, stackedX, stackedY }) => {
 	else if (axisType === AxisType.Y) return stackedY ?? stacked;
 	return stacked;
 };
-var getBarChartAxis = ({ chart, axisType = AxisType.X, currentScale, i }) => {
+var generateAxisId = (axisType, index = 0) => {
+	return index === 0 ? axisType : `${axisType}${index + 1}`;
+};
+var getBarChartAxis = ({ chart, axisType = AxisType.X, currentScale, i = 0 }) => {
 	const { data, options } = chart ?? {};
 	const isDirectionVertical = isVertical(options.direction);
 	const axisData = currentScale || options?.axes?.[axisType]?.[0];
 	const isDirectionCompatibleWithAxisType = isDirectionVertical && axisType === AxisType.Y || !isDirectionVertical && axisType === AxisType.X;
-	const grid = axisData?.gridLines || {};
-	const getScaleType = () => {
+	const axisKey = generateAxisId(axisType, i);
+	const scaleConfigFromProps = options?.scales?.[axisKey];
+	const getDefaultScaleType = () => {
 		const scaleType = data.labels ? ScaleType.Category : ScaleType.Linear;
 		return axisType === (isDirectionVertical ? AxisType.X : AxisType.Y) ? scaleType : options?.additionalAxesOptions?.chartScaleType;
 	};
+	const scaleType = scaleConfigFromProps?.type ?? getDefaultScaleType();
 	const getReverse = () => {
 		return axisType === (isDirectionVertical ? AxisType.Y : AxisType.X) ? options?.additionalAxesOptions?.reverse : false;
 	};
-	const axisKey = `${i === 0 ? axisType : axisType + i}`;
-	const titleConfigFromProps = options?.scales?.[axisKey]?.title;
-	const getTicks = () => {
-		const additionalAxesOptions = options?.additionalAxesOptions;
-		const ticksConfigFromProps = options?.scales?.[axisKey]?.ticks;
-		const isLogarithmic = isDirectionCompatibleWithAxisType && additionalAxesOptions?.chartScaleType === ScaleType.Logarithmic;
-		const ticksFormattingCallback = (tick, _, ticks) => {
-			return isLogarithmic ? LOGARITHMIC_STEPS.includes(Number(tick)) ? formatAxisLabelNumbers(tick, ticks) : "" : formatAxisLabelNumbers(tick, ticks);
-		};
-		const ticks = {
-			...!isLogarithmic ? { stepSize: axisData.stepSize ?? (axisType === AxisType.Y ? additionalAxesOptions?.stepSize : null) } : {},
-			includeBounds: false,
-			...ticksConfigFromProps,
-			font: {
-				size: 12,
-				...ticksConfigFromProps?.font
-			}
-		};
-		if (additionalAxesOptions?.chartScaleType === ScaleType.Logarithmic) ticks.callback = ticksFormattingCallback;
-		return ticks;
+	const ticksFormattingCallback = (tick, _, ticks) => {
+		return isDirectionCompatibleWithAxisType && scaleType === ScaleType.Logarithmic ? LOGARITHMIC_STEPS.includes(Number(tick)) ? formatAxisLabelNumbers(tick, ticks) : "" : formatAxisLabelNumbers(tick, ticks);
 	};
-	return {
-		type: getScaleType(),
-		position: axisData?.position,
+	return getCartesianScaleOptions({
+		axisData,
+		scaleType,
+		scaleConfigFromProps,
 		beginAtZero: options?.additionalAxesOptions?.beginAtZero,
 		reverse: getReverse(),
 		suggestedMax: options?.additionalAxesOptions?.suggestedMax,
 		suggestedMin: options?.additionalAxesOptions?.suggestedMin,
 		min: isDirectionCompatibleWithAxisType ? options?.additionalAxesOptions?.min : void 0,
 		max: isDirectionCompatibleWithAxisType ? options?.additionalAxesOptions?.max : void 0,
-		title: {
-			display: axisData?.label?.length || axisData?.unit?.length,
-			text: axisData?.label || axisData?.unit,
-			padding: 0,
-			...titleConfigFromProps,
-			font: {
-				size: 12,
-				...titleConfigFromProps?.font
-			}
-		},
-		ticks: getTicks(),
-		grid: { ...grid },
-		stacked: getStackedOptions(axisType, options?.additionalAxesOptions)
-	};
+		additionalStepSize: axisType === AxisType.Y ? options?.additionalAxesOptions?.stepSize : null,
+		stacked: getStackedOptions(axisType, options?.additionalAxesOptions),
+		numericTickCallback: ticksFormattingCallback
+	});
 };
-/**
-* @param {IBarChartData} chart - chart data
-* @param {'x'|'y'} axisType
-*/
 var getBarChartAxes = (chart, axisType) => {
 	return (chart?.options?.axes?.[axisType] || []).reduce((acc, curr, i) => {
 		const axisData = curr;
@@ -38900,9 +38917,10 @@ var getBarChartAxes = (chart, axisType) => {
 		const axis = getBarChartAxis({
 			chart,
 			axisType,
-			currentScale: axisData
+			currentScale: axisData,
+			i
 		});
-		const axisId = i === 0 ? axisType : `${axisType}${i + 1}`;
+		const axisId = generateAxisId(axisType, i);
 		return {
 			...acc,
 			[axisId]: axis
@@ -39166,6 +39184,7 @@ var normalizeBarOptions = (options = {}) => ({
 	chartStyling: defaultChartStyling$1(options?.chartStyling),
 	tooltip: defaultTooltip$1(options?.tooltip),
 	graph: defaultGraph$1(options?.graph),
+	scales: options?.scales ?? {},
 	annotations: defaultAnnotations$1(options?.annotations),
 	legend: defaultLegend$1(options?.legend),
 	chartOptions: defaultChartOptions$1(options?.chartOptions),
@@ -39194,7 +39213,7 @@ var getDefaultProps$1 = (props) => {
 };
 //#endregion
 //#region src/components/bar-chart/bar-chart.tsx
-Chart$1.register(LinearScale, PointElement, LineElement, CategoryScale, LogarithmicScale, BarElement, plugin_legend, plugin_tooltip, plugin_title, index, plugin$1, plugin, annotation, import_chartjs_plugin_dragdata_min.default);
+Chart$1.register(LinearScale, PointElement, LineElement, CategoryScale, LogarithmicScale, TimeScale, TimeSeriesScale, BarElement, plugin_legend, plugin_tooltip, plugin_title, index, plugin$1, plugin, annotation, import_chartjs_plugin_dragdata_min.default);
 var BarChart = (props) => {
 	setDefaultTheme();
 	const chartRef = useRef(null);
@@ -39305,46 +39324,23 @@ var getScatterChartAxis = ({ options, axisType = AxisType.X, currentScale }) =>
 	const isDirectionVertical = isVertical(options.direction);
 	const axisData = currentScale || options?.axes?.[axisType]?.[0];
 	const isDirectionCompatibleWithAxisType = isDirectionVertical && axisType === AxisType.Y || !isDirectionVertical && axisType === AxisType.X;
-	const grid = axisData?.gridLines || {};
-	const ticksConfigFromProps = options?.scales?.[axisType]?.ticks;
-	const titleConfigFromProps = options?.scales?.[axisType]?.title;
+	const scaleConfigFromProps = options?.scales?.[axisType];
+	const scaleType = scaleConfigFromProps?.type ?? options?.additionalAxesOptions?.chartScaleType ?? ScaleType.Linear;
 	const getReverse = () => {
 		return axisType === (isDirectionVertical ? AxisType.Y : AxisType.X) ? options?.additionalAxesOptions?.reverse : false;
 	};
-	const getTicks = () => {
-		const additionalAxesOptions = options?.additionalAxesOptions;
-		return {
-			stepSize: axisData?.stepSize ?? (axisType === AxisType.Y ? additionalAxesOptions?.stepSize : void 0),
-			includeBounds: false,
-			...ticksConfigFromProps,
-			font: {
-				size: 12,
-				...ticksConfigFromProps?.font
-			}
-		};
-	};
-	return {
-		type: ScaleType.Linear,
-		position: axisData?.position,
+	return getCartesianScaleOptions({
+		axisData,
+		scaleType,
+		scaleConfigFromProps,
 		beginAtZero: options?.additionalAxesOptions?.beginAtZero,
 		reverse: getReverse(),
 		suggestedMax: options?.additionalAxesOptions?.suggestedMax,
 		suggestedMin: options?.additionalAxesOptions?.suggestedMin,
 		min: isDirectionCompatibleWithAxisType ? options?.additionalAxesOptions?.min : void 0,
 		max: isDirectionCompatibleWithAxisType ? options?.additionalAxesOptions?.max : void 0,
-		title: {
-			display: !!axisData?.label?.length || !!axisData?.unit?.length,
-			text: axisData?.label || axisData?.unit,
-			padding: 0,
-			...titleConfigFromProps,
-			font: {
-				size: 12,
-				...titleConfigFromProps?.font
-			}
-		},
-		ticks: getTicks(),
-		grid: { ...grid }
-	};
+		additionalStepSize: axisType === AxisType.Y ? options?.additionalAxesOptions?.stepSize : null
+	});
 };
 var getScatterChartScales = (options) => {
 	return {
@@ -39508,6 +39504,7 @@ var defaultAxes = (axes) => ({
 	y: axes?.y ?? [{}]
 });
 var defaultAdditionalAxesOptions = (options) => ({
+	chartScaleType: options?.chartScaleType || "linear",
 	reverse: options?.reverse ?? false,
 	stacked: options?.stacked ?? false,
 	beginAtZero: options?.beginAtZero ?? true,
@@ -39525,6 +39522,7 @@ var normalizeScatterOptions = (options = {}) => ({
 	chartStyling: defaultChartStyling(options?.chartStyling),
 	tooltip: defaultTooltip(options?.tooltip),
 	graph: defaultGraph(options?.graph),
+	scales: options?.scales ?? {},
 	legend: defaultLegend(options?.legend),
 	annotations: defaultAnnotations(options?.annotations),
 	chartOptions: defaultChartOptions(options?.chartOptions),
@@ -39631,7 +39629,7 @@ var scatter_chart_module_default = {
 };
 //#endregion
 //#region src/components/scatter-chart/scatter-chart.tsx
-Chart$1.register(LinearScale, PointElement, CategoryScale, plugin_legend, plugin_tooltip, plugin_title, plugin$1, plugin, annotation, gradientBackgroundPlugin);
+Chart$1.register(LinearScale, PointElement, CategoryScale, TimeScale, TimeSeriesScale, plugin_legend, plugin_tooltip, plugin_title, plugin$1, plugin, annotation, gradientBackgroundPlugin);
 var ScatterChart = (props) => {
 	setDefaultTheme();
 	const chartRef = useRef(null);

package/dist/src/components/bar-chart/utils/get-bar-chart-scales.d.ts

@@ -1,3 +1,4 @@
 import { IBarDefaultProps } from '../bar-chart.interface';
-declare const getBarChartScales: (chart: IBarDefaultProps) => any;
+import { ICommonScaleOptions } from '../../common/common.interface';
+declare const getBarChartScales: (chart: IBarDefaultProps) => Record<string, ICommonScaleOptions>;
 export default getBarChartScales;

package/dist/src/components/bar-chart/utils/use-bar-chart-options.d.ts

@@ -17,7 +17,7 @@ export declare const useBarChartOptions: ({ chart, chartRef, }: IUseBarChartOpti
         mode: ChartHoverMode;
         intersect: boolean;
     };
-    scales: any;
+    scales: Record<string, import('../../common/common.interface').ICommonScaleOptions>;
     plugins: {
         title: {
             display: boolean;

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

@@ -1,4 +1,4 @@
-import { ChartEvent, ChartTypeRegistry, LinearScaleOptions, Plugin } from 'chart.js';
+import { ChartEvent, ChartTypeRegistry, Plugin, ScaleOptions } from 'chart.js';
 import { LabelOptions } from 'chartjs-plugin-annotation';
 import { GradientDirection } from './plugins/gradient-background-plugin/enums';
 import { AnnotationType as DraggableAnnotationType, DragAxis } from './plugins/annotation-dragger-plugin/enums';
@@ -9,8 +9,8 @@ export type DeepPartial<T> = T extends (...args: unknown[]) => unknown ? T : T e
     [K in keyof T]?: DeepPartial<T[K]>;
 } : T;
 export interface ICommonDataValue {
-    x: number;
-    y: number;
+    x: number | string;
+    y: number | string;
     label?: string;
 }
 export interface ICommonDataset {
@@ -21,10 +21,8 @@ export interface ICommonDataset {
     data: ICommonDataValue[];
     hidden?: boolean;
 }
-export interface ICommonScales extends Partial<Record<string, LinearScaleOptions>> {
-    x: LinearScaleOptions;
-    y: LinearScaleOptions;
-}
+export type ICommonScaleOptions = ScaleOptions<'category'> | ScaleOptions<'linear'> | ScaleOptions<'logarithmic'> | ScaleOptions<'time'> | ScaleOptions<'timeseries'>;
+export type ICommonScales = Partial<Record<string, ICommonScaleOptions>>;
 export interface ICommonAnnotationElement {
     id?: string;
     display: boolean;
@@ -152,15 +150,15 @@ export interface ICommonTooltip {
     callbacks?: ICommonTooltipCallbacks;
 }
 export interface ICommonAdditionalAxesOptions {
-    chartScaleType?: 'linear' | 'logarithmic';
+    chartScaleType?: 'linear' | 'logarithmic' | 'time' | 'timeseries';
     reverse?: boolean;
     beginAtZero?: boolean;
     stepSize?: number;
     stacked?: boolean;
     suggestedMin?: number;
     suggestedMax?: number;
-    min?: number;
-    max?: number;
+    min?: number | string;
+    max?: number | string;
 }
 export interface ICommonAnnotation {
     showLabel?: boolean;

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

@@ -30,7 +30,9 @@ export declare enum CursorStyle {
 export declare enum ScaleType {
     Category = "category",
     Linear = "linear",
-    Logarithmic = "logarithmic"
+    Logarithmic = "logarithmic",
+    Time = "time",
+    TimeSeries = "timeseries"
 }
 export declare enum ChartDirection {
     VERTICAL = "vertical",

package/dist/src/components/common/helpers/get-cartesian-scale-options.d.ts

@@ -0,0 +1,27 @@
+import { Tick } from 'chart.js';
+import { ICommonScaleOptions, UnusedParameter } from '../common.interface';
+type TScaleType = NonNullable<ICommonScaleOptions['type']>;
+interface IGetCartesianScaleOptionsParams {
+    axisData?: {
+        gridLines?: unknown;
+        label?: string;
+        position?: unknown;
+        stepSize?: number;
+        unit?: unknown;
+    };
+    scaleType?: TScaleType;
+    scaleConfigFromProps?: ICommonScaleOptions;
+    display?: boolean;
+    beginAtZero?: boolean;
+    reverse?: boolean;
+    suggestedMax?: number | string;
+    suggestedMin?: number | string;
+    min?: number | string;
+    max?: number | string;
+    additionalStepSize?: number | null;
+    useStepSize?: boolean;
+    stacked?: boolean;
+    numericTickCallback?: (tick: string | number, unused: UnusedParameter, ticks: Tick[]) => unknown;
+}
+export declare const getCartesianScaleOptions: ({ axisData, scaleType, scaleConfigFromProps, display, beginAtZero, reverse, suggestedMax, suggestedMin, min, max, additionalStepSize, useStepSize, stacked, numericTickCallback, }: IGetCartesianScaleOptionsParams) => ICommonScaleOptions;
+export {};

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

@@ -19,14 +19,14 @@ export interface ILineChartTooltip extends ICommonTooltip {
     scientificNotation?: boolean;
 }
 export interface ILineChartRange {
-    min?: number;
-    max?: number;
+    min?: number | string;
+    max?: number | string;
 }
 export interface ILineRange {
     [key: string]: ILineChartRange;
 }
 export interface ILineChartAdditionalAxesOptions {
-    chartScaleType?: 'linear' | 'logarithmic';
+    chartScaleType?: 'linear' | 'logarithmic' | 'time' | 'timeseries';
     reverse?: boolean;
     beginAtZero?: boolean;
     stepSize?: number;