@kubit-ui-web/react-charts 0.1.0

package/dist/esm/charts/lineChart/lineChartStructure.d.ts

@@ -0,0 +1,33 @@
+import { type FC } from 'react';
+import type { LineChartProps } from './lineChart.type';
+/**
+ * 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 declare const LineChartStructure: FC<LineChartProps>;
+//# sourceMappingURL=lineChartStructure.d.ts.map

package/dist/esm/charts/lineChart/lineChartStructure.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lineChartStructure.d.ts","sourceRoot":"","sources":["../../../../src/charts/lineChart/lineChartStructure.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,EAAE,EAAmD,MAAM,OAAO,CAAC;AAgB3F,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAEvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,cAAc,CA+IjD,CAAC"}

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

@@ -0,0 +1,133 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Children, useEffect, useMemo, useState } from 'react';
+import { SvgContainer } from '../../components/svgContainer/svgContainer';
+import { buildViewBox } from '../../components/svgContainer/utils/buildViewBox/buildViewBox';
+import { DefaultCanvasConfig } from '../../types/canvas.type';
+import { ErrorType } from '../../types/errors.type';
+import { getCanvasDimensions } from '../../utils/getCanvasDimensions/getCanvasDimensions';
+import { getChildrenAttr } from '../../utils/getChildrenAttr/getChildrenAttr';
+import { getDataFingerprint } from '../../utils/getDataFingerprint/getDataFingerprint';
+import { parseStringToNumberPx } from '../../utils/parseStringToNumberPx.ts/parseStringToNumberPx';
+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 = 'line-chart', getPathArea, height = '100%', onErrors, role, tabIndex, width = '100%', xKey, ...props }) => {
+    const { extraSpace: canvasExtraSpace, height: canvasHeight, width: canvasWidth } = canvasConfig;
+    const [childrenYKeys, setChildrenYKey] = useState('');
+    const [parsedCanvas, setParsedCanvas] = useState({
+        height: 0,
+        width: 0,
+    });
+    const parsedCanvasExtraSpace = canvasExtraSpace
+        ? parseStringToNumberPx(canvasExtraSpace)
+        : undefined;
+    const viewBox = buildViewBox(parsedCanvas.width, parsedCanvas.height, parsedCanvasExtraSpace);
+    // 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);
+    const maxValue = Math.max(parsedCanvas.width, parsedCanvas.height, parsedCanvasExtraSpace ?? 0);
+    const ajustedX = isNaN(parsedCanvas.width / maxValue) ? 0 : parsedCanvas.width / maxValue;
+    const ajustedY = isNaN(parsedCanvas.height / maxValue) ? 0 : parsedCanvas.height / maxValue;
+    // watch the Y childs keys
+    getChildrenAttr({
+        attrName: 'dataKey',
+        children: chidrenWithDefaultAxis,
+        originalValue: childrenYKeys,
+        updateValue: setChildrenYKey,
+    });
+    // Create a fingerprint of the data to avoid unnecessary contextValue updates
+    const dataFingerprint = getDataFingerprint(data);
+    // Build the context value
+    const contextValue = useMemo(() => {
+        return buildLineContextValue({
+            ajustedX,
+            ajustedY,
+            canvasHeight: parsedCanvas.height,
+            canvasWidth: parsedCanvas.width,
+            children: chidrenWithDefaultAxis,
+            data,
+            viewBox,
+            xKey,
+        });
+    }, [parsedCanvas.width, parsedCanvas.height, dataFingerprint, xKey, childrenYKeys]);
+    useEffect(() => {
+        if (contextValue.error && onErrors) {
+            onErrors({
+                [ErrorType.GENERIC]: contextValue.error,
+            });
+        }
+    }, [contextValue.error, onErrors]);
+    const { svgRef, xCursor, yCursor } = useHover({
+        canvasHeight: parsedCanvas.height,
+        canvasWidth: parsedCanvas.width,
+    });
+    useEffect(() => {
+        const svgElement = document.querySelector('[data-kbt-svg]');
+        if (!svgElement) {
+            return;
+        }
+        const { parsedCanvasHeight, parsedCanvasWidth } = getCanvasDimensions({
+            canvasHeight,
+            canvasWidth,
+            svgElement,
+        });
+        setParsedCanvas({
+            height: parsedCanvasHeight,
+            width: parsedCanvasWidth,
+        });
+    }, [canvasWidth, canvasHeight]);
+    useEffect(() => {
+        getPathArea?.({
+            x1: contextValue.extraSpaceLeftX,
+            x2: parsedCanvas.width - contextValue.extraSpaceRightX,
+            y1: contextValue.extraSpaceTopY,
+            y2: parsedCanvas.height - contextValue.extraSpaceBottomY,
+        });
+    }, [parsedCanvas.width, parsedCanvas.height]);
+    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 }) }));
+};

package/dist/esm/charts/lineChart/utils/accessibilityTemplateProcessor.d.ts

@@ -0,0 +1,14 @@
+export declare const TEMPLATE_KEYS: {
+    readonly DATA_KEY: "{{dataKey}}";
+    readonly INDEX: "{{index}}";
+    readonly X_VALUE: "{{xValue}}";
+    readonly Y_VALUE: "{{yValue}}";
+};
+export interface NodeTemplateData {
+    index: number;
+    dataValue?: string | number | Array<Record<string, unknown>>;
+    dataKey?: string;
+    xKey?: string;
+}
+export declare const processAccessibilityTemplate: (template: string, nodeData: NodeTemplateData, dataValue?: string | number | Array<Record<string, unknown>>) => string | undefined;
+//# sourceMappingURL=accessibilityTemplateProcessor.d.ts.map

package/dist/esm/charts/lineChart/utils/accessibilityTemplateProcessor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"accessibilityTemplateProcessor.d.ts","sourceRoot":"","sources":["../../../../../src/charts/lineChart/utils/accessibilityTemplateProcessor.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,aAAa;;;;;CAKhB,CAAC;AAEX,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IAC7D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAqDD,eAAO,MAAM,4BAA4B,GACvC,UAAU,MAAM,EAChB,UAAU,gBAAgB,EAC1B,YAAY,MAAM,GAAG,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,KAC3D,MAAM,GAAG,SAaX,CAAC"}

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

@@ -0,0 +1,56 @@
+// Template keys for accessibility labels
+export 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 };
+};
+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);
+};

package/dist/esm/charts/lineChart/utils/findSurroundingNumber.d.ts

@@ -0,0 +1,8 @@
+interface FSReturnValue {
+    idx: number;
+    match: boolean;
+}
+export declare const findSurroundingNumber: (points: number[], xPosition: number) => FSReturnValue;
+export declare const findClosestNumber: (points: number[], xPosition: number) => number;
+export {};
+//# sourceMappingURL=findSurroundingNumber.d.ts.map

package/dist/esm/charts/lineChart/utils/findSurroundingNumber.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"findSurroundingNumber.d.ts","sourceRoot":"","sources":["../../../../../src/charts/lineChart/utils/findSurroundingNumber.ts"],"names":[],"mappings":"AAAA,UAAU,aAAa;IACrB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,OAAO,CAAC;CAChB;AAED,eAAO,MAAM,qBAAqB,GAAI,QAAQ,MAAM,EAAE,EAAE,WAAW,MAAM,KAAG,aAc3E,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,QAAQ,MAAM,EAAE,EAAE,WAAW,MAAM,KAAG,MAavE,CAAC"}

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

@@ -0,0 +1,25 @@
+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;
+};

package/dist/esm/charts/lineChart/utils/getDataValues.d.ts

@@ -0,0 +1,8 @@
+import type { TickValuesAxisProps } from '../lineChart.type';
+/**
+ * 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 declare const getDataValues: (data: TickValuesAxisProps) => string[] | undefined;
+//# sourceMappingURL=getDataValues.d.ts.map

package/dist/esm/charts/lineChart/utils/getDataValues.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getDataValues.d.ts","sourceRoot":"","sources":["../../../../../src/charts/lineChart/utils/getDataValues.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAE7D;;;;GAIG;AACH,eAAO,MAAM,aAAa,GAAI,MAAM,mBAAmB,KAAG,MAAM,EAAE,GAAG,SAoBpE,CAAC"}

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

@@ -0,0 +1,24 @@
+/**
+ * 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;
+};

package/dist/esm/charts/lineChart/utils/getExtraSpacing.d.ts

@@ -0,0 +1,19 @@
+import type { ChildrenType, IDataPoint, LineChartExtraSpacings } from '../lineChart.type';
+interface GetExtraSpacing {
+    children: ChildrenType;
+    data: IDataPoint[];
+    xKey: string;
+    ajustedX: number;
+    ajustedY: number;
+    viewBox: string;
+    canvasHeight: number;
+    canvasWidth: number;
+}
+/**
+ * Calculates the extra spacing required for a line chart.
+ * @param {GetExtraSpacing} options - The options for calculating extra spacing.
+ * @returns {LineChartExtraSpacings} - The calculated extra spacings for the line chart.
+ */
+export declare const getExtraSpacing: ({ ajustedX, ajustedY, canvasHeight, canvasWidth, children, data, viewBox, xKey, }: GetExtraSpacing) => LineChartExtraSpacings;
+export {};
+//# sourceMappingURL=getExtraSpacing.d.ts.map

