@kubit-ui-web/react-charts 0.1.0

package/dist/esm/charts/pieChart/pieChartStructure.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { SvgContainer } from '../../components/svgContainer/svgContainer';
+import { buildViewBox } from '../../components/svgContainer/utils/buildViewBox/buildViewBox';
+import { DefaultCanvasConfig } from '../../types/canvas.type';
+import { parseStringToNumberPx } from '../../utils/parseStringToNumberPx.ts/parseStringToNumberPx';
+import { buildPieContextValue } from './context/buildPieContextValue';
+import { PieChartContext } from './context/pieChartContext';
+/**
+ * Renders a pie chart component.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <PieChart
+ *   caption="Pie Chart"
+ *   canvasConfig={DefaultCanvasConfig}
+ *   dataTestId="pie-chart"
+ *   width="100%"
+ *   height="100%"
+ *   classNames="pie-chart"
+ *   data={chartData}
+ * >
+ *   {chartChildren}
+ * </PieChart>
+ * ```
+ *
+ * @param {PieChartProps} props - The props for the PieChart component.
+ * @param {string} props.caption - The caption for the pie chart.
+ * @param {DefaultCanvasConfig} props.canvasConfig - The canvas configuration for the pie chart.
+ * @param {string} props.dataTestId - The data test ID for the pie chart.
+ * @param {string} props.width - The width of the pie chart.
+ * @param {string} props.height - The height of the pie chart.
+ * @param {string} props.classNames - The class names for the pie chart.
+ * @param {ReactNode} props.children - The children components of the pie chart.
+ * @param {ChartData[]} props.data - The data for the pie chart.
+ * @returns {ReactElement} The rendered pie chart component.
+ */
+export const PieChartStructure = ({ ariaHidden, ariaLabel, canvasConfig = DefaultCanvasConfig, caption, children, classNames, data, dataTestId = 'pie-chart', halfChart, height = '100%', radius = '50%', role, tabIndex, width = '100%', ...props }) => {
+    // Destructure the canvas configuration to obtain width, height, and extra space.
+    const { extraSpace: canvasExtraSpace, height: canvasHeight, width: canvasWidth } = canvasConfig;
+    const parsedCanvasWidth = parseStringToNumberPx(canvasWidth);
+    const parsedCanvasHeight = parseStringToNumberPx(canvasHeight);
+    const parsedCanvasExtraSpace = canvasExtraSpace
+        ? parseStringToNumberPx(canvasExtraSpace)
+        : undefined;
+    // Build the viewBox string based on canvas dimensions and extra space.
+    const viewBox = buildViewBox(parsedCanvasWidth, parsedCanvasHeight, parsedCanvasExtraSpace);
+    const contextValue = useMemo(() => {
+        return buildPieContextValue({
+            canvasHeight: parsedCanvasHeight,
+            canvasWidth: parsedCanvasWidth,
+            children,
+            halfChart,
+        });
+    }, [canvasHeight, canvasWidth, halfChart]);
+    return (_jsx(SvgContainer, { ariaHidden: ariaHidden, ariaLabel: ariaLabel, caption: caption, className: classNames, dataTestId: dataTestId, height: height, radius: radius, role: role, tabIndex: tabIndex, viewBox: viewBox, width: width, ...props, children: _jsx(PieChartContext.Provider, { value: {
+                ...contextValue,
+                canvasHeight: parsedCanvasHeight,
+                canvasWidth: parsedCanvasWidth,
+                data,
+                dataTestId,
+                halfChart,
+            }, children: children }) }));
+};

package/dist/esm/charts/pieChart/utils/buildL.d.ts

@@ -0,0 +1,13 @@
+interface CoordinatesType {
+    x: number;
+    y: number;
+}
+interface BuildLProps {
+    singleStroke?: boolean;
+    innerRadius: number;
+    innerEnd: CoordinatesType;
+    center: CoordinatesType;
+}
+export declare const buildL: ({ center, innerEnd, innerRadius, singleStroke, }: BuildLProps) => string | undefined;
+export {};
+//# sourceMappingURL=buildL.d.ts.map

