@kubit-ui-web/react-charts 0.1.0

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

@@ -0,0 +1,105 @@
+const addXProjection = (point, projection) => {
+    if (!projection) {
+        return point;
+    }
+    const isNegative = projection < 0;
+    const diff = Math.abs(projection);
+    const pointDiff = (point * diff) / 100;
+    return isNegative ? point - pointDiff : point + pointDiff;
+};
+const addYProjection = (point, svgHeight, projection) => {
+    if (!projection) {
+        return point;
+    }
+    const isNegative = projection < 0;
+    const diff = Math.abs(projection);
+    const ref = point === 0 ? svgHeight : point;
+    const pointDiff = (ref * diff) / 100;
+    return isNegative ? point + pointDiff : point - pointDiff;
+};
+/**
+ * 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 const getProjection = ({ curved, lowerProjection, points, svgHeight, upperProjection, }) => {
+    const hasProjections = upperProjection || lowerProjection;
+    if (points.length === 0 && !hasProjections) {
+        return { shapePath: '' };
+    }
+    const [firstPoint, ...remainingPoints] = points;
+    const startPath = `M ${firstPoint[0]} ${firstPoint[1]}`;
+    let shapePath = startPath;
+    let upPath = upperProjection ? startPath : undefined;
+    let downPath = lowerProjection ? startPath : undefined;
+    const upperData = [];
+    const lowerData = [];
+    remainingPoints.forEach(([x, y]) => {
+        const lineUp = upperProjection
+            ? [addXProjection(x, upperProjection.x), addYProjection(y, svgHeight, upperProjection.y)]
+            : [x, y];
+        const lineDown = lowerProjection
+            ? [
+                addXProjection(x, -(lowerProjection.x ?? 0)),
+                addYProjection(y, svgHeight, -(lowerProjection.y ?? 0)),
+            ]
+            : [x, y];
+        upperData.push(lineUp);
+        lowerData.push(lineDown);
+    });
+    const hasAllProjections = upperProjection && lowerProjection;
+    const combinedData = hasAllProjections
+        ? [...upperData, remainingPoints.at(-1), ...lowerData.reverse(), firstPoint]
+        : [...upperData, ...lowerData.reverse(), firstPoint];
+    if (curved) {
+        shapePath += combinedData.reduce((data, point, i) => {
+            const start = i === 0 ? firstPoint : combinedData[i - 1];
+            const [x1, y1] = start;
+            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}`;
+        }, '');
+        if (upPath) {
+            upPath += upperData.reduce((data, point, i) => {
+                const start = i === 0 ? firstPoint : upperData[i - 1];
+                const [x1, y1] = start;
+                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}`;
+            }, '');
+        }
+        if (downPath) {
+            downPath += lowerData.reverse().reduce((data, point, i) => {
+                const start = i === 0 ? firstPoint : lowerData[i - 1];
+                const [x1, y1] = start;
+                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 {
+        shapePath += combinedData.reduce((data, point) => `${data} L ${point?.[0]} ${point?.[1]}`, '');
+        if (upPath) {
+            upPath += upperData.reduce((data, point) => `${data} L ${point[0]} ${point[1]}`, '');
+        }
+        if (downPath) {
+            downPath += lowerData
+                .reverse()
+                .reduce((data, point) => `${data} L ${point[0]} ${point[1]}`, '');
+        }
+    }
+    return { downPath, shapePath, upPath };
+};

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

@@ -0,0 +1,17 @@
+import type { IDataPoint } from '../lineChart.type';
+/**
+ * Extracts the maximum value from the data points that do not correspond to the provided key.
+ * The maximum value is rounded up to the nearest multiple of 10.
+ * @param data - The data points.
+ * @param key - The key to exclude in the data.
+ * @returns The rounded maximum value.
+ */
+export declare const getRoundedMaxValue: (data: IDataPoint[], key: string) => number;
+/**
+ * Returns an array of rounded maximum values for each yKey in the given data.
+ * @param data - The array of data points.
+ * @param xKey - The xKey used for filtering the data.
+ * @returns An array of rounded maximum values.
+ */
+export declare const getYKeyRoundMaxValue: (data: IDataPoint[], xKey: string) => number[];
+//# sourceMappingURL=getRoundedMaxValue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"getRoundedMaxValue.d.ts","sourceRoot":"","sources":["../../../../../src/charts/lineChart/utils/getRoundedMaxValue.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAEpD;;;;;;GAMG;AACH,eAAO,MAAM,kBAAkB,GAAI,MAAM,UAAU,EAAE,EAAE,KAAK,MAAM,KAAG,MASpE,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB,GAAI,MAAM,UAAU,EAAE,EAAE,MAAM,MAAM,KAAG,MAAM,EAM7E,CAAC"}

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

