@kubit-ui-web/react-charts 0.1.0

package/dist/cjs/charts/lineChart/fragments/lineChartPath.js

@@ -0,0 +1,109 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LineChartPath = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const line_1 = require("../../../components/line/line");
+const node_1 = require("../../../components/node/node");
+const path_1 = require("../../../components/path/path");
+const getPoints_1 = require("../../../utils/getPoints/getPoints");
+const pickCustomAttributes_1 = require("../../../utils/pickCustomAttributes/pickCustomAttributes");
+const lineChartContext_1 = require("../context/lineChartContext");
+const useIndicator_1 = require("../hook/useIndicator");
+const findSurroundingNumber_1 = require("../utils/findSurroundingNumber");
+const getPathData_1 = require("../utils/getPathData");
+const handleNodesFocus_1 = require("../utils/handleNodesFocus");
+require("./lineChartPath.css");
+const lineChartProjection_1 = require("./lineChartProjection");
+const getAxisData = (data, key) => {
+    return data.map(dt => dt[key]);
+};
+const LineChartPath = ({ ariaLabel, closestClick, curved, getNodeFocusInfo, getNodesCoords, indicatorConfig, lineProjection, onClick, ...props }) => {
+    // recovery the context values
+    const { xAxisCoordinates, yAxisCoordinates, ...context } = (0, react_1.useContext)(lineChartContext_1.LineChartContext);
+    // the node indicator logic
+    const { indicatorRef, pathRef } = (0, useIndicator_1.useIndicator)(context.xCursor, !!indicatorConfig);
+    const showIndicator = !!indicatorConfig && context.xCursor !== -Infinity;
+    const innerRefs = (0, react_1.useRef)(null);
+    const pressedRef = (0, react_1.useRef)(null);
+    // the projection line logic
+    const { autoClick, lineIndicator, ...nodeIndicatorConfig } = indicatorConfig || {};
+    // line indicator <Y> coordinates
+    const y1 = context.extraSpaceTopY;
+    const y2 = Number(context.canvasHeight) - context.extraSpaceBottomY;
+    // the path
+    const { tickValues: xTickValues } = xAxisCoordinates;
+    const { tickValues: yTickValues } = yAxisCoordinates;
+    const xData = getAxisData(context.data, context.xKey);
+    const yData = getAxisData(context.data, props.dataKey);
+    const xPoints = (0, getPoints_1.getPoints)(xTickValues, xData, true);
+    const yPoints = (0, getPoints_1.getPoints)(yTickValues, yData);
+    const points = xPoints.map((x, i) => [x, yPoints[i]]);
+    // the path data
+    const dataOnlyLine = (0, getPathData_1.getPathData)({
+        curved,
+        extendToBottom: false,
+        points,
+        svgHeight: Number(context.canvasHeight) - context.extraSpaceBottomY,
+    });
+    const dataFill = (0, getPathData_1.getPathData)({
+        curved,
+        extendToBottom: !!props.fill || !!props.gradient,
+        points,
+        svgHeight: Number(context.canvasHeight) - context.extraSpaceBottomY,
+    });
+    // the ref to the path and handler the nodes focus
+    (0, react_1.useEffect)(() => {
+        if (!innerRefs.current?.path) {
+            return;
+        }
+        pathRef.current = innerRefs.current.path;
+        const main = innerRefs.current.main;
+        const nodes = innerRefs.current.node;
+        const data = xData.map((d, i) => ({ x: d, y: yData[i] }));
+        const { mount, unmount } = (0, handleNodesFocus_1.handleNodesFocus)({ data, getNodeFocusInfo, nodes, ref: main });
+        mount();
+        // eslint-disable-next-line consistent-return
+        return () => unmount();
+    }, []);
+    //  the auto click logic
+    (0, react_1.useEffect)(() => {
+        if (props.nodeConfig && showIndicator && autoClick) {
+            const { idx, match } = (0, findSurroundingNumber_1.findSurroundingNumber)(xPoints, context.xCursor);
+            if (match && idx !== pressedRef.current) {
+                pressedRef.current = idx;
+                const evt = new MouseEvent('click', { bubbles: true });
+                evt.autoClick = true;
+                innerRefs.current?.node?.[idx]?.dispatchEvent(evt);
+                navigator?.vibrate?.(200);
+            }
+            else {
+                pressedRef.current = null;
+            }
+        }
+    }, [context.xCursor]);
+    // Return the nodes coordinates
+    (0, react_1.useEffect)(() => {
+        getNodesCoords?.(points);
+    }, [points]);
+    // the click handler
+    const handleClick = (data) => {
+        onClick?.(data);
+        if (closestClick) {
+            const closest = (0, findSurroundingNumber_1.findClosestNumber)(xPoints, context.xCursor);
+            const evt = new MouseEvent('click', { bubbles: true });
+            evt.autoClick = false;
+            innerRefs.current?.node?.[closest]?.dispatchEvent(evt);
+        }
+    };
+    // Extract custom attributes (aria-*, data-*) and handle deprecated ariaLabel
+    const customAttributes = (0, pickCustomAttributes_1.pickCustomAttributes)(props);
+    const mergedProps = {
+        ...props,
+        ...customAttributes,
+        // Handle deprecated ariaLabel - give precedence to ariaLabel for backward compatibility
+        ...(ariaLabel && { 'aria-label': ariaLabel }),
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(path_1.Path, { ref: innerRefs, d: dataOnlyLine, dFill: dataFill, dataTestId: `${context.dataTestId}path`, dataValue: context.data, points: points, xKey: context.xKey, onClick: handleClick, ...mergedProps }), lineProjection && ((0, jsx_runtime_1.jsx)(lineChartProjection_1.LineChartProjection, { curved: curved, dataKey: props.dataKey, lineProjection: lineProjection, points: points, svgHeight: Number(context.canvasHeight) - context.extraSpaceBottomY })), showIndicator && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!!lineIndicator && ((0, jsx_runtime_1.jsx)(line_1.Line, { ...lineIndicator, className: "pointer-events-none", x1: context.xCursor, x2: context.xCursor, y1: y1, y2: y2 })), (0, jsx_runtime_1.jsx)("g", { ref: indicatorRef, className: "pointer-events-none", children: (0, jsx_runtime_1.jsx)(node_1.Node, { ...nodeIndicatorConfig }) })] }))] }));
+};
+exports.LineChartPath = LineChartPath;

