@kubit-ui-web/react-charts 0.1.0

package/dist/esm/utils/getCanvasDimensions/getCanvasDimensions.js

@@ -0,0 +1,97 @@
+import { Unit } from '../../types/unit.enum';
+/**
+ * A mapping of string representations of units to their corresponding `Unit` enum values.
+ * This is used to convert string-based unit identifiers into their respective `Unit` enum types.
+ *
+ * @example
+ * stringToUnit["%"] // Returns Unit.PERCENT
+ * stringToUnit["rem"] // Returns Unit.REM
+ */
+const stringToUnit = {
+    [Unit.PERCENTAGE]: Unit.PERCENTAGE,
+    [Unit.REM]: Unit.REM,
+};
+/**
+ * An enumeration representing the dimensions of an SVG element.
+ * This is used to specify whether the width or height dimension is being referenced.
+ *
+ * @enum {string}
+ * @property {string} WIDTH - Represents the width dimension ('WIDTH').
+ * @property {string} HEIGHT - Represents the height dimension ('HEIGHT').
+ */
+const Dimension = {
+    HEIGHT: 'HEIGHT',
+    WIDTH: 'WIDTH',
+};
+const UNIT_VALUE_REGEX = /^(\d+(\.\d+)?)(px|rem|%)?$/;
+const MATCH_VALUE_INDEX = 1;
+const MATCH_UNIT_INDEX = 3;
+/**
+ * Extracts the numeric value and unit from a regex match result.
+ *
+ * @param match - The regex match array containing the value and unit.
+ * @returns An object containing the numeric value and the unit as a string.
+ */
+const parseDimensionValue = (value) => {
+    if (typeof value === 'number') {
+        return { unit: undefined, value };
+    }
+    const match = value.match(UNIT_VALUE_REGEX);
+    if (!match) {
+        throw new Error(`Invalid string format: "${value}"`);
+    }
+    const parsedValue = parseFloat(match[MATCH_VALUE_INDEX]); // match for group (\d+(\.\d+)?)
+    const unit = match[MATCH_UNIT_INDEX]; // match for group (px|rem|%)
+    return { unit: stringToUnit[unit], value: parsedValue };
+};
+/**
+ * Calculates the percentage of a value based on the specified dimension (width or height) and the SVG element's dimensions.
+ *
+ * @param {number} value - The value to be converted to a percentage.
+ * @param {`${Dimension}`} dimension - The dimension type (width or height).
+ * @param {SVGSVGElement} svgElement - The SVG element to calculate dimensions for.
+ * @returns {number} The calculated percentage value.
+ */
+const calculatePercentage = (value, dimension, svgElement) => {
+    const svgContainer = svgElement.parentElement;
+    if (!svgContainer) {
+        return 0;
+    }
+    const containerDimension = dimension === Dimension.WIDTH ? svgContainer.clientWidth : svgContainer.clientHeight;
+    return (value / 100) * containerDimension;
+};
+/**
+ * Calculates the rem value based on the root font size.
+ *
+ * @param {number} value - The value in rem to be converted to pixels.
+ * @returns {number} The calculated pixel value.
+ */
+const calculateRem = (value) => {
+    const remValue = parseFloat(getComputedStyle(document.documentElement).fontSize);
+    return value * remValue;
+};
+/**
+ * Calculates the dimensions of an SVG element based on the provided width and height values.
+ * The width and height can be specified in pixels, percentages, or rem units.
+ *
+ * @param {GetCanvasDimensionsProps} props - The properties for calculating dimensions.
+ * @param {string | number} props.canvasHeight - The height of the canvas (can be a string or number).
+ * @param {string | number} props.canvasWidth - The width of the canvas (can be a string or number).
+ * @param {SVGSVGElement} props.svgElement - The SVG element to calculate dimensions for.
+ * @returns {GetCanvasDimensionsReturn} An object containing the calculated canva's width and height.
+ */
+export const getCanvasDimensions = ({ canvasHeight, canvasWidth, svgElement, }) => {
+    const { unit: widthUnit, value: widthValue } = parseDimensionValue(canvasWidth);
+    const parsedCanvasWidth = widthUnit === Unit.PERCENTAGE
+        ? calculatePercentage(widthValue, Dimension.WIDTH, svgElement)
+        : widthUnit === Unit.REM
+            ? calculateRem(widthValue)
+            : widthValue;
+    const { unit: heightUnit, value: heightValue } = parseDimensionValue(canvasHeight);
+    const parsedCanvasHeight = heightUnit === Unit.PERCENTAGE
+        ? calculatePercentage(heightValue, Dimension.HEIGHT, svgElement)
+        : heightUnit === Unit.REM
+            ? calculateRem(heightValue)
+            : heightValue;
+    return { parsedCanvasHeight, parsedCanvasWidth };
+};