@@ -0,0 +1,25 @@
+/**
+ * Extracts the maximum value from the data points that do not correspond to the provided key.
+ * The maximum value is rounded up to the nearest multiple of 10.
+ * @param data - The data points.
+ * @param key - The key to exclude in the data.
+ * @returns The rounded maximum value.
+ */
+export const getRoundedMaxValue = (data, key) => {
+    const values = data.flatMap(point => Object.keys(point)
+        .filter(k => k !== key && typeof point[k] === 'number')
+        .map(k => point[k]));
+    const maxNumber = Math.max(...values);
+    return Math.ceil(maxNumber / 10) * 10;
+};
+/**
+ * Returns an array of rounded maximum values for each yKey in the given data.
+ * @param data - The array of data points.
+ * @param xKey - The xKey used for filtering the data.
+ * @returns An array of rounded maximum values.
+ */
+export const getYKeyRoundMaxValue = (data, xKey) => {
+    return data.flatMap(point => Object.keys(point)
+        .filter(k => k !== xKey && typeof point[k] === 'number')
+        .map(k => point[k]));
+};

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

@@ -0,0 +1,17 @@
+interface HandlerCoord {
+    x: string;
+    y: string;
+}
+interface HandleNodesFocusReturn {
+    mount: () => void;
+    unmount: () => void;
+}
+interface HandleNodesFocusProps {
+    ref: ParentNode;
+    nodes: SVGSVGElement[];
+    data: HandlerCoord[];
+    getNodeFocusInfo?: (info: HandlerCoord) => void;
+}
+export declare const handleNodesFocus: ({ data, getNodeFocusInfo, nodes, ref, }: HandleNodesFocusProps) => HandleNodesFocusReturn;
+export {};
+//# sourceMappingURL=handleNodesFocus.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"handleNodesFocus.d.ts","sourceRoot":"","sources":["../../../../../src/charts/lineChart/utils/handleNodesFocus.ts"],"names":[],"mappings":"AAAA,UAAU,YAAY;IACpB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,UAAU,sBAAsB;IAC9B,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,UAAU,qBAAqB;IAC7B,GAAG,EAAE,UAAU,CAAC;IAChB,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,IAAI,EAAE,YAAY,EAAE,CAAC;IACrB,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;CACjD;AAED,eAAO,MAAM,gBAAgB,GAAI,yCAK9B,qBAAqB,KAAG,sBA8C1B,CAAC"}

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

@@ -0,0 +1,45 @@
+export const handleNodesFocus = ({ data, getNodeFocusInfo, nodes, ref, }) => {
+    let refFocused = false;
+    let currentNode = undefined;
+    const g = ref.querySelector('[data-draw]');
+    //* callbacks
+    const handleKeyDown = (e) => {
+        if (refFocused) {
+            if (e.key === 'ArrowRight') {
+                currentNode =
+                    currentNode === undefined || currentNode === nodes.length - 1 ? 0 : currentNode + 1;
+                nodes[currentNode].focus();
+                getNodeFocusInfo?.(data[currentNode]);
+            }
+            else if (e.key === 'ArrowLeft') {
+                currentNode =
+                    currentNode === undefined || currentNode === 0 ? nodes.length - 1 : currentNode - 1;
+                nodes[currentNode].focus();
+                getNodeFocusInfo?.(data[currentNode]);
+            }
+        }
+    };
+    const handleFocusin = () => {
+        refFocused = true;
+    };
+    const handleFocusout = () => {
+        refFocused = false;
+    };
+    const handleFocus = () => {
+        currentNode = undefined;
+    };
+    //* listeners
+    const mount = () => {
+        ref.addEventListener('focusin', handleFocusin);
+        ref.addEventListener('focusout', handleFocusout);
+        g?.addEventListener('focus', handleFocus);
+        window.addEventListener('keydown', (e) => handleKeyDown(e));
+    };
+    const unmount = () => {
+        ref.removeEventListener('focusin', handleFocusin);
+        ref.removeEventListener('focusout', handleFocusout);
+        g?.removeEventListener('focus', handleFocus);
+        window.removeEventListener('keydown', (e) => handleKeyDown(e));
+    };
+    return { mount, unmount };
+};

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

