added api to save widgit data and iot data

app/src/components/ui/realTimeVis/charts/PieGraphComponent.tsx

@@ -184,14 +184,16 @@
 // export default PieChartComponent;
 
 
-
 import React, { useEffect, useMemo, useState } from "react";
 import { Pie } from "react-chartjs-2";
 import io from "socket.io-client";
 import { useThemeStore } from "../../../../store/useThemeStore";
 import useChartStore from "../../../../store/useChartStore";
+import { useWidgetStore } from "../../../../store/useWidgetStore";
+import axios from "axios";
 
 interface ChartComponentProps {
+  id: string;
   type: any;
   title: string;
   fontFamily?: string;
@@ -200,6 +202,7 @@ interface ChartComponentProps {
 }
 
 const PieChartComponent = ({
+  id,
   type,
   title,
   fontFamily,
@@ -207,14 +210,18 @@ const PieChartComponent = ({
   fontWeight = "Regular",
 }: ChartComponentProps) => {
   const { themeColor } = useThemeStore();
-  const { measurements, duration } = useChartStore(); // Zustand Store
+  const { measurements: chartMeasurements, duration: chartDuration } = useChartStore();
+  const [measurements, setmeasurements] = useState<any>({});
+  const [duration, setDuration] = useState("1h")
   const [chartData, setChartData] = useState<{ labels: string[]; datasets: any[] }>({
     labels: [],
     datasets: [],
   });
+   const { selectedChartId } = useWidgetStore();
 
   const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
-
+  const email = localStorage.getItem("email") || "";
+  const organization = email?.split("@")[1]?.split(".")[0]
   const defaultData = {
     labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
     datasets: [
@@ -254,31 +261,34 @@ const PieChartComponent = ({
     [fontFamily, fontSizeValue, fontWeightValue]
   );
 
-  // Memoized Chart Options
-  const options = useMemo(
-    () => ({
-      responsive: true,
-      maintainAspectRatio: false,
-      plugins: {
-        title: {
-          display: true,
-          text: title,
-          font: chartFontStyle,
+    // Memoize Chart Options
+    const options = useMemo(
+      () => ({
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: {
+          title: {
+            display: true,
+            text: title,
+            font: chartFontStyle,
+          },
+          legend: {
+            display: false,
+          },
         },
-        legend: {
-          display: false,
+        scales: {
+          // x: {
+          //   ticks: {
+          //     display: true, // This hides the x-axis labels
+          //   },
+          // },
         },
-      },
-      scales: {
-        // x: {
-        //   ticks: {
-        //     display: true,
-        //   },
-        // },
-      },
-    }),
-    [title, chartFontStyle]
-  );
+      }),
+      [title, chartFontStyle]
+    );
+
+    // useEffect(() => {console.log(measurements);
+    // },[measurements])
 
   useEffect(() => {
     if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0) return;
@@ -291,7 +301,8 @@ const PieChartComponent = ({
       interval: 1000,
     };
 
-    const startStream = () => {
+
+    const startStream = () => {  
       socket.emit("lineInput", inputData);
     };
 
@@ -299,7 +310,6 @@ const PieChartComponent = ({
 
     socket.on("lineOutput", (response) => {
       const responseData = response.data;
-      console.log("Received data:", responseData);
 
       // Extract timestamps and values
       const labels = responseData.time;
@@ -325,8 +335,35 @@ const PieChartComponent = ({
     };
   }, [measurements, duration, iotApiUrl]);
 
+  const fetchSavedInputes = async() => {
+    
+    if (id !== "") {
+      try {
+        const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${id}/${organization}`);
+        if (response.status === 200) {
+          setmeasurements(response.data.Data.measurements)
+          setDuration(response.data.Data.duration)
+        } else {
+          console.log("Unexpected response:", response);
+        }
+      } catch (error) {
+        console.error("There was an error!", error);
+      }
+    }
+  }
+
+  useEffect(() => {
+    fetchSavedInputes();
+  }, []);
+
+  useEffect(() => {
+    if (selectedChartId?.id === id) {
+      fetchSavedInputes();
+    }
+  }
+  ,[chartMeasurements, chartDuration])
+
   return <Pie data={Object.keys(measurements).length > 0 ? chartData : defaultData} options={options} />;
 };
 
-export default PieChartComponent;
-
+export default PieChartComponent;