// import React, { useState } from 'react';
// import { Polar } from 'react-chartjs-2'; // Import PolarArea chart from react-chartjs-2
// import { Chart as ChartJS, PolarAreaElement, Tooltip, Legend } from 'chart.js';

// ChartJS.register(PolarAreaElement, Tooltip, Legend); // Register the required elements for Polar Area chart

// const PolarChartComponent = () => {
//   // Define polar area chart data, labels, and type
//   const [polarAreaChartLabels] = useState([
//     'Download Sales', 
//     'In-Store Sales', 
//     'Mail Sales', 
//     'Telesales', 
//     'Corporate Sales'
//   ]);
//   const [polarAreaChartData] = useState([
//     { data: [300, 500, 100, 40, 120], label: 'Series 1' }
//   ]);
//   const [polarAreaChartType] = useState('polarArea');

//   // Handle chart hover and click events
//   const chartClicked = (e) => {
//     console.log(e);
//   };

//   const chartHovered = (e) => {
//     console.log(e);
//   };

//   return (
//     <div style={{ display: 'block' }}>
//       <Polar
//         data={{
//           labels: polarAreaChartLabels,
//           datasets: polarAreaChartData,
//         }}
//         type={polarAreaChartType}
//         onHover={chartHovered}
//         onClick={chartClicked}
//       />
//     </div>
//   );
// };

// export default PolarChartComponent;

import React from 'react';
import { PolarArea as Polar } from 'react-chartjs-2';
import {
  Chart as ChartJS,
  RadialLinearScale,
  ArcElement,
  Tooltip,
  Legend,
} from 'chart.js';

// Register required Chart.js components


const PolarChartComponent = () => {
  // Chart data
  const data = {
    labels: [
      'Download Sales',
      'In-Store Sales',
      'Mail Sales',
      'Telesales',
      'Corporate Sales',
    ],
    datasets: [
      {
        data: [300, 500, 100, 40, 120],
        backgroundColor: [
          'rgba(255, 99, 132, 0.6)',
          'rgba(54, 162, 235, 0.6)',
          'rgba(255, 206, 86, 0.6)',
          'rgba(75, 192, 192, 0.6)',
          'rgba(153, 102, 255, 0.6)',
        ],
        borderColor: [
          'rgba(255, 99, 132, 1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)',
          'rgba(153, 102, 255, 1)',
        ],
        borderWidth: 1,
      },
    ],
  };

  // Chart options
  const options = {
    responsive: true,
    plugins: {
      legend: {
        position: 'top',
      },
      tooltip: {
        callbacks: {
          label: (tooltipItem) => {
            return `${tooltipItem.label}: ${tooltipItem.raw}`;
          },
        },
      },
    },
    onClick: (event, elements) => {
      if (elements.length > 0) {
        const datasetIndex = elements[0].datasetIndex;
        const dataIndex = elements[0].index;
        console.log(
          `Clicked on dataset ${datasetIndex}, data index ${dataIndex}`
        );
      }
    },
  };

  return (
    <div style={{ width: '50%', margin: 'auto' }}>
      <Polar data={data} options={options} />
    </div>
  );
};

export default PolarChartComponent;