package/dist/esm/charts/pieChart/utils/buildL.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"buildL.d.ts","sourceRoot":"","sources":["../../../../../src/charts/pieChart/utils/buildL.ts"],"names":[],"mappings":"AAAA,UAAU,eAAe;IACvB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,UAAU,WAAW;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,eAAe,CAAC;IAC1B,MAAM,EAAE,eAAe,CAAC;CACzB;AAED,eAAO,MAAM,MAAM,GAAI,kDAKpB,WAAW,KAAG,MAAM,GAAG,SAQzB,CAAC"}

package/dist/esm/charts/pieChart/utils/buildL.js

@@ -0,0 +1,9 @@
+export const buildL = ({ center, innerEnd, innerRadius, singleStroke, }) => {
+    if (singleStroke) {
+        return undefined;
+    }
+    if (innerRadius > 0) {
+        return `L ${innerEnd.x},${innerEnd.y}`;
+    }
+    return `L ${center.x},${center.y}`;
+};

package/dist/esm/charts/pieChart/utils/calculatePoint.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Calculates the coordinates of a point on a circle given the center, radius, and angle.
+ * @param center - The coordinates of the center of the circle.
+ * @param radius - The radius of the circle.
+ * @param angle - The angle in radians.
+ * @returns The coordinates of the calculated point.
+ */
+export declare const calculatePoint: (center: {
+    x: number;
+    y: number;
+}, radius: number, angle: number) => {
+    x: number;
+    y: number;
+};
+//# sourceMappingURL=calculatePoint.d.ts.map

package/dist/esm/charts/pieChart/utils/calculatePoint.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"calculatePoint.d.ts","sourceRoot":"","sources":["../../../../../src/charts/pieChart/utils/calculatePoint.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,eAAO,MAAM,cAAc,GACzB,QAAQ;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,EAChC,QAAQ,MAAM,EACd,OAAO,MAAM,KACZ;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAKxB,CAAC"}

package/dist/esm/charts/pieChart/utils/calculatePoint.js

@@ -0,0 +1,13 @@
+/**
+ * Calculates the coordinates of a point on a circle given the center, radius, and angle.
+ * @param center - The coordinates of the center of the circle.
+ * @param radius - The radius of the circle.
+ * @param angle - The angle in radians.
+ * @returns The coordinates of the calculated point.
+ */
+export const calculatePoint = (center, radius, angle) => {
+    return {
+        x: center.x + radius * Math.cos(angle),
+        y: center.y + radius * Math.sin(angle),
+    };
+};

package/dist/esm/charts/pieChart/utils/calculateSegmentPath.d.ts

@@ -0,0 +1,34 @@
+import { type RotateDirection } from './rotationDirection';
+interface CalculateSegmanentPathProps {
+    value: number;
+    total: number;
+    startAngle: React.MutableRefObject<number>;
+    canvasWidth: number;
+    canvasHeight: number;
+    innerRadius: number;
+    gap: number;
+    customRadius?: number | null;
+    singleStroke: boolean;
+    halfChart?: boolean;
+    rotateDirection?: (typeof RotateDirection)[keyof typeof RotateDirection];
+}
+/**
+ * Calculates the SVG path for a segment of a pie chart.
+ *
+ * @param {Object} params - The parameters for the segment path calculation.
+ * @param {number} params.value - The value of the segment.
+ * @param {number} params.total - The total value of all segments.
+ * @param {Object} params.startAngle - The starting angle for the segment.
+ * @param {number} params.canvasWidth - The width of the canvas.
+ * @param {number} params.canvasHeight - The height of the canvas.
+ * @param {number} params.innerRadius - The inner radius of the segment.
+ * @param {number} params.gap - The gap between segments.
+ * @param {number} [params.customRadius] - A custom radius for the segment.
+ * @param {boolean} params.singleStroke - Whether the segment is a single stroke.
+ * @param {boolean} params.halfChart - Whether the chart is a half chart.
+ * @param {string} params.rotateDirection - The direction of rotation for the segment.
+ * @returns {string} The SVG path for the segment.
+ */
+export declare const calculateSegmentPath: ({ canvasHeight, canvasWidth, customRadius, gap, halfChart, innerRadius, rotateDirection, singleStroke, startAngle, total, value, }: CalculateSegmanentPathProps) => string;
+export {};
+//# sourceMappingURL=calculateSegmentPath.d.ts.map

