PieCharts Component

The PieCharts component is a React component that creates a customizable pie chart using the Recharts library. It displays data in a circular graph, showing the proportion of different categories within a total.

Importing the Component

To use the PieCharts component in your React application, import it as follows:

import PieCharts from '@/components/PieCharts';

Basic Usage

Here's a basic example of how to use the PieCharts component:

<PieCharts />

This will render a pie chart with the default data and styling.

Functionality

The PieCharts component provides the following functionality:

1. Renders a pie chart using the Recharts library.
2. Displays data for three e-commerce platforms: Amazon, Flipkart, and Meesho.
3. Shows percentage labels inside the pie slices.
4. Displays name labels outside the pie chart.
5. Uses custom colors for each pie slice.
6. Wraps the chart in a responsive container for better layout control.

Data Structure

The component uses the following data structure:

const data = [
  {
    name: 'Amazon',
    value: 400,
    colors: '#401A02',
  },
  {
    name: 'Flipkart',
    value: 300,
    colors: '#401A02',
  },
  {
    name: 'Meesho',
    value: 500,
    colors: '#401A02',
  },
];

Each object in the array represents a slice of the pie chart, with name, value, and colors properties.

Custom Label Rendering

The component uses two custom label rendering functions:

1. renderCustomizedLabel: Renders percentage labels inside the pie slices.
2. renderLabel: Renders name labels outside the pie chart.

Styling

The component uses a custom color palette for the pie slices:

const colors = ['#401A02', '#6A5C4F', '#D0BDA9'];

Additional styling is applied through Tailwind CSS classes and inline styles.

Dependencies

This component relies on the following libraries and components:

• React
• Recharts (for chart rendering)
• ContentWrapper (a custom component, likely for layout purposes)

Accessibility

To improve accessibility:

1. Add aria-label attributes to provide more context for screen readers.
2. Ensure color contrast ratios meet WCAG standards for better readability.
3. Consider adding keyboard navigation support for interacting with the chart.

Best Practices and Improvements

1. Replace any types with proper TypeScript interfaces for better type safety.
2. Consider making the data prop-driven instead of hardcoded for more flexibility.
3. Implement error handling for cases where data might be missing or malformed.
4. Add PropTypes or TypeScript props interface for better documentation and type checking.
5. Consider adding tooltips for additional information on hover.

Example Usage with Custom Data

Here's an example of how you might use the PieCharts component with custom data:

import PieCharts from '@/components/PieCharts';

const MyPage = () => {
  const customData = [
    { name: 'Category A', value: 300 },
    { name: 'Category B', value: 500 },
    { name: 'Category C', value: 200 },
  ];

  return (
    <div className='container mx-auto py-8'>
      <h1 className='text-3xl font-bold mb-6'>Sales Distribution</h1>
      <PieCharts data={customData} />
    </div>
  );
};

export default MyPage;

Note: This example assumes that the PieCharts component has been modified to accept a data prop. The current implementation would need to be updated to support this usage.

---

By using the PieCharts component, you can easily integrate visually appealing and informative pie charts into your React application. Remember to customize the data and styling to fit your specific use case and design requirements.