feat(charts): add error accumulator in PieChart

[candela-utrero]

📋 Pull Request

📝 Description

Summary:
This PR implements a comprehensive error accumulator system for the PieChart component, following the same architecture pattern established in BarChart and LineChart. It adds real-time validation across all PieChart subcomponents (context, path, segment) with detailed error reporting through the onErrors callback.

Context:
The PieChart component previously lacked structured error handling, making it difficult for developers to identify and debug data validation issues. This PR completes the error handling architecture across all major chart types in the library, ensuring consistency and developer-friendly debugging capabilities.

Related Issues:

• Addresses consistency in error handling across all chart components
• Completes the error accumulator pattern implementation for all chart types

---

🔄 Type of Change

• ✨ New feature - non-breaking change which adds functionality
• ⚡ Performance - code change that improves performance (useEffect optimization)
• ✅ Test
• 📚 Documentation - updates to documentation (CHANGELOG, argtypes)

🧪 Testing

Test Results

All tests passing ✅

New test files added:

• buildPieChartErrors.test.ts - 100% coverage for PieChart error builders (9 error builder functions tested)

Coverage highlights:

• All PieChart validation scenarios covered
• Error builder functions tested with edge cases
• useEffect dependency optimization verified (no infinite loops)

---

📸 Demo

Interactive Error Handling Story:

The new "PieChart With Error Handling" story in Storybook demonstrates real-time error detection with:

• ⚠️ Error panel showing count and categorization by component type
• 📊 Multiple error scenarios (missing keys, invalid values, negative values, etc.)
• 🎨 Fallback UI demonstration when errors prevent rendering
• 🔍 Detailed error messages with context (dataKey names, values, indices)

To see it in action:
Navigate to: Charts/PieChart/PieChart Examples > PieChart With Error Handling

---

📚 Documentation

• ✅ Code is self-documenting with clear variable/function names
• ✅ Added JSDoc comments for public APIs and error builders
• ✅ Updated CHANGELOG.md with detailed v1.5.0 release notes
• ✅ Updated Storybook argtypes for consistency across all charts
• ✅ Added comprehensive error handling story with inline documentation
• ✅ README.md - no changes needed (feature is internal/API addition)

---

🔍 Code Quality Checklist

Code Standards

• ✅ Code follows project's style guidelines (ESLint/Prettier)
• ✅ Code follows TypeScript best practices
• ✅ No console.log statements in production code
• ✅ No TODO/FIXME comments without corresponding issues
• ✅ Proper error handling implemented
• ✅ Security considerations addressed

Performance & Accessibility

• ✅ Performance impact considered and optimized (useEffect dependencies)
• ✅ Accessibility guidelines followed (WCAG 2.1) - inherited from base components
• ✅ Mobile responsiveness - inherited from responsive SVG components
• ✅ Browser compatibility verified

Review & Testing

• ✅ Self-review completed
• ✅ Code is well-commented and self-explanatory
• ✅ All existing tests pass
• ✅ New tests added for new functionality
• ✅ Manual testing completed
• ✅ No new warnings or errors introduced

---

🚀 Deployment Considerations

• ✅ No database migrations required
• ✅ No environment variable changes required
• ✅ Backward compatible with previous version (additive changes only)
• ✅ Safe to deploy to production
• ✅ Feature flags not needed (non-breaking addition)

---

📦 Dependencies

No new dependencies added. Changes use existing utilities and patterns.

---

🔗 Additional Information

Implementation Details

Error Accumulator Pattern:

• Follows the same architecture as BarChart and LineChart
• Uses createErrorAccumulator utility for consistent error collection
• Validates at multiple levels: context, path, and segment
• Provides detailed error messages with dynamic values (e.g., DataKey "sales" not found in PieChart dataset)

Performance Optimizations:

• Extracted primitive values from objects in useEffect dependencies
• Applied across BarChart, LineChart, and PieChart components
• Removed unnecessary function dependencies (addError) from dependency arrays
• Ensures stable references for React's dependency comparison

New Error Types Added:

• PIE_CHART_CONTEXT_ERROR - Canvas dimensions and configuration errors
• PIE_CHART_PATH_ERROR - Data array, dataKey, and total validation errors
• PIE_CHART_SEGMENT_ERROR - Individual segment validation errors (values, names, radius)

New Error Builder Functions (9 total):

1. buildPieDataKeyNotFoundError - Missing dataKey in dataset
2. buildEmptyDataArrayError - Empty data array for key
3. buildInvalidTotalError - Zero or invalid total value
4. buildSegmentValueError - Non-numeric segment value
5. buildSegmentNegativeValueError - Negative segment value
6. buildInvalidGroupError - Missing required properties (name/value)
7. buildInvalidRadiusError - Invalid radius value
8. buildInvalidInnerRadiusError - Invalid innerRadius value
9. buildInnerRadiusOutOfRangeError - innerRadius >= radius constraint