package/dist/cjs/charts/lineChart/fragments/lineChartProjection.d.ts

@@ -0,0 +1,5 @@
+import type { FC } from 'react';
+import type { LineChartProjectionProps } from '../lineChart.type';
+import './lineChartPath.css';
+export declare const LineChartProjection: FC<LineChartProjectionProps>;
+//# sourceMappingURL=lineChartProjection.d.ts.map

package/dist/cjs/charts/lineChart/fragments/lineChartProjection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lineChartProjection.d.ts","sourceRoot":"","sources":["../../../../../src/charts/lineChart/fragments/lineChartProjection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,mBAAmB,CAAC;AAElE,OAAO,qBAAqB,CAAC;AAE7B,eAAO,MAAM,mBAAmB,EAAE,EAAE,CAAC,wBAAwB,CA2B5D,CAAC"}

package/dist/cjs/charts/lineChart/fragments/lineChartProjection.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LineChartProjection = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const getProjection_1 = require("../utils/getProjection");
+require("./lineChartPath.css");
+const LineChartProjection = ({ curved, lineProjection, points, svgHeight, }) => {
+    const { lower, shapeColor, upper } = lineProjection;
+    const { xProjection: xUp, yProjection: yUp, ...upperProps } = upper || {};
+    const { xProjection: xDw, yProjection: yDw, ...lowerProps } = lower || {};
+    const upperProjection = xUp || yUp ? { x: xUp, y: yUp } : undefined;
+    const lowerProjection = xDw || yDw ? { x: xDw, y: yDw } : undefined;
+    const { downPath, shapePath, upPath } = (0, getProjection_1.getProjection)({
+        curved,
+        lowerProjection,
+        points,
+        svgHeight,
+        upperProjection,
+    });
+    return ((0, jsx_runtime_1.jsxs)("g", { className: "pointer-events-none", children: [(0, jsx_runtime_1.jsx)("path", { d: shapePath, fill: shapeColor, stroke: "transparent", strokeWidth: "0.1" }), ";", upPath && (0, jsx_runtime_1.jsx)("path", { d: upPath, ...upperProps }), downPath && (0, jsx_runtime_1.jsx)("path", { d: downPath, ...lowerProps })] }));
+};
+exports.LineChartProjection = LineChartProjection;