@@ -0,0 +1,7 @@
+export { findSurroundingNumber, findClosestNumber } from './findSurroundingNumber';
+export { getDataValues } from './getDataValues';
+export { getExtraSpacing } from './getExtraSpacing';
+export { getPathData } from './getPathData';
+export { getProjection } from './getProjection';
+export { getRoundedMaxValue, getYKeyRoundMaxValue } from './getRoundedMaxValue';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/charts/lineChart/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AACnF,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC"}

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

@@ -0,0 +1,6 @@
+export { findSurroundingNumber, findClosestNumber } from './findSurroundingNumber';
+export { getDataValues } from './getDataValues';
+export { getExtraSpacing } from './getExtraSpacing';
+export { getPathData } from './getPathData';
+export { getProjection } from './getProjection';
+export { getRoundedMaxValue, getYKeyRoundMaxValue } from './getRoundedMaxValue';

package/dist/esm/charts/pieChart/context/buildPieContextValue.d.ts

@@ -0,0 +1,16 @@
+import type { PieChartChildrenType, PieChartContextType } from '../pieChart.type';
+interface BuildPieContextValueProps {
+    children: PieChartChildrenType;
+    canvasWidth: number;
+    canvasHeight: number;
+    halfChart?: boolean;
+}
+/**
+ * Builds the context value for the PieChart component.
+ *
+ * @param {BuildPieContextValueProps} props - The props for building the context value.
+ * @returns {Omit<PieChartContextType, 'canvasHeight' | 'canvasWidth' | 'data'>} The context value.
+ */
+export declare const buildPieContextValue: ({ canvasHeight, canvasWidth, children, halfChart, }: BuildPieContextValueProps) => Omit<PieChartContextType, "canvasHeight" | "canvasWidth" | "data">;
+export {};
+//# sourceMappingURL=buildPieContextValue.d.ts.map

package/dist/esm/charts/pieChart/context/buildPieContextValue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"buildPieContextValue.d.ts","sourceRoot":"","sources":["../../../../../src/charts/pieChart/context/buildPieContextValue.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAElF,UAAU,yBAAyB;IACjC,QAAQ,EAAE,oBAAoB,CAAC;IAC/B,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;;;GAKG;AAEH,eAAO,MAAM,oBAAoB,GAAI,qDAKlC,yBAAyB,KAAG,IAAI,CACjC,mBAAmB,EACnB,cAAc,GAAG,aAAa,GAAG,MAAM,CAsCxC,CAAC"}

package/dist/esm/charts/pieChart/context/buildPieContextValue.js

@@ -0,0 +1,45 @@
+import { Children, isValidElement } from 'react';
+import { parseStringToNumberPx } from '../../../utils/parseStringToNumberPx.ts/parseStringToNumberPx';
+import { PieChartPath } from '../fragments/pieChartPath';
+/**
+ * Builds the context value for the PieChart component.
+ *
+ * @param {BuildPieContextValueProps} props - The props for building the context value.
+ * @returns {Omit<PieChartContextType, 'canvasHeight' | 'canvasWidth' | 'data'>} The context value.
+ */
+export const buildPieContextValue = ({ canvasHeight, canvasWidth, children, halfChart, }) => {
+    // Use the min inner radious of the paths to calculate the size
+    let minRadius = undefined;
+    let foreignObjectSize = undefined;
+    Children.forEach(children, (child) => {
+        if (!isValidElement(child)) {
+            return;
+        }
+        if (child.type === PieChartPath) {
+            const { innerRadius } = child.props;
+            if (!innerRadius) {
+                return;
+            }
+            const parsedInnerRadius = parseStringToNumberPx(innerRadius);
+            if (!minRadius || parsedInnerRadius < minRadius) {
+                minRadius = parsedInnerRadius;
+            }
+        }
+    });
+    if (minRadius) {
+        foreignObjectSize = minRadius * 2;
+    }
+    const sizeFixed = foreignObjectSize ?? 0;
+    const height = halfChart ? sizeFixed / 2 : sizeFixed;
+    const width = sizeFixed;
+    const x = canvasWidth / 2;
+    const y = halfChart ? canvasHeight : canvasHeight / 2;
+    return {
+        foreignObject: {
+            height,
+            width,
+            x: x - width / 2,
+            y: halfChart ? y - height : y - height / 2,
+        },
+    };
+};

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

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

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

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

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

@@ -0,0 +1,2 @@
+export { buildPieContextValue } from './buildPieContextValue';
+export { PieChartContext } from './pieChartContext';