Chart Constants Extended:

• Added PIE_CHART_DEFAULTS (radius percentage: 50, minimum segments: 1)
• Added PIE_CHART_FALLBACK_DATA for consistent fallback behavior

Key Files Modified

Core Implementation:

• pieChartStructure.tsx - Error accumulator integration
• buildPieContextValue.ts - Canvas validation
• pieChartPath.tsx - Path validation
• pieChartSegment.tsx - Segment validation
• pieChart.type.ts - Type definitions for error handling

Error System:

• buildErrors.ts - PieChart error builders export
• buildPieChartErrors.ts - 9 error builder functions
• pieChartErrors.ts - Error type constants
• pieChartErrorMessages.ts - Error messages
• errors.type.ts - PieChart error types

Performance Optimizations:

• barChartPath.tsx - Optimized dependencies
• barChartSeparator.tsx - Optimized dependencies
• lineChartPath.tsx - Optimized dependencies
• lineChartSeparator.tsx - Optimized dependencies
• lineChartProjection.tsx - Optimized dependencies

Documentation & Stories:

• argtypes.ts - Added onErrors documentation
• pieChart.stories.tsx - Added error handling story
• withErrorHandling.tsx - Interactive demo
• argtypes.ts - Standardized onErrors docs
• argtypes.ts - Standardized onErrors docs

Constants:

• chartDefaults.ts - Added PieChart constants

Breaking Changes

None. This is a purely additive feature:

• The onErrors prop is optional
• Existing PieChart implementations work without changes
• 100% backward compatible with v1.4.0

Migration Guide

No migration needed. To use the new error handling:

import { PieChart } from 'kubit-react-charts';

const handleErrors = (errors) => {
  console.error('Chart validation errors:', errors);
  // Display error UI, log to monitoring service, etc.
};

<PieChart data={data} onErrors={handleErrors}>
  <PieChart.Path dataKey="sales" fill="#0078D4" />
</PieChart>

Notes for Reviewers

Key areas to focus on:

1. useEffect Dependency Optimization

   • Check barChartPath.tsx, lineChartPath.tsx, lineChartSeparator.tsx, etc.
   • Extracted primitive values prevent infinite loops
   • Verified no regression in functionality

2. Error Builder Functions (9 new functions)

   • All have comprehensive test coverage
   • Follow the same pattern as BarChart/LineChart
   • Dynamic error messages include context for debugging

3. PieChart Validation Logic

   • Canvas dimensions: width, height > 0
   • DataKey: must exist in dataset
   • Segment values: numeric, non-negative
   • Segment names: non-empty string required
   • Total: must be > 0
   • Radius constraints: radius > 0, innerRadius >= 0, innerRadius < radius

4. Storybook Integration

   • New interactive error handling story
   • Demonstrates all validation scenarios
   • Shows error accumulation and categorization

5. Pattern Consistency

   • Implementation matches BarChart and LineChart architecture
   • Same error accumulator utility used
   • Consistent TypeScript types and naming

---

📋 Reviewer Checklist

• Code review completed
• Tests reviewed and adequate
• Documentation reviewed (CHANGELOG.md updated)
• Breaking changes identified and documented (None)
• Security implications considered
• Performance impact assessed (Positive - prevents infinite loops)

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
kubit-react-charts	Ready	Preview	Comment	Nov 19, 2025 10:38am

[github-actions]

🔍 PR Validation Report

Status: ✅ PASSED
Branch: feat/error-accumulator-piechart
Expected Version Bump: minor

---

✅ Validation Results

Check	Status	Description
Branch Naming	✅ Pass	Must follow type/description pattern
PR Title	✅ Pass	Must follow conventional commits
ESLint	✅ Pass	Code style and quality rules
TypeScript	✅ Pass	Type checking validation
Tests	✅ Pass	All tests must pass
Code Quality	✅ Pass	No console.log, TODOs need issues
Documentation	✅ Pass	Updated for new features

---

🎯 Next Steps

This PR is ready for review - all validation checks passed!

📦 Expected Release Impact

Based on branch name feat/error-accumulator-piechart, this PR will trigger a minor version bump when merged.

---

This validation runs automatically on every PR. Questions? Check our Contributing Guidelines

[github-actions]

✨ Auto-publish Successful!

Field	Value
Branch	feat/error-accumulator-piechart
Type	minor
Version	1.4.0 → 1.5.0
NPM	@kubit-ui-web/react-charts@1.5.0

📦 Installation

npm install @kubit-ui-web/react-charts@1.5.0
# or
yarn add @kubit-ui-web/react-charts@1.5.0

✅ Completed Steps

• Quality checks passed
• Tests passed
• Build successful
• Storybook built for Chromatic
• Published to Chromatic
• Published to NPM
• GitHub release created
• Repository tagged

🎉 Ready to use in production!