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

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) {
@@ -20802,18 +20805,22 @@ var formatAxisLabelNumbers = (tickValue, ticks) => {
 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 axisKey = generateAxisId(axisType, i, true);
+	const scaleConfigFromProps = options?.scales?.[axisKey];
+	const ticksConfigFromProps = scaleConfigFromProps?.ticks;
+	const titleConfigFromProps = scaleConfigFromProps?.title;
 	const { additionalAxesOptions } = options;
+	const scaleType = scaleConfigFromProps?.type ?? additionalAxesOptions.chartScaleType;
 	const getTicks = () => {
-		const isLogarithmic = additionalAxesOptions?.chartScaleType === ScaleType.Logarithmic;
+		const isLogarithmic = scaleType === ScaleType.Logarithmic;
+		const isNumericScale = scaleType === ScaleType.Linear || scaleType === ScaleType.Logarithmic;
 		const ticksFormattingCallback = (tick, _, ticks) => {
-			return isLogarithmic ? LOGARITHMIC_STEPS.includes(tick) ? formatAxisLabelNumbers(tick, ticks) : "" : formatAxisLabelNumbers(tick, ticks);
+			const tickValue = Number(tick);
+			return isLogarithmic ? LOGARITHMIC_STEPS.includes(tickValue) ? formatAxisLabelNumbers(tickValue, ticks) : "" : formatAxisLabelNumbers(tickValue, ticks);
 		};
 		return {
-			...!isLogarithmic ? { stepSize: axisData.stepSize ?? (axisType === AxisType.Y ? additionalAxesOptions.stepSize : null) } : {},
-			callback: ticksFormattingCallback,
+			...isNumericScale && !isLogarithmic ? { stepSize: axisData.stepSize ?? (axisType === AxisType.Y ? additionalAxesOptions.stepSize : null) } : {},
+			...isNumericScale ? { callback: ticksFormattingCallback } : {},
 			includeBounds: false,
 			...ticksConfigFromProps,
 			font: {
@@ -20824,7 +20831,7 @@ var getLineChartAxis = (options, axisType, state, currentScales, i = 0) => {
 	};
 	return {
 		display: true,
-		type: additionalAxesOptions.chartScaleType,
+		type: scaleType,
 		position: axisData.position,
 		beginAtZero: additionalAxesOptions.beginAtZero,
 		reverse: axisType === AxisType.Y ? additionalAxesOptions.reverse : false,
@@ -20832,8 +20839,9 @@ var getLineChartAxis = (options, axisType, state, currentScales, i = 0) => {
 		suggestedMin: additionalAxesOptions.suggestedMin,
 		min: stateAxis?.min ?? additionalAxesOptions?.range?.[axisType]?.min,
 		max: stateAxis?.max ?? additionalAxesOptions?.range?.[axisType]?.max,
+		...scaleConfigFromProps,
 		title: {
-			display: axisData.label?.length,
+			display: Boolean(axisData.label?.length),
 			text: axisData.label,
 			padding: 0,
 			...titleConfigFromProps,
@@ -20843,7 +20851,10 @@ var getLineChartAxis = (options, axisType, state, currentScales, i = 0) => {
 			}
 		},
 		ticks: getTicks(),
-		grid: { ...axisData.gridLines }
+		grid: {
+			...axisData.gridLines,
+			...scaleConfigFromProps?.grid
+		}
 	};
 };
 var getLineChartAxes = (options, axisType, state) => {
@@ -20871,6 +20882,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 +20900,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 +24527,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);
@@ -38852,8 +38873,9 @@ var getBarChartAxis = ({ chart, axisType = AxisType.X, currentScale, i }) => {
 		const ticksFormattingCallback = (tick, _, ticks) => {
 			return isLogarithmic ? LOGARITHMIC_STEPS.includes(Number(tick)) ? formatAxisLabelNumbers(tick, ticks) : "" : formatAxisLabelNumbers(tick, ticks);
 		};
-		const ticks = {
+		return {
 			...!isLogarithmic ? { stepSize: axisData.stepSize ?? (axisType === AxisType.Y ? additionalAxesOptions?.stepSize : null) } : {},
+			...additionalAxesOptions?.chartScaleType === ScaleType.Logarithmic ? { callback: ticksFormattingCallback } : {},
 			includeBounds: false,
 			...ticksConfigFromProps,
 			font: {
@@ -38861,8 +38883,6 @@ var getBarChartAxis = ({ chart, axisType = AxisType.X, currentScale, i }) => {
 				...ticksConfigFromProps?.font
 			}
 		};
-		if (additionalAxesOptions?.chartScaleType === ScaleType.Logarithmic) ticks.callback = ticksFormattingCallback;
-		return ticks;
 	};
 	return {
 		type: getScaleType(),

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;

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/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;