package/dist/esm/utils/getChildrenAttr/getChildrenAttr.d.ts

@@ -0,0 +1,10 @@
+import { type ReactNode } from 'react';
+interface GetChildrenAttrProps {
+    attrName: string;
+    originalValue: string;
+    children: ReactNode[];
+    updateValue: (v: string) => void;
+}
+export declare const getChildrenAttr: ({ attrName, children, originalValue, updateValue, }: GetChildrenAttrProps) => void;
+export {};
+//# sourceMappingURL=getChildrenAttr.d.ts.map

package/dist/esm/utils/getChildrenAttr/getChildrenAttr.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getChildrenAttr.d.ts","sourceRoot":"","sources":["../../../../src/utils/getChildrenAttr/getChildrenAttr.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAkB,MAAM,OAAO,CAAC;AAEjE,UAAU,oBAAoB;IAC5B,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE,SAAS,EAAE,CAAC;IACtB,WAAW,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAClC;AAED,eAAO,MAAM,eAAe,GAAI,qDAK7B,oBAAoB,KAAG,IAazB,CAAC"}

package/dist/esm/utils/getChildrenAttr/getChildrenAttr.js

@@ -0,0 +1,15 @@
+import { Children, isValidElement } from 'react';
+export const getChildrenAttr = ({ attrName, children, originalValue, updateValue, }) => {
+    let combineString = '';
+    Children.toArray(children).forEach((child) => {
+        if (isValidElement(child)) {
+            const attrValue = child.props[attrName];
+            if (attrValue) {
+                combineString += attrValue;
+            }
+        }
+    });
+    if (combineString !== originalValue) {
+        updateValue(combineString);
+    }
+};

package/dist/esm/utils/getCoordinates/getCoordinates.d.ts

@@ -0,0 +1,47 @@
+import { Positions } from '../../types/position.enum';
+interface GetCoordinatesProps {
+    position: (typeof Positions)[keyof typeof Positions];
+    canvasHeight: number;
+    canvasWidth: number;
+    extraSpaceLeftX: number;
+    extraSpaceRightX: number;
+    extraSpaceTopY: number;
+    extraSpaceBottomY: number;
+    securityYSpace: number;
+    customBreakAxis: number;
+}
+interface GetCoordinatesReturn {
+    x1: number;
+    x2: number;
+    y1: number;
+    y2: number;
+}
+/**
+ * Calculates the X coordinates for drawing lines in a chart.
+ * @param position - The position of the line.
+ * @param canvasHeight - The height of the canvas.
+ * @param canvasWidth - The width of the canvas.
+ * @param extraSpaceLeftX - The extra space on the left side of the chart.
+ * @param extraSpaceRightX - The extra space on the right side of the chart.
+ * @param extraSpaceTopY - The extra space on the top side of the chart.
+ * @param extraSpaceBottomY - The extra space on the bottom side of the chart.
+ * @param customBreakAxis - The custom break axis value.
+ * @returns The X coordinates for drawing lines.
+ */
+export declare const getXCoordinates: ({ canvasHeight, canvasWidth, customBreakAxis, extraSpaceBottomY, extraSpaceLeftX, extraSpaceRightX, extraSpaceTopY, position, }: GetCoordinatesProps) => GetCoordinatesReturn;
+/**
+ * Calculates the y-coordinates for drawing lines in a chart.
+ *
+ * @param position - The position of the line (RIGHT, CENTER, CUSTOM).
+ * @param canvasHeight - The height of the canvas.
+ * @param canvasWidth - The width of the canvas.
+ * @param extraSpaceLeftX - The extra space on the left side of the chart.
+ * @param extraSpaceRightX - The extra space on the right side of the chart.
+ * @param extraSpaceTopY - The extra space on the top of the chart.
+ * @param extraSpaceBottomY - The extra space on the bottom of the chart.
+ * @param customBreakAxis - The custom break axis position (used when position is CUSTOM).
+ * @returns The y-coordinates for drawing lines in the chart.
+ */
+export declare const getYCoordinates: ({ canvasHeight, canvasWidth, customBreakAxis, extraSpaceBottomY, extraSpaceLeftX, extraSpaceRightX, extraSpaceTopY, position, }: GetCoordinatesProps) => GetCoordinatesReturn;
+export {};
+//# sourceMappingURL=getCoordinates.d.ts.map

