first commit

src/components/Dashboard/dashboardRunner/dashboardRunnerLine/Pie-chartRunner/PieRunner.js

@@ -0,0 +1,76 @@
+import React, { useState, useEffect, useRef } from 'react';
+
+const PieRunnerComponent = ({ editId, onButtonClicked, dashRunnerService, dashboardService }) => {
+  const contentContainerRef = useRef(null);
+  const [pieChartLabels, setPieChartLabels] = useState(['SciFi', 'Drama', 'Comedy']);
+  const [pieChartData, setPieChartData] = useState([30, 50, 20]);
+  const [chartLegend, setChartLegend] = useState(false);
+  const [tableName, setTableName] = useState('');
+  const [xAxis, setXAxis] = useState('');
+  const [yAxis, setYAxis] = useState('');
+  const [showLabel, setShowLabel] = useState(false);
+  const [jsonData, setJsonData] = useState(null);
+
+  useEffect(() => {
+    if (!editId) return;
+
+    dashboardService.getById(editId).then((data) => {
+      const workflowLine = data.dashbord1_Line[0].model;
+      const dash = JSON.parse(workflowLine);
+
+      const chartObject = dash.dashboard.filter((obj) => obj.name === 'Pie Chart');
+      chartObject.forEach((chart) => {
+        const ids = dashRunnerService.getPieChart();
+        if (ids.includes(chart.chartid)) return;
+
+        dashRunnerService.setPieChart(chart.chartid);
+
+        if (chart.chartid === ids[0]) {
+          setTableName(chart.table);
+          setXAxis(chart.xAxis);
+          setYAxis(chart.yAxis);
+          setShowLabel(chart.showlabel);
+          setChartLegend(chart.chartlegend);
+
+          dashRunnerService.getChartData(chart.table, 'Pie Chart', chart.xAxis, chart.yAxis).then((Ldata) => {
+            setJsonData(Ldata);
+            setPieChartLabels(Ldata.pieChartLabels);
+            setPieChartData(Ldata.pieChartData);
+          }).catch((error) => {
+            console.error('Error fetching chart data:', error);
+          });
+        }
+      });
+    });
+  }, [editId, dashRunnerService, dashboardService]);
+
+  const generatePDFFile = () => {
+    if (onButtonClicked) {
+      onButtonClicked();
+    }
+    const content = contentContainerRef.current;
+    const filename = 'piechart.pdf';
+
+    dashRunnerService.generatePDF(content, filename);
+  };
+
+  return (
+    <div>
+      <div>
+        <button className="btn btn-primary" onClick={generatePDFFile}>
+          Export
+        </button>
+      </div>
+      <div className="chart-box" id="contentContainer" ref={contentContainerRef}>
+        <canvas
+          style={{ display: 'block', width: '238px', height: '200px' }}
+        >
+          {/* Replace with a React chart library like 'react-chartjs-2' */}
+          <p>Pie chart will render here using labels and data.</p>
+        </canvas>
+      </div>
+    </div>
+  );
+};
+
+export default PieRunnerComponent;