package/dist/cjs/charts/lineChart/fragments/lineChartSeparator.d.ts

@@ -0,0 +1,4 @@
+import { type FC } from 'react';
+import type { LineChartSeparatorProps } from '../lineChart.type';
+export declare const LineChartSeparator: FC<LineChartSeparatorProps>;
+//# sourceMappingURL=lineChartSeparator.d.ts.map

package/dist/cjs/charts/lineChart/fragments/lineChartSeparator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lineChartSeparator.d.ts","sourceRoot":"","sources":["../../../../../src/charts/lineChart/fragments/lineChartSeparator.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,EAAiC,MAAM,OAAO,CAAC;AAK/D,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,mBAAmB,CAAC;AAEjE,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,uBAAuB,CAoC1D,CAAC"}

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

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LineChartSeparator = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const getPoints_1 = require("../../../utils/getPoints/getPoints");
+const lineChartContext_1 = require("../context/lineChartContext");
+const LineChartSeparator = ({ areaSeparator, dataTestId, rightSeparator, topSeparator, xBreakAxis, yBreakAxis, }) => {
+    const { crossXAxis, crossYAxis, xAxisCoordinates, yAxisCoordinates } = (0, react_1.useContext)(lineChartContext_1.LineChartContext);
+    if (!topSeparator && !rightSeparator && !areaSeparator) {
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+    }
+    const customXEnd = xBreakAxis && (0, getPoints_1.getPoints)(xAxisCoordinates.tickValues, [xBreakAxis], true)[0];
+    const customYEnd = yBreakAxis && (0, getPoints_1.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;
+    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 ((0, jsx_runtime_1.jsxs)("g", { children: [(0, jsx_runtime_1.jsx)("path", { d: squarePath, "data-testid": `${dataTestId}Area`, ...areaSeparator }), (0, jsx_runtime_1.jsx)("path", { d: lineTop, "data-testid": `${dataTestId}Top`, ...topSeparator }), (0, jsx_runtime_1.jsx)("path", { d: lineRight, "data-testid": `${dataTestId}Right`, ...rightSeparator })] }));
+};
+exports.LineChartSeparator = LineChartSeparator;

package/dist/cjs/charts/lineChart/fragments/lineChartXAxis.d.ts

@@ -0,0 +1,4 @@
+import { type FC } from 'react';
+import type { LineChartXAxisProps } from '../lineChart.type';
+export declare const LineChartXAxis: FC<LineChartXAxisProps>;
+//# sourceMappingURL=lineChartXAxis.d.ts.map

package/dist/cjs/charts/lineChart/fragments/lineChartXAxis.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lineChartXAxis.d.ts","sourceRoot":"","sources":["../../../../../src/charts/lineChart/fragments/lineChartXAxis.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,EAAiC,MAAM,OAAO,CAAC;AAS/D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAE7D,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CA+DlD,CAAC"}

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

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LineChartXAxis = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const xAxis_1 = require("../../../components/axisChart/xAxis/xAxis");
+const tick_types_1 = require("../../../components/tick/tick.types");
+const position_enum_1 = require("../../../types/position.enum");
+const getTickTextCoordinates_1 = require("../../../utils/getTickTextCoordinate/getTickTextCoordinates");
+const pickCustomAttributes_1 = require("../../../utils/pickCustomAttributes/pickCustomAttributes");
+const lineChartContext_1 = require("../context/lineChartContext");
+const LineChartXAxis = ({ ariaLabel, position = position_enum_1.Positions.BOTTOM, tickLine, tickText, valueFormatter = (value) => value, ...props }) => {
+    const { xAxisCoordinates: { coordinates, tickValues: contextTickValues }, xCursor, ...context } = (0, react_1.useContext)(lineChartContext_1.LineChartContext);
+    const tickTextY = (0, getTickTextCoordinates_1.getTickTextYCoordinate)(position, coordinates.y1, Number(tickText?.fontSize), tickText?.top ?? 0);
+    const y1 = context.extraSpaceTopY;
+    const y2 = Number(context.canvasHeight) - context.extraSpaceBottomY;
+    const tickValues = tickText
+        ? tick_types_1.TickDataUtils.formatTicksValues(contextTickValues, valueFormatter)
+        : undefined;
+    // Extract custom attributes (aria-*, data-*) and handle deprecated ariaLabel
+    const customAttributes = (0, pickCustomAttributes_1.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 ((0, jsx_runtime_1.jsx)(xAxis_1.XAxis, { ...coordinates, ...mergedProps, canvasHeight: Number(context.canvasHeight), canvasWidth: Number(context.canvasWidth), cursor: xCursor, dataTestId: `${context.dataTestId}xAxis`, extraSpace: {
+            left: context.extraSpaceLeftX,
+            right: context.extraSpaceRightX,
+        }, tickLine: {
+            ...tickLine,
+            y1,
+            y2,
+        }, tickText: {
+            ...tickText,
+            y: tickTextY,
+        }, tickValues: tickValues }));
+};
+exports.LineChartXAxis = LineChartXAxis;

package/dist/cjs/charts/lineChart/fragments/lineChartYAxis.d.ts

@@ -0,0 +1,3 @@
+import type { LineChartYAxisProps } from '../lineChart.type';
+export declare const LineChartYAxis: React.FC<LineChartYAxisProps>;
+//# sourceMappingURL=lineChartYAxis.d.ts.map

package/dist/cjs/charts/lineChart/fragments/lineChartYAxis.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lineChartYAxis.d.ts","sourceRoot":"","sources":["../../../../../src/charts/lineChart/fragments/lineChartYAxis.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAE7D,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAgExD,CAAC"}

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

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LineChartYAxis = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const yAxis_1 = require("../../../components/axisChart/yAxis/yAxis");
+const tick_types_1 = require("../../../components/tick/tick.types");
+const position_enum_1 = require("../../../types/position.enum");
+const ajustedTextSpace_1 = require("../../../utils/ajustedTextSpace/ajustedTextSpace");
+const getTickTextCoordinates_1 = require("../../../utils/getTickTextCoordinate/getTickTextCoordinates");
+const pickCustomAttributes_1 = require("../../../utils/pickCustomAttributes/pickCustomAttributes");
+const lineChartContext_1 = require("../context/lineChartContext");
+const LineChartYAxis = ({ ariaLabel, position = position_enum_1.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 } = (0, react_1.useContext)(lineChartContext_1.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 textAnchor = tickText?.textAnchor || 'middle';
+    const addSpace = position === position_enum_1.Positions.RIGHT ? tickText?.right : tickText?.left;
+    const ajustedSpace = addSpace ?? 0;
+    const ajustedText = (0, ajustedTextSpace_1.ajustedTextSpace)(textAnchor, context.yAxisText, ajustedSpace);
+    const xTickText = (0, getTickTextCoordinates_1.getTickTextXCoordinate)(position, coordinates.x1, ajustedText);
+    const tickValues = tickText
+        ? tick_types_1.TickDataUtils.formatTicksValues(contextTickValues, valueFormatter)
+        : undefined;
+    // Extract custom attributes (aria-*, data-*) and handle deprecated ariaLabel
+    const customAttributes = (0, pickCustomAttributes_1.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 ((0, jsx_runtime_1.jsx)(yAxis_1.YAxis, { ...coordinates, ...mergedProps, canvasHeight: Number(context.canvasHeight), canvasWidth: Number(context.canvasWidth), cursor: yCursor, dataTestId: `${context.dataTestId}yAxis`, tickLine: {
+            ...tickLine,
+            x1: context.extraSpaceLeftX,
+            x2: Number(context.canvasWidth) - context.extraSpaceRightX,
+        }, tickText: { ...tickText, x: xTickText }, tickValues: tickValues }));
+};
+exports.LineChartYAxis = LineChartYAxis;

package/dist/cjs/charts/lineChart/hook/index.d.ts

@@ -0,0 +1,4 @@
+export { useAutoClick } from './useAutoClick';
+export { useHover } from './useHover';
+export { useIndicator } from './useIndicator';
+//# sourceMappingURL=index.d.ts.map

package/dist/cjs/charts/lineChart/hook/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/charts/lineChart/hook/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/cjs/charts/lineChart/hook/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useIndicator = exports.useHover = exports.useAutoClick = void 0;
+var useAutoClick_1 = require("./useAutoClick");
+Object.defineProperty(exports, "useAutoClick", { enumerable: true, get: function () { return useAutoClick_1.useAutoClick; } });
+var useHover_1 = require("./useHover");
+Object.defineProperty(exports, "useHover", { enumerable: true, get: function () { return useHover_1.useHover; } });
+var useIndicator_1 = require("./useIndicator");
+Object.defineProperty(exports, "useIndicator", { enumerable: true, get: function () { return useIndicator_1.useIndicator; } });

package/dist/cjs/charts/lineChart/hook/useAutoClick.d.ts

@@ -0,0 +1,4 @@
+type UseAutoClickReturn<T> = [React.MutableRefObject<T | null>, React.MutableRefObject<boolean>];
+export declare const useAutoClick: <T>(ref: React.ForwardedRef<T | null>) => UseAutoClickReturn<T>;
+export {};
+//# sourceMappingURL=useAutoClick.d.ts.map

package/dist/cjs/charts/lineChart/hook/useAutoClick.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAutoClick.d.ts","sourceRoot":"","sources":["../../../../../src/charts/lineChart/hook/useAutoClick.ts"],"names":[],"mappings":"AAGA,KAAK,kBAAkB,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC,GAAG,IAAI,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAC;AAEjG,eAAO,MAAM,YAAY,GAAI,CAAC,EAAE,KAAK,KAAK,CAAC,YAAY,CAAC,CAAC,GAAG,IAAI,CAAC,KAAG,kBAAkB,CAAC,CAAC,CAqBvF,CAAC"}

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

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAutoClick = void 0;
+const react_1 = require("react");
+const useAutoClick = (ref) => {
+    const autoClick = (0, react_1.useRef)(false);
+    const innerRef = (0, react_1.useRef)(null);
+    (0, react_1.useImperativeHandle)(ref, () => innerRef.current, []);
+    const handleClick = (e) => {
+        autoClick.current = !!e.autoClick;
+    };
+    (0, react_1.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];
+};
+exports.useAutoClick = useAutoClick;

package/dist/cjs/charts/lineChart/hook/useHover.d.ts

@@ -0,0 +1,12 @@
+interface UseHoverProps {
+    canvasHeight: number;
+    canvasWidth: number;
+}
+interface UseHoverReturn {
+    xCursor: number;
+    yCursor: number;
+    svgRef: (node: SVGSVGElement | null) => void;
+}
+export declare const useHover: ({ canvasHeight, canvasWidth }: UseHoverProps) => UseHoverReturn;
+export {};
+//# sourceMappingURL=useHover.d.ts.map

package/dist/cjs/charts/lineChart/hook/useHover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useHover.d.ts","sourceRoot":"","sources":["../../../../../src/charts/lineChart/hook/useHover.ts"],"names":[],"mappings":"AAEA,UAAU,aAAa;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,UAAU,cAAc;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,CAAC,IAAI,EAAE,aAAa,GAAG,IAAI,KAAK,IAAI,CAAC;CAC9C;AAID,eAAO,MAAM,QAAQ,GAAI,+BAA+B,aAAa,KAAG,cAqCvE,CAAC"}

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

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useHover = void 0;
+const react_1 = require("react");
+const outRange = -Infinity;
+const useHover = ({ canvasHeight, canvasWidth }) => {
+    const [[xCursor, yCursor], setCursor] = (0, react_1.useState)([outRange, outRange]);
+    const getCursor = (0, react_1.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 = (0, react_1.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 };
+};
+exports.useHover = useHover;

package/dist/cjs/charts/lineChart/hook/useIndicator.d.ts

@@ -0,0 +1,7 @@
+interface UseIndicatorReturn {
+    pathRef: React.MutableRefObject<SVGPathElement | null>;
+    indicatorRef: React.MutableRefObject<SVGSVGElement | null>;
+}
+export declare const useIndicator: (xPosition: number, implement: boolean) => UseIndicatorReturn;
+export {};
+//# sourceMappingURL=useIndicator.d.ts.map

package/dist/cjs/charts/lineChart/hook/useIndicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIndicator.d.ts","sourceRoot":"","sources":["../../../../../src/charts/lineChart/hook/useIndicator.ts"],"names":[],"mappings":"AAEA,UAAU,kBAAkB;IAC1B,OAAO,EAAE,KAAK,CAAC,gBAAgB,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACvD,YAAY,EAAE,KAAK,CAAC,gBAAgB,CAAC,aAAa,GAAG,IAAI,CAAC,CAAC;CAC5D;AAED,eAAO,MAAM,YAAY,GAAI,WAAW,MAAM,EAAE,WAAW,OAAO,KAAG,kBAmCpE,CAAC"}

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

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useIndicator = void 0;
+const react_1 = require("react");
+const useIndicator = (xPosition, implement) => {
+    const pathRef = (0, react_1.useRef)(null);
+    const indicatorRef = (0, react_1.useRef)(null);
+    (0, react_1.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 };
+};
+exports.useIndicator = useIndicator;

package/dist/cjs/charts/lineChart/index.d.ts

@@ -0,0 +1,2 @@
+export * from './lineChart';
+//# sourceMappingURL=index.d.ts.map

package/dist/cjs/charts/lineChart/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/charts/lineChart/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC"}

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

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./lineChart"), exports);

package/dist/cjs/charts/lineChart/lineChart.d.ts

@@ -0,0 +1,9 @@
+declare const LineChart: import("react").FC<import("./lineChart.type").LineChartProps> & {
+    Path: import("react").FC<import("./lineChart.type").LineChartPathProps>;
+    Separator: import("react").FC<import("./lineChart.type").LineChartSeparatorProps>;
+    XAxis: import("react").FC<import("./lineChart.type").LineChartXAxisProps>;
+    YAxis: import("react").FC<import("./lineChart.type").LineChartYAxisProps>;
+};
+export { LineChart };
+export * from './lineChart.type';
+//# sourceMappingURL=lineChart.d.ts.map

package/dist/cjs/charts/lineChart/lineChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lineChart.d.ts","sourceRoot":"","sources":["../../../../src/charts/lineChart/lineChart.ts"],"names":[],"mappings":"AAMA,QAAA,MAAM,SAAS;;;;;CAKb,CAAC;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC;AAErB,cAAc,kBAAkB,CAAC"}

package/dist/cjs/charts/lineChart/lineChart.js

@@ -0,0 +1,30 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LineChart = void 0;
+const lineChartPath_1 = require("./fragments/lineChartPath");
+const lineChartSeparator_1 = require("./fragments/lineChartSeparator");
+const lineChartXAxis_1 = require("./fragments/lineChartXAxis");
+const lineChartYAxis_1 = require("./fragments/lineChartYAxis");
+const lineChartStructure_1 = require("./lineChartStructure");
+const LineChart = Object.assign(lineChartStructure_1.LineChartStructure, {
+    Path: lineChartPath_1.LineChartPath,
+    Separator: lineChartSeparator_1.LineChartSeparator,
+    XAxis: lineChartXAxis_1.LineChartXAxis,
+    YAxis: lineChartYAxis_1.LineChartYAxis,
+});
+exports.LineChart = LineChart;
+__exportStar(require("./lineChart.type"), exports);