package/dist/esm/charts/pieChart/utils/calculateSegmentPath.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"calculateSegmentPath.d.ts","sourceRoot":"","sources":["../../../../../src/charts/pieChart/utils/calculateSegmentPath.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,eAAe,EAAqB,MAAM,qBAAqB,CAAC;AAE9E,UAAU,2BAA2B;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,KAAK,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAC3C,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,GAAG,EAAE,MAAM,CAAC;IACZ,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,YAAY,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,eAAe,CAAC,EAAE,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,OAAO,eAAe,CAAC,CAAC;CAC1E;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,oBAAoB,GAAI,oIAYlC,2BAA2B,KAAG,MAyChC,CAAC"}

package/dist/esm/charts/pieChart/utils/calculateSegmentPath.js

@@ -0,0 +1,57 @@
+import { calculatePoint } from './calculatePoint';
+import { drawSegmentPath } from './drawSegmentPath';
+import { rotationDirection } from './rotationDirection';
+/**
+ * Calculates the SVG path for a segment of a pie chart.
+ *
+ * @param {Object} params - The parameters for the segment path calculation.
+ * @param {number} params.value - The value of the segment.
+ * @param {number} params.total - The total value of all segments.
+ * @param {Object} params.startAngle - The starting angle for the segment.
+ * @param {number} params.canvasWidth - The width of the canvas.
+ * @param {number} params.canvasHeight - The height of the canvas.
+ * @param {number} params.innerRadius - The inner radius of the segment.
+ * @param {number} params.gap - The gap between segments.
+ * @param {number} [params.customRadius] - A custom radius for the segment.
+ * @param {boolean} params.singleStroke - Whether the segment is a single stroke.
+ * @param {boolean} params.halfChart - Whether the chart is a half chart.
+ * @param {string} params.rotateDirection - The direction of rotation for the segment.
+ * @returns {string} The SVG path for the segment.
+ */
+export const calculateSegmentPath = ({ canvasHeight, canvasWidth, customRadius, gap, halfChart, innerRadius, rotateDirection, singleStroke, startAngle, total, value, }) => {
+    const segmentCanvasHeight = halfChart ? canvasHeight * 2 : canvasHeight;
+    const maxRadius = Math.min(canvasWidth, segmentCanvasHeight) / 2;
+    const radius = customRadius && customRadius < maxRadius ? customRadius : maxRadius;
+    const maxAngle = halfChart ? Math.PI : 2 * Math.PI; // ? 180deg : 360deg
+    const center = { x: canvasWidth / 2, y: halfChart ? canvasHeight : canvasHeight / 2 };
+    // Total * 2 is needed when a single stroke is used, to prevent the segment from being drawn as a full circle
+    const segmentTotal = singleStroke ? total * 2 : total;
+    const piePortion = (value * 100) / segmentTotal;
+    const angleEquivalent = (piePortion * maxAngle) / 100;
+    const gapAngle = gap / radius;
+    const { carryAngle, finalAngle, initialAngle } = rotationDirection({
+        angleEquivalent,
+        direction: rotateDirection,
+        gapAngle,
+        startAngle: startAngle.current,
+    });
+    startAngle.current = carryAngle;
+    const segmentAngle = (maxAngle * value) / segmentTotal;
+    const largeArcFlag = segmentAngle - gapAngle <= Math.PI ? '0' : '1';
+    const innerStart = calculatePoint(center, innerRadius, initialAngle);
+    const innerEnd = calculatePoint(center, innerRadius, finalAngle);
+    const outerStart = calculatePoint(center, radius, initialAngle);
+    const outerEnd = calculatePoint(center, radius, finalAngle);
+    return drawSegmentPath({
+        center,
+        innerEnd,
+        innerRadius,
+        innerStart,
+        largeArcFlag,
+        outerEnd,
+        outerStart,
+        radius,
+        rotateDirection,
+        singleStroke,
+    });
+};

package/dist/esm/charts/pieChart/utils/drawSegmentPath.d.ts

