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

package/dist/esm/components/foreignObject/foreignObject.js

@@ -1,4 +1,10 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-export const ForeignObject = ({ children, dataTestId, height, width, x, y, }) => {
-    return (_jsx("foreignObject", { "data-testid": dataTestId, height: height, width: width, x: x, y: y, children: children }));
-};
+import { jsx } from "react/jsx-runtime";
+const ForeignObject = ({ children: e, dataTestId: t, height: n, width: r, x: i, y: a }) => /* @__PURE__ */ jsx("foreignObject", {
+	"data-testid": t,
+	height: n,
+	width: r,
+	x: i,
+	y: a,
+	children: e
+});
+export { ForeignObject };

package/dist/esm/components/line/line.js

@@ -1,9 +1,8 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * `Line` component that renders an SVG line element with customizable properties.
- *
- * @returns A `line` SVG element with the specified properties and attributes.
- */
-export const Line = ({ ariaLabel, className = 'line', dataTestId, ...props }) => {
-    return _jsx("line", { ...props, "aria-label": ariaLabel, className: className, "data-testid": dataTestId });
-};
+import { jsx } from "react/jsx-runtime";
+const Line = ({ ariaLabel: e, className: t = "line", dataTestId: n, ...r }) => /* @__PURE__ */ jsx("line", {
+	...r,
+	"aria-label": e,
+	className: t,
+	"data-testid": n
+});
+export { Line };

package/dist/esm/components/node/components/circle/circle.js

@@ -1,6 +1,11 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-const CircleComponent = ({ dataTestId, position, size = 1, ...props }, ref) => {
-    return (_jsx("circle", { ...props, ref: ref, cx: position?.x, cy: position?.y, "data-testid": `${dataTestId}-circle`, r: size / 2 }));
-};
-export const Circle = forwardRef(CircleComponent);
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+const Circle = forwardRef(({ dataTestId: e, position: t, size: n = 1, ...r }, i) => /* @__PURE__ */ jsx("circle", {
+	...r,
+	ref: i,
+	cx: t?.x,
+	cy: t?.y,
+	"data-testid": `${e}-circle`,
+	r: n / 2
+}));
+export { Circle };

package/dist/esm/components/node/components/hexagon/hexagon.js

@@ -1,8 +1,16 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import { calculateShapePoints } from '../../utils/calculateShapePoints/calculateShapePoints';
-const HexagonComponent = ({ dataTestId, position = { x: 0, y: 0 }, size = 1, ...props }, ref) => {
-    const hexagonPoints = calculateShapePoints(position.x, position.y, 6, size / 2, size / 2);
-    return (_jsx("polygon", { ...props, ref: ref, "data-testid": `${dataTestId}-hexagon`, points: hexagonPoints }));
-};
-export const Hexagon = forwardRef(HexagonComponent);
+import { calculateShapePoints } from "../../utils/calculateShapePoints/calculateShapePoints.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+const Hexagon = forwardRef(({ dataTestId: e, position: t = {
+	x: 0,
+	y: 0
+}, size: n = 1, ...r }, i) => {
+	let a = calculateShapePoints(t.x, t.y, 6, n / 2, n / 2);
+	return /* @__PURE__ */ jsx("polygon", {
+		...r,
+		ref: i,
+		"data-testid": `${e}-hexagon`,
+		points: a
+	});
+});
+export { Hexagon };

package/dist/esm/components/node/components/pentagon/pentagon.js

