@kubit-ui-web/react-charts 1.11.0 → 1.11.2

package/dist/esm/charts/lineChart/lineChartStructure.js

@@ -1,121 +1,92 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Children, useEffect, useMemo, useState } from 'react';
-import { SvgContainer } from '../../components/svgContainer/svgContainer';
-import { useId } from '../../hooks/useId/useId';
-import { useResponsiveCanvas } from '../../hooks/useResponsiveCanvas/useResponsiveCanvas';
-import { DefaultCanvasConfig } from '../../types/canvas.type';
-import { createErrorAccumulator } from '../../utils/createErrorAccumulator';
-import { getChildrenAttr } from '../../utils/getChildrenAttr/getChildrenAttr';
-import { getDataFingerprint } from '../../utils/getDataFingerprint/getDataFingerprint';
-import { buildLineContextValue } from './context/buildLineContextValue';
-import { LineChartContext } from './context/lineChartContext';
-import { LineChartXAxis } from './fragments/lineChartXAxis';
-import { LineChartYAxis } from './fragments/lineChartYAxis';
-import { useHover } from './hook/useHover';
-/**
- * Renders a line chart component.
- *
- * @component
- * @example
- * ```
- * <LineChart
- *   caption="Line Chart"
- *   canvasConfig={DefaultCanvasConfig}
- *   dataTestId="line-chart"
- *   width="100%"
- *   height="70%"
- *   data={chartData}
- * >
- *  {chartChildren}
- * </LineChart>
- * ```
- *
- * @param props - `LineChartProps` include:
- * - `width`: The width of the chart (default is '100%').
- * - `height`: The height of the chart (default is '100%').
- * - `data`: The data for the chart.
- * - `xKey`: The key for the x-axis data.
- * - `canvasConfig`: The configuration for the chart canvas (default is `DefaultCanvasConfig`).
- * - `dataTestId`: The data test ID for the chart (default is 'line-chart').
- * - `caption`: The caption for the chart (default is 'Line chart').
- *
- * @returns The rendered LineChart component.
- */
-export const LineChartStructure = ({ ariaHidden, ariaLabel, canvasConfig = DefaultCanvasConfig, caption, children, classNames, data, dataTestId: dataTestIdProp = 'line-chart', getPathArea, height = '100%', onErrors, role, tabIndex, width = '100%', xKey, ...props }) => {
-    const dataTestId = useId(dataTestIdProp);
-    const [childrenYKeys, setChildrenYKey] = useState('');
-    // Use the responsive canvas hook for dimension management
-    const { parsedCanvas, parsedCanvasExtraSpace, viewBox } = useResponsiveCanvas({
-        canvasConfig,
-        dataTestId,
-        height,
-        width,
-    });
-    // Set the default axis for the chart
-    const defaultAxis = [
-        _jsx(LineChartXAxis, {}, "default-x-axis"),
-        _jsx(LineChartYAxis, {}, "default-y-axis"),
-    ];
-    const arrayChildren = (Children.toArray(children) || []);
-    const chidrenWithDefaultAxis = defaultAxis.concat(arrayChildren);
-    // watch the Y childs keys
-    getChildrenAttr({
-        attrName: 'dataKey',
-        children: chidrenWithDefaultAxis,
-        originalValue: childrenYKeys,
-        updateValue: setChildrenYKey,
-    });
-    const errorAccumulator = useMemo(() => createErrorAccumulator(onErrors), [onErrors]);
-    const dataFingerprint = getDataFingerprint(data);
-    const contextValue = useMemo(() => {
-        // Clear previous errors before building new context
-        errorAccumulator.clearErrors();
-        return buildLineContextValue({
-            addError: (errorType, error) => {
-                errorAccumulator.addError(errorType, error);
-            },
-            canvasHeight: parsedCanvas.height,
-            canvasWidth: parsedCanvas.width,
-            children: chidrenWithDefaultAxis,
-            data,
-            viewBox,
-            xKey,
-        });
-    }, [
-        parsedCanvas.width,
-        parsedCanvas.height,
-        dataFingerprint,
-        xKey,
-        childrenYKeys,
-        errorAccumulator.addError,
-    ]);
-    const { svgRef, xCursor, yCursor } = useHover({
-        canvasHeight: parsedCanvas.height,
-        canvasWidth: parsedCanvas.width,
-    });
-    useEffect(() => {
-        getPathArea?.({
-            x1: contextValue.xAxisCoordinates.coordinates.x1,
-            y1: contextValue.yAxisCoordinates.coordinates.y1,
-            x2: contextValue.xAxisCoordinates.coordinates.x2,
-            y2: contextValue.yAxisCoordinates.coordinates.y2,
-        });
-    }, [
-        contextValue.xAxisCoordinates.coordinates.x1,
-        contextValue.yAxisCoordinates.coordinates.y1,
-        contextValue.xAxisCoordinates.coordinates.x2,
-        contextValue.yAxisCoordinates.coordinates.y2,
-        getPathArea,
-    ]);
-    return (_jsx(SvgContainer, { ref: svgRef, ariaHidden: ariaHidden, ariaLabel: ariaLabel, caption: caption, className: classNames, "data-kbt-svg": true, dataTestId: dataTestId, height: height, role: role, tabIndex: tabIndex, viewBox: viewBox, width: width, ...props, children: _jsx(LineChartContext.Provider, { value: {
-                ...contextValue,
-                canvasExtraSpace: parsedCanvasExtraSpace,
-                canvasHeight: parsedCanvas.height,
-                canvasWidth: parsedCanvas.width,
-                data,
-                dataTestId,
-                xCursor,
-                xKey,
-                yCursor,
-            }, children: children }) }));
+import { SvgContainer } from "../../components/svgContainer/svgContainer.js";
+import { useId } from "../../hooks/useId/useId.js";
+import { useResponsiveCanvas } from "../../hooks/useResponsiveCanvas/useResponsiveCanvas.js";
+import { DefaultCanvasConfig } from "../../types/canvas.type.js";
+import { createErrorAccumulator } from "../../utils/createErrorAccumulator/createErrorAccumulator.js";
+import { getDataFingerprint } from "../../utils/getDataFingerprint/getDataFingerprint.js";
+import { useHover } from "./hook/useHover.js";
+import { LineChartContext } from "./context/lineChartContext.js";
+import { LineChartXAxis } from "./fragments/lineChartXAxis.js";
+import { LineChartYAxis } from "./fragments/lineChartYAxis.js";
+import { getChildrenAttr } from "../../utils/getChildrenAttr/getChildrenAttr.js";
+import { buildLineContextValue } from "./context/buildLineContextValue.js";
+import { Children, useEffect, useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+const LineChartStructure = ({ ariaHidden: n, ariaLabel: r, canvasConfig: i = DefaultCanvasConfig, caption: a, children: o, classNames: s, data: c, dataTestId: l = "line-chart", getPathArea: u, height: d = "100%", onErrors: f, role: p, tabIndex: m, width: h = "100%", xKey: g, ..._ }) => {
+	let v = useId(l), [y, b] = useState(""), { parsedCanvas: x, parsedCanvasExtraSpace: S, viewBox: C } = useResponsiveCanvas({
+		canvasConfig: i,
+		dataTestId: v,
+		height: d,
+		width: h
+	}), w = [/* @__PURE__ */ jsx(LineChartXAxis, {}, "default-x-axis"), /* @__PURE__ */ jsx(LineChartYAxis, {}, "default-y-axis")], T = Children.toArray(o) || [], E = w.concat(T);
+	getChildrenAttr({
+		attrName: "dataKey",
+		children: E,
+		originalValue: y,
+		updateValue: b
+	});
+	let D = useMemo(() => createErrorAccumulator(f), [f]), O = getDataFingerprint(c), k = useMemo(() => (D.clearErrors(), buildLineContextValue({
+		addError: (e, t) => {
+			D.addError(e, t);
+		},
+		canvasHeight: x.height,
+		canvasWidth: x.width,
+		children: E,
+		data: c,
+		viewBox: C,
+		xKey: g
+	})), [
+		x.width,
+		x.height,
+		O,
+		g,
+		y,
+		D.addError
+	]), { svgRef: A, xCursor: j, yCursor: M } = useHover({
+		canvasHeight: x.height,
+		canvasWidth: x.width
+	});
+	return useEffect(() => {
+		u?.({
+			x1: k.xAxisCoordinates.coordinates.x1,
+			y1: k.yAxisCoordinates.coordinates.y1,
+			x2: k.xAxisCoordinates.coordinates.x2,
+			y2: k.yAxisCoordinates.coordinates.y2
+		});
+	}, [
+		k.xAxisCoordinates.coordinates.x1,
+		k.yAxisCoordinates.coordinates.y1,
+		k.xAxisCoordinates.coordinates.x2,
+		k.yAxisCoordinates.coordinates.y2,
+		u
+	]), /* @__PURE__ */ jsx(SvgContainer, {
+		ref: A,
+		ariaHidden: n,
+		ariaLabel: r,
+		caption: a,
+		className: s,
+		"data-kbt-svg": !0,
+		dataTestId: v,
+		height: d,
+		role: p,
+		tabIndex: m,
+		viewBox: C,
+		width: h,
+		..._,
+		children: /* @__PURE__ */ jsx(LineChartContext.Provider, {
+			value: {
+				...k,
+				canvasExtraSpace: S,
+				canvasHeight: x.height,
+				canvasWidth: x.width,
+				data: c,
+				dataTestId: v,
+				xCursor: j,
+				xKey: g,
+				yCursor: M
+			},
+			children: o
+		})
+	});
 };
+export { LineChartStructure };

package/dist/esm/charts/lineChart/utils/accessibilityTemplateProcessor.js

@@ -1,56 +1,19 @@
-// Template keys for accessibility labels
-export const TEMPLATE_KEYS = {
-    DATA_KEY: '{{dataKey}}',
-    INDEX: '{{index}}',
-    X_VALUE: '{{xValue}}',
-    Y_VALUE: '{{yValue}}',
+const TEMPLATE_KEYS = {
+	DATA_KEY: "{{dataKey}}",
+	INDEX: "{{index}}",
+	X_VALUE: "{{xValue}}",
+	Y_VALUE: "{{yValue}}"
 };
-/**
- * Processes template string in accessibility labels by replacing placeholders with actual values
- *
- * @param template - The template string with placeholders (e.g., "Point {{index}}: {{dataKey}} = {{yValue}}")
- * @param nodeData - Contains index, dataValue, dataKey, and xKey for the current node
- * @param dataValue - The actual data array or value (optional, uses nodeData.dataValue if not provided)
- * @returns The processed string with placeholders replaced by actual values
- *
- * @example
- * ```typescript
- * const template = "Data point {{index}}: {{dataKey}} = {{yValue}}";
- * const nodeData = { index: 0, dataKey: "sales", xKey: "month" };
- * const dataValue = [{ month: "Jan", sales: 100 }];
- *
- * const result = processAccessibilityTemplate(template, nodeData, dataValue);
- * // Result: "Data point 1: sales = 100"
- * ```
- */
-const extractValuesFromDataPoint = (dataPoint, nodeData) => {
-    const xValue = dataPoint && nodeData.xKey ? (dataPoint[nodeData.xKey]?.toString() ?? '') : '';
-    const yValue = dataPoint && nodeData.dataKey ? (dataPoint[nodeData.dataKey]?.toString() ?? '') : '';
-    return { xValue, yValue };
+var extractValuesFromDataPoint = (e, t) => ({
+	xValue: e && t.xKey ? e[t.xKey]?.toString() ?? "" : "",
+	yValue: e && t.dataKey ? e[t.dataKey]?.toString() ?? "" : ""
+}), replaceTemplatePlaceholders = (t, n, r, i) => {
+	let a = t;
+	return n.dataKey !== void 0 && (a = a.replace(new RegExp(TEMPLATE_KEYS.DATA_KEY, "g"), n.dataKey)), a = a.replace(new RegExp(TEMPLATE_KEYS.X_VALUE, "g"), r), a = a.replace(new RegExp(TEMPLATE_KEYS.Y_VALUE, "g"), i), n.index !== void 0 && (a = a.replace(new RegExp(TEMPLATE_KEYS.INDEX, "g"), (n.index + 1).toString())), a;
 };
-const replaceTemplatePlaceholders = (template, nodeData, xValue, yValue) => {
-    let result = template;
-    if (nodeData.dataKey !== undefined) {
-        result = result.replace(new RegExp(TEMPLATE_KEYS.DATA_KEY, 'g'), nodeData.dataKey);
-    }
-    // Always replace xValue and yValue placeholders, even with empty strings
-    result = result.replace(new RegExp(TEMPLATE_KEYS.X_VALUE, 'g'), xValue);
-    result = result.replace(new RegExp(TEMPLATE_KEYS.Y_VALUE, 'g'), yValue);
-    if (nodeData.index !== undefined) {
-        result = result.replace(new RegExp(TEMPLATE_KEYS.INDEX, 'g'), (nodeData.index + 1).toString());
-    }
-    return result;
-};
-export const processAccessibilityTemplate = (template, nodeData, dataValue) => {
-    if (!template) {
-        return undefined;
-    }
-    // Use provided dataValue or fall back to nodeData.dataValue
-    const actualDataValue = dataValue ?? nodeData.dataValue;
-    // Get the actual data point for this node
-    const dataPoint = Array.isArray(actualDataValue) ? actualDataValue[nodeData.index] : undefined;
-    // Extract values
-    const { xValue, yValue } = extractValuesFromDataPoint(dataPoint, nodeData);
-    // Replace template placeholders
-    return replaceTemplatePlaceholders(template, nodeData, xValue, yValue);
+const processAccessibilityTemplate = (e, r, i) => {
+	if (!e) return;
+	let a = i ?? r.dataValue, { xValue: o, yValue: s } = extractValuesFromDataPoint(Array.isArray(a) ? a[r.index] : void 0, r);
+	return replaceTemplatePlaceholders(e, r, o, s);
 };
+export { processAccessibilityTemplate };

package/dist/esm/charts/lineChart/utils/findSurroundingNumber.js

@@ -1,25 +1,19 @@
-export const findSurroundingNumber = (points, xPosition) => {
-    let idx = 0;
-    let match = false;
-    // TODO: performance the init and last point
-    for (let i = 0; i < points.length; i++) {
-        if (Math.round(points[i]) === Math.round(xPosition)) {
-            match = true;
-            idx = i;
-            break;
-        }
-    }
-    return { idx, match };
-};
-export const findClosestNumber = (points, xPosition) => {
-    let closest = 0;
-    let minDiff = Math.abs(points[0] - xPosition);
-    for (let i = 1; i < points.length; i++) {
-        const diff = Math.abs(points[i] - xPosition);
-        if (diff < minDiff) {
-            closest = i;
-            minDiff = diff;
-        }
-    }
-    return closest;
+const findSurroundingNumber = (e, t) => {
+	let n = 0, r = !1;
+	for (let i = 0; i < e.length; i++) if (Math.round(e[i]) === Math.round(t)) {
+		r = !0, n = i;
+		break;
+	}
+	return {
+		idx: n,
+		match: r
+	};
+}, findClosestNumber = (e, t) => {
+	let n = 0, r = Math.abs(e[0] - t);
+	for (let i = 1; i < e.length; i++) {
+		let a = Math.abs(e[i] - t);
+		a < r && (n = i, r = a);
+	}
+	return n;
 };
+export { findClosestNumber, findSurroundingNumber };

package/dist/esm/charts/lineChart/utils/getCoordinates.js

@@ -1,55 +1,49 @@
-import { Positions } from '../../../types/position.enum';
-export const getXCoordinates = ({ lineChartXPosition, lineChartYPosition, canvasHeight, canvasWidth, customBreakAxis, xAxisLeftSpacing, xAxisTopSpacing, xAxisRightSpacing, xAxisBottomSpacing, yAxisLeftSpacing, yAxisTopSpacing, yAxisRightSpacing, yAxisBottomSpacing, }) => {
-    const x1 = lineChartYPosition === Positions.LEFT ? Math.max(yAxisLeftSpacing, xAxisLeftSpacing) : 0;
-    const x2 = lineChartYPosition === Positions.RIGHT
-        ? canvasWidth - Math.max(yAxisRightSpacing, xAxisRightSpacing)
-        : canvasWidth;
-    if (lineChartXPosition === Positions.TOP) {
-        return {
-            x1,
-            x2,
-            y1: Math.max(yAxisTopSpacing, xAxisTopSpacing),
-            y2: Math.max(yAxisTopSpacing, xAxisTopSpacing),
-        };
-    }
-    if (lineChartXPosition === Positions.CENTER) {
-        return { x1, x2, y1: canvasHeight / 2, y2: canvasHeight / 2 };
-    }
-    if (lineChartXPosition === Positions.CUSTOM) {
-        return { x1, x2, y1: customBreakAxis, y2: customBreakAxis };
-    }
-    // BOTTOM
-    return {
-        x1,
-        x2,
-        y1: canvasHeight - Math.max(yAxisBottomSpacing, xAxisBottomSpacing),
-        y2: canvasHeight - Math.max(yAxisBottomSpacing, xAxisBottomSpacing),
-    };
-};
-export const getYCoordinates = ({ lineChartXPosition, lineChartYPosition, canvasHeight, canvasWidth, customBreakAxis, xAxisLeftSpacing, xAxisTopSpacing, xAxisRightSpacing, xAxisBottomSpacing, yAxisLeftSpacing, yAxisTopSpacing, yAxisRightSpacing, yAxisBottomSpacing, }) => {
-    const y1 = lineChartXPosition === Positions.TOP ? Math.max(yAxisTopSpacing, xAxisTopSpacing) : 0;
-    const y2 = lineChartXPosition === Positions.BOTTOM
-        ? canvasHeight - Math.max(yAxisBottomSpacing, xAxisBottomSpacing)
-        : canvasHeight;
-    if (lineChartYPosition === Positions.RIGHT) {
-        return {
-            x1: canvasWidth - Math.max(yAxisRightSpacing, xAxisRightSpacing),
-            x2: canvasWidth - Math.max(yAxisRightSpacing, xAxisRightSpacing),
-            y1,
-            y2,
-        };
-    }
-    if (lineChartYPosition === Positions.CENTER) {
-        return { x1: canvasWidth / 2, x2: canvasWidth / 2, y1, y2 };
-    }
-    if (lineChartYPosition === Positions.CUSTOM) {
-        return { x1: customBreakAxis, x2: customBreakAxis, y1, y2 };
-    }
-    // LEFT
-    return {
-        x1: Math.max(yAxisLeftSpacing, xAxisLeftSpacing),
-        x2: Math.max(yAxisLeftSpacing, xAxisLeftSpacing),
-        y1,
-        y2,
-    };
+import { Positions } from "../../../types/position.enum.js";
+const getXCoordinates = ({ lineChartXPosition: e, lineChartYPosition: t, canvasHeight: n, canvasWidth: r, customBreakAxis: i, xAxisLeftSpacing: a, xAxisTopSpacing: o, xAxisRightSpacing: s, xAxisBottomSpacing: c, yAxisLeftSpacing: l, yAxisTopSpacing: u, yAxisRightSpacing: d, yAxisBottomSpacing: f }) => {
+	let p = t === Positions.LEFT ? Math.max(l, a) : 0, m = t === Positions.RIGHT ? r - Math.max(d, s) : r;
+	return e === Positions.TOP ? {
+		x1: p,
+		x2: m,
+		y1: Math.max(u, o),
+		y2: Math.max(u, o)
+	} : e === Positions.CENTER ? {
+		x1: p,
+		x2: m,
+		y1: n / 2,
+		y2: n / 2
+	} : e === Positions.CUSTOM ? {
+		x1: p,
+		x2: m,
+		y1: i,
+		y2: i
+	} : {
+		x1: p,
+		x2: m,
+		y1: n - Math.max(f, c),
+		y2: n - Math.max(f, c)
+	};
+}, getYCoordinates = ({ lineChartXPosition: e, lineChartYPosition: t, canvasHeight: n, canvasWidth: r, customBreakAxis: i, xAxisLeftSpacing: a, xAxisTopSpacing: o, xAxisRightSpacing: s, xAxisBottomSpacing: c, yAxisLeftSpacing: l, yAxisTopSpacing: u, yAxisRightSpacing: d, yAxisBottomSpacing: f }) => {
+	let p = e === Positions.TOP ? Math.max(u, o) : 0, m = e === Positions.BOTTOM ? n - Math.max(f, c) : n;
+	return t === Positions.RIGHT ? {
+		x1: r - Math.max(d, s),
+		x2: r - Math.max(d, s),
+		y1: p,
+		y2: m
+	} : t === Positions.CENTER ? {
+		x1: r / 2,
+		x2: r / 2,
+		y1: p,
+		y2: m
+	} : t === Positions.CUSTOM ? {
+		x1: i,
+		x2: i,
+		y1: p,
+		y2: m
+	} : {
+		x1: Math.max(l, a),
+		x2: Math.max(l, a),
+		y1: p,
+		y2: m
+	};
 };
+export { getXCoordinates, getYCoordinates };

package/dist/esm/charts/lineChart/utils/getDataValues.js

@@ -1,24 +1,11 @@
-/**
- * Retrieves the data values from the given TickValuesAxisProps object.
- * @param data - The TickValuesAxisProps object containing the data values.
- * @returns An array of string values representing the data, or undefined if the data is invalid.
- */
-export const getDataValues = (data) => {
-    if (data.custom) {
-        return data.custom?.values;
-    }
-    if (data.numeric) {
-        const { max, min = 0, step } = data.numeric;
-        // Verify if the step is larger or equal than the range
-        const range = Math.abs(max - min);
-        if (step >= range || step <= 0) {
-            return [min.toString(), max.toString()];
-        }
-        const stepper = [];
-        for (let i = min; i <= max; i += step) {
-            stepper.push(i.toString());
-        }
-        return stepper;
-    }
-    return undefined;
+const getDataValues = (e) => {
+	if (e.custom) return e.custom?.values;
+	if (e.numeric) {
+		let { max: t, min: n = 0, step: r } = e.numeric;
+		if (r >= Math.abs(t - n) || r <= 0) return [n.toString(), t.toString()];
+		let i = [];
+		for (let e = n; e <= t; e += r) i.push(e.toString());
+		return i;
+	}
 };
+export { getDataValues };