@@ -0,0 +1,20 @@
+import { RotateDirection } from './rotationDirection';
+interface CoordinatesType {
+    x: number;
+    y: number;
+}
+interface DrawSegmentPathProps {
+    center: CoordinatesType;
+    outerStart: CoordinatesType;
+    outerEnd: CoordinatesType;
+    innerStart: CoordinatesType;
+    innerEnd: CoordinatesType;
+    radius: number;
+    innerRadius: number;
+    singleStroke?: boolean;
+    largeArcFlag: string;
+    rotateDirection?: (typeof RotateDirection)[keyof typeof RotateDirection];
+}
+export declare const drawSegmentPath: ({ center, innerEnd, innerRadius, innerStart, largeArcFlag, outerEnd, outerStart, radius, rotateDirection, singleStroke, }: DrawSegmentPathProps) => string;
+export {};
+//# sourceMappingURL=drawSegmentPath.d.ts.map

package/dist/esm/charts/pieChart/utils/drawSegmentPath.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawSegmentPath.d.ts","sourceRoot":"","sources":["../../../../../src/charts/pieChart/utils/drawSegmentPath.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEtD,UAAU,eAAe;IACvB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,UAAU,oBAAoB;IAC5B,MAAM,EAAE,eAAe,CAAC;IACxB,UAAU,EAAE,eAAe,CAAC;IAC5B,QAAQ,EAAE,eAAe,CAAC;IAC1B,UAAU,EAAE,eAAe,CAAC;IAC5B,QAAQ,EAAE,eAAe,CAAC;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,OAAO,eAAe,CAAC,CAAC;CAC1E;AAED,eAAO,MAAM,eAAe,GAAI,2HAW7B,oBAAoB,KAAG,MA2CzB,CAAC"}

package/dist/esm/charts/pieChart/utils/drawSegmentPath.js

@@ -0,0 +1,41 @@
+import { buildL } from './buildL';
+import { RotateDirection } from './rotationDirection';
+export const drawSegmentPath = ({ center, innerEnd, innerRadius, innerStart, largeArcFlag, outerEnd, outerStart, radius, rotateDirection, singleStroke, }) => {
+    let M, A, L, m, AA, MR, AR, mR, AAR, Z;
+    if (rotateDirection === RotateDirection.CLOCKWISE) {
+        M = `M ${outerStart.x},${outerStart.y}`;
+        A = `A ${radius},${radius} 0 ${largeArcFlag} 1 ${outerEnd.x}, ${outerEnd.y}`;
+        L = buildL({ center, innerEnd: innerEnd, innerRadius, singleStroke });
+        m = singleStroke ? `M ${innerEnd.x},${innerEnd.y}` : undefined;
+        AA =
+            innerRadius > 0
+                ? `A ${innerRadius},${innerRadius} 0 ${largeArcFlag} 0 ${innerStart.x},${innerStart.y}`
+                : undefined;
+        // mirror rounder value, needed for a single circle
+        MR = `M ${outerStart.x},${outerStart.y}`;
+        mR = `M ${innerEnd.x},${innerEnd.y}`;
+        AR = `A ${radius},${radius} 0 ${largeArcFlag} 0 ${outerEnd.x},${outerEnd.y}`;
+        AAR = `A ${innerRadius},${innerRadius} 0 ${largeArcFlag} 1 ${innerStart.x},${innerStart.y}`;
+        Z = singleStroke ? undefined : 'Z';
+    }
+    else {
+        M = `M ${outerStart.x} ${outerStart.y}`;
+        A = `A ${radius},${radius} 0 ${largeArcFlag},0 ${outerEnd.x}, ${outerEnd.y}`;
+        L = buildL({ center, innerEnd, innerRadius, singleStroke });
+        m = singleStroke ? `M ${innerEnd.x},${innerEnd.y}` : undefined;
+        AA =
+            innerRadius > 0
+                ? `A ${innerRadius}, ${innerRadius} 0 ${largeArcFlag},1 ${innerStart.x},${innerStart.y}`
+                : undefined;
+        // mirror rounder value, needed for a single circle
+        MR = `M ${outerStart.x},${outerStart.y}`;
+        mR = `M ${innerEnd.x},${innerEnd.y}`;
+        AR = `A ${radius},${radius} 0 ${largeArcFlag} 1 ${outerEnd.x},${outerEnd.y}`;
+        AAR = `A ${innerRadius},${innerRadius} 0 ${largeArcFlag} 0 ${innerStart.x},${innerStart.y}`;
+        Z = singleStroke ? undefined : 'Z';
+    }
+    // values
+    const base = [M, A, L, m, AA, Z];
+    const mirror = singleStroke ? [MR, AR, mR, AAR] : [];
+    return base.concat(mirror).filter(Boolean).join(' ');
+};

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