package/dist/esm/utils/getCoordinates/getCoordinates.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getCoordinates.d.ts","sourceRoot":"","sources":["../../../../src/utils/getCoordinates/getCoordinates.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAElD,UAAU,mBAAmB;IAC3B,QAAQ,EAAE,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,OAAO,SAAS,CAAC,CAAC;IACrD,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,eAAe,EAAE,MAAM,CAAC;IACxB,gBAAgB,EAAE,MAAM,CAAC;IACzB,cAAc,EAAE,MAAM,CAAC;IACvB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,cAAc,EAAE,MAAM,CAAC;IACvB,eAAe,EAAE,MAAM,CAAC;CACzB;AAED,UAAU,oBAAoB;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;CACZ;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,eAAe,GAAI,iIAS7B,mBAAmB,KAAG,oBA+BxB,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,eAAe,GAAI,iIAS7B,mBAAmB,KAAG,oBAgCxB,CAAC"}

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

@@ -0,0 +1,90 @@
+import { Positions } from '../../types/position.enum';
+/**
+ * Calculates the X coordinates for drawing lines in a chart.
+ * @param position - The position of the line.
+ * @param canvasHeight - The height of the canvas.
+ * @param canvasWidth - The width of the canvas.
+ * @param extraSpaceLeftX - The extra space on the left side of the chart.
+ * @param extraSpaceRightX - The extra space on the right side of the chart.
+ * @param extraSpaceTopY - The extra space on the top side of the chart.
+ * @param extraSpaceBottomY - The extra space on the bottom side of the chart.
+ * @param customBreakAxis - The custom break axis value.
+ * @returns The X coordinates for drawing lines.
+ */
+export const getXCoordinates = ({ canvasHeight, canvasWidth, customBreakAxis, extraSpaceBottomY, extraSpaceLeftX, extraSpaceRightX, extraSpaceTopY, position, }) => {
+    if (position === Positions.TOP) {
+        return {
+            x1: extraSpaceLeftX,
+            x2: canvasWidth - extraSpaceRightX,
+            y1: extraSpaceTopY,
+            y2: extraSpaceTopY,
+        };
+    }
+    if (position === Positions.CENTER) {
+        return {
+            x1: extraSpaceLeftX,
+            x2: canvasWidth - extraSpaceRightX,
+            y1: canvasHeight / 2,
+            y2: canvasHeight / 2,
+        };
+    }
+    if (position === Positions.CUSTOM) {
+        return {
+            x1: extraSpaceLeftX,
+            x2: canvasWidth - extraSpaceRightX,
+            y1: customBreakAxis,
+            y2: customBreakAxis,
+        };
+    }
+    return {
+        x1: extraSpaceLeftX,
+        x2: canvasWidth - extraSpaceRightX,
+        y1: canvasHeight - extraSpaceBottomY,
+        y2: canvasHeight - extraSpaceBottomY,
+    };
+};
+/**
+ * Calculates the y-coordinates for drawing lines in a chart.
+ *
+ * @param position - The position of the line (RIGHT, CENTER, CUSTOM).
+ * @param canvasHeight - The height of the canvas.
+ * @param canvasWidth - The width of the canvas.
+ * @param extraSpaceLeftX - The extra space on the left side of the chart.
+ * @param extraSpaceRightX - The extra space on the right side of the chart.
+ * @param extraSpaceTopY - The extra space on the top of the chart.
+ * @param extraSpaceBottomY - The extra space on the bottom of the chart.
+ * @param customBreakAxis - The custom break axis position (used when position is CUSTOM).
+ * @returns The y-coordinates for drawing lines in the chart.
+ */
+export const getYCoordinates = ({ canvasHeight, canvasWidth, customBreakAxis, extraSpaceBottomY, extraSpaceLeftX, extraSpaceRightX, extraSpaceTopY, position, }) => {
+    if (position === Positions.RIGHT) {
+        return {
+            x1: canvasWidth - extraSpaceRightX,
+            x2: canvasWidth - extraSpaceRightX,
+            y1: extraSpaceTopY,
+            y2: canvasHeight - extraSpaceBottomY,
+        };
+    }
+    if (position === Positions.CENTER) {
+        return {
+            x1: canvasWidth / 2,
+            x2: canvasWidth / 2,
+            y1: extraSpaceTopY,
+            y2: canvasHeight - extraSpaceBottomY,
+        };
+    }
+    if (position === Positions.CUSTOM) {
+        return {
+            x1: customBreakAxis,
+            x2: customBreakAxis,
+            y1: extraSpaceTopY,
+            y2: canvasHeight - extraSpaceBottomY,
+        };
+    }
+    return {
+        x1: extraSpaceLeftX,
+        x2: extraSpaceLeftX,
+        y1: extraSpaceTopY,
+        y2: canvasHeight - extraSpaceBottomY,
+    };
+};

