Merge remote-tracking branch 'origin/main' into ui

app/src/components/layout/sidebarRight/visualization/IotInputCards/LineGrapInput.tsx

@@ -122,23 +122,29 @@ import MultiLevelDropdown from "../../../../ui/inputs/MultiLevelDropDown";
 import { AddIcon } from "../../../../icons/ExportCommonIcons";
 import RegularDropDown from "../../../../ui/inputs/RegularDropDown";
 import useChartStore from "../../../../../store/useChartStore";
+import { useSelectedZoneStore } from "../../../../../store/useZoneStore";
+import { useWidgetStore } from "../../../../../store/useWidgetStore";
 import axios from "axios";
 
 type Props = {};
 
 const LineGrapInput = (props: Props) => {
-  const { measurements, setMeasurements, updateDuration, duration } = useChartStore();
+  const { setMeasurements, updateDuration } = useChartStore();
-  
+  const [duration, setDuration] = useState('1h')
   const [dropDowndata, setDropDownData] = useState({});
-  const [selections, setSelections] = useState<Record<string, { name: string; fields: string }>>(measurements); 
+  const [selections, setSelections] = useState<Record<string, { name: string; fields: string }>>({}); 
+  const { selectedZone } = useSelectedZoneStore();
+  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]
   
   useEffect(() => {
     const fetchZoneData = async () => {
       try {
         const response = await axios.get(`http://${iotApiUrl}/getinput`);
         if (response.status === 200) {
-          console.log("dropdown data:", response.data);
+          // console.log("dropdown data:", response.data);
           setDropDownData(response.data);
         } else {
           console.log("Unexpected response:", response);
@@ -150,26 +156,84 @@ const LineGrapInput = (props: Props) => {
     fetchZoneData();
   }, []);
 
+  useEffect(() => {
+    const fetchSavedInputes = async() => {
+      if (selectedChartId.id !== "") {
+        try {
+          const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${selectedChartId.id}/${organization}`);
+          if (response.status === 200) {
+            setSelections(response.data.Data.measurements)
+            setDuration(response.data.Data.duration)
+          } else {
+            console.log("Unexpected response:", response);
+          }
+        } catch (error) {
+          console.error("There was an error!", error);
+        }
+      }
+    }
+
+    fetchSavedInputes();
+
+  }, [selectedChartId.id]);
+
   // Sync Zustand state when component mounts
   useEffect(() => {
-    setSelections(measurements);
+    setMeasurements(selections);
-  }, [measurements]);
+    updateDuration(duration);
+  }, [selections, duration]);
 
-  const handleSelect = (inputKey: string, selectedData: { name: string; fields: string } | null) => {
+
-    setSelections((prev) => {
+  const sendInputes = async(inputMeasurement: any, inputDuration: any) => {
-      const newSelections = { ...prev };
+    try {
+      const response = await axios.post(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/widget/save`,{
+        organization: organization,
+        zoneId: selectedZone.zoneId,
+        widget:{
+          id: selectedChartId.id,
+          panel: selectedChartId.panel,
+          Data: {
+            measurements: inputMeasurement,
+            duration: inputDuration
+          }
+        }
+      } as any);
+      if (response.status === 200) {
+        return true
+      } else {
+        console.log("Unexpected response:", response);
+        return false
+      }
+    } catch (error) {
+      console.error("There was an error!", error);
+      return false
+    }
+  }
+
+  const handleSelect = async(inputKey: string, selectedData: { name: string; fields: string } | null) => {
+    
+      // async() => {
+      const newSelections = { ...selections };
       if (selectedData === null) {
         delete newSelections[inputKey];
       } else {
         newSelections[inputKey] = selectedData;
       }
-      setMeasurements(newSelections); // Update Zustand store
+      // setMeasurements(newSelections); // Update Zustand store
-      return newSelections;
+      console.log(newSelections);
-    });
+      if ( await sendInputes(newSelections, duration)) {
+        setSelections(newSelections);
+      }
+      // sendInputes(newSelections, duration); // Send data to server
+      // return newSelections;
+    // };
   };
 
-  const handleSelectDuration = (option: string) => {
+  const handleSelectDuration = async(option: string) => {
-    updateDuration(option);
+    if ( await sendInputes(selections, option)) {
+      setDuration(option);
+    }
+    // setDuration(option);
   };
 
   return (

app/src/components/ui/componets/DraggableWidget.tsx

@@ -230,11 +230,13 @@ export const DraggableWidget = ({
         )}
 
         {/* Render charts based on widget type */}
+        
         {widget.type === "progress" && (
           <ProgressCard title={widget.title} data={widget.data} />
         )}
         {widget.type === "line" && (
           <LineGraphComponent
+            id={widget.id}
             type={widget.type}
             title={widget.title}
             fontSize={widget.fontSize}
@@ -251,6 +253,7 @@ export const DraggableWidget = ({
         )}
         {widget.type === "bar" && (
           <BarGraphComponent
+            id={widget.id}
             type={widget.type}
             title={widget.title}
             fontSize={widget.fontSize}
@@ -267,6 +270,7 @@ export const DraggableWidget = ({
         )}
         {widget.type === "pie" && (
           <PieGraphComponent
+            id={widget.id}
             type={widget.type}
             title={widget.title}
             fontSize={widget.fontSize}

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

@@ -190,8 +190,11 @@ import { Bar } 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 +203,7 @@ interface ChartComponentProps {
 }
 
 const BarGraphComponent = ({
+  id,
   type,
   title,
   fontFamily,
@@ -207,14 +211,18 @@ const BarGraphComponent = ({
   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 +262,34 @@ const BarGraphComponent = ({
     [fontFamily, fontSizeValue, fontWeightValue]
   );
 
-  // Memoized Chart Options
+    // Memoize Chart Options
-  const options = useMemo(
+    const options = useMemo(
-    () => ({
+      () => ({
-      responsive: true,
+        responsive: true,
-      maintainAspectRatio: false,
+        maintainAspectRatio: false,
-      plugins: {
+        plugins: {
-        title: {
+          title: {
-          display: true,
-          text: title,
-          font: chartFontStyle,
-        },
-        legend: {
-          display: false,
-        },
-      },
-      scales: {
-        x: {
-          ticks: {
             display: true,
+            text: title,
+            font: chartFontStyle,
+          },
+          legend: {
+            display: false,
           },
         },
-      },
+        scales: {
-    }),
+          x: {
-    [title, chartFontStyle]
+            ticks: {
-  );
+              display: true, // This hides the x-axis labels
+            },
+          },
+        },
+      }),
+      [title, chartFontStyle]
+    );
+
+    // useEffect(() => {console.log(measurements);
+    // },[measurements])
 
   useEffect(() => {
     if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0) return;
@@ -291,15 +302,18 @@ const BarGraphComponent = ({
       interval: 1000,
     };
 
-    const startStream = () => {
+
+    const startStream = () => {  
+      console.log("inputtttttttttt",inputData);
       socket.emit("lineInput", inputData);
     };
 
     socket.on("connect", startStream);
 
     socket.on("lineOutput", (response) => {
+      console.log("responce dataaaaaaaaa",response.data);
+      
       const responseData = response.data;
-      console.log("Received data:", responseData);
 
       // Extract timestamps and values
       const labels = responseData.time;
@@ -325,8 +339,35 @@ const BarGraphComponent = ({
     };
   }, [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 <Bar data={Object.keys(measurements).length > 0 ? chartData : defaultData} options={options} />;
 };
 
 export default BarGraphComponent;
-

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

@@ -3,8 +3,11 @@ import { Line } 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;
@@ -13,6 +16,7 @@ interface ChartComponentProps {
 }
 
 const LineGraphComponent = ({
+  id,
   type,
   title,
   fontFamily,
@@ -20,14 +24,18 @@ const LineGraphComponent = ({
   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: [
@@ -93,8 +101,8 @@ const LineGraphComponent = ({
       [title, chartFontStyle]
     );
 
-    useEffect(() => {console.log(measurements);
+    // useEffect(() => {console.log(measurements);
-    },[measurements])
+    // },[measurements])
 
   useEffect(() => {
     if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0) return;
@@ -107,7 +115,8 @@ const LineGraphComponent = ({
       interval: 1000,
     };
 
-    const startStream = () => {
+
+    const startStream = () => {  
       socket.emit("lineInput", inputData);
     };
 
@@ -140,6 +149,34 @@ const LineGraphComponent = ({
     };
   }, [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 <Line data={Object.keys(measurements).length > 0 ? chartData : defaultData} options={options} />;
 };
 

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
+    // Memoize Chart Options
-  const options = useMemo(
+    const options = useMemo(
-    () => ({
+      () => ({
-      responsive: true,
+        responsive: true,
-      maintainAspectRatio: false,
+        maintainAspectRatio: false,
-      plugins: {
+        plugins: {
-        title: {
+          title: {
-          display: true,
+            display: true,
-          text: title,
+            text: title,
-          font: chartFontStyle,
+            font: chartFontStyle,
+          },
+          legend: {
+            display: false,
+          },
         },
-        legend: {
+        scales: {
-          display: false,
+          // x: {
+          //   ticks: {
+          //     display: true, // This hides the x-axis labels
+          //   },
+          // },
         },
-      },
+      }),
-      scales: {
+      [title, chartFontStyle]
-        // x: {
+    );
-        //   ticks: {
+
-        //     display: true,
+    // useEffect(() => {console.log(measurements);
-        //   },
+    // },[measurements])
-        // },
-      },
-    }),
-    [title, chartFontStyle]
-  );
 
   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;
-