first commit

src/components/Dashboard/dashboardRunner/dashboardRunnerLine/Polar-Runner/PolarRunner.js

@@ -0,0 +1,98 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { PolarArea } from 'react-chartjs-2';
+import html2canvas from 'html2canvas';
+import jsPDF from 'jspdf';
+import axios from 'axios';
+
+const PolarRunnerComponent = ({ match }) => {
+  const [editId, setEditId] = useState(null);
+  const [polarAreaChartLabels, setPolarAreaChartLabels] = useState([
+    'Download Sales',
+    'In-Store Sales',
+    'Mail Sales',
+    'Telesales',
+    'Corporate Sales',
+  ]);
+  const [polarAreaChartData, setPolarAreaChartData] = useState([300, 500, 100, 40, 120]);
+  const [chartLegend, setChartLegend] = useState(false);
+  const [tableName, setTableName] = useState('');
+  const [xAxis, setXAxis] = useState('');
+  const [yAxis, setYAxis] = useState('');
+  const [showLabel, setShowLabel] = useState(true);
+  const [jsonData, setJsonData] = useState(null);
+
+  const contentContainerRef = useRef(null);
+
+  useEffect(() => {
+    const id = match.params.id;
+    setEditId(id);
+
+    axios.get(`/api/dashboard/${id}`).then((response) => {
+      const data = response.data;
+      const workflowLine = data.dashbord1_Line[0].model;
+      const dash = JSON.parse(workflowLine);
+
+      const chartObject = dash.dashboard.filter((obj) => obj.name === 'Polar Area Chart');
+      chartObject.forEach((chart) => {
+        if (chart.chartid) {
+          setTableName(chart.table);
+          setXAxis(chart.xAxis);
+          setYAxis(chart.yAxis);
+          setShowLabel(chart.showlabel);
+          setChartLegend(chart.chartlegend);
+
+          axios
+            .get(`/api/chart-data`, {
+              params: {
+                tableName: chart.table,
+                chartType: 'PolarArea Chart',
+                xAxis: chart.xAxis,
+                yAxis: chart.yAxis,
+              },
+            })
+            .then((chartData) => {
+              setJsonData(chartData.data);
+              setPolarAreaChartData(chartData.data.polarAreaChartData);
+              setPolarAreaChartLabels(chartData.data.polarAreaChartLabels);
+            })
+            .catch((err) => console.error(err));
+        }
+      });
+    });
+  }, [match.params.id]);
+
+  const generatePDFFile = () => {
+    const content = contentContainerRef.current;
+    if (content) {
+      html2canvas(content).then((canvas) => {
+        const imgData = canvas.toDataURL('image/png');
+        const pdf = new jsPDF();
+        pdf.addImage(imgData, 'PNG', 0, 0);
+        pdf.save('polarareachart.pdf');
+      });
+    }
+  };
+
+  const chartData = {
+    labels: polarAreaChartLabels,
+    datasets: [
+      {
+        data: polarAreaChartData,
+        backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF'],
+      },
+    ],
+  };
+
+  return (
+    <div>
+      <button className="btn btn-primary" onClick={generatePDFFile}>
+        Export
+      </button>
+      <div className="chart-box" id="contentContainer" ref={contentContainerRef}>
+        <PolarArea data={chartData} options={{ plugins: { legend: { display: chartLegend } } }} />
+      </div>
+    </div>
+  );
+};
+
+export default PolarRunnerComponent;