package/dist/esm/charts/lineChart/utils/getExtraSpacing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getExtraSpacing.d.ts","sourceRoot":"","sources":["../../../../../src/charts/lineChart/utils/getExtraSpacing.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AAkH1F,UAAU,eAAe;IACvB,QAAQ,EAAE,YAAY,CAAC;IACvB,IAAI,EAAE,UAAU,EAAE,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;CACrB;AAED;;;;GAIG;AACH,eAAO,MAAM,eAAe,GAAI,mFAS7B,eAAe,KAAG,sBAmCpB,CAAC"}

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

@@ -0,0 +1,124 @@
+import { Children, isValidElement } from 'react';
+import { Positions } from '../../../types/position.enum';
+import { buildTickValues } from '../../../utils/buildTickValues/buildTickValues';
+import { textBound } from '../../../utils/textBound/textBound';
+import { LineChartXAxis } from '../fragments/lineChartXAxis';
+import { LineChartYAxis } from '../fragments/lineChartYAxis';
+import { getDataValues } from './getDataValues';
+import { getYKeyRoundMaxValue } from './getRoundedMaxValue';
+const handleLineChartXAxis = (child, data, xKey, ajustedX, viewBox, canvasHeight, canvasWidth) => {
+    const { position, tickText, tickValues, valueFormatter } = child.props;
+    const fontSize = tickText?.fontSize ?? 0;
+    const spaceFontSize = fontSize * ajustedX;
+    const xData = tickValues ? getDataValues(tickValues) : data.map(d => d[xKey]);
+    // Apply the valueFormatter if provided to get the actual rendered text width
+    const formattedXData = valueFormatter ? xData.map(valueFormatter) : xData;
+    const securityXSpace = textBound({
+        bound: 'width',
+        data: formattedXData,
+        fontSize,
+        svgHeight: `${canvasHeight}`,
+        svgWidth: `${canvasWidth}`,
+        viewBox,
+    });
+    const isBottomPosition = position === Positions.BOTTOM;
+    const isTopPosition = position === Positions.TOP;
+    const extraSpaceBottomY = isBottomPosition ? spaceFontSize + (tickText?.top ?? 0) : 0;
+    const extraSpaceTopY = isTopPosition ? spaceFontSize + (tickText?.bottom ?? 0) : 0;
+    const lineChartXPosition = (() => position || Positions.BOTTOM)();
+    const getBreakAxis = () => {
+        if (tickValues?.numeric) {
+            return tickValues.numeric.breakAxis ?? 0;
+        }
+        return tickText?.custom?.breakAxis ?? 0;
+    };
+    const xBreakAxis = getBreakAxis();
+    return {
+        extraSpaceBottomY,
+        extraSpaceTopY,
+        lineChartXPosition,
+        securityXSpace,
+        xBreakAxis,
+        xData,
+    };
+};
+const handleLineChartYAxis = (child, data, xKey, ajustedY, viewBox, canvasHeight, canvasWidth) => {
+    const { position, tickText, tickValues, valueFormatter } = child.props;
+    const fontSize = tickText?.fontSize ?? '0';
+    const spaceFontSize = fontSize * ajustedY;
+    const dataValues = tickValues ||
+        buildTickValues([...new Set(getYKeyRoundMaxValue(data, xKey))]);
+    const yData = getDataValues(dataValues);
+    // Apply the valueFormatter if provided to get the actual rendered text width
+    const formattedYData = valueFormatter ? yData.map(valueFormatter) : yData;
+    const yAxisText = textBound({
+        bound: 'width',
+        data: formattedYData,
+        fontSize: fontSize,
+        svgHeight: `${canvasHeight}`,
+        svgWidth: `${canvasWidth}`,
+        viewBox,
+    });
+    const securityYSpace = spaceFontSize;
+    const isLeftPosition = position === Positions.LEFT;
+    const isRightPosition = position === Positions.RIGHT;
+    const extraSpaceLeftX = isLeftPosition ? yAxisText + (tickText?.right ?? 0) : 0;
+    const extraSpaceRightX = isRightPosition ? yAxisText + (tickText?.left ?? 0) : 0;
+    const lineChartYPosition = position || Positions.LEFT;
+    const getBreakAxis = () => {
+        if (tickValues?.numeric) {
+            return tickValues.numeric.breakAxis ?? 0;
+        }
+        return tickText?.custom?.breakAxis ?? 0;
+    };
+    const yBreakAxis = getBreakAxis();
+    return {
+        extraSpaceLeftX,
+        extraSpaceRightX,
+        lineChartYPosition,
+        securityYSpace,
+        yAxisText,
+        yBreakAxis,
+        yData,
+    };
+};
+/**
+ * Calculates the extra spacing required for a line chart.
+ * @param {GetExtraSpacing} options - The options for calculating extra spacing.
+ * @returns {LineChartExtraSpacings} - The calculated extra spacings for the line chart.
+ */
+export const getExtraSpacing = ({ ajustedX, ajustedY, canvasHeight, canvasWidth, children, data, viewBox, xKey, }) => {
+    let result = {
+        extraSpaceBottomY: 0,
+        extraSpaceLeftX: 0,
+        extraSpaceRightX: 0,
+        extraSpaceTopY: 0,
+        lineChartXPosition: Positions.BOTTOM,
+        lineChartYPosition: Positions.LEFT,
+        securityXSpace: 0,
+        securityYSpace: 0,
+        xAxisText: 0,
+        xBreakAxis: 0,
+        xData: [],
+        yAxisText: 0,
+        yBreakAxis: 0,
+        yData: [],
+    };
+    Children.forEach(children, (child) => {
+        if (isValidElement(child)) {
+            if (child.type === LineChartXAxis) {
+                result = {
+                    ...result,
+                    ...handleLineChartXAxis(child, data, xKey, ajustedX, viewBox, canvasHeight, canvasWidth),
+                };
+            }
+            else if (child.type === LineChartYAxis) {
+                result = {
+                    ...result,
+                    ...handleLineChartYAxis(child, data, xKey, ajustedY, viewBox, canvasHeight, canvasWidth),
+                };
+            }
+        }
+    });
+    return result;
+};