@@ -1,8 +1,16 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import { calculateShapePoints } from '../../utils/calculateShapePoints/calculateShapePoints';
-const PentagonComponent = ({ dataTestId, position = { x: 0, y: 0 }, size = 1, ...props }, ref) => {
-    const pentagonPoints = calculateShapePoints(position.x, position.y, 5, size / 2, size / 2);
-    return (_jsx("polygon", { ...props, ref: ref, "data-testid": `${dataTestId}-pentagon`, points: pentagonPoints }));
-};
-export const Pentagon = forwardRef(PentagonComponent);
+import { calculateShapePoints } from "../../utils/calculateShapePoints/calculateShapePoints.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+const Pentagon = forwardRef(({ dataTestId: e, position: t = {
+	x: 0,
+	y: 0
+}, size: n = 1, ...r }, i) => {
+	let a = calculateShapePoints(t.x, t.y, 5, n / 2, n / 2);
+	return /* @__PURE__ */ jsx("polygon", {
+		...r,
+		ref: i,
+		"data-testid": `${e}-pentagon`,
+		points: a
+	});
+});
+export { Pentagon };

package/dist/esm/components/node/components/square/square.js

@@ -1,6 +1,15 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-const SquareComponent = ({ dataTestId, position = { x: 0, y: 0 }, size = 1, ...props }, ref) => {
-    return (_jsx("rect", { ...props, ref: ref, "data-testid": `${dataTestId}-square`, height: size, width: size, x: position.x - size / 2, y: position.y - size / 2 }));
-};
-export const Square = forwardRef(SquareComponent);
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+const Square = forwardRef(({ dataTestId: e, position: t = {
+	x: 0,
+	y: 0
+}, size: n = 1, ...r }, i) => /* @__PURE__ */ jsx("rect", {
+	...r,
+	ref: i,
+	"data-testid": `${e}-square`,
+	height: n,
+	width: n,
+	x: t.x - n / 2,
+	y: t.y - n / 2
+}));
+export { Square };

package/dist/esm/components/node/components/star/star.js

@@ -1,10 +1,16 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import { calculateShapePoints } from '../../utils/calculateShapePoints/calculateShapePoints';
-const StarComponent = ({ dataTestId, position = { x: 0, y: 0 }, size = 1, ...props }, ref) => {
-    const outerRadius = size / 2;
-    const innerRadius = outerRadius / 2;
-    const starPoints = calculateShapePoints(position.x, position.y, 5, outerRadius, innerRadius);
-    return _jsx("polygon", { ...props, ref: ref, "data-testid": `${dataTestId}-star`, points: starPoints });
-};
-export const Star = forwardRef(StarComponent);
+import { calculateShapePoints } from "../../utils/calculateShapePoints/calculateShapePoints.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+const Star = forwardRef(({ dataTestId: e, position: t = {
+	x: 0,
+	y: 0
+}, size: n = 1, ...r }, i) => {
+	let a = n / 2, o = a / 2, s = calculateShapePoints(t.x, t.y, 5, a, o);
+	return /* @__PURE__ */ jsx("polygon", {
+		...r,
+		ref: i,
+		"data-testid": `${e}-star`,
+		points: s
+	});
+});
+export { Star };

package/dist/esm/components/node/components/straight/straight.js

@@ -1,7 +1,16 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-const StraightComponent = ({ dataTestId, position = { x: 0, y: 0 }, size = 1, ...props }, ref) => {
-    const d = `M ${position.x - size / 2} ${position.y} H ${position.x + size / 2} M ${position.x} ${position.y - size / 2} V ${position.y + size / 2}`;
-    return _jsx("path", { ...props, ref: ref, d: d, "data-testid": `${dataTestId}-straight`, strokeWidth: 2 });
-};
-export const Straight = forwardRef(StraightComponent);
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+const Straight = forwardRef(({ dataTestId: e, position: t = {
+	x: 0,
+	y: 0
+}, size: n = 1, ...r }, i) => {
+	let a = `M ${t.x - n / 2} ${t.y} H ${t.x + n / 2} M ${t.x} ${t.y - n / 2} V ${t.y + n / 2}`;
+	return /* @__PURE__ */ jsx("path", {
+		...r,
+		ref: i,
+		d: a,
+		"data-testid": `${e}-straight`,
+		strokeWidth: 2
+	});
+});
+export { Straight };