package/dist/esm/utils/getDataFingerprint/getDataFingerprint.d.ts

@@ -0,0 +1,12 @@
+import type { BarChartIDataPoint } from '../../charts/barChart/barChart.type';
+import type { IDataPoint } from '../../charts/lineChart/lineChart.type';
+import type { DataItem } from '../../charts/pieChart/pieChart.type';
+type ChartDataType = IDataPoint[] | BarChartIDataPoint[] | DataItem;
+/**
+ * Generates a fingerprint of chart data for use in React.useMemo dependencies
+ * @param data - Chart data from LineChart, BarChart, or PieChart
+ * @returns JSON string representation of the data
+ */
+export declare const getDataFingerprint: (data: ChartDataType) => string;
+export {};
+//# sourceMappingURL=getDataFingerprint.d.ts.map

package/dist/esm/utils/getDataFingerprint/getDataFingerprint.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getDataFingerprint.d.ts","sourceRoot":"","sources":["../../../../src/utils/getDataFingerprint/getDataFingerprint.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AAC1E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAC;AACpE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAEhE,KAAK,aAAa,GAAG,UAAU,EAAE,GAAG,kBAAkB,EAAE,GAAG,QAAQ,CAAC;AAEpE;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,GAAI,MAAM,aAAa,KAAG,MAIxD,CAAC"}

package/dist/esm/utils/getDataFingerprint/getDataFingerprint.js

@@ -0,0 +1,10 @@
+/**
+ * Generates a fingerprint of chart data for use in React.useMemo dependencies
+ * @param data - Chart data from LineChart, BarChart, or PieChart
+ * @returns JSON string representation of the data
+ */
+export const getDataFingerprint = (data) => {
+    // TODO: study and compare performance with other hash libraries or manual methods
+    // ! Data might grow a lot in size, that is because this may be reviewed in the future
+    return JSON.stringify(data);
+};

package/dist/esm/utils/getPoints/getPoints.d.ts

@@ -0,0 +1,10 @@
+import type { TickData } from '../../components/tick/tick.types';
+/**
+ * Calculates the positions of data points on the chart based on tick values and data values.
+ * @param tickValues - An array of tick data objects.
+ * @param data - An array of data values.
+ * @param xAxis - Optional parameter indicating whether the points are for the x-axis. Defaults to false.
+ * @returns An array of numbers representing the positions of the data points.
+ */
+export declare const getPoints: (tickValues: TickData[], data: string[], xAxis?: boolean) => number[];
+//# sourceMappingURL=getPoints.d.ts.map

package/dist/esm/utils/getPoints/getPoints.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getPoints.d.ts","sourceRoot":"","sources":["../../../../src/utils/getPoints/getPoints.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAE7D;;;;;;GAMG;AACH,eAAO,MAAM,SAAS,GAAI,YAAY,QAAQ,EAAE,EAAE,MAAM,MAAM,EAAE,EAAE,QAAQ,OAAO,KAAG,MAAM,EA+CzF,CAAC"}