package/dist/esm/charts/lineChart/utils/getPathData.d.ts

@@ -0,0 +1,18 @@
+interface GetPathDataParamsType {
+    points: [number, number][];
+    curved?: boolean;
+    svgHeight: number;
+    extendToBottom?: boolean;
+}
+/**
+ * Generates SVG path data from an array of points.
+ * @param points - An array of points, where each point is an array of two numbers representing the x and y coordinates.
+ * @param curved - A boolean indicating whether the path should be a cubic Bezier curve (true) or a straight line (false). Defaults to false.
+ * @param svgWidth - The width of the SVG container.
+ * @param svgHeight - The height of the SVG container.
+ * @param extendToBottom - A boolean indicating whether the path should extend to the bottom of the SVG container. Defaults to false.
+ * @returns The SVG path data as a string.
+ */
+export declare const getPathData: ({ curved, extendToBottom, points, svgHeight, }: GetPathDataParamsType) => string;
+export {};
+//# sourceMappingURL=getPathData.d.ts.map

package/dist/esm/charts/lineChart/utils/getPathData.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getPathData.d.ts","sourceRoot":"","sources":["../../../../../src/charts/lineChart/utils/getPathData.ts"],"names":[],"mappings":"AAAA,UAAU,qBAAqB;IAC7B,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,CAAC;IAC3B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,WAAW,GAAI,gDAKzB,qBAAqB,KAAG,MAwB1B,CAAC"}

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

