@kubit-ui-web/react-charts 1.4.0 → 1.5.1

package/dist/cjs/charts/barChart/fragments/barChartPath.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"barChartPath.d.ts","sourceRoot":"","sources":["../../../../../src/charts/barChart/fragments/barChartPath.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAG1D;;;;;GAKG;AAEH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA8EpD,CAAC"}
+{"version":3,"file":"barChartPath.d.ts","sourceRoot":"","sources":["../../../../../src/charts/barChart/fragments/barChartPath.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAG1D;;;;;GAKG;AAEH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAkFpD,CAAC"}

package/dist/cjs/charts/barChart/fragments/barChartPath.js

@@ -22,31 +22,36 @@ export const BarChartPath = ({ barConfig, dataIdx, dataKey, order, ...props }) =
     const dataItem = context.data[dataIdx];
     const xData = dataItem?.[xKey];
     const yData = dataItem?.[yKey];
+    // Extract values for stable dependencies
+    const firstDataItem = context.data[0];
+    const hasDataKey = firstDataItem
+        ? Object.prototype.hasOwnProperty.call(firstDataItem, dataKey)
+        : false;
+    const hasData = context.data.length > 0;
+    const numericYData = Number(yData);
     // Path error validations - only validates the data for this specific bar
     useEffect(() => {
         // Validate dataKey exists in dataset
-        if (context.data.length > 0 &&
-            !Object.prototype.hasOwnProperty.call(context.data[0], dataKey)) {
+        if (hasData && !hasDataKey) {
             addError?.('BAR_CHART_PATH_ERROR', {
                 error: buildDataKeyNotFoundError(dataKey),
             });
             return; // Stop validation if dataKey doesn't exist
         }
         // Validate bar value is numeric
-        const numericValue = Number(yData);
-        if (isNaN(numericValue)) {
+        if (isNaN(numericYData)) {
             addError?.('BAR_CHART_PATH_ERROR', {
                 error: buildBarValueError(yData, dataKey),
             });
             return;
         }
         // Validate negative values
-        if (numericValue < 0) {
+        if (numericYData < 0) {
             addError?.('BAR_CHART_PATH_ERROR', {
-                error: buildBarNegativeValueError(numericValue, dataKey),
+                error: buildBarNegativeValueError(numericYData, dataKey),
             });
         }
-    }, [addError, context.data, dataKey, yData]);
+    }, [dataKey, hasData, hasDataKey, numericYData, yData]);
     const xPoint = getPoints(xTickValues, [String(xData)], true)[0];
     const yPoint = getPoints(yTickValues, [String(yData)])[0];
     const points = isVertical

package/dist/cjs/charts/barChart/fragments/barChartSeparator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"barChartSeparator.d.ts","sourceRoot":"","sources":["../../../../../src/charts/barChart/fragments/barChartSeparator.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,EAA4C,MAAM,OAAO,CAAC;AAY1E,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAG/D,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CA0FxD,CAAC"}
+{"version":3,"file":"barChartSeparator.d.ts","sourceRoot":"","sources":["../../../../../src/charts/barChart/fragments/barChartSeparator.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,EAA4C,MAAM,OAAO,CAAC;AAY1E,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAG/D,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CA0GxD,CAAC"}

package/dist/cjs/charts/barChart/fragments/barChartSeparator.js

@@ -5,13 +5,26 @@ import { getPoints } from '../../../utils/getPoints/getPoints';
 import { BarChartContext } from '../context/barChartContext';
 export const BarChartSeparator = ({ areaSeparator, dataTestId, rightSeparator, topSeparator, xBreakAxis, yBreakAxis, }) => {
     const { addError, crossXAxis, crossYAxis, xAxisCoordinates, yAxisCoordinates } = useContext(BarChartContext);
+    // Extract tick values for stable dependencies
+    const xTickValues = xAxisCoordinates.tickValues;
+    const yTickValues = yAxisCoordinates.tickValues;
+    // Pre-calculate numeric values for dependencies
+    const xBreakNumeric = xBreakAxis !== undefined
+        ? typeof xBreakAxis === 'string'
+            ? parseFloat(xBreakAxis)
+            : xBreakAxis
+        : undefined;
+    const yBreakNumeric = yBreakAxis !== undefined
+        ? typeof yBreakAxis === 'string'
+            ? parseFloat(yBreakAxis)
+            : yBreakAxis
+        : undefined;
     // Separator error validations
     useEffect(() => {
         // xBreakAxis validation
         if (xBreakAxis !== undefined) {
-            const xValues = xAxisCoordinates.tickValues.map(tick => tick.value);
-            const xBreakNumeric = typeof xBreakAxis === 'string' ? parseFloat(xBreakAxis) : xBreakAxis;
-            if (isNaN(xBreakNumeric)) {
+            const xValues = xTickValues.map(tick => tick.value);
+            if (xBreakNumeric === undefined || isNaN(xBreakNumeric)) {
                 addError?.('BAR_CHART_SEPARATOR_ERROR', {
                     error: buildSeparatorXBreakAxisError(xBreakAxis),
                 });
@@ -28,9 +41,8 @@ export const BarChartSeparator = ({ areaSeparator, dataTestId, rightSeparator, t
         }
         // yBreakAxis validation
         if (yBreakAxis !== undefined) {
-            const yValues = yAxisCoordinates.tickValues.map(tick => tick.value);
-            const yBreakNumeric = typeof yBreakAxis === 'string' ? parseFloat(yBreakAxis) : yBreakAxis;
-            if (isNaN(yBreakNumeric)) {
+            const yValues = yTickValues.map(tick => tick.value);
+            if (yBreakNumeric === undefined || isNaN(yBreakNumeric)) {
                 addError?.('BAR_CHART_SEPARATOR_ERROR', {
                     error: buildSeparatorYBreakAxisError(yBreakAxis),
                 });
@@ -45,7 +57,7 @@ export const BarChartSeparator = ({ areaSeparator, dataTestId, rightSeparator, t
                 }
             }
         }
-    }, [xBreakAxis, yBreakAxis, xAxisCoordinates.tickValues, yAxisCoordinates.tickValues, addError]);
+    }, [xBreakAxis, xBreakNumeric, xTickValues, yBreakAxis, yBreakNumeric, yTickValues]);
     if (!topSeparator && !rightSeparator && !areaSeparator) {
         return _jsx(_Fragment, {});
     }
@@ -64,7 +76,7 @@ export const BarChartSeparator = ({ areaSeparator, dataTestId, rightSeparator, t
                 error: buildError(BuildError.LINE_CHART_SEPARATOR_INVALID_COORDINATES),
             });
         }
-    }, [xStart, xEnd, yStart, yEnd, addError]);
+    }, [xStart, xEnd, yStart, yEnd]);
     const squarePath = `M${xStart} ${yStart} H ${xEnd} V ${yEnd} H ${xStart} Z`;
     const lineTop = `M${xStart} ${yEnd} H ${xEnd}`;
     const lineRight = `M${xEnd} ${yStart} V ${yEnd}`;

package/dist/cjs/charts/constants/chartDefaults.d.ts

@@ -74,4 +74,24 @@ export declare const LINE_CHART_FALLBACK_DATA: {
     /** Second Y value for line chart fallback data */
     readonly FALLBACK_Y_SECOND: 1;
 };
+/**
+ * Pie Chart specific default configuration values
+ */
+export declare const PIE_CHART_DEFAULTS: {
+    /** Default radius percentage when not specified */
+    readonly DEFAULT_RADIUS_PERCENTAGE: 50;
+    /** Minimum number of segments required for a valid pie chart */
+    readonly MIN_SEGMENTS: 1;
+};
+/**
+ * Pie Chart specific fallback data points used when pie chart data is invalid or empty
+ */
+export declare const PIE_CHART_FALLBACK_DATA: {
+    /** Generic data key for fallback data */
+    readonly FALLBACK_DATA_KEY: "fallbackSegments";
+    /** Default segment name for fallback data */
+    readonly FALLBACK_SEGMENT_NAME: "fallback";
+    /** Default segment value for fallback data */
+    readonly FALLBACK_SEGMENT_VALUE: 100;
+};
 //# sourceMappingURL=chartDefaults.d.ts.map

package/dist/cjs/charts/constants/chartDefaults.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chartDefaults.d.ts","sourceRoot":"","sources":["../../../../src/charts/constants/chartDefaults.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH;;GAEG;AACH,eAAO,MAAM,qBAAqB;IAChC,4DAA4D;;IAE5D,0DAA0D;;CAElD,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,eAAe;IAC1B,8DAA8D;;IAE9D,+DAA+D;;CAEvD,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,sBAAsB;IACjC,yDAAyD;;CAEjD,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,mBAAmB;IAC9B,2DAA2D;;CAEnD,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,oBAAoB;IAC/B,8DAA8D;;IAE9D,+DAA+D;;CAEvD,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,kBAAkB;IAC7B,wDAAwD;;CAEhD,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,uBAAuB;IAClC,+CAA+C;;IAE/C,qEAAqE;;CAE7D,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,wBAAwB;IACnC,iDAAiD;;IAEjD,kDAAkD;;IAElD,iDAAiD;;IAEjD,kDAAkD;;CAE1C,CAAC"}
+{"version":3,"file":"chartDefaults.d.ts","sourceRoot":"","sources":["../../../../src/charts/constants/chartDefaults.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH;;GAEG;AACH,eAAO,MAAM,qBAAqB;IAChC,4DAA4D;;IAE5D,0DAA0D;;CAElD,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,eAAe;IAC1B,8DAA8D;;IAE9D,+DAA+D;;CAEvD,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,sBAAsB;IACjC,yDAAyD;;CAEjD,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,mBAAmB;IAC9B,2DAA2D;;CAEnD,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,oBAAoB;IAC/B,8DAA8D;;IAE9D,+DAA+D;;CAEvD,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,kBAAkB;IAC7B,wDAAwD;;CAEhD,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,uBAAuB;IAClC,+CAA+C;;IAE/C,qEAAqE;;CAE7D,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,wBAAwB;IACnC,iDAAiD;;IAEjD,kDAAkD;;IAElD,iDAAiD;;IAEjD,kDAAkD;;CAE1C,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,kBAAkB;IAC7B,mDAAmD;;IAEnD,gEAAgE;;CAExD,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,uBAAuB;IAClC,yCAAyC;;IAEzC,6CAA6C;;IAE7C,8CAA8C;;CAEtC,CAAC"}

package/dist/cjs/charts/constants/chartDefaults.js

@@ -74,3 +74,23 @@ export const LINE_CHART_FALLBACK_DATA = {
     /** Second Y value for line chart fallback data */
     FALLBACK_Y_SECOND: 1,
 };
+/**
+ * Pie Chart specific default configuration values
+ */
+export const PIE_CHART_DEFAULTS = {
+    /** Default radius percentage when not specified */
+    DEFAULT_RADIUS_PERCENTAGE: 50,
+    /** Minimum number of segments required for a valid pie chart */
+    MIN_SEGMENTS: 1,
+};
+/**
+ * Pie Chart specific fallback data points used when pie chart data is invalid or empty
+ */
+export const PIE_CHART_FALLBACK_DATA = {
+    /** Generic data key for fallback data */
+    FALLBACK_DATA_KEY: 'fallbackSegments',
+    /** Default segment name for fallback data */
+    FALLBACK_SEGMENT_NAME: 'fallback',
+    /** Default segment value for fallback data */
+    FALLBACK_SEGMENT_VALUE: 100,
+};

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

@@ -1 +1 @@
-{"version":3,"file":"lineChartPath.d.ts","sourceRoot":"","sources":["../../../../../src/charts/lineChart/fragments/lineChartPath.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,EAAoD,MAAM,OAAO,CAAC;AAWlF,OAAO,KAAK,EAAc,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAIxE,OAAO,qBAAqB,CAAC;AAO7B,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAwLhD,CAAC"}
+{"version":3,"file":"lineChartPath.d.ts","sourceRoot":"","sources":["../../../../../src/charts/lineChart/fragments/lineChartPath.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,EAAoD,MAAM,OAAO,CAAC;AAWlF,OAAO,KAAK,EAAc,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAIxE,OAAO,qBAAqB,CAAC;AAO7B,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAoMhD,CAAC"}

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

@@ -19,38 +19,45 @@ const getAxisData = (data, key) => {
 export const LineChartPath = ({ ariaLabel, closestClick, curved, getNodeFocusInfo, getNodesCoords, indicatorConfig, lineProjection, onClick, ...props }) => {
     // recovery the context values
     const { addError, xAxisCoordinates, yAxisCoordinates, ...context } = useContext(LineChartContext);
+    // Extract stable values for dependencies
+    const dataKey = props.dataKey;
+    const hasData = context.data.length > 0;
+    const firstDataItem = context.data[0];
+    const hasDataKey = firstDataItem
+        ? Object.prototype.hasOwnProperty.call(firstDataItem, dataKey)
+        : false;
+    const dataLength = context.data.length;
     // Path error validations
     useEffect(() => {
         // Invalid dataKey validation
-        if (!props.dataKey || typeof props.dataKey !== 'string') {
+        if (!dataKey || typeof dataKey !== 'string') {
             addError?.('LINE_CHART_PATH_ERROR', {
                 error: buildError(BuildError.LINE_CHART_PATH_INVALID_DATAKEY),
             });
             return;
         }
         // Check if dataKey exists in dataset
-        if (context.data.length > 0 &&
-            !Object.prototype.hasOwnProperty.call(context.data[0], props.dataKey)) {
+        if (hasData && !hasDataKey) {
             addError?.('LINE_CHART_PATH_ERROR', {
-                error: buildDataKeyNotFoundError(props.dataKey),
+                error: buildDataKeyNotFoundError(dataKey),
             });
             return;
         }
         // Curved path calculation errors
-        if (curved && context.data.length < 2) {
+        if (curved && dataLength < 2) {
             addError?.('LINE_CHART_PATH_ERROR', {
                 error: buildError(BuildError.LINE_CHART_PATH_INSUFFICIENT_POINTS),
             });
             return;
         }
         // Path rendering errors - validate coordinates
-        const yData = getAxisData(context.data, props.dataKey);
+        const yData = getAxisData(context.data, dataKey);
         if (yData.length > 0 && yData.every(val => val === null || val === undefined)) {
             addError?.('LINE_CHART_PATH_ERROR', {
                 error: buildError(BuildError.LINE_CHART_PATH_ALL_VALUES_NULL),
             });
         }
-    }, [props.dataKey, curved, context.data, addError]);
+    }, [addError, curved, dataKey, dataLength, hasData, hasDataKey, context.data]);
     // the node indicator logic
     const { indicatorRef, pathRef } = useIndicator(context.xCursor, !!indicatorConfig);
     const showIndicator = !!indicatorConfig && context.xCursor !== -Infinity;
@@ -58,14 +65,18 @@ export const LineChartPath = ({ ariaLabel, closestClick, curved, getNodeFocusInf
     const pressedRef = useRef(null);
     // the projection line logic
     const { autoClick, lineIndicator, ...nodeIndicatorConfig } = indicatorConfig || {};
-    // line indicator <Y> coordinates
-    const y1 = context.extraSpaceTopY;
-    const y2 = Number(context.canvasHeight) - context.extraSpaceBottomY;
+    // Calculate line indicator boundaries using pre-calculated axis coordinates
+    // Y-axis: spans from top to bottom of chart area
+    const { y1, y2 } = yAxisCoordinates.coordinates;
+    // X-axis: constrain to path area to prevent overflow into axis labels
+    // The indicator should only render within the data visualization area
+    const { x1: pathAreaMinX, x2: pathAreaMaxX } = xAxisCoordinates.coordinates;
+    const isCursorWithinPathArea = context.xCursor >= pathAreaMinX && context.xCursor <= pathAreaMaxX;
     // the path
     const { tickValues: xTickValues } = xAxisCoordinates;
     const { tickValues: yTickValues } = yAxisCoordinates;
     const xData = getAxisData(context.data, context.xKey);
-    const yData = getAxisData(context.data, props.dataKey);
+    const yData = getAxisData(context.data, dataKey);
     const xPoints = getPoints(xTickValues, xData, true);
     const yPoints = getPoints(yTickValues, yData);
     const points = xPoints.map((x, i) => [x, yPoints[i]]);
@@ -134,5 +145,5 @@ export const LineChartPath = ({ ariaLabel, closestClick, curved, getNodeFocusInf
         // Handle deprecated ariaLabel - give precedence to ariaLabel for backward compatibility
         ...(ariaLabel && { 'aria-label': ariaLabel }),
     };
-    return (_jsxs(_Fragment, { children: [_jsx(Path, { ref: innerRefs, d: dataOnlyLine, dFill: dataFill, dataTestId: `${context.dataTestId}path`, dataValue: context.data, points: points, xKey: context.xKey, onClick: handleClick, ...mergedProps }), lineProjection && (_jsx(LineChartProjection, { curved: curved, dataKey: props.dataKey, lineProjection: lineProjection, points: points, svgHeight: Number(context.canvasHeight) - context.extraSpaceBottomY })), showIndicator && (_jsxs(_Fragment, { children: [!!lineIndicator && (_jsx(Line, { ...lineIndicator, className: "pointer-events-none", x1: context.xCursor, x2: context.xCursor, y1: y1, y2: y2 })), _jsx("g", { ref: indicatorRef, className: "pointer-events-none", children: _jsx(Node, { ...nodeIndicatorConfig }) })] }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Path, { ref: innerRefs, d: dataOnlyLine, dFill: dataFill, dataTestId: `${context.dataTestId}path`, dataValue: context.data, points: points, xKey: context.xKey, onClick: handleClick, ...mergedProps }), lineProjection && (_jsx(LineChartProjection, { curved: curved, dataKey: props.dataKey, lineProjection: lineProjection, points: points, svgHeight: Number(context.canvasHeight) - context.extraSpaceBottomY })), showIndicator && (_jsxs(_Fragment, { children: [!!lineIndicator && isCursorWithinPathArea && (_jsx(Line, { ...lineIndicator, className: "pointer-events-none", x1: context.xCursor, x2: context.xCursor, y1: y1, y2: y2 })), _jsx("g", { ref: indicatorRef, className: "pointer-events-none", children: _jsx(Node, { ...nodeIndicatorConfig }) })] }))] }));
 };

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

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

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

@@ -11,21 +11,25 @@ export const LineChartProjection = ({ curved, lineProjection, points, svgHeight,
     const { xProjection: xDw, yProjection: yDw, ...lowerProps } = lower || {};
     const upperProjection = xUp || yUp ? { x: xUp, y: yUp } : undefined;
     const lowerProjection = xDw || yDw ? { x: xDw, y: yDw } : undefined;
+    // Extract values for stable dependencies
+    const upperY = upperProjection?.y;
+    const lowerY = lowerProjection?.y;
+    const upperX = upperProjection?.x;
+    const lowerX = lowerProjection?.x;
     // Projection error validations
     useEffect(() => {
         // Invalid projection bounds - upper/lower overlap
         if (upperProjection && lowerProjection) {
-            const upperY = upperProjection.y || 0;
-            const lowerY = lowerProjection.y || 0;
-            if (upperY >= lowerY) {
+            const upperYVal = upperY || 0;
+            const lowerYVal = lowerY || 0;
+            if (upperYVal >= lowerYVal) {
                 addError?.('LINE_CHART_PROJECTION_ERROR', {
-                    error: buildProjectionBoundsError(upperY, lowerY),
+                    error: buildProjectionBoundsError(upperYVal, lowerYVal),
                 });
             }
         }
         // Projection coordinates outside chart area
         if (upperProjection) {
-            const { x: upperX, y: upperY } = upperProjection;
             if (upperX !== undefined && (upperX < 0 || upperX > 100)) {
                 addError?.('LINE_CHART_PROJECTION_ERROR', {
                     error: buildProjectionXOutOfRangeError(upperX, true),
@@ -38,7 +42,6 @@ export const LineChartProjection = ({ curved, lineProjection, points, svgHeight,
             }
         }
         if (lowerProjection) {
-            const { x: lowerX, y: lowerY } = lowerProjection;
             if (lowerX !== undefined && (lowerX < 0 || lowerX > 100)) {
                 addError?.('LINE_CHART_PROJECTION_ERROR', {
                     error: buildProjectionXOutOfRangeError(lowerX, false),
@@ -50,7 +53,7 @@ export const LineChartProjection = ({ curved, lineProjection, points, svgHeight,
                 });
             }
         }
-    }, [upperProjection, lowerProjection, svgHeight, addError]);
+    }, [lowerProjection, lowerX, lowerY, svgHeight, upperProjection, upperX, upperY]);
     const { downPath, shapePath, upPath } = getProjection({
         curved,
         lowerProjection,

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

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

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

@@ -5,13 +5,26 @@ import { getPoints } from '../../../utils/getPoints/getPoints';
 import { LineChartContext } from '../context/lineChartContext';
 export const LineChartSeparator = ({ areaSeparator, dataTestId, rightSeparator, topSeparator, xBreakAxis, yBreakAxis, }) => {
     const { addError, crossXAxis, crossYAxis, xAxisCoordinates, yAxisCoordinates } = useContext(LineChartContext);
+    // Extract tick values for stable dependencies
+    const xTickValues = xAxisCoordinates.tickValues;
+    const yTickValues = yAxisCoordinates.tickValues;
+    // Pre-calculate numeric values for dependencies
+    const xBreakNumeric = xBreakAxis !== undefined
+        ? typeof xBreakAxis === 'string'
+            ? parseFloat(xBreakAxis)
+            : xBreakAxis
+        : undefined;
+    const yBreakNumeric = yBreakAxis !== undefined
+        ? typeof yBreakAxis === 'string'
+            ? parseFloat(yBreakAxis)
+            : yBreakAxis
+        : undefined;
     // Separator error validations
     useEffect(() => {
         // xBreakAxis validation
         if (xBreakAxis !== undefined) {
-            const xValues = xAxisCoordinates.tickValues.map(tick => tick.value);
-            const xBreakNumeric = typeof xBreakAxis === 'string' ? parseFloat(xBreakAxis) : xBreakAxis;
-            if (isNaN(xBreakNumeric)) {
+            const xValues = xTickValues.map(tick => tick.value);
+            if (xBreakNumeric === undefined || isNaN(xBreakNumeric)) {
                 addError?.('LINE_CHART_SEPARATOR_ERROR', {
                     error: buildSeparatorXBreakAxisError(xBreakAxis),
                 });
@@ -28,9 +41,8 @@ export const LineChartSeparator = ({ areaSeparator, dataTestId, rightSeparator,
         }
         // yBreakAxis validation
         if (yBreakAxis !== undefined) {
-            const yValues = yAxisCoordinates.tickValues.map(tick => tick.value);
-            const yBreakNumeric = typeof yBreakAxis === 'string' ? parseFloat(yBreakAxis) : yBreakAxis;
-            if (isNaN(yBreakNumeric)) {
+            const yValues = yTickValues.map(tick => tick.value);
+            if (yBreakNumeric === undefined || isNaN(yBreakNumeric)) {
                 addError?.('LINE_CHART_SEPARATOR_ERROR', {
                     error: buildSeparatorYBreakAxisError(yBreakAxis),
                 });
@@ -45,7 +57,7 @@ export const LineChartSeparator = ({ areaSeparator, dataTestId, rightSeparator,
                 }
             }
         }
-    }, [xBreakAxis, yBreakAxis, xAxisCoordinates.tickValues, yAxisCoordinates.tickValues, addError]);
+    }, [xBreakAxis, xBreakNumeric, xTickValues, yBreakAxis, yBreakNumeric, yTickValues]);
     if (!topSeparator && !rightSeparator && !areaSeparator) {
         return _jsx(_Fragment, {});
     }
@@ -64,7 +76,7 @@ export const LineChartSeparator = ({ areaSeparator, dataTestId, rightSeparator,
                 error: buildError(BuildError.LINE_CHART_SEPARATOR_INVALID_COORDINATES),
             });
         }
-    }, [xStart, xEnd, yStart, yEnd, addError]);
+    }, [xStart, xEnd, yStart, yEnd]);
     const squarePath = `M${xStart} ${yStart} H ${xEnd} V ${yEnd} H ${xStart} Z`;
     const lineTop = `M${xStart} ${yEnd} H ${xEnd}`;
     const lineRight = `M${xEnd} ${yStart} V ${yEnd}`;

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

@@ -1,9 +1,11 @@
+import type { ChartError, ErrorType } from '../../../types/errors.type';
 import type { PieChartChildrenType, PieChartContextType } from '../pieChart.type';
 interface BuildPieContextValueProps {
     children: PieChartChildrenType;
     canvasWidth: number;
     canvasHeight: number;
     halfChart?: boolean;
+    addError?: (errorType: keyof typeof ErrorType, error: Omit<ChartError, 'type'>) => void;
 }
 /**
  * Builds the context value for the PieChart component.
@@ -11,6 +13,6 @@ interface BuildPieContextValueProps {
  * @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 declare const buildPieContextValue: ({ addError, canvasHeight, canvasWidth, children, halfChart, }: BuildPieContextValueProps) => Omit<PieChartContextType, "canvasHeight" | "canvasWidth" | "data">;
 export {};
 //# sourceMappingURL=buildPieContextValue.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"buildPieContextValue.d.ts","sourceRoot":"","sources":["../../../../../src/charts/pieChart/context/buildPieContextValue.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAMjE,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;IACpB,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,OAAO,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;CACzF;AAED;;;;;GAKG;AAEH,eAAO,MAAM,oBAAoB,GAAI,+DAMlC,yBAAyB,KAAG,IAAI,CACjC,mBAAmB,EACnB,cAAc,GAAG,aAAa,GAAG,MAAM,CAkDxC,CAAC"}

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

@@ -1,5 +1,7 @@
 import { Children, isValidElement } from 'react';
+import { buildCanvasDimensionsError } from '../../../utils/buildErrors/buildErrors';
 import { parseStringToNumberPx } from '../../../utils/parseStringToNumberPx.ts/parseStringToNumberPx';
+import { CHART_CANVAS_DEFAULTS } from '../../constants/chartDefaults';
 import { PieChartPath } from '../fragments/pieChartPath';
 /**
  * Builds the context value for the PieChart component.
@@ -7,7 +9,16 @@ import { PieChartPath } from '../fragments/pieChartPath';
  * @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, }) => {
+export const buildPieContextValue = ({ addError, canvasHeight, canvasWidth, children, halfChart, }) => {
+    // Validate canvas dimensions
+    if (canvasWidth <= 0 || canvasHeight <= 0) {
+        addError?.('PIE_CHART_CONTEXT_ERROR', {
+            error: buildCanvasDimensionsError(canvasWidth, canvasHeight),
+        });
+    }
+    // Use safe canvas dimensions with defaults if invalid
+    const safeCanvasWidth = canvasWidth > 0 ? canvasWidth : CHART_CANVAS_DEFAULTS.SAFE_WIDTH;
+    const safeCanvasHeight = canvasHeight > 0 ? canvasHeight : CHART_CANVAS_DEFAULTS.SAFE_HEIGHT;
     // Use the min inner radious of the paths to calculate the size
     let minRadius = undefined;
     let foreignObjectSize = undefined;
@@ -32,9 +43,10 @@ export const buildPieContextValue = ({ canvasHeight, canvasWidth, children, half
     const sizeFixed = foreignObjectSize ?? 0;
     const height = halfChart ? sizeFixed / 2 : sizeFixed;
     const width = sizeFixed;
-    const x = canvasWidth / 2;
-    const y = halfChart ? canvasHeight : canvasHeight / 2;
+    const x = safeCanvasWidth / 2;
+    const y = halfChart ? safeCanvasHeight : safeCanvasHeight / 2;
     return {
+        addError,
         foreignObject: {
             height,
             width,

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

@@ -1 +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"}
+{"version":3,"file":"pieChartPath.d.ts","sourceRoot":"","sources":["../../../../../src/charts/pieChart/fragments/pieChartPath.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,EAAoD,MAAM,OAAO,CAAC;AAElF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAW9D;;;;;;;;;;GAUG;AACH,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,SAAS,CA4EtC,CAAC"}

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

@@ -1,6 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
-import { useContext, useRef } from 'react';
+import { useContext, useEffect, useRef } from 'react';
+import { buildEmptyDataArrayError, buildInvalidTotalError, buildPieDataKeyNotFoundError, } from '../../../utils/buildErrors/buildErrors';
 import { parseStringToNumberPx } from '../../../utils/parseStringToNumberPx.ts/parseStringToNumberPx';
 import { PieChartContext } from '../context/pieChartContext';
 import { PieChartSegment } from './pieChartSegment';
@@ -17,12 +18,39 @@ import { PieChartSegment } from './pieChartSegment';
  */
 export const PieChartPath = ({ dataKey, fill, gap, innerRadius, radius, ...props }) => {
     const key = String(dataKey);
-    const { canvasHeight, canvasWidth, data, dataTestId, halfChart } = useContext(PieChartContext);
+    const { addError, canvasHeight, canvasWidth, data, dataTestId, halfChart } = useContext(PieChartContext);
     const chartInitAngle = halfChart ? 0 : -Math.PI / 2; // ? 0deg : -90deg
     const startAngle = useRef(chartInitAngle);
+    // Extract data for this key to optimize useEffect dependencies
+    const dataArray = data[key];
+    const hasDataKey = Object.prototype.hasOwnProperty.call(data, key);
+    // Path error validations
+    useEffect(() => {
+        // Validate dataKey exists in dataset
+        if (!hasDataKey) {
+            addError?.('PIE_CHART_PATH_ERROR', {
+                error: buildPieDataKeyNotFoundError(key),
+            });
+            return;
+        }
+        // Validate data array exists and is not empty
+        if (!dataArray || dataArray.length === 0) {
+            addError?.('PIE_CHART_PATH_ERROR', {
+                error: buildEmptyDataArrayError(key),
+            });
+            return;
+        }
+        // Calculate total and validate
+        const calculatedTotal = dataArray.reduce((acc, group) => acc + group.value, 0);
+        if (calculatedTotal <= 0 || isNaN(calculatedTotal)) {
+            addError?.('PIE_CHART_PATH_ERROR', {
+                error: buildInvalidTotalError(key, calculatedTotal),
+            });
+        }
+    }, [dataArray, hasDataKey, key]);
     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, {}));
+    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, dataKey: key, dataTestId: `${dataTestId}path-${index}`, gap: gap, halfChart: halfChart, index: index, innerRadius: parsedInnerRadius, radius: parsedRadius, singleStroke: singleStroke, startAngle: startAngle, total: total }))) })) : (_jsx(_Fragment, {}));
 };

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

@@ -1 +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"}
+{"version":3,"file":"pieChartSegment.d.ts","sourceRoot":"","sources":["../../../../../src/charts/pieChart/fragments/pieChartSegment.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAG7D;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAoG1D,CAAC"}

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

@@ -1,5 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext, useEffect } from 'react';
 import { Path } from '../../../components/path/path';
+import { buildInnerRadiusOutOfRangeError, buildInvalidGroupError, buildInvalidInnerRadiusError, buildInvalidRadiusError, buildSegmentNegativeValueError, buildSegmentValueError, } from '../../../utils/buildErrors/buildErrors';
+import { PieChartContext } from '../context/pieChartContext';
 import { calculateSegmentPath } from '../utils/calculateSegmentPath';
 /**
  * Renders a segment of a pie chart.
@@ -16,7 +19,61 @@ import { calculateSegmentPath } from '../utils/calculateSegmentPath';
  * @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 }) => {
+export const PieChartSegment = ({ canvasHeight, canvasWidth, color = 'blue', dataKey, gap, halfChart, index, innerRadius, name, radius, singleStroke, startAngle, total, value, ...props }) => {
+    const { addError } = useContext(PieChartContext);
+    // Convert values to primitives for stable dependencies
+    const numericValue = Number(value);
+    const numericRadius = radius !== undefined ? Number(radius) : undefined;
+    const numericInnerRadius = innerRadius !== undefined ? Number(innerRadius) : undefined;
+    const trimmedName = name?.trim() || '';
+    // Segment error validations
+    useEffect(() => {
+        // Validate segment has non-empty name property
+        if (!trimmedName) {
+            addError?.('PIE_CHART_SEGMENT_ERROR', {
+                error: buildInvalidGroupError(dataKey || 'unknown', index || 0, 'name'),
+            });
+        }
+        // Validate segment value is numeric
+        if (isNaN(numericValue)) {
+            addError?.('PIE_CHART_SEGMENT_ERROR', {
+                error: buildSegmentValueError(value, trimmedName || `segment-${index}`),
+            });
+            return;
+        }
+        // Validate non-negative values
+        if (numericValue < 0) {
+            addError?.('PIE_CHART_SEGMENT_ERROR', {
+                error: buildSegmentNegativeValueError(numericValue, trimmedName || `segment-${index}`),
+            });
+        }
+        // Validate radius if provided
+        if (numericRadius !== undefined) {
+            if (isNaN(numericRadius) || numericRadius <= 0) {
+                addError?.('PIE_CHART_SEGMENT_ERROR', {
+                    error: buildInvalidRadiusError(radius),
+                });
+            }
+        }
+        // Validate innerRadius if provided
+        if (numericInnerRadius !== undefined) {
+            if (isNaN(numericInnerRadius) || numericInnerRadius < 0) {
+                addError?.('PIE_CHART_SEGMENT_ERROR', {
+                    error: buildInvalidInnerRadiusError(innerRadius),
+                });
+            }
+            // Validate innerRadius < radius
+            if (numericRadius !== undefined) {
+                if (!isNaN(numericRadius) && !isNaN(numericInnerRadius)) {
+                    if (numericInnerRadius >= numericRadius) {
+                        addError?.('PIE_CHART_SEGMENT_ERROR', {
+                            error: buildInnerRadiusOutOfRangeError(numericInnerRadius, numericRadius),
+                        });
+                    }
+                }
+            }
+        }
+    }, [dataKey, index, numericInnerRadius, numericRadius, numericValue, trimmedName]);
     const pathData = calculateSegmentPath({
         canvasHeight,
         canvasWidth,

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

@@ -1,6 +1,7 @@
 import type { ReactElement, ReactNode } from 'react';
 import type { PathProps } from '../../components/path/path.types';
 import type { CanvasConfig } from '../../types/canvas.type';
+import type { ChartError, ChartErrorCollection, ErrorType } from '../../types/errors.type';
 interface Group {
     name: string;
     value: number;
@@ -34,6 +35,7 @@ export interface PieChartProps {
     onBlur?: (event: React.FocusEvent<SVGElement>) => void;
     onKeyDown?: (event: React.KeyboardEvent<SVGSVGElement>) => void;
     onKeyUp?: (event: React.KeyboardEvent<SVGSVGElement>) => void;
+    onErrors?: (errors: ChartErrorCollection) => void;
 }
 export interface PieChartContextType {
     foreignObject?: {
@@ -47,6 +49,8 @@ export interface PieChartContextType {
     data: DataItem;
     dataTestId?: string;
     halfChart?: boolean;
+    error?: ChartError;
+    addError?: (errorType: keyof typeof ErrorType, error: Omit<ChartError, 'type'>) => void;
 }
 export type PieChartSegmentProps = PathProps & {
     total: number;
@@ -58,8 +62,11 @@ export type PieChartSegmentProps = PathProps & {
     radius?: number;
     value: number;
     color?: string;
+    name?: string;
     singleStroke: boolean;
     halfChart?: boolean;
+    dataKey?: string;
+    index?: number;
 };
 export {};
 //# sourceMappingURL=pieChart.type.d.ts.map