package/dist/esm/utils/getPoints/getPoints.js

@@ -0,0 +1,49 @@
+/**
+ * Calculates the positions of data points on the chart based on tick values and data values.
+ * @param tickValues - An array of tick data objects.
+ * @param data - An array of data values.
+ * @param xAxis - Optional parameter indicating whether the points are for the x-axis. Defaults to false.
+ * @returns An array of numbers representing the positions of the data points.
+ */
+export const getPoints = (tickValues, data, xAxis) => {
+    return data.map(dt => {
+        // IF NOT A NUMBER, FIND THE POSITION OF THE TICK
+        if (isNaN(Number(dt))) {
+            const located = tickValues.find(tick => String(tick.value) === String(dt));
+            return located ? located.position : 0;
+        }
+        // FIND THE CLOSEST TICK
+        const { index, tick } = tickValues.reduce((prev, curr, tickiIndex) => {
+            return Math.abs(Number(curr.value) - Number(dt)) <=
+                Math.abs(Number(prev.tick.value) - Number(dt))
+                ? { index: tickiIndex, tick: curr }
+                : prev;
+        }, { index: 0, tick: tickValues[0] });
+        const dtNumber = Number(dt);
+        const tickValueNumber = Number(tick.value);
+        if (dtNumber !== tickValueNumber) {
+            const currentAxisValues = tickValues.map(tickVal => Number(tickVal.value));
+            const min = Math.min(...currentAxisValues);
+            const max = Math.max(...currentAxisValues);
+            if (dtNumber < min) {
+                return tickValues.at(0)?.position;
+            }
+            if (dtNumber > max) {
+                return tickValues.at(-1)?.position;
+            }
+            const diff = Math.abs(tickValueNumber - dtNumber);
+            const isGreaterThan = dtNumber > tickValueNumber;
+            const closeTick = isGreaterThan ? tickValues[index + 1] : tickValues[index - 1];
+            const diffBetweenTicks = Math.abs(Number(closeTick.value) - tickValueNumber);
+            const diffPercentaje = (diff * 100) / diffBetweenTicks;
+            const posBetweenTicks = Math.abs(tick.position - closeTick.position);
+            const ajustedAmount = (posBetweenTicks * diffPercentaje) / 100;
+            // This is because the X axis is drawn from left to right and the Y axis from top to bottom.
+            if (xAxis) {
+                return isGreaterThan ? tick.position + ajustedAmount : tick.position - ajustedAmount;
+            }
+            return isGreaterThan ? tick.position - ajustedAmount : tick.position + ajustedAmount;
+        }
+        return tick.position;
+    });
+};

package/dist/esm/utils/getTickTextCoordinate/getTickTextCoordinates.d.ts

@@ -0,0 +1,21 @@
+import { Positions } from '../../types/position.enum';
+/**
+ * Calculates the x-coordinate for the tick text based on the position, x-coordinate, and font size.
+ *
+ * @param position - The position of the tick text.
+ * @param x - The x-coordinate of the tick text.
+ * @param fontSize - The font size of the tick text.
+ * @returns The calculated x-coordinate for the tick text.
+ */
+export declare const getTickTextXCoordinate: (position: (typeof Positions)[keyof typeof Positions], x: number, fontSize: number) => number;
+/**
+ * Calculates the y-coordinate for the tick text based on the position, y-coordinate, font size, and security space.
+ *
+ * @param position - The position of the tick text.
+ * @param y - The y-coordinate of the tick text.
+ * @param fontSize - The font size of the tick text.
+ * @param securitySpace - The security space between the tick text and the chart.
+ * @returns The calculated y-coordinate for the tick text.
+ */
+export declare const getTickTextYCoordinate: (position: (typeof Positions)[keyof typeof Positions], y: number, fontSize: number, securitySpace: number) => number;
+//# sourceMappingURL=getTickTextCoordinates.d.ts.map