@@ -0,0 +1,3 @@
+export { calculatePoint } from './calculatePoint';
+export { calculateSegmentPath } from './calculateSegmentPath';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/charts/pieChart/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/esm/charts/pieChart/utils/index.js

@@ -0,0 +1,2 @@
+export { calculatePoint } from './calculatePoint';
+export { calculateSegmentPath } from './calculateSegmentPath';

package/dist/esm/charts/pieChart/utils/rotationDirection.d.ts

@@ -0,0 +1,18 @@
+interface RotateDirectionReturnValues {
+    initialAngle: number;
+    finalAngle: number;
+    carryAngle: number;
+}
+interface RotateDirectionProps {
+    startAngle: number;
+    angleEquivalent: number;
+    gapAngle: number;
+    direction?: (typeof RotateDirection)[keyof typeof RotateDirection];
+}
+export declare const RotateDirection: {
+    readonly CLOCKWISE: "CLOCKWISE";
+    readonly COUNTER_CLOCKWISE: "COUNTER_CLOCKWISE";
+};
+export declare const rotationDirection: ({ angleEquivalent, direction, gapAngle, startAngle, }: RotateDirectionProps) => RotateDirectionReturnValues;
+export {};
+//# sourceMappingURL=rotationDirection.d.ts.map

package/dist/esm/charts/pieChart/utils/rotationDirection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rotationDirection.d.ts","sourceRoot":"","sources":["../../../../../src/charts/pieChart/utils/rotationDirection.ts"],"names":[],"mappings":"AAAA,UAAU,2BAA2B;IACnC,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,UAAU,oBAAoB;IAC5B,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,EAAE,MAAM,CAAC;IACxB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,OAAO,eAAe,CAAC,CAAC;CACpE;AAED,eAAO,MAAM,eAAe;;;CAGlB,CAAC;AAEX,eAAO,MAAM,iBAAiB,GAAI,uDAK/B,oBAAoB,KAAG,2BASzB,CAAC"}

package/dist/esm/charts/pieChart/utils/rotationDirection.js

@@ -0,0 +1,13 @@
+export const RotateDirection = {
+    CLOCKWISE: 'CLOCKWISE',
+    COUNTER_CLOCKWISE: 'COUNTER_CLOCKWISE',
+};
+export const rotationDirection = ({ angleEquivalent, direction, gapAngle, startAngle, }) => {
+    const clockDir = direction === RotateDirection.CLOCKWISE;
+    const initialAngle = clockDir ? startAngle + gapAngle / 2 : startAngle - gapAngle / 2;
+    const finalAngle = clockDir
+        ? startAngle + angleEquivalent - gapAngle / 2
+        : startAngle - angleEquivalent + gapAngle / 2;
+    const carryAngle = clockDir ? startAngle + angleEquivalent : startAngle - angleEquivalent;
+    return { carryAngle, finalAngle, initialAngle };
+};

package/dist/esm/components/axisChart/index.d.ts

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

package/dist/esm/components/axisChart/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/axisChart/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}

package/dist/esm/components/axisChart/index.js

@@ -0,0 +1,2 @@
+export * from './xAxis';
+export * from './yAxis';

package/dist/esm/components/axisChart/utils/filterLineProps/filterLineProps.d.ts

@@ -0,0 +1,18 @@
+import type { LineProps } from '../../../../components/line/line.types';
+/**
+ * Filters and extracts line-related properties from a given object.
+ *
+ * This utility function is designed to take a generic object `props` and extract from it
+ * properties that are relevant to rendering a line in SVG. It's particularly useful when
+ * you have a component that receives a mix of its own props and props that should be passed
+ * directly to a child `<Line>` component.
+ *
+ * @param props - The input object containing potential line properties.
+ * @returns An object containing only the properties relevant to a `<Line>` component.
+ *
+ * Note: The function uses a type assertion to treat the input `props` as any, allowing for
+ * flexible input types. However, this means the function assumes the caller has ensured that
+ * the input object contains properties compatible with `LineProps`.
+ */
+export declare const filterLineProps: <T>(props: T) => LineProps;
+//# sourceMappingURL=filterLineProps.d.ts.map

