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

package/dist/esm/charts/lineChart/fragments/lineChartSeparator.js

@@ -1,84 +1,61 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useContext, useEffect } from 'react';
-import { BuildError, buildError, buildSeparatorXBreakAxisError, buildSeparatorXOutOfRangeError, buildSeparatorYBreakAxisError, buildSeparatorYOutOfRangeError, } from '../../../utils/buildErrors/buildErrors';
-import { getPoints } from '../../../utils/getPoints/getPoints';
-import { LineChartContext } from '../context/lineChartContext';
-export const LineChartSeparator = ({ areaSeparator, dataTestId, rightSeparator, topSeparator, xBreakAxis, yBreakAxis, }) => {
-    const { addError, crossXAxis, crossYAxis, xAxisCoordinates, yAxisCoordinates } = useContext(LineChartContext);
-    // Extract tick values for stable dependencies
-    const xTickValues = xAxisCoordinates.tickValues;
-    const yTickValues = yAxisCoordinates.tickValues;
-    // Pre-calculate numeric values for dependencies
-    const xBreakNumeric = xBreakAxis !== undefined
-        ? typeof xBreakAxis === 'string'
-            ? parseFloat(xBreakAxis)
-            : xBreakAxis
-        : undefined;
-    const yBreakNumeric = yBreakAxis !== undefined
-        ? typeof yBreakAxis === 'string'
-            ? parseFloat(yBreakAxis)
-            : yBreakAxis
-        : undefined;
-    // Separator error validations
-    useEffect(() => {
-        // xBreakAxis validation
-        if (xBreakAxis !== undefined) {
-            const xValues = xTickValues.map(tick => tick.value);
-            if (xBreakNumeric === undefined || isNaN(xBreakNumeric)) {
-                addError?.('LINE_CHART_SEPARATOR_ERROR', {
-                    error: buildSeparatorXBreakAxisError(xBreakAxis),
-                });
-            }
-            else {
-                const minX = Math.min(...xValues.map(v => (typeof v === 'string' ? parseFloat(v) : v)));
-                const maxX = Math.max(...xValues.map(v => (typeof v === 'string' ? parseFloat(v) : v)));
-                if (xBreakNumeric < minX || xBreakNumeric > maxX) {
-                    addError?.('LINE_CHART_SEPARATOR_ERROR', {
-                        error: buildSeparatorXOutOfRangeError(xBreakNumeric, minX, maxX),
-                    });
-                }
-            }
-        }
-        // yBreakAxis validation
-        if (yBreakAxis !== undefined) {
-            const yValues = yTickValues.map(tick => tick.value);
-            if (yBreakNumeric === undefined || isNaN(yBreakNumeric)) {
-                addError?.('LINE_CHART_SEPARATOR_ERROR', {
-                    error: buildSeparatorYBreakAxisError(yBreakAxis),
-                });
-            }
-            else {
-                const minY = Math.min(...yValues.map(v => (typeof v === 'string' ? parseFloat(v) : v)));
-                const maxY = Math.max(...yValues.map(v => (typeof v === 'string' ? parseFloat(v) : v)));
-                if (yBreakNumeric < minY || yBreakNumeric > maxY) {
-                    addError?.('LINE_CHART_SEPARATOR_ERROR', {
-                        error: buildSeparatorYOutOfRangeError(yBreakNumeric, minY, maxY),
-                    });
-                }
-            }
-        }
-    }, [xBreakAxis, xBreakNumeric, xTickValues, yBreakAxis, yBreakNumeric, yTickValues]);
-    if (!topSeparator && !rightSeparator && !areaSeparator) {
-        return _jsx(_Fragment, {});
-    }
-    const customXEnd = xBreakAxis && getPoints(xAxisCoordinates.tickValues, [xBreakAxis], true)[0];
-    const customYEnd = yBreakAxis && getPoints(yAxisCoordinates.tickValues, [yBreakAxis])[0];
-    const autoXEnd = crossYAxis ? yAxisCoordinates.coordinates.x1 : xAxisCoordinates.coordinates.x2;
-    const autoYEnd = crossXAxis ? xAxisCoordinates.coordinates.y1 : yAxisCoordinates.coordinates.y1;
-    const xStart = xAxisCoordinates.coordinates.x1;
-    const xEnd = customXEnd ?? autoXEnd;
-    const yStart = yAxisCoordinates.coordinates.y2;
-    const yEnd = customYEnd ?? autoYEnd;
-    // Separator positioning validation
-    useEffect(() => {
-        if (xStart === xEnd && yStart === yEnd) {
-            addError?.('LINE_CHART_SEPARATOR_ERROR', {
-                error: buildError(BuildError.LINE_CHART_SEPARATOR_INVALID_COORDINATES),
-            });
-        }
-    }, [xStart, xEnd, yStart, yEnd]);
-    const squarePath = `M${xStart} ${yStart} H ${xEnd} V ${yEnd} H ${xStart} Z`;
-    const lineTop = `M${xStart} ${yEnd} H ${xEnd}`;
-    const lineRight = `M${xEnd} ${yStart} V ${yEnd}`;
-    return (_jsxs("g", { children: [_jsx("path", { d: squarePath, "data-testid": `${dataTestId}Area`, ...areaSeparator }), _jsx("path", { d: lineTop, "data-testid": `${dataTestId}Top`, ...topSeparator }), _jsx("path", { d: lineRight, "data-testid": `${dataTestId}Right`, ...rightSeparator })] }));
+import { BuildError, buildError, buildSeparatorXBreakAxisError, buildSeparatorXOutOfRangeError, buildSeparatorYBreakAxisError, buildSeparatorYOutOfRangeError } from "../../../utils/buildErrors/buildErrors.js";
+import { getPoints } from "../../../utils/getPoints/getPoints.js";
+import { LineChartContext } from "../context/lineChartContext.js";
+import { useContext, useEffect } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+const LineChartSeparator = ({ areaSeparator: r, dataTestId: i, rightSeparator: a, topSeparator: o, xBreakAxis: s, yBreakAxis: c }) => {
+	let { addError: l, crossXAxis: u, crossYAxis: d, xAxisCoordinates: f, yAxisCoordinates: p } = useContext(LineChartContext), m = f.tickValues, h = p.tickValues, g = s === void 0 ? void 0 : typeof s == "string" ? parseFloat(s) : s, _ = c === void 0 ? void 0 : typeof c == "string" ? parseFloat(c) : c;
+	if (useEffect(() => {
+		if (s !== void 0) {
+			let e = m.map((e) => e.value);
+			if (g === void 0 || isNaN(g)) l?.("LINE_CHART_SEPARATOR_ERROR", { error: buildSeparatorXBreakAxisError(s) });
+			else {
+				let t = Math.min(...e.map((e) => typeof e == "string" ? parseFloat(e) : e)), n = Math.max(...e.map((e) => typeof e == "string" ? parseFloat(e) : e));
+				(g < t || g > n) && l?.("LINE_CHART_SEPARATOR_ERROR", { error: buildSeparatorXOutOfRangeError(g, t, n) });
+			}
+		}
+		if (c !== void 0) {
+			let e = h.map((e) => e.value);
+			if (_ === void 0 || isNaN(_)) l?.("LINE_CHART_SEPARATOR_ERROR", { error: buildSeparatorYBreakAxisError(c) });
+			else {
+				let t = Math.min(...e.map((e) => typeof e == "string" ? parseFloat(e) : e)), n = Math.max(...e.map((e) => typeof e == "string" ? parseFloat(e) : e));
+				(_ < t || _ > n) && l?.("LINE_CHART_SEPARATOR_ERROR", { error: buildSeparatorYOutOfRangeError(_, t, n) });
+			}
+		}
+	}, [
+		s,
+		g,
+		m,
+		c,
+		_,
+		h
+	]), !o && !a && !r) return /* @__PURE__ */ jsx(Fragment, {});
+	let v = s && getPoints(f.tickValues, [s], !0)[0], y = c && getPoints(p.tickValues, [c])[0], b = d ? p.coordinates.x1 : f.coordinates.x2, x = u ? f.coordinates.y1 : p.coordinates.y1, S = f.coordinates.x1, C = v ?? b, w = p.coordinates.y2, T = y ?? x;
+	useEffect(() => {
+		S === C && w === T && l?.("LINE_CHART_SEPARATOR_ERROR", { error: buildError(BuildError.LINE_CHART_SEPARATOR_INVALID_COORDINATES) });
+	}, [
+		S,
+		C,
+		w,
+		T
+	]);
+	let E = `M${S} ${w} H ${C} V ${T} H ${S} Z`, D = `M${S} ${T} H ${C}`, O = `M${C} ${w} V ${T}`;
+	return /* @__PURE__ */ jsxs("g", { children: [
+		/* @__PURE__ */ jsx("path", {
+			d: E,
+			"data-testid": `${i}Area`,
+			...r
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: D,
+			"data-testid": `${i}Top`,
+			...o
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: O,
+			"data-testid": `${i}Right`,
+			...a
+		})
+	] });
 };
+export { LineChartSeparator };

package/dist/esm/charts/lineChart/fragments/lineChartXAxis.js

@@ -1,32 +1,34 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useContext } from 'react';
-import { XAxis } from '../../../components/axisChart/xAxis/xAxis';
-import { TickDataUtils } from '../../../components/tick/tick.types';
-import { Positions } from '../../../types/position.enum';
-import { getTickTextYCoordinate } from '../../../utils/getTickTextCoordinate/getTickTextCoordinates';
-import { pickCustomAttributes } from '../../../utils/pickCustomAttributes/pickCustomAttributes';
-import { LineChartContext } from '../context/lineChartContext';
-export const LineChartXAxis = ({ ariaLabel, position = Positions.BOTTOM, tickLine, tickText, valueFormatter = (value) => value, ...props }) => {
-    const { xAxisCoordinates: { coordinates, tickValues: contextTickValues }, xCursor, ...context } = useContext(LineChartContext);
-    const tickTextY = getTickTextYCoordinate(position, coordinates.y1, Number(tickText?.fontSize), tickText?.top ?? 0);
-    const tickValues = tickText
-        ? TickDataUtils.formatTicksValues(contextTickValues, valueFormatter)
-        : undefined;
-    // Extract custom attributes (aria-*, data-*) and handle deprecated ariaLabel
-    const customAttributes = pickCustomAttributes(props);
-    const finalAriaLabel = ariaLabel || props['aria-label'];
-    // Merge all props including custom attributes and ariaLabel precedence
-    const mergedProps = {
-        ...props,
-        ...customAttributes,
-        ...(finalAriaLabel && { 'aria-label': finalAriaLabel }),
-    };
-    return (_jsx(XAxis, { ...coordinates, ...mergedProps, canvasHeight: Number(context.canvasHeight), canvasWidth: Number(context.canvasWidth), cursor: xCursor, dataTestId: `${context.dataTestId}xAxis`, tickLine: {
-            ...tickLine,
-            y1: context.yAxisCoordinates.coordinates.y1,
-            y2: context.yAxisCoordinates.coordinates.y2,
-        }, tickText: {
-            ...tickText,
-            y: tickTextY,
-        }, tickValues: tickValues }));
+import { Positions } from "../../../types/position.enum.js";
+import { pickCustomAttributes } from "../../../utils/pickCustomAttributes/pickCustomAttributes.js";
+import { XAxis } from "../../../components/axisChart/xAxis/xAxis.js";
+import { getTickTextYCoordinate } from "../../../utils/getTickTextCoordinate/getTickTextCoordinates.js";
+import { LineChartContext } from "../context/lineChartContext.js";
+import { TickDataUtils } from "../../../components/tick/tick.types.js";
+import { useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+const LineChartXAxis = ({ ariaLabel: t, position: n = Positions.BOTTOM, tickLine: r, tickText: i, valueFormatter: a = (e) => e, ...o }) => {
+	let { xAxisCoordinates: { coordinates: s, tickValues: c }, xCursor: l, ...u } = useContext(LineChartContext), d = getTickTextYCoordinate(n, s.y1, Number(i?.fontSize), i?.top ?? 0), f = i ? TickDataUtils.formatTicksValues(c, a) : void 0, p = pickCustomAttributes(o), m = t || o["aria-label"], h = {
+		...o,
+		...p,
+		...m && { "aria-label": m }
+	};
+	return /* @__PURE__ */ jsx(XAxis, {
+		...s,
+		...h,
+		canvasHeight: Number(u.canvasHeight),
+		canvasWidth: Number(u.canvasWidth),
+		cursor: l,
+		dataTestId: `${u.dataTestId}xAxis`,
+		tickLine: {
+			...r,
+			y1: u.yAxisCoordinates.coordinates.y1,
+			y2: u.yAxisCoordinates.coordinates.y2
+		},
+		tickText: {
+			...i,
+			y: d
+		},
+		tickValues: f
+	});
 };
+export { LineChartXAxis };

package/dist/esm/charts/lineChart/fragments/lineChartYAxis.js

@@ -1,41 +1,39 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useContext } from 'react';
-import { YAxis } from '../../../components/axisChart/yAxis/yAxis';
-import { TickDataUtils } from '../../../components/tick/tick.types';
-import { Positions } from '../../../types/position.enum';
-import { pickCustomAttributes } from '../../../utils/pickCustomAttributes/pickCustomAttributes';
-import { LineChartContext } from '../context/lineChartContext';
-import { getYAxisTextXCoordinate } from '../utils/tickTextPosition';
-export const LineChartYAxis = ({ ariaLabel, position = Positions.LEFT, tickLine, tickText, valueFormatter = (value) => value, 
-// NOTE: tickValues prop is destructured but NOT USED - see TODO in lineChart.type.ts
-...props }) => {
-    const { yAxisCoordinates: { coordinates, tickValues: contextTickValues }, yCursor, ...context } = useContext(LineChartContext);
-    // TODO: Currently ignoring props.tickValues and using contextTickValues instead
-    // This means custom tickValues prop has no effect. Implementation needed to:
-    // 1. Check if props.tickValues exists
-    // 2. Use custom tick values instead of context values when provided
-    // 3. Update buildLineContextValue to handle custom Y-axis tick values
-    const xTickText = getYAxisTextXCoordinate({
-        tickText,
-        yAxisPosition: position,
-        textWidth: context.yAxisText,
-        yAxisX1: coordinates.x1,
-    });
-    const tickValues = tickText
-        ? TickDataUtils.formatTicksValues(contextTickValues, valueFormatter)
-        : undefined;
-    // Extract custom attributes (aria-*, data-*) and handle deprecated ariaLabel
-    const customAttributes = pickCustomAttributes(props);
-    const finalAriaLabel = ariaLabel || props['aria-label'];
-    // Merge all props including custom attributes and ariaLabel precedence
-    const mergedProps = {
-        ...props,
-        ...customAttributes,
-        ...(finalAriaLabel && { 'aria-label': finalAriaLabel }),
-    };
-    return (_jsx(YAxis, { ...coordinates, ...mergedProps, canvasHeight: Number(context.canvasHeight), canvasWidth: Number(context.canvasWidth), cursor: yCursor, dataTestId: `${context.dataTestId}yAxis`, tickLine: {
-            ...tickLine,
-            x1: context.xAxisCoordinates.coordinates.x1,
-            x2: context.xAxisCoordinates.coordinates.x2,
-        }, tickText: { ...tickText, x: xTickText }, tickValues: tickValues }));
+import { Positions } from "../../../types/position.enum.js";
+import { pickCustomAttributes } from "../../../utils/pickCustomAttributes/pickCustomAttributes.js";
+import { YAxis } from "../../../components/axisChart/yAxis/yAxis.js";
+import { LineChartContext } from "../context/lineChartContext.js";
+import { TickDataUtils } from "../../../components/tick/tick.types.js";
+import { getYAxisTextXCoordinate } from "../utils/tickTextPosition.js";
+import { useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+const LineChartYAxis = ({ ariaLabel: t, position: n = Positions.LEFT, tickLine: r, tickText: i, valueFormatter: a = (e) => e, ...o }) => {
+	let { yAxisCoordinates: { coordinates: s, tickValues: c }, yCursor: l, ...u } = useContext(LineChartContext), d = getYAxisTextXCoordinate({
+		tickText: i,
+		yAxisPosition: n,
+		textWidth: u.yAxisText,
+		yAxisX1: s.x1
+	}), f = i ? TickDataUtils.formatTicksValues(c, a) : void 0, p = pickCustomAttributes(o), m = t || o["aria-label"], h = {
+		...o,
+		...p,
+		...m && { "aria-label": m }
+	};
+	return /* @__PURE__ */ jsx(YAxis, {
+		...s,
+		...h,
+		canvasHeight: Number(u.canvasHeight),
+		canvasWidth: Number(u.canvasWidth),
+		cursor: l,
+		dataTestId: `${u.dataTestId}yAxis`,
+		tickLine: {
+			...r,
+			x1: u.xAxisCoordinates.coordinates.x1,
+			x2: u.xAxisCoordinates.coordinates.x2
+		},
+		tickText: {
+			...i,
+			x: d
+		},
+		tickValues: f
+	});
 };
+export { LineChartYAxis };

package/dist/esm/charts/lineChart/hook/useAutoClick.js

@@ -1,19 +1,14 @@
-import { useEffect, useImperativeHandle, useRef } from 'react';
-export const useAutoClick = (ref) => {
-    const autoClick = useRef(false);
-    const innerRef = useRef(null);
-    useImperativeHandle(ref, () => innerRef.current, []);
-    const handleClick = (e) => {
-        autoClick.current = !!e.autoClick;
-    };
-    useEffect(() => {
-        if (!innerRef.current) {
-            return;
-        }
-        const element = innerRef.current;
-        element.addEventListener('click', handleClick);
-        // eslint-disable-next-line consistent-return
-        return () => element.removeEventListener('click', handleClick);
-    }, []);
-    return [innerRef, autoClick];
+import { useEffect, useImperativeHandle, useRef } from "react";
+const useAutoClick = (t) => {
+	let n = useRef(!1), r = useRef(null);
+	useImperativeHandle(t, () => r.current, []);
+	let i = (e) => {
+		n.current = !!e.autoClick;
+	};
+	return useEffect(() => {
+		if (!r.current) return;
+		let e = r.current;
+		return e.addEventListener("click", i), () => e.removeEventListener("click", i);
+	}, []), [r, n];
 };
+export { useAutoClick };

package/dist/esm/charts/lineChart/hook/useHover.js

@@ -1,30 +1,18 @@
-import { useCallback, useState } from 'react';
-const outRange = -Infinity;
-export const useHover = ({ canvasHeight, canvasWidth }) => {
-    const [[xCursor, yCursor], setCursor] = useState([outRange, outRange]);
-    const getCursor = useCallback((e, node) => {
-        const { height, left, top, width } = node.getBoundingClientRect();
-        // get the x and y position of the mouse
-        const x = e.clientX - left;
-        const y = e.clientY - top;
-        // scale the x and y to the canvas size
-        const xPosition = (x * canvasWidth) / width;
-        const yPosition = (y * canvasHeight) / height;
-        // save the positions
-        setCursor([xPosition, yPosition]);
-    }, [canvasWidth, canvasHeight]);
-    const startTouch = (e) => {
-        e.preventDefault();
-    };
-    const svgRef = useCallback((node) => {
-        if (node) {
-            node.addEventListener('touchstart', startTouch);
-            node.addEventListener('touchmove', e => getCursor(e.touches[0], node));
-            node.addEventListener('mousemove', e => getCursor(e, node));
-        }
-        node?.removeEventListener('touchstart', startTouch);
-        node?.removeEventListener('touchmove', e => getCursor(e.touches[0], node));
-        node?.removeEventListener('mousemove', e => getCursor(e, node));
-    }, [canvasHeight, canvasWidth]);
-    return { svgRef, xCursor, yCursor };
+import { useCallback, useState } from "react";
+var outRange = -Infinity;
+const useHover = ({ canvasHeight: r, canvasWidth: i }) => {
+	let [[a, o], s] = useState([outRange, outRange]), c = useCallback((e, t) => {
+		let { height: n, left: a, top: o, width: c } = t.getBoundingClientRect(), l = e.clientX - a, u = e.clientY - o;
+		s([l * i / c, u * r / n]);
+	}, [i, r]), l = (e) => {
+		e.preventDefault();
+	};
+	return {
+		svgRef: useCallback((e) => {
+			e && (e.addEventListener("touchstart", l), e.addEventListener("touchmove", (t) => c(t.touches[0], e)), e.addEventListener("mousemove", (t) => c(t, e))), e?.removeEventListener("touchstart", l), e?.removeEventListener("touchmove", (t) => c(t.touches[0], e)), e?.removeEventListener("mousemove", (t) => c(t, e));
+		}, [r, i]),
+		xCursor: a,
+		yCursor: o
+	};
 };
+export { useHover };

package/dist/esm/charts/lineChart/hook/useIndicator.js

@@ -1,31 +1,15 @@
-import { useEffect, useRef } from 'react';
-export const useIndicator = (xPosition, implement) => {
-    const pathRef = useRef(null);
-    const indicatorRef = useRef(null);
-    useEffect(() => {
-        if (!implement || !pathRef.current || !indicatorRef.current) {
-            return;
-        }
-        const path = pathRef.current;
-        const indicator = indicatorRef.current;
-        const pathLength = path.getTotalLength();
-        let start = 0;
-        let end = pathLength;
-        let mid, points;
-        // find the point on the path where the x position is, using binary search
-        while (end - start > 0.01) {
-            mid = (start + end) / 2;
-            points = path.getPointAtLength(mid);
-            if (points.x < xPosition) {
-                start = mid;
-            }
-            else {
-                end = mid;
-            }
-        }
-        const point = path.getPointAtLength(end);
-        indicator.setAttribute('transform', `translate(${point.x}, ${point.y})`);
-        indicator.setAttribute('pointer-events', 'none');
-    }, [xPosition]);
-    return { indicatorRef, pathRef };
+import { useEffect, useRef } from "react";
+const useIndicator = (n, r) => {
+	let i = useRef(null), a = useRef(null);
+	return useEffect(() => {
+		if (!r || !i.current || !a.current) return;
+		let e = i.current, t = a.current, o = e.getTotalLength(), s = 0, c = o, l, u;
+		for (; c - s > .01;) l = (s + c) / 2, u = e.getPointAtLength(l), u.x < n ? s = l : c = l;
+		let d = e.getPointAtLength(c);
+		t.setAttribute("transform", `translate(${d.x}, ${d.y})`), t.setAttribute("pointer-events", "none");
+	}, [n]), {
+		indicatorRef: a,
+		pathRef: i
+	};
 };
+export { useIndicator };

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

@@ -1 +1 @@
-export * from './lineChart';
+export * from './lineChart.js';

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

@@ -1,13 +1,12 @@
-import { LineChartPath } from './fragments/lineChartPath';
-import { LineChartSeparator } from './fragments/lineChartSeparator';
-import { LineChartXAxis } from './fragments/lineChartXAxis';
-import { LineChartYAxis } from './fragments/lineChartYAxis';
-import { LineChartStructure } from './lineChartStructure';
-const LineChart = Object.assign(LineChartStructure, {
-    Path: LineChartPath,
-    Separator: LineChartSeparator,
-    XAxis: LineChartXAxis,
-    YAxis: LineChartYAxis,
+import { LineChartPath } from "./fragments/lineChartPath2.js";
+import { LineChartSeparator } from "./fragments/lineChartSeparator.js";
+import { LineChartXAxis } from "./fragments/lineChartXAxis.js";
+import { LineChartYAxis } from "./fragments/lineChartYAxis.js";
+import { LineChartStructure } from "./lineChartStructure.js";
+var LineChart = Object.assign(LineChartStructure, {
+	Path: LineChartPath,
+	Separator: LineChartSeparator,
+	XAxis: LineChartXAxis,
+	YAxis: LineChartYAxis
 });
 export { LineChart };
-export * from './lineChart.type';