package/dist/esm/charts/pieChart/context/pieChartContext.d.ts

@@ -0,0 +1,3 @@
+import type { PieChartContextType } from '../pieChart.type';
+export declare const PieChartContext: import("react").Context<PieChartContextType>;
+//# sourceMappingURL=pieChartContext.d.ts.map

package/dist/esm/charts/pieChart/context/pieChartContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pieChartContext.d.ts","sourceRoot":"","sources":["../../../../../src/charts/pieChart/context/pieChartContext.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAE5D,eAAO,MAAM,eAAe,8CAA2C,CAAC"}

package/dist/esm/charts/pieChart/context/pieChartContext.js

@@ -0,0 +1,2 @@
+import { createContext } from 'react';
+export const PieChartContext = createContext({});

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

@@ -0,0 +1,3 @@
+export { PieChartForeign } from './pieChartForeign';
+export { PieChartPath } from './pieChartPath';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/charts/pieChart/fragments/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC"}

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

@@ -0,0 +1,2 @@
+export { PieChartForeign } from './pieChartForeign';
+export { PieChartPath } from './pieChartPath';

package/dist/esm/charts/pieChart/fragments/pieChartForeign.d.ts

@@ -0,0 +1,4 @@
+import { type FC } from 'react';
+import type { ForeignObjectProps } from '../../../components/foreignObject/foreignObject.types';
+export declare const PieChartForeign: FC<ForeignObjectProps>;
+//# sourceMappingURL=pieChartForeign.d.ts.map

package/dist/esm/charts/pieChart/fragments/pieChartForeign.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pieChartForeign.d.ts","sourceRoot":"","sources":["../../../../../src/charts/pieChart/fragments/pieChartForeign.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,EAAiC,MAAM,OAAO,CAAC;AAG/D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,gDAAgD,CAAC;AAIzF,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,kBAAkB,CAuBlD,CAAC"}

package/dist/esm/charts/pieChart/fragments/pieChartForeign.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext } from 'react';
+import { ForeignObject } from '../../../components/foreignObject/foreignObject';
+import { PieChartContext } from '../context/pieChartContext';
+export const PieChartForeign = ({ children, dataTestId: childDataTestId, height: childHeight, width: childWidth, x: childX, y: childY, ...props }) => {
+    const { dataTestId: canvasDataTestId, foreignObject } = useContext(PieChartContext);
+    const width = !childWidth && foreignObject?.width ? foreignObject.width : childWidth;
+    const height = !childHeight && foreignObject?.height ? foreignObject.height : childHeight;
+    const x = !childX && foreignObject?.x ? foreignObject.x : childX;
+    const y = !childY && foreignObject?.y ? foreignObject.y : childY;
+    const dataTestId = !childDataTestId && canvasDataTestId ? `${canvasDataTestId}-foreign-object` : childDataTestId;
+    return (_jsx(ForeignObject, { ...props, dataTestId: dataTestId, height: height, width: width, x: x, y: y, children: children }));
+};

package/dist/esm/charts/pieChart/fragments/pieChartPath.d.ts

@@ -0,0 +1,15 @@
+import { type FC } from 'react';
+import type { PathProps } from '../../../components/path/path.types';
+/**
+ * Renders the path for a pie chart.
+ *
+ * @component
+ * @param {PathProps} props - The props for the PieChartPath component.
+ * @param {string} props.dataKey - The key for the data to be rendered.
+ * @param {number} props.innerRadius - The inner radius of the pie chart.
+ * @param {number} props.gap - The gap between segments in the pie chart.
+ * @param {number} props.radius - The radius of the pie chart.
+ * @returns {ReactElement} The rendered PieChartPath component.
+ */
+export declare const PieChartPath: FC<PathProps>;
+//# sourceMappingURL=pieChartPath.d.ts.map

package/dist/esm/charts/pieChart/fragments/pieChartPath.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pieChartPath.d.ts","sourceRoot":"","sources":["../../../../../src/charts/pieChart/fragments/pieChartPath.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,EAAyC,MAAM,OAAO,CAAC;AAEvE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAM9D;;;;;;;;;;GAUG;AACH,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,SAAS,CAyCtC,CAAC"}