package/dist/esm/components/axisChart/utils/filterLineProps/filterLineProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"filterLineProps.d.ts","sourceRoot":"","sources":["../../../../../../src/components/axisChart/utils/filterLineProps/filterLineProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAE9D;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,eAAe,GAAI,CAAC,EAAE,OAAO,CAAC,KAAG,SAyC7C,CAAC"}

package/dist/esm/components/axisChart/utils/filterLineProps/filterLineProps.js

@@ -0,0 +1,38 @@
+/**
+ * Filters and extracts line-related properties from a given object.
+ *
+ * This utility function is designed to take a generic object `props` and extract from it
+ * properties that are relevant to rendering a line in SVG. It's particularly useful when
+ * you have a component that receives a mix of its own props and props that should be passed
+ * directly to a child `<Line>` component.
+ *
+ * @param props - The input object containing potential line properties.
+ * @returns An object containing only the properties relevant to a `<Line>` component.
+ *
+ * Note: The function uses a type assertion to treat the input `props` as any, allowing for
+ * flexible input types. However, this means the function assumes the caller has ensured that
+ * the input object contains properties compatible with `LineProps`.
+ */
+export const filterLineProps = (props) => {
+    const { ariaLabel, className, dataTestId, opacity, stroke, strokeDasharray, strokeDashoffset, strokeLinecap, strokeLinejoin, strokeOpacity, strokeWidth, style, tabIndex, transform, x1, x2, y1, y2, } = props;
+    return {
+        ariaLabel,
+        className,
+        dataTestId,
+        opacity,
+        stroke,
+        strokeDasharray,
+        strokeDashoffset,
+        strokeLinecap,
+        strokeLinejoin,
+        strokeOpacity,
+        strokeWidth,
+        style,
+        tabIndex,
+        transform,
+        x1,
+        x2,
+        y1,
+        y2,
+    };
+};

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

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

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

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

package/dist/esm/components/axisChart/utils/index.js

@@ -0,0 +1 @@
+export * from './filterLineProps/filterLineProps';

package/dist/esm/components/axisChart/xAxis/index.d.ts

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

package/dist/esm/components/axisChart/xAxis/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/axisChart/xAxis/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC"}

package/dist/esm/components/axisChart/xAxis/index.js

@@ -0,0 +1,2 @@
+export * from './xAxis';
+export * from './xAxis.types';

package/dist/esm/components/axisChart/xAxis/xAxis.d.ts

@@ -0,0 +1,11 @@
+import type { FC } from 'react';
+import type { XAxisProps } from './xAxis.types';
+/**
+ * Renders the X-axis of a chart, including tick marks and labels.
+ *
+ * This component dynamically calculates the position of each tick mark based on the provided `tickValues` and adjusts their positions to fit within the specified `canvasWidth`, taking into account any `extraSpace` margins.
+ *
+ * The component renders a `<g>` SVG element containing a `<Line>` component for the axis line and multiple `<Tick>` components for the tick marks and labels, adjusted for the canvas size and extra space.
+ */
+export declare const XAxis: FC<XAxisProps>;
+//# sourceMappingURL=xAxis.d.ts.map

package/dist/esm/components/axisChart/xAxis/xAxis.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"xAxis.d.ts","sourceRoot":"","sources":["../../../../../src/components/axisChart/xAxis/xAxis.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAUhC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD;;;;;;GAMG;AACH,eAAO,MAAM,KAAK,EAAE,EAAE,CAAC,UAAU,CAqDhC,CAAC"}