package/dist/esm/utils/getTickTextCoordinate/getTickTextCoordinates.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getTickTextCoordinates.d.ts","sourceRoot":"","sources":["../../../../src/utils/getTickTextCoordinate/getTickTextCoordinates.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAElD;;;;;;;GAOG;AACH,eAAO,MAAM,sBAAsB,GACjC,UAAU,CAAC,OAAO,SAAS,EAAE,MAAM,OAAO,SAAS,CAAC,EACpD,GAAG,MAAM,EACT,UAAU,MAAM,KACf,MAKF,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,sBAAsB,GACjC,UAAU,CAAC,OAAO,SAAS,EAAE,MAAM,OAAO,SAAS,CAAC,EACpD,GAAG,MAAM,EACT,UAAU,MAAM,EAChB,eAAe,MAAM,KACpB,MAKF,CAAC"}

package/dist/esm/utils/getTickTextCoordinate/getTickTextCoordinates.js

@@ -0,0 +1,30 @@
+import { Positions } from '../../types/position.enum';
+/**
+ * Calculates the x-coordinate for the tick text based on the position, x-coordinate, and font size.
+ *
+ * @param position - The position of the tick text.
+ * @param x - The x-coordinate of the tick text.
+ * @param fontSize - The font size of the tick text.
+ * @returns The calculated x-coordinate for the tick text.
+ */
+export const getTickTextXCoordinate = (position, x, fontSize) => {
+    if (position === Positions.RIGHT) {
+        return x + fontSize;
+    }
+    return x - fontSize;
+};
+/**
+ * Calculates the y-coordinate for the tick text based on the position, y-coordinate, font size, and security space.
+ *
+ * @param position - The position of the tick text.
+ * @param y - The y-coordinate of the tick text.
+ * @param fontSize - The font size of the tick text.
+ * @param securitySpace - The security space between the tick text and the chart.
+ * @returns The calculated y-coordinate for the tick text.
+ */
+export const getTickTextYCoordinate = (position, y, fontSize, securitySpace) => {
+    if (position === Positions.TOP) {
+        return fontSize;
+    }
+    return y + fontSize + securitySpace;
+};

package/dist/esm/utils/getTicks/getTicks.d.ts

@@ -0,0 +1,35 @@
+import type { TickData } from '../../components/tick/tick.types';
+interface GetTickProps {
+    tickValues: string[];
+    maxSpaceAvailable: number;
+    securitySpace: number;
+    otherAxisSpace: number;
+    initPos: number;
+    needAjusted?: boolean;
+}
+/**
+ * Calculates the tick positions and values for the x-axis of a line chart.
+ *
+ * @param tickValues - The values to be displayed as ticks on the x-axis.
+ * @param maxSpaceAvailable - The maximum space available for the x-axis.
+ * @param securitySpace - The space reserved for security purposes.
+ * @param crossAxis - The cross axis of the chart.
+ * @param otherAxisSpace - The space occupied by the other axis.
+ * @param initPos - The initial position of the x-axis.
+ * @returns An array of objects containing the tick values and their corresponding positions.
+ */
+export declare const getXTicks: ({ initPos, maxSpaceAvailable, otherAxisSpace, securitySpace, tickValues, }: GetTickProps) => TickData[] | undefined;
+/**
+ * Calculates the tick positions and values for the y-axis of a line chart.
+ *
+ * @param tickValues - The values to be displayed as ticks on the y-axis.
+ * @param maxSpaceAvailable - The maximum space available for the y-axis.
+ * @param securitySpace - The space reserved for security purposes.
+ * @param crossAxis - The cross axis of the chart.
+ * @param otherAxisSpace - The space occupied by the other axis.
+ * @param initPos - The initial position of the y-axis.
+ * @returns An array of objects containing the tick values and their corresponding positions.
+ */
+export declare const getYTicks: ({ initPos, maxSpaceAvailable, needAjusted, otherAxisSpace, securitySpace, tickValues, }: GetTickProps) => TickData[] | undefined;
+export {};
+//# sourceMappingURL=getTicks.d.ts.map