package/dist/esm/charts/pieChart/fragments/pieChartPath.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import { useContext, useRef } from 'react';
+import { parseStringToNumberPx } from '../../../utils/parseStringToNumberPx.ts/parseStringToNumberPx';
+import { PieChartContext } from '../context/pieChartContext';
+import { PieChartSegment } from './pieChartSegment';
+/**
+ * Renders the path for a pie chart.
+ *
+ * @component
+ * @param {PathProps} props - The props for the PieChartPath component.
+ * @param {string} props.dataKey - The key for the data to be rendered.
+ * @param {number} props.innerRadius - The inner radius of the pie chart.
+ * @param {number} props.gap - The gap between segments in the pie chart.
+ * @param {number} props.radius - The radius of the pie chart.
+ * @returns {ReactElement} The rendered PieChartPath component.
+ */
+export const PieChartPath = ({ dataKey, fill, gap, innerRadius, radius, ...props }) => {
+    const key = String(dataKey);
+    const { canvasHeight, canvasWidth, data, dataTestId, halfChart } = useContext(PieChartContext);
+    const chartInitAngle = halfChart ? 0 : -Math.PI / 2; // ? 0deg : -90deg
+    const startAngle = useRef(chartInitAngle);
+    const total = data[key]?.reduce((acc, group) => acc + group.value, 0);
+    const singleStroke = data[key]?.length === 1;
+    const parsedInnerRadius = innerRadius ? parseStringToNumberPx(innerRadius) : undefined;
+    const parsedRadius = radius ? parseStringToNumberPx(radius) : undefined;
+    return data[key]?.length ? (_jsx("g", { children: data[key].map((group, index) => (_createElement(PieChartSegment, { ...props, ...group, key: `${index.toString()}`, canvasHeight: canvasHeight, canvasWidth: canvasWidth, color: group.color || fill, dataTestId: `${dataTestId}path-${index}`, gap: gap, halfChart: halfChart, innerRadius: parsedInnerRadius, radius: parsedRadius, singleStroke: singleStroke, startAngle: startAngle, total: total }))) })) : (_jsx(_Fragment, {}));
+};

package/dist/esm/charts/pieChart/fragments/pieChartSegment.d.ts

@@ -0,0 +1,18 @@
+import type { PieChartSegmentProps } from '../pieChart.type';
+/**
+ * Renders a segment of a pie chart.
+ *
+ * @param total - The total value of the pie chart.
+ * @param startAngle - The starting angle of the segment.
+ * @param canvasWidth - The width of the canvas.
+ * @param canvasHeight - The height of the canvas.
+ * @param innerRadius - The inner radius of the segment.
+ * @param gap - The gap between segments.
+ * @param radius - The radius of the segment.
+ * @param value - The value of the segment.
+ * @param color - The color of the segment (default: 'blue').
+ * @param props - Additional props to pass to the Path component.
+ * @returns A React element representing the pie chart segment.
+ */
+export declare const PieChartSegment: React.FC<PieChartSegmentProps>;
+//# sourceMappingURL=pieChartSegment.d.ts.map

package/dist/esm/charts/pieChart/fragments/pieChartSegment.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pieChartSegment.d.ts","sourceRoot":"","sources":["../../../../../src/charts/pieChart/fragments/pieChartSegment.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAG7D;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAmC1D,CAAC"}

package/dist/esm/charts/pieChart/fragments/pieChartSegment.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Path } from '../../../components/path/path';
+import { calculateSegmentPath } from '../utils/calculateSegmentPath';
+/**
+ * Renders a segment of a pie chart.
+ *
+ * @param total - The total value of the pie chart.
+ * @param startAngle - The starting angle of the segment.
+ * @param canvasWidth - The width of the canvas.
+ * @param canvasHeight - The height of the canvas.
+ * @param innerRadius - The inner radius of the segment.
+ * @param gap - The gap between segments.
+ * @param radius - The radius of the segment.
+ * @param value - The value of the segment.
+ * @param color - The color of the segment (default: 'blue').
+ * @param props - Additional props to pass to the Path component.
+ * @returns A React element representing the pie chart segment.
+ */
+export const PieChartSegment = ({ canvasHeight, canvasWidth, color = 'blue', gap, halfChart, innerRadius, radius, singleStroke, startAngle, total, value, ...props }) => {
+    const pathData = calculateSegmentPath({
+        canvasHeight,
+        canvasWidth,
+        customRadius: radius,
+        gap: gap,
+        halfChart,
+        innerRadius: innerRadius,
+        singleStroke,
+        startAngle,
+        total,
+        value,
+    });
+    return (_jsx(Path, { ...props, d: pathData, dataValue: value, fill: color }));
+};

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

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

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

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

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

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

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