package/dist/esm/components/axisChart/xAxis/xAxis.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Line } from '../../../components/line/line';
+import { Tick } from '../../../components/tick/tick';
+import { DefaultCanvasConfig } from '../../../types/canvas.type';
+import { Positions } from '../../../types/position.enum';
+import { isNear } from '../../../utils/cursorNear/isNear';
+import { pickCustomAttributes } from '../../../utils/pickCustomAttributes/pickCustomAttributes';
+import { filterLineProps } from '../utils/filterLineProps/filterLineProps';
+/**
+ * Renders the X-axis of a chart, including tick marks and labels.
+ *
+ * This component dynamically calculates the position of each tick mark based on the provided `tickValues` and adjusts their positions to fit within the specified `canvasWidth`, taking into account any `extraSpace` margins.
+ *
+ * The component renders a `<g>` SVG element containing a `<Line>` component for the axis line and multiple `<Tick>` components for the tick marks and labels, adjusted for the canvas size and extra space.
+ */
+export const XAxis = ({ canvasHeight = DefaultCanvasConfig.height, canvasWidth = DefaultCanvasConfig.width, cursor = 0, extraSpace = {
+    bottom: 0,
+    left: 0,
+    right: 0,
+    top: 0,
+}, position = Positions.BOTTOM, showTickLines = false, tickLine, tickLineHover, tickText, tickValues = [], ...props }) => {
+    // Extract custom attributes for the g element
+    const customAttributes = pickCustomAttributes(props);
+    return (_jsxs("g", { ...customAttributes, children: [_jsx(Line, { ...filterLineProps(props) }), tickValues &&
+                tickValues.length > 0 &&
+                tickValues.map((tick, index) => {
+                    const overrideTickLine = isNear(cursor, tick.position) && tickLineHover;
+                    const tickLineProps = overrideTickLine ? { ...tickLine, ...tickLineHover } : tickLine;
+                    const rotate = tickText?.transform === 'rotate'
+                        ? `rotate(-30, ${tick.position}, ${tickText.y})`
+                        : undefined;
+                    return (_jsx(Tick, { showTickLines: showTickLines, tick: tick, tickLine: {
+                            ...tickLineProps,
+                            x1: tick.position,
+                            x2: tick.position,
+                        }, tickText: {
+                            ...tickText,
+                            transform: rotate,
+                            x: tick.position,
+                        } }, `${index.toString()}`));
+                })] }));
+};

package/dist/esm/components/axisChart/xAxis/xAxis.types.d.ts

@@ -0,0 +1,40 @@
+import type { ChartTextProps } from '../../../components/chartText/chartText.types';
+import type { LineProps } from '../../../components/line/line.types';
+import type { TickData } from '../../../components/tick/tick.types';
+import type { Positions } from '../../../types/position.enum';
+/**
+ * Defines the properties for the XAxis component.
+ *
+ * @property {Positions} [position] - Specifies the position of the X-axis on the chart. Can be 'TOP' or 'BOTTOM'.
+ * @property {TickData[]} [tickValues] - An array of tick values to be displayed on the X-axis. Each tick is represented by a `TickData` object.
+ * @property {boolean} [showTickLines=true] - Determines whether tick lines should be displayed.
+ * @property {LineProps} [tickLine] - Custom properties for styling the tick lines.
+ * @property {Omit<ChartTextProps, 'y' | 'x' | 'dx' | 'dy'> & { top?: number; bottom?: number; }} [tickText] - Custom properties for styling the tick text, excluding position properties ('y', 'x', 'dx', 'dy') which are managed by the component. Additional properties `top` and `bottom` can be used to adjust the vertical position of the tick text.
+ * @property {number} [canvasWidth] - The width of the canvas on which the X-axis is rendered. This is used to calculate positioning and scaling.
+ * @property {number} [canvasHeight] - The height of the canvas on which the X-axis is rendered. This is used to calculate positioning and scaling.
+ * @property {{ left?: number; right?: number; top?: number; bottom?: number; }} [extraSpace] - Optional extra spacing around the X-axis to adjust its position within the canvas. Each property specifies the amount of space to add on each side.
+ *
+ * Extends `LineProps` for basic line styling properties.
+ */
+export interface XAxisProps extends LineProps {
+    position?: (typeof Positions)[keyof typeof Positions];
+    tickValues?: TickData[];
+    showTickLines?: boolean;
+    tickLine?: LineProps;
+    tickLineHover?: LineProps;
+    tickText?: Omit<ChartTextProps, 'dx' | 'dy' | 'transform'> & {
+        top?: number;
+        bottom?: number;
+        transform?: 'rotate';
+    };
+    canvasWidth?: number;
+    canvasHeight?: number;
+    extraSpace?: {
+        left?: number;
+        right?: number;
+        top?: number;
+        bottom?: number;
+    };
+    cursor?: number;
+}
+//# sourceMappingURL=xAxis.types.d.ts.map