package/dist/esm/components/node/components/triangle/triangle.js

@@ -1,11 +1,19 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-const TriangleComponent = ({ dataTestId, position = { x: 0, y: 0 }, size = 1, ...props }, ref) => {
-    const points = [
-        `${position.x},${position.y - size / 2}`,
-        `${position.x - size / 2},${position.y + size / 2}`,
-        `${position.x + size / 2},${position.y + size / 2}`,
-    ].join(' ');
-    return _jsx("polygon", { ...props, ref: ref, "data-testid": `${dataTestId}-triangle`, points: points });
-};
-export const Triangle = forwardRef(TriangleComponent);
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+const Triangle = forwardRef(({ dataTestId: e, position: t = {
+	x: 0,
+	y: 0
+}, size: n = 1, ...r }, i) => {
+	let a = [
+		`${t.x},${t.y - n / 2}`,
+		`${t.x - n / 2},${t.y + n / 2}`,
+		`${t.x + n / 2},${t.y + n / 2}`
+	].join(" ");
+	return /* @__PURE__ */ jsx("polygon", {
+		...r,
+		ref: i,
+		"data-testid": `${e}-triangle`,
+		points: a
+	});
+});
+export { Triangle };

package/dist/esm/components/node/node.js

@@ -1,98 +1,74 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, } from 'react';
-import { useAutoClick } from '../../charts/lineChart/hook';
-import { Circle } from './components/circle/circle';
-import { Hexagon } from './components/hexagon/hexagon';
-import { Pentagon } from './components/pentagon/pentagon';
-import { Square } from './components/square/square';
-import { Star } from './components/star/star';
-import { Straight } from './components/straight/straight';
-import { Triangle } from './components/triangle/triangle';
-import { NodeType } from './node.types';
-const Component = {
-    [NodeType.Circle]: Circle,
-    [NodeType.Hexagon]: Hexagon,
-    [NodeType.Pentagon]: Pentagon,
-    [NodeType.Square]: Square,
-    [NodeType.Star]: Star,
-    [NodeType.Straight]: Straight,
-    [NodeType.Triangle]: Triangle,
+import { useAutoClick } from "../../charts/lineChart/hook/useAutoClick.js";
+import { Circle } from "./components/circle/circle.js";
+import { Hexagon } from "./components/hexagon/hexagon.js";
+import { Pentagon } from "./components/pentagon/pentagon.js";
+import { Square } from "./components/square/square.js";
+import { Star } from "./components/star/star.js";
+import { Straight } from "./components/straight/straight.js";
+import { Triangle } from "./components/triangle/triangle.js";
+import { NodeType } from "./node.types.js";
+import { forwardRef } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var Component = {
+	[NodeType.Circle]: Circle,
+	[NodeType.Hexagon]: Hexagon,
+	[NodeType.Pentagon]: Pentagon,
+	[NodeType.Square]: Square,
+	[NodeType.Star]: Star,
+	[NodeType.Straight]: Straight,
+	[NodeType.Triangle]: Triangle
 };
-/**
- * Node component that renders interactive geometric shapes for data visualization.
- *
- * @param props - `NodeProps` include:
- * - `type`: Node type (`NodeType.Circle`, `NodeType.Square`, `NodeType.Triangle`, `NodeType.Star`, `NodeType.Pentagon`, `NodeType.Hexagon`, `NodeType.Straight`). By default is `NodeType.Circle`.
- * - `size`: Shape size. By default is 1.
- * - `fill`: Shape fill color. By default is 'transparent'.
- * - `fillOpacity`: Fill color opacity.
- * - `hasHalo`: Indicates if the shape has a halo effect. By default is `false`.
- * - `position`: Shape position in the plane, with properties `x` and `y`. By default is `{ x: 0, y: 0 }`.
- * - `dataTestId`: Identifier for testing. By default is an empty string.
- * - `stroke`: Shape stroke color.
- * - `strokeWidth`: Shape stroke width.
- * - `opacity`: Shape opacity.
- * - `tabIndex`: Tab index for keyboard navigation.
- * - `id`: Shape unique identifier.
- * - `className`: Additional CSS classes for the shape.
- * - `data`: Shape related data, including index, data value, data key and `x` key.
- * - `onClick`: Function executed when clicking on the shape.
- * - `onKeyDown`: Function executed when pressing a key while the shape has focus.
- * - `onFocus`: Function executed when focusing the shape.
- * - `onBlur`: Function executed when removing focus from the shape.
- * - `onMouseEnter`: Function executed when hovering over the shape.
- * - `onMouseLeave`: Function executed when moving the mouse away from the shape.
- *
- * @returns An SVG element corresponding to the specified node type (`circle`, `rect`, `polygon`), or `null` if the type is not recognized.
- */
-const NodeComponent = ({ dataTestId = 'node', haloConfig, hasHalo = false, onBlur, onClick, onDoubleClick, onFocus, onKeyDown, onMouseEnter, onMouseLeave, position = { x: 0, y: 0 }, size = 1, type = NodeType.Circle, ...props }, ref) => {
-    // It needed to recovery the autoClick info into js event, because the react event can't be modified or handle custom properties
-    const [clickRef, autoClick] = useAutoClick(ref);
-    // TODO - Enrich events with data, stop using extra parameters for callbacks
-    const handleClick = (event) => {
-        onClick?.(event, { ...props.data, nodePosition: position }, autoClick.current);
-    };
-    const handleDoubleClick = (event) => {
-        onDoubleClick?.(event, props.data);
-    };
-    const handleKeyDown = (event) => {
-        if (event.key === 'Enter') {
-            onKeyDown?.(event, props.data);
-        }
-    };
-    const handleFocus = (event) => {
-        onFocus?.(event, props.data);
-    };
-    const handleBlur = (event) => {
-        onBlur?.(event);
-    };
-    const handleMouseEnter = (event) => {
-        onMouseEnter?.(event, props.data);
-    };
-    const handleMouseLeave = (event) => {
-        onMouseLeave?.(event);
-    };
-    const nodeProps = {
-        ...props,
-        className: `node ${props.className}`,
-        onBlur: handleBlur,
-        onClick: handleClick,
-        onDoubleClick: handleDoubleClick,
-        onFocus: handleFocus,
-        onKeyDown: handleKeyDown,
-        onMouseEnter: handleMouseEnter,
-        onMouseLeave: handleMouseLeave,
-    };
-    // Props for halo - exclude interactive handlers and accessibility attributes
-    const haloProps = {
-        className: props.className,
-        fill: haloConfig?.fill || props.fill,
-        fillOpacity: haloConfig?.fillOpacity || 0.25,
-        opacity: haloConfig?.opacity || 0.3,
-        stroke: haloConfig?.stroke || props.stroke,
-        strokeWidth: haloConfig?.strokeWidth || props.strokeWidth,
-    };
-    const InnerNode = Component[type];
-    return (_jsxs(_Fragment, { children: [hasHalo && (_jsx(InnerNode, { ...haloProps, "aria-hidden": "true", dataTestId: `${dataTestId}-halo`, position: position, size: size + size / 2 })), _jsx(InnerNode, { ...nodeProps, ref: clickRef, dataTestId: dataTestId, position: position, size: size })] }));
-};
-export const Node = forwardRef(NodeComponent);
+const Node = forwardRef(({ dataTestId: t = "node", haloConfig: n, hasHalo: r = !1, onBlur: i, onClick: a, onDoubleClick: o, onFocus: s, onKeyDown: c, onMouseEnter: l, onMouseLeave: u, position: d = {
+	x: 0,
+	y: 0
+}, size: f = 1, type: p = NodeType.Circle, ...m }, h) => {
+	let [g, _] = useAutoClick(h), v = (e) => {
+		a?.(e, {
+			...m.data,
+			nodePosition: d
+		}, _.current);
+	}, y = (e) => {
+		o?.(e, m.data);
+	}, b = (e) => {
+		e.key === "Enter" && c?.(e, m.data);
+	}, x = (e) => {
+		s?.(e, m.data);
+	}, S = (e) => {
+		i?.(e);
+	}, C = (e) => {
+		l?.(e, m.data);
+	}, w = (e) => {
+		u?.(e);
+	}, T = {
+		...m,
+		className: `node ${m.className}`,
+		onBlur: S,
+		onClick: v,
+		onDoubleClick: y,
+		onFocus: x,
+		onKeyDown: b,
+		onMouseEnter: C,
+		onMouseLeave: w
+	}, E = {
+		className: m.className,
+		fill: n?.fill || m.fill,
+		fillOpacity: n?.fillOpacity || .25,
+		opacity: n?.opacity || .3,
+		stroke: n?.stroke || m.stroke,
+		strokeWidth: n?.strokeWidth || m.strokeWidth
+	}, D = Component[p];
+	return /* @__PURE__ */ jsxs(Fragment, { children: [r && /* @__PURE__ */ jsx(D, {
+		...E,
+		"aria-hidden": "true",
+		dataTestId: `${t}-halo`,
+		position: d,
+		size: f + f / 2
+	}), /* @__PURE__ */ jsx(D, {
+		...T,
+		ref: g,
+		dataTestId: t,
+		position: d,
+		size: f
+	})] });
+});
+export { Node };

package/dist/esm/components/node/node.types.js

@@ -1,18 +1,10 @@
-/**
- * Enum for node types.
- *
- * This enumeration defines the possible types of nodes that can be represented in a graphical interface or data structure.
- * It includes basic geometric shapes such as circles, squares, and triangles, allowing for simple categorization and differentiation
- * of node types in various applications.
- *
- * @enum {string}
- */
-export const NodeType = {
-    Circle: 'circle', // Represents a circle node.
-    Hexagon: 'hexagon', // Represents a hexagon node.
-    Pentagon: 'pentagon', // Represents a pentagon node.
-    Square: 'square', // Represents a square node.
-    Star: 'star', // Represents a star node.
-    Straight: 'straight', // Represents a straight node.
-    Triangle: 'triangle', // Represents a triangle node.
+const NodeType = {
+	Circle: "circle",
+	Hexagon: "hexagon",
+	Pentagon: "pentagon",
+	Square: "square",
+	Star: "star",
+	Straight: "straight",
+	Triangle: "triangle"
 };
+export { NodeType };

package/dist/esm/components/node/utils/calculateShapePoints/calculateShapePoints.js

@@ -1,18 +1,9 @@
-export const calculateShapePoints = (centerX, centerY, points, outerRadius, innerRadius) => {
-    let result = '';
-    // Determine whether drawing a regular shape or a star
-    const isRegularShape = outerRadius === innerRadius;
-    const iterations = isRegularShape ? points : 2 * points;
-    for (let i = 0; i < iterations; i++) {
-        // Use only outerRadius for regular shapes, alternate for stars
-        const radius = isRegularShape ? outerRadius : i % 2 === 0 ? outerRadius : innerRadius;
-        // Adjust angle to alternate points, subtracting Math.PI / 2 to start vertically
-        const angle = ((Math.PI * 2) / iterations) * i - Math.PI / 2;
-        // Calculate x and y based on angle and radius
-        const x = centerX + Math.cos(angle) * radius;
-        const y = centerY + Math.sin(angle) * radius;
-        // Concatenar el punto al resultado
-        result += `${x},${y} `;
-    }
-    return result.trim();
+const calculateShapePoints = (e, t, n, r, i) => {
+	let a = "", o = r === i, s = o ? n : 2 * n;
+	for (let n = 0; n < s; n++) {
+		let c = o || n % 2 == 0 ? r : i, l = Math.PI * 2 / s * n - Math.PI / 2, u = e + Math.cos(l) * c, d = t + Math.sin(l) * c;
+		a += `${u},${d} `;
+	}
+	return a.trim();
 };
+export { calculateShapePoints };

package/dist/esm/components/path/components/nodePath/nodePath.js

@@ -1,38 +1,35 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import { processAccessibilityTemplate } from '../../../../charts/lineChart/utils/accessibilityTemplateProcessor';
-import { pickCustomAttributes } from '../../../../utils/pickCustomAttributes/pickCustomAttributes';
-import { Node } from '../../../node/node';
-const NODE_PATH_FOCUS_BORDER = 'node-path-focus-border';
-/**
- * NodePathComponent renders a Node with custom attributes including processed aria-label templates.
- *
- * aria-label attributes in nodeConfig that contain template placeholders like {{dataKey}} will be processed
- * and replaced with actual values from the data.
- */
-const NodePathComponent = ({ data, nodeConfig, tabIndex = 0, x, y }, ref) => {
-    // Extract custom aria-* and data-* attributes from nodeConfig
-    const customAttributes = nodeConfig ? pickCustomAttributes(nodeConfig) : {};
-    // Process aria-label template if it exists and contains placeholders
-    if (customAttributes['aria-label'] &&
-        data &&
-        typeof customAttributes['aria-label'] === 'string') {
-        const ariaLabelValue = customAttributes['aria-label'];
-        if (ariaLabelValue.includes('{{')) {
-            const processedAriaLabel = processAccessibilityTemplate(ariaLabelValue, {
-                dataKey: data.dataKey,
-                dataValue: data.dataValue,
-                index: data.index ?? 0,
-                xKey: data.xKey,
-            }, data.dataValue);
-            if (processedAriaLabel) {
-                customAttributes['aria-label'] = processedAriaLabel;
-            }
-        }
-    }
-    return (_jsx(_Fragment, { children: nodeConfig && (_jsx(Node, { ...nodeConfig, ref: ref, ...customAttributes, className: NODE_PATH_FOCUS_BORDER, data: data, hasHalo: nodeConfig.hasHalo, position: {
-                x: x,
-                y: y,
-            }, tabIndex: tabIndex })) }));
-};
-export const NodePath = forwardRef(NodePathComponent);
+import { pickCustomAttributes } from "../../../../utils/pickCustomAttributes/pickCustomAttributes.js";
+import { processAccessibilityTemplate } from "../../../../charts/lineChart/utils/accessibilityTemplateProcessor.js";
+import { Node } from "../../../node/node.js";
+import { forwardRef } from "react";
+import { Fragment, jsx } from "react/jsx-runtime";
+var NODE_PATH_FOCUS_BORDER = "node-path-focus-border";
+const NodePath = forwardRef(({ data: n, nodeConfig: r, tabIndex: i = 0, x: a, y: o }, s) => {
+	let c = r ? pickCustomAttributes(r) : {};
+	if (c["aria-label"] && n && typeof c["aria-label"] == "string") {
+		let e = c["aria-label"];
+		if (e.includes("{{")) {
+			let t = processAccessibilityTemplate(e, {
+				dataKey: n.dataKey,
+				dataValue: n.dataValue,
+				index: n.index ?? 0,
+				xKey: n.xKey
+			}, n.dataValue);
+			t && (c["aria-label"] = t);
+		}
+	}
+	return /* @__PURE__ */ jsx(Fragment, { children: r && /* @__PURE__ */ jsx(Node, {
+		...r,
+		ref: s,
+		...c,
+		className: NODE_PATH_FOCUS_BORDER,
+		data: n,
+		hasHalo: r.hasHalo,
+		position: {
+			x: a,
+			y: o
+		},
+		tabIndex: i
+	}) });
+});
+export { NodePath };