@oliasoft-open-source/charts-library 6.1.0 → 7.0.0-beta-2

package/dist/index.js

@@ -7,7 +7,7 @@ import { displayNumber, isCloseTo, round, roundByMagnitude, toNum } from "@olias
 import cx from "classnames";
 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 { Button, ButtonGroup, Color, 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";
 import { TbArrowsMove, TbBan, TbCircleFilled, TbHandStop, TbList, TbRuler, TbSquareFilled, TbX, TbZoomIn } from "react-icons/tb";
 import { toPng } from "html-to-image";
@@ -526,9 +526,9 @@ function functionParse(str) {
 	if (str.charAt(0) === "r") return rgbParse(str);
 	return hueParse(str);
 }
-var Color = class Color {
+var Color$1 = class Color$1 {
 	constructor(input) {
-		if (input instanceof Color) return input;
+		if (input instanceof Color$1) return input;
 		const type = typeof input;
 		let v;
 		if (type === "object") v = fromObject(input);
@@ -579,7 +579,7 @@ var Color = class Color {
 		return this;
 	}
 	clone() {
-		return new Color(this.rgb);
+		return new Color$1(this.rgb);
 	}
 	alpha(a) {
 		this._rgb.a = n2b(a);
@@ -1261,10 +1261,10 @@ function isPatternOrGradient(value) {
 	return false;
 }
 function color(value) {
-	return isPatternOrGradient(value) ? value : new Color(value);
+	return isPatternOrGradient(value) ? value : new Color$1(value);
 }
 function getHoverColor(value) {
-	return isPatternOrGradient(value) ? value : new Color(value).saturate(.5).darken(.1).hexString();
+	return isPatternOrGradient(value) ? value : new Color$1(value).saturate(.5).darken(.1).hexString();
 }
 var numbers = [
 	"x",
@@ -12176,7 +12176,7 @@ var TimeSeriesScale = class extends TimeScale {
 	}
 };
 //#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
+//#region node_modules/.pnpm/react-chartjs-2@5.3.1_chart.js@4.5.1_react@19.2.8/node_modules/react-chartjs-2/dist/index.js
 var defaultDatasetIdKey = "label";
 function reforwardRef(ref, value) {
 	if (typeof ref === "function") ref(value);
@@ -19847,7 +19847,7 @@ var useToggleHandlers = (dispatch) => {
 	};
 };
 //#endregion
-//#region src/components/common/helpers/download-pgn.ts
+//#region src/components/common/helpers/download-png.ts
 var getAxesLabelsFromChart = (chart) => {
 	return Object.entries(chart?.scales).map(([scaleId, scale]) => {
 		const axis = scale?.axis;
@@ -19855,7 +19855,7 @@ var getAxesLabelsFromChart = (chart) => {
 		return { label: `${axis}-${Array.isArray(rawLabel) ? rawLabel?.join(" ") : rawLabel || scaleId}` };
 	});
 };
-var downloadPgn = (chartRef) => {
+var downloadPng = (chartRef) => {
 	const chart = chartRef.current;
 	if (!chart) return;
 	const canvasElement = chart?.canvas?.parentElement;
@@ -19963,7 +19963,7 @@ var useChartFunctions = ({ chartRef, state, options, dispatch }) => {
 	/**
 	* Handles the download of the chart as an image
 	*/
-	const handleDownload = useCallback(() => downloadPgn(chartRef), [chartRef]);
+	const handleDownload = useCallback(() => downloadPng(chartRef), [chartRef]);
 	/**
 	* Handles the key down event for the chart
 	*/
@@ -20105,7 +20105,7 @@ var validateAxes = (axes) => {
 //#region src/components/line-chart/state/helpers.ts
 var RANGE_GAP = 1;
 var getInitAxes = ({ chartRef, state }) => {
-	const chart = chartRef?.current;
+	const chart = chartRef.current;
 	if (!chart) return [];
 	const initScales = chart?.getInitialScaleBounds() ?? {};
 	return Object.entries(initScales).map(([id, { min = "", max = "" }]) => {
@@ -20387,7 +20387,7 @@ var Controls = ({ table, headerComponent, subheaderComponent, chartRef, state, o
 						],
 						trigger: "Component",
 						component: /* @__PURE__ */ jsx(Button, {
-							colored: "muted",
+							colored: Color.MUTED,
 							basic: true,
 							small: true,
 							round: true,
@@ -20402,7 +20402,7 @@ var Controls = ({ table, headerComponent, subheaderComponent, chartRef, state, o
 							children: /* @__PURE__ */ jsx(Button, {
 								small: true,
 								basic: true,
-								colored: "muted",
+								colored: Color.MUTED,
 								round: true,
 								icon: "download",
 								onClick: handleDownload
@@ -20416,7 +20416,7 @@ var Controls = ({ table, headerComponent, subheaderComponent, chartRef, state, o
 						children: /* @__PURE__ */ jsx(Button, {
 							small: true,
 							basic: true,
-							colored: "muted",
+							colored: Color.MUTED,
 							round: true,
 							icon: showTable ? "chart" : "table",
 							onClick: onToggleTable
@@ -24383,7 +24383,8 @@ var generateAnnotationLabels = (chart) => {
 	return Object.values(annotations);
 };
 var generatedLabels = (chart) => {
-	return cloneDeep(chart?.options?.plugins?.legend?.labels?.generateLabels?.(chart)) ?? [];
+	const generateLabels = chart.options.plugins?.legend?.labels?.generateLabels;
+	return cloneDeep(generateLabels?.(chart)) ?? [];
 };
 var getGeneratedLabels = (chart) => {
 	const datasetLabels = generatedLabels(chart);
@@ -24467,7 +24468,7 @@ var LegendPanel = forwardRef(({ legendPosition, chartRef, isDragging, legendConf
 	const { state: legendState } = useLegend() ?? {};
 	const [legendEnabled, setLegendEnabled] = useState(legend?.display ?? true);
 	const items = useGeneratedLabels(chartRef, generatedDatasets);
-	const style = createLegendStyle(legendPosition, chart);
+	const style = createLegendStyle(legendPosition, chart ?? null);
 	return /* @__PURE__ */ jsxs("div", {
 		ref,
 		className: cx(legend_module_default.legend, !legendEnabled && legend_module_default.isHidden, isDragging && legend_module_default.isDragging),
@@ -24503,7 +24504,9 @@ var LegendDropZone = (legendDropZoneProps) => {
 	}));
 	const isActive = isOver && canDrop;
 	return /* @__PURE__ */ jsx("div", {
-		ref: dropRef,
+		ref: (node) => {
+			dropRef(node);
+		},
 		className: cx(legend_module_default.dropzone, isActive && legend_module_default.isActive, position?.includes("left") && legend_module_default.left, position?.includes("right") && legend_module_default.right, position?.includes("top") && legend_module_default.top, position?.includes("bottom") && legend_module_default.bottom),
 		children: /* @__PURE__ */ jsx("div", {
 			className: legend_module_default.dropzonePlaceholder,
@@ -24593,6 +24596,9 @@ Chart$1.register(LinearScale, PointElement, LineElement, CategoryScale, Logarith
 var LineChart = (props) => {
 	setDefaultTheme();
 	const chartRef = useRef(null);
+	const setChartRef = useCallback((chartInstance) => {
+		chartRef.current = chartInstance ?? null;
+	}, []);
 	const { table, headerComponent, subheaderComponent } = props ?? {};
 	const { translations, languageKey } = getConfig();
 	const { data: { datasets } = { datasets: [] }, options, testId, persistenceId, controlsPortalId } = getDefaultProps$3(props);
@@ -24663,7 +24669,7 @@ var LineChart = (props) => {
 				className: line_chart_module_default.canvas,
 				id: "canvas",
 				children: [/* @__PURE__ */ jsx(Line, {
-					ref: chartRef,
+					ref: setChartRef,
 					data: { datasets: generatedDatasets },
 					options: useOptions,
 					plugins: usePlugins
@@ -39265,6 +39271,9 @@ Chart$1.register(LinearScale, PointElement, LineElement, CategoryScale, Logarith
 var BarChart = (props) => {
 	setDefaultTheme();
 	const chartRef = useRef(null);
+	const setChartRef = useCallback((chartInstance) => {
+		chartRef.current = chartInstance ?? null;
+	}, []);
 	const chart = getDefaultProps$1(props);
 	const { translations, languageKey } = getConfig();
 	const { options, testId, controlsPortalId } = chart;
@@ -39295,7 +39304,7 @@ var BarChart = (props) => {
 						colored: "muted",
 						round: true,
 						icon: "download",
-						onClick: () => downloadPgn(chartRef)
+						onClick: () => downloadPng(chartRef)
 					})
 				})
 			})
@@ -39306,7 +39315,7 @@ var BarChart = (props) => {
 				className: bar_chart_module_default.canvas,
 				id: "canvas",
 				children: [/* @__PURE__ */ jsx(Bar, {
-					ref: chartRef,
+					ref: setChartRef,
 					data: {
 						labels: chart?.data?.labels?.length ? chart.data.labels : [""],
 						datasets: generatedDatasets
@@ -39687,6 +39696,9 @@ Chart$1.register(LinearScale, PointElement, CategoryScale, TimeScale, TimeSeries
 var ScatterChart = (props) => {
 	setDefaultTheme();
 	const chartRef = useRef(null);
+	const setChartRef = useCallback((chartInstance) => {
+		chartRef.current = chartInstance ?? null;
+	}, []);
 	const chart = getDefaultProps(props);
 	const { options, testId } = chart;
 	const { scatterOptions, generatedDatasets } = useScatterChartConfig(chart, chartRef);
@@ -39704,7 +39716,7 @@ var ScatterChart = (props) => {
 				className: scatter_chart_module_default.canvas,
 				id: "canvas",
 				children: [/* @__PURE__ */ jsx(Scatter, {
-					ref: chartRef,
+					ref: setChartRef,
 					data: { datasets: generatedDatasets },
 					options: scatterOptions,
 					plugins: getPlugins(options.graph, options.legend)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oliasoft-open-source/charts-library",
-  "version": "6.1.0",
+  "version": "7.0.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": {
@@ -41,15 +41,16 @@
   },
   "devDependencies": {
     "@dnd-kit/sortable": "^10.0.0",
+    "@microsoft/api-extractor": "^7.59.0",
     "@oliasoft-open-source/react-ui-library": "^7.2.0",
     "@oliasoft-open-source/units": "^5.6.0",
-    "@storybook/addon-docs": "^10.4.0",
-    "@storybook/addon-themes": "^10.4.0",
-    "@storybook/react-vite": "^10.4.0",
+    "@storybook/addon-docs": "^10.5.10",
+    "@storybook/addon-themes": "^10.5.10",
+    "@storybook/react-vite": "^10.5.10",
     "@types/node": "^22.15.17",
     "@types/object-hash": "^3.0.6",
-    "@types/react": "^18.2.24",
-    "@types/react-dom": "^18.3.7",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.5",
     "@vitejs/plugin-react": "^6.1.0",
     "@vitest/coverage-v8": "^4.1.11",
     "classnames": "^2.5.1",
@@ -63,9 +64,9 @@
     "normalize.css": "^8.0.1",
     "oxfmt": "^0.64.0",
     "oxlint": "^1.79.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "storybook": "^10.4.0",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "storybook": "^10.5.10",
     "typescript": "^6.0.3",
     "vite": "^8.2.2",
     "vite-plugin-css-injected-by-js": "^5.0.2",
@@ -80,8 +81,8 @@
     "classnames": "^2.5.1",
     "es-toolkit": "^1",
     "immer": "^9 || ^10",
-    "react": "^18",
-    "react-dom": "^18"
+    "react": "^19",
+    "react-dom": "^19"
   },
   "lint-staged": {
     "*": [

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

@@ -1,2 +0,0 @@
-export declare const DISPLAY_SCIENTIFIC_LOWER_BOUND = 0.0001;
-export declare const DISPLAY_SCIENTIFIC_UPPER_BOUND = 10000000;

package/dist/src/components/bar-chart/bar-chart-default-props.d.ts

@@ -1,3 +0,0 @@
-import { IBarChartProps, IBarDefaultProps, IBarOptionsInput } from './bar-chart.interface';
-export declare const normalizeBarOptions: (options?: IBarOptionsInput) => IBarDefaultProps["options"];
-export declare const getDefaultProps: (props: IBarChartProps) => IBarDefaultProps;

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

@@ -1,3 +0,0 @@
-import { IBarChartProps } from './bar-chart.interface';
-declare const BarChartWithLegend: (props: IBarChartProps) => import("react/jsx-runtime").JSX.Element;
-export { BarChartWithLegend as BarChart };

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

@@ -1,146 +0,0 @@
-import { ChartDataset } from 'chart.js';
-import { DeepPartial, ICommonAdditionalAxesOptions, ICommonAnnotations, ICommonAnnotationsData, ICommonAxis, ICommonChartOptions, ICommonCustomLegend, ICommonData, ICommonDataset, ICommonDataValue, ICommonDragData, ICommonGraph, ICommonInteractions, ICommonLegend, ICommonOptions, ICommonScales, ICommonStyling, ICommonTooltip } from '../common/common.interface';
-import { IChartGraph } from '../common/helpers/chart-utils';
-import { ChartType } from '../common/enums';
-export interface IBarStyling extends ICommonStyling {
-    squareAspectRatio?: boolean;
-    layoutPadding?: string | number | {
-        top: number;
-        bottom: number;
-        left: number;
-        right: number;
-    };
-}
-export interface IBarLegend extends ICommonLegend {
-    customLegend?: ICommonCustomLegend<any>;
-}
-export interface IBarAxes {
-    x: ICommonAxis<'top' | 'bottom'>[];
-    y: ICommonAxis<'left' | 'right'>[];
-    [key: string]: ICommonAxis[];
-}
-export interface IBarAdditionalAxesOptions extends ICommonAdditionalAxesOptions {
-    stackedX?: boolean;
-    stackedY?: boolean;
-}
-export interface IBarOptions extends ICommonOptions {
-    direction?: 'vertical' | 'horizontal';
-    axes: IBarAxes;
-    scales?: ICommonScales;
-    additionalAxesOptions?: IBarAdditionalAxesOptions;
-    chartStyling: IBarStyling;
-    graph?: ICommonGraph;
-    annotations?: ICommonAnnotations;
-    legend?: IBarLegend;
-    dragData?: ICommonDragData;
-}
-export interface IBarChartDataset extends ICommonDataset {
-    isAnnotation?: boolean;
-    annotationIndex?: number;
-    borderSkipped?: boolean;
-    borderRadius?: number;
-    xAxisID?: string;
-    yAxisID?: string;
-    hidden?: boolean;
-    displayGroup?: string | number;
-    type?: ChartType.BAR;
-}
-export interface IBarChartBaseData {
-    labels: string[];
-    datasets: IBarChartDataset[];
-}
-export interface IBarChartData extends ICommonData {
-    testId?: string;
-    controlsPortalId?: string;
-    data: IBarChartBaseData;
-    options: IBarOptions;
-}
-type ILooseBarAxis = Omit<DeepPartial<ICommonAxis<string>>, 'gridLines'> & {
-    [key: string]: unknown;
-    gridLines?: unknown;
-};
-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' | 'additionalAxesOptions' | 'scales'> & {
-    [key: string]: unknown;
-    title?: unknown;
-    direction?: string;
-    axes?: {
-        x?: ILooseBarAxis[];
-        y?: ILooseBarAxis[];
-        [key: string]: ILooseBarAxis[] | undefined;
-    };
-    legend?: Omit<DeepPartial<IBarLegend>, 'position' | 'align'> & {
-        position?: string;
-        align?: string;
-        [key: string]: unknown;
-    };
-    chartStyling?: DeepPartial<IBarStyling> & {
-        hideControls?: boolean;
-        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?: (Omit<DeepPartial<ICommonAnnotations>, 'annotationsData'> & {
-        annotationsData?: ILooseBarAnnotation[];
-    }) | null;
-};
-export interface IBarChartDataInput extends Omit<IBarChartData, 'options' | 'data'> {
-    data?: Omit<DeepPartial<IBarChartData['data']>, 'datasets'> & {
-        datasets?: Array<DeepPartial<IBarChartDataset> | object | null>;
-    };
-    options?: IBarOptionsInput;
-}
-export interface IBarChartProps {
-    chart: IBarChartDataInput;
-}
-export interface IBarDefaultProps {
-    testId: string;
-    controlsPortalId: string;
-    data: IBarChartBaseData;
-    options: {
-        title?: string | string[];
-        direction: 'vertical' | 'horizontal';
-        axes: IBarAxes;
-        additionalAxesOptions: IBarAdditionalAxesOptions;
-        chartStyling: IBarStyling;
-        tooltip: ICommonTooltip;
-        graph: IChartGraph;
-        scales?: ICommonScales;
-        annotations: {
-            showAnnotations: boolean;
-            controlAnnotation: boolean;
-            annotationsData: ICommonAnnotationsData[];
-        };
-        legend: IBarLegend;
-        chartOptions: ICommonChartOptions;
-        interactions: ICommonInteractions;
-        dragData: ICommonDragData;
-    };
-}
-export interface IGenerateBarChartDataset extends ChartDataset<'bar', ICommonDataValue[]> {
-    borderColor: string;
-    backgroundColor: string | string[];
-    borderDash?: number[];
-    borderWidth?: number;
-    annotationType?: string;
-    hideLegend?: boolean;
-    displayGroup?: string | number;
-    isAnnotation?: boolean;
-    annotationIndex?: number;
-}
-export type TGenerateBarChartDatasets = IGenerateBarChartDataset[];
-export {};

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

@@ -1,10 +0,0 @@
-import { IBarOptions } from '../bar-chart.interface.ts';
-type ExtendedDisplayOptions = 'auto' | boolean;
-export interface IExtendedDataLabelsOptions {
-    display: ExtendedDisplayOptions;
-}
-/**
- * Returns the data labels configuration for a bar chart.
- */
-declare const getBarChartDataLabels: (options: IBarOptions) => IExtendedDataLabelsOptions;
-export default getBarChartDataLabels;

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

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

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

@@ -1,6 +0,0 @@
-import { IBarOptions } from '../bar-chart.interface';
-/**
- * @param {IBarOptions} options - bar chart options object
- */
-declare const getBarChartToolTips: (options: IBarOptions) => Record<string, any>;
-export default getBarChartToolTips;

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

@@ -1,13 +0,0 @@
-import { RefObject } from 'react';
-import { ActiveElement, Chart, ChartEvent } from 'chart.js';
-import { IBarDefaultProps, IBarOptions, TGenerateBarChartDatasets } from '../bar-chart.interface';
-import { ICommonHoveredItems } from '../../common/common.interface';
-export interface IGenerateBarChartDatasetsProps {
-    datasets: TGenerateBarChartDatasets;
-    options: IBarOptions;
-}
-export declare const useBarChartConfig: (_chartRef: RefObject<Chart>, chart: IBarDefaultProps) => {
-    generatedDatasets: TGenerateBarChartDatasets;
-    onClick: (_evt: ChartEvent, _elements: ActiveElement[], chartInstance: Chart) => void;
-    onHover: (evt: ChartEvent, hoveredItems: ICommonHoveredItems[]) => void;
-};

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

@@ -1,54 +0,0 @@
-import { MutableRefObject } from 'react';
-import { AnimationSpec, Chart } from 'chart.js';
-import { AxisType, ChartHoverMode } from '../../common/enums';
-import { IBarDefaultProps } from '../bar-chart.interface';
-export interface IUseBarChartOptionsProps {
-    chart: IBarDefaultProps;
-    chartRef: MutableRefObject<Chart | null>;
-}
-export declare const getBarChartAnimation: (performanceMode?: boolean) => false | Partial<AnimationSpec<"bar">>;
-export declare const useBarChartOptions: ({ chart, chartRef }: IUseBarChartOptionsProps) => {
-    onClick: (_evt: import('chart.js').ChartEvent, _elements: import('chart.js').ActiveElement[], chartInstance: Chart) => void;
-    onHover: (evt: import('chart.js').ChartEvent, hoveredItems: import('../../common/common.interface').ICommonHoveredItems[]) => void;
-    indexAxis: AxisType;
-    maintainAspectRatio: boolean | undefined;
-    animation: false | Partial<AnimationSpec<"bar">>;
-    hover: {
-        mode: ChartHoverMode;
-        intersect: boolean;
-    };
-    scales: Record<string, import('../../common/common.interface').ICommonScaleOptions>;
-    plugins: {
-        title: {
-            display: boolean;
-            text: string | string[];
-        } | {
-            display?: undefined;
-            text?: undefined;
-        };
-        datalabels: import('./get-bar-chart-data-labels').IExtendedDataLabelsOptions;
-        annotation: {
-            annotations: {};
-        };
-        tooltip: Record<string, any>;
-        legend: {
-            display: boolean;
-            events: never[];
-            position: any;
-            align: "center" | "start" | "end";
-            labels: {
-                boxHeight: number;
-                boxWidth: number | undefined;
-                usePointStyle: boolean | undefined;
-            };
-            onClick: (_: import('../../common/common.interface').UnusedParameter, legendItem: import('chart.js').LegendItem) => void;
-        };
-        customLegendPlugin: {
-            htmlLegend: any;
-        };
-        chartAreaBorder: {
-            borderColor: string;
-        };
-        dragData: false | object | import('../../common/helpers/get-draggableData').IDraggableData | undefined;
-    };
-};