@@ -0,0 +1,33 @@
+/**
+ * Generates SVG path data from an array of points.
+ * @param points - An array of points, where each point is an array of two numbers representing the x and y coordinates.
+ * @param curved - A boolean indicating whether the path should be a cubic Bezier curve (true) or a straight line (false). Defaults to false.
+ * @param svgWidth - The width of the SVG container.
+ * @param svgHeight - The height of the SVG container.
+ * @param extendToBottom - A boolean indicating whether the path should extend to the bottom of the SVG container. Defaults to false.
+ * @returns The SVG path data as a string.
+ */
+export const getPathData = ({ curved = false, extendToBottom = false, points, svgHeight, }) => {
+    if (points.length === 0) {
+        return '';
+    }
+    const [firstPoint, ...remainingPoints] = points;
+    let pathData = `M ${firstPoint[0]} ${firstPoint[1]}`;
+    if (curved) {
+        pathData += remainingPoints.reduce((data, point, i) => {
+            const [x1, y1] = points[i];
+            const [x2, y2] = point;
+            const dx = (x2 - x1) * 0.3;
+            const controlPoint1 = [x1 + dx, y1];
+            const controlPoint2 = [x2 - dx, y2];
+            return `${data} C ${controlPoint1[0]} ${controlPoint1[1]}, ${controlPoint2[0]} ${controlPoint2[1]}, ${x2} ${y2}`;
+        }, '');
+    }
+    else {
+        pathData += remainingPoints.reduce((data, point) => `${data} L ${point[0]} ${point[1]}`, '');
+    }
+    if (extendToBottom) {
+        pathData += ` L ${remainingPoints[remainingPoints.length - 1][0]} ${svgHeight} L ${firstPoint[0]} ${svgHeight} Z`;
+    }
+    return pathData;
+};