package/dist/esm/utils/getTicks/getTicks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getTicks.d.ts","sourceRoot":"","sources":["../../../../src/utils/getTicks/getTicks.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAE7D,UAAU,YAAY;IACpB,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,aAAa,EAAE,MAAM,CAAC;IACtB,cAAc,EAAE,MAAM,CAAC;IACvB,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,SAAS,GAAI,4EAMvB,YAAY,KAAG,QAAQ,EAAE,GAAG,SAa9B,CAAC;AAEF;;;;;;;;;;GAUG;AACH,eAAO,MAAM,SAAS,GAAI,yFAOvB,YAAY,KAAG,QAAQ,EAAE,GAAG,SAc9B,CAAC"}

package/dist/esm/utils/getTicks/getTicks.js

@@ -0,0 +1,49 @@
+/**
+ * Calculates the tick positions and values for the x-axis of a line chart.
+ *
+ * @param tickValues - The values to be displayed as ticks on the x-axis.
+ * @param maxSpaceAvailable - The maximum space available for the x-axis.
+ * @param securitySpace - The space reserved for security purposes.
+ * @param crossAxis - The cross axis of the chart.
+ * @param otherAxisSpace - The space occupied by the other axis.
+ * @param initPos - The initial position of the x-axis.
+ * @returns An array of objects containing the tick values and their corresponding positions.
+ */
+export const getXTicks = ({ initPos, maxSpaceAvailable, otherAxisSpace, securitySpace, tickValues, }) => {
+    const ticksNumber = tickValues.length - 1;
+    const maxSpace = maxSpaceAvailable - otherAxisSpace - securitySpace;
+    const stepValue = maxSpace / ticksNumber;
+    const ticks = tickValues.map((value, idx) => {
+        const currentStep = idx * stepValue;
+        return {
+            position: initPos + currentStep + securitySpace / 2,
+            value,
+        };
+    });
+    return ticks;
+};
+/**
+ * Calculates the tick positions and values for the y-axis of a line chart.
+ *
+ * @param tickValues - The values to be displayed as ticks on the y-axis.
+ * @param maxSpaceAvailable - The maximum space available for the y-axis.
+ * @param securitySpace - The space reserved for security purposes.
+ * @param crossAxis - The cross axis of the chart.
+ * @param otherAxisSpace - The space occupied by the other axis.
+ * @param initPos - The initial position of the y-axis.
+ * @returns An array of objects containing the tick values and their corresponding positions.
+ */
+export const getYTicks = ({ initPos, maxSpaceAvailable, needAjusted, otherAxisSpace, securitySpace, tickValues, }) => {
+    const ticksNumber = tickValues.length - 1;
+    const maxSpace = maxSpaceAvailable - otherAxisSpace - securitySpace;
+    const stepValue = maxSpace / ticksNumber;
+    const additionalSpace = needAjusted ? securitySpace / 2 : 0;
+    const ticks = tickValues.map((value, idx) => {
+        const currentStep = idx * stepValue;
+        return {
+            position: initPos - currentStep - additionalSpace,
+            value,
+        };
+    });
+    return ticks;
+};

package/dist/esm/utils/index.d.ts

@@ -0,0 +1,9 @@
+export * from './ajustedTextSpace/ajustedTextSpace';
+export * from './buildTickValues/buildTickValues';
+export * from './classNames/classNames';
+export * from './cssGradientToSvg/cssGradientToSvg';
+export * from './cursorNear/isNear';
+export * from './shadowSvg/shadowSvg';
+export * from './shadowSvg/shadowSvg.types';
+export * from './textBound/textBound';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,qCAAqC,CAAC;AACpD,cAAc,mCAAmC,CAAC;AAClD,cAAc,yBAAyB,CAAC;AACxC,cAAc,qCAAqC,CAAC;AACpD,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,uBAAuB,CAAC"}

package/dist/esm/utils/index.js

@@ -0,0 +1,8 @@
+export * from './ajustedTextSpace/ajustedTextSpace';
+export * from './buildTickValues/buildTickValues';
+export * from './classNames/classNames';
+export * from './cssGradientToSvg/cssGradientToSvg';
+export * from './cursorNear/isNear';
+export * from './shadowSvg/shadowSvg';
+export * from './shadowSvg/shadowSvg.types';
+export * from './textBound/textBound';

