first commit

src/components/Dashboard/dashboardnew/gadgets/polar-chart/PolarChart.js

@@ -0,0 +1,125 @@
+// 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;