package/dist/esm/charts/lineChart/utils/getProjection.d.ts

@@ -0,0 +1,33 @@
+type PointType = Array<[number, number]>;
+interface GetProjectionPropsType {
+    points: PointType;
+    curved?: boolean;
+    svgHeight: number;
+    upperProjection?: {
+        x?: number;
+        y?: number;
+    };
+    lowerProjection?: {
+        x?: number;
+        y?: number;
+    };
+}
+interface GetProjectionReturnType {
+    shapePath: string;
+    upPath?: string;
+    downPath?: string;
+}
+/**
+ * Generates the SVG path data for a line chart with optional upper and lower projections.
+ *
+ * @param {Object} params - The parameters for generating the projection.
+ * @param {PointType[]} params.points - The data points for the line chart.
+ * @param {boolean} params.curved - Whether the line should be curved.
+ * @param {number} params.svgHeight - The height of the SVG element.
+ * @param {ProjectionType} [params.upperProjection] - The upper projection data.
+ * @param {ProjectionType} [params.lowerProjection] - The lower projection data.
+ * @returns {GetProjectionReturnType} The generated SVG path data.
+ */
+export declare const getProjection: ({ curved, lowerProjection, points, svgHeight, upperProjection, }: GetProjectionPropsType) => GetProjectionReturnType;
+export {};
+//# sourceMappingURL=getProjection.d.ts.map

package/dist/esm/charts/lineChart/utils/getProjection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getProjection.d.ts","sourceRoot":"","sources":["../../../../../src/charts/lineChart/utils/getProjection.ts"],"names":[],"mappings":"AAAA,KAAK,SAAS,GAAG,KAAK,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;AAEzC,UAAU,sBAAsB;IAC9B,MAAM,EAAE,SAAS,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE;QAAE,CAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC7C,eAAe,CAAC,EAAE;QAAE,CAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CAC9C;AAED,UAAU,uBAAuB;IAC/B,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAuBD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,aAAa,GAAI,kEAM3B,sBAAsB,KAAG,uBA8E3B,CAAC"}