package/dist/esm/components/axisChart/xAxis/xAxis.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"xAxis.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/axisChart/xAxis/xAxis.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AAC7E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAC9D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAC7D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAEvD;;;;;;;;;;;;;GAaG;AACH,MAAM,WAAW,UAAW,SAAQ,SAAS;IAC3C,QAAQ,CAAC,EAAE,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,OAAO,SAAS,CAAC,CAAC;IACtD,UAAU,CAAC,EAAE,QAAQ,EAAE,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,IAAI,CAAC,cAAc,EAAE,IAAI,GAAG,IAAI,GAAG,WAAW,CAAC,GAAG;QAC3D,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,SAAS,CAAC,EAAE,QAAQ,CAAC;KACtB,CAAC;IAEF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,UAAU,CAAC,EAAE;QACX,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC;IAEF,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}

package/dist/esm/components/axisChart/xAxis/xAxis.types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/axisChart/yAxis/index.d.ts

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

package/dist/esm/components/axisChart/yAxis/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/axisChart/yAxis/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC"}

package/dist/esm/components/axisChart/yAxis/index.js

@@ -0,0 +1,2 @@
+export * from './yAxis';
+export * from './yAxis.types';

package/dist/esm/components/axisChart/yAxis/yAxis.d.ts

@@ -0,0 +1,8 @@
+import type { FC } from 'react';
+import type { YAxisProps } from './yAxis.types';
+/**
+ * Renders a Y-axis for a chart, including tick marks and labels.
+ * This component renders a `<g>` SVG element containing a `<Line>` component for the axis line and multiple `<Tick>` components for the tick marks and labels.
+ */
+export declare const YAxis: FC<YAxisProps>;
+//# sourceMappingURL=yAxis.d.ts.map

package/dist/esm/components/axisChart/yAxis/yAxis.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"yAxis.d.ts","sourceRoot":"","sources":["../../../../../src/components/axisChart/yAxis/yAxis.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAShC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD;;;GAGG;AACH,eAAO,MAAM,KAAK,EAAE,EAAE,CAAC,UAAU,CAgDhC,CAAC"}

package/dist/esm/components/axisChart/yAxis/yAxis.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Line } from '../../../components/line/line';
+import { Tick } from '../../../components/tick/tick';
+import { Positions } from '../../../types/position.enum';
+import { isNear } from '../../../utils/cursorNear/isNear';
+import { pickCustomAttributes } from '../../../utils/pickCustomAttributes/pickCustomAttributes';
+import { filterLineProps } from '../utils/filterLineProps/filterLineProps';
+/**
+ * Renders a Y-axis for a chart, including tick marks and labels.
+ * This component renders a `<g>` SVG element containing a `<Line>` component for the axis line and multiple `<Tick>` components for the tick marks and labels.
+ */
+export const YAxis = ({ canvasWidth, cursor = 0, extraSpace = {
+    bottom: 0,
+    left: 0,
+    right: 0,
+    top: 0,
+}, position = Positions.LEFT, showTickLines = true, tickLine, tickLineHover, tickText, tickValues = [], ...props }) => {
+    // Extract custom attributes for the g element
+    const customAttributes = pickCustomAttributes(props);
+    return (_jsxs("g", { ...customAttributes, children: [_jsx(Line, { ...filterLineProps(props) }), tickValues &&
+                tickValues.length > 0 &&
+                tickValues.map((tick, index) => {
+                    const overrideTickLine = isNear(cursor, tick.position) && tickLineHover;
+                    const tickLineProps = overrideTickLine ? { ...tickLine, ...tickLineHover } : tickLine;
+                    const rotate = tickText?.transform === 'rotate'
+                        ? `rotate(-30, ${tickText.x}, ${tick.position})`
+                        : undefined;
+                    return (_jsx(Tick, { showTickLines: showTickLines, tick: tick, tickLine: {
+                            ...tickLineProps,
+                            y1: tick.position,
+                            y2: tick.position,
+                        }, tickText: { ...tickText, transform: rotate, y: tick.position } }, `${index.toString()}`));
+                })] }));
+};