package/dist/esm/utils/parseStringToNumberPx.ts/parseStringToNumberPx.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Parses a string or number to a pixel value.
+ * If the input is a string, it can be in the format '2px', '2rem', or '2'.
+ * If the input is a number, it returns the number as is.
+ *
+ * @param value - The value to parse (string or number).
+ * @returns The parsed pixel value as a number.
+ * @throws Will throw an error if the string format is invalid.
+ */
+export declare const parseStringToNumberPx: (value: string | number) => number;
+//# sourceMappingURL=parseStringToNumberPx.d.ts.map

package/dist/esm/utils/parseStringToNumberPx.ts/parseStringToNumberPx.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"parseStringToNumberPx.d.ts","sourceRoot":"","sources":["../../../../src/utils/parseStringToNumberPx.ts/parseStringToNumberPx.ts"],"names":[],"mappings":"AAMA;;;;;;;;GAQG;AACH,eAAO,MAAM,qBAAqB,GAAI,OAAO,MAAM,GAAG,MAAM,KAAG,MAkB9D,CAAC"}

package/dist/esm/utils/parseStringToNumberPx.ts/parseStringToNumberPx.js

@@ -0,0 +1,29 @@
+import { Unit } from '../../types/unit.enum';
+const UNIT_VALUE_REGEX = /^(\d+(\.\d+)?)(px|rem|%)?$/;
+const MATCH_VALUE_INDEX = 1;
+const MATCH_UNIT_INDEX = 3;
+/**
+ * Parses a string or number to a pixel value.
+ * If the input is a string, it can be in the format '2px', '2rem', or '2'.
+ * If the input is a number, it returns the number as is.
+ *
+ * @param value - The value to parse (string or number).
+ * @returns The parsed pixel value as a number.
+ * @throws Will throw an error if the string format is invalid.
+ */
+export const parseStringToNumberPx = (value) => {
+    if (typeof value === 'number') {
+        return value;
+    }
+    //detect if the value is '2px' or '2rem' or '2'
+    const match = value.match(UNIT_VALUE_REGEX);
+    if (!match) {
+        throw new Error(`Invalid string format: "${value}"`);
+    }
+    const number = match[MATCH_VALUE_INDEX]; // match for group (\d+(\.\d+)?)
+    const unit = match[MATCH_UNIT_INDEX]; // match for group (px|rem|%)
+    if (unit === Unit.REM) {
+        return parseFloat(number) * 16;
+    }
+    return parseFloat(number);
+};

package/dist/esm/utils/pickCustomAttributes/pickCustomAttributes.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Filters and extracts only aria-* and data-* attributes from a given object,
+ * converting all values to strings for HTML compatibility.
+ *
+ * This function is useful for extracting accessibility and data attributes
+ * from props or configuration objects and ensuring they are properly formatted
+ * for HTML rendering.
+ *
+ * @param attributes - An optional object containing key-value pairs of attributes.
+ *   - Keys can be strings representing attribute names.
+ *   - Values can be strings, booleans, numbers, or any other type.
+ *
+ * @returns A new object containing only aria-* and data-* attributes:
+ *   - Only includes attributes that start with `aria-` or `data-`.
+ *   - All values are converted to strings for HTML compatibility.
+ *   - Null and undefined values are excluded.
+ *
+ * @example
+ * ```typescript
+ * const props = {
+ *   'aria-label': 'Button',
+ *   'data-testid': 'my-button',
+ *   'onClick': () => {},
+ *   'className': 'btn',
+ *   'aria-hidden': true
+ * };
+ *
+ * const result = pickCustomAttributes(props);
+ * // Result: { 'aria-label': 'Button', 'data-testid': 'my-button', 'aria-hidden': 'true' }
+ * ```
+ */
+export declare const pickCustomAttributes: (attributes?: Record<string, any>) => Record<string, string>;
+//# sourceMappingURL=pickCustomAttributes.d.ts.map

package/dist/esm/utils/pickCustomAttributes/pickCustomAttributes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pickCustomAttributes.d.ts","sourceRoot":"","sources":["../../../../src/utils/pickCustomAttributes/pickCustomAttributes.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,eAAO,MAAM,oBAAoB,GAE/B,aAAa,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAC/B,MAAM,CAAC,MAAM,EAAE,MAAM,CAkBvB,CAAC"}