@@ -0,0 +1,7 @@
+declare const PieChart: import("react").FC<import("./pieChart.type").PieChartProps> & {
+    Foreign: import("react").FC<import("../..").ForeignObjectProps>;
+    Path: import("react").FC<import("../..").PathProps>;
+};
+export { PieChart };
+export * from './pieChart.type';
+//# sourceMappingURL=pieChart.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pieChart.d.ts","sourceRoot":"","sources":["../../../../src/charts/pieChart/pieChart.ts"],"names":[],"mappings":"AAIA,QAAA,MAAM,QAAQ;;;CAGZ,CAAC;AAEH,OAAO,EAAE,QAAQ,EAAE,CAAC;AAEpB,cAAc,iBAAiB,CAAC"}

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

@@ -0,0 +1,9 @@
+import { PieChartForeign } from './fragments/pieChartForeign';
+import { PieChartPath } from './fragments/pieChartPath';
+import { PieChartStructure } from './pieChartStructure';
+const PieChart = Object.assign(PieChartStructure, {
+    Foreign: PieChartForeign,
+    Path: PieChartPath,
+});
+export { PieChart };
+export * from './pieChart.type';

package/dist/esm/charts/pieChart/pieChart.type.d.ts

@@ -0,0 +1,65 @@
+import type { ReactElement, ReactNode } from 'react';
+import type { PathProps } from '../../components/path/path.types';
+import type { CanvasConfig } from '../../types/canvas.type';
+interface Group {
+    name: string;
+    value: number;
+    color?: string;
+}
+export interface DataItem {
+    [key: string]: Group[];
+}
+export type PieChartChildrenType = ReactNode | ReactElement<PathProps>[];
+export interface PieChartProps {
+    role?: string;
+    ariaLabel?: string;
+    ariaHidden?: boolean;
+    caption?: string;
+    canvasConfig?: CanvasConfig;
+    dataTestId?: string;
+    width?: string;
+    height?: string;
+    radius?: string;
+    children?: PieChartChildrenType;
+    data: DataItem;
+    classNames?: string;
+    segmentClassNames?: string;
+    tabIndex?: number;
+    halfChart?: boolean;
+    onClick?: (event: React.MouseEvent<SVGElement, MouseEvent>) => void;
+    onDoubleClick?: (eevent: React.MouseEvent<SVGElement, MouseEvent>) => void;
+    onMouseEnter?: (event: React.MouseEvent<SVGElement, MouseEvent>) => void;
+    onMouseLeave?: (event: React.MouseEvent<SVGElement, MouseEvent>) => void;
+    onFocus?: (event: React.FocusEvent<SVGElement>) => void;
+    onBlur?: (event: React.FocusEvent<SVGElement>) => void;
+    onKeyDown?: (event: React.KeyboardEvent<SVGSVGElement>) => void;
+    onKeyUp?: (event: React.KeyboardEvent<SVGSVGElement>) => void;
+}
+export interface PieChartContextType {
+    foreignObject?: {
+        height?: number;
+        width?: number;
+        x: number;
+        y: number;
+    };
+    canvasWidth: number;
+    canvasHeight: number;
+    data: DataItem;
+    dataTestId?: string;
+    halfChart?: boolean;
+}
+export type PieChartSegmentProps = PathProps & {
+    total: number;
+    startAngle: React.MutableRefObject<number>;
+    canvasWidth: number;
+    canvasHeight: number;
+    innerRadius?: number;
+    gap?: number;
+    radius?: number;
+    value: number;
+    color?: string;
+    singleStroke: boolean;
+    halfChart?: boolean;
+};
+export {};
+//# sourceMappingURL=pieChart.type.d.ts.map

package/dist/esm/charts/pieChart/pieChart.type.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pieChart.type.d.ts","sourceRoot":"","sources":["../../../../src/charts/pieChart/pieChart.type.ts"],"names":[],"mappings":"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"}

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

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

package/dist/esm/charts/pieChart/pieChartStructure.d.ts

@@ -0,0 +1,34 @@
+import { type FC } from 'react';
+import type { PieChartProps } from './pieChart.type';
+/**
+ * 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 declare const PieChartStructure: FC<PieChartProps>;
+//# sourceMappingURL=pieChartStructure.d.ts.map

package/dist/esm/charts/pieChart/pieChartStructure.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pieChartStructure.d.ts","sourceRoot":"","sources":["../../../../src/charts/pieChart/pieChartStructure.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,EAA8B,MAAM,OAAO,CAAC;AAS5D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAErD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,aAAa,CAkE/C,CAAC"}