Add iot data and custom input card for floting cards

2025-04-01 19:06:29 +05:30
parent 716e7109c4
commit 688b7eb4a0
13 changed files with 976 additions and 45 deletions
--- a/app/src/components/ui/componets/DisplayZone.tsx
+++ b/app/src/components/ui/componets/DisplayZone.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState, useCallback } from "react";
-import { Widget } from "../../../store/useWidgetStore";
+import { useWidgetStore, Widget } from "../../../store/useWidgetStore";
 import { MoveArrowLeft, MoveArrowRight } from "../../icons/SimulationIcons";
 import { InfoIcon } from "../../icons/ExportCommonIcons";
 import { useDroppedObjectsStore, useFloatingWidget } from "../../../store/useDroppedObjectsStore";
@@ -74,6 +74,7 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
  const [showLeftArrow, setShowLeftArrow] = useState(false);
  const [showRightArrow, setShowRightArrow] = useState(false);
  const { floatingWidget, setFloatingWidget } = useFloatingWidget()
+  const{setSelectedChartId}=useWidgetStore()

  // Function to calculate overflow state
  const updateOverflowState = useCallback(() => {
@@ -152,9 +153,9 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
  async function handleSelect2dZoneData(zoneId: string, zoneName: string) {
    try {
      if (selectedZone?.zoneId === zoneId) {
-
        return;
      }
+      setSelectedChartId(null)
      const email = localStorage.getItem("email") || "";
      const organization = email?.split("@")[1]?.split(".")[0];
      // Fetch data from backend
--- a/app/src/components/ui/componets/DraggableWidget.tsx
+++ b/app/src/components/ui/componets/DraggableWidget.tsx
@@ -5,6 +5,8 @@ import BarGraphComponent from "../realTimeVis/charts/BarGraphComponent";
 import LineGraphComponent from "../realTimeVis/charts/LineGraphComponent";
 import DoughnutGraphComponent from "../realTimeVis/charts/DoughnutGraphComponent";
 import PolarAreaGraphComponent from "../realTimeVis/charts/PolarAreaGraphComponent";
+import ProgressCard1 from "../realTimeVis/charts/ProgressCard1";
+import ProgressCard2 from "../realTimeVis/charts/ProgressCard2";
 import {
  DeleteIcon,
  DublicateIcon,
@@ -203,6 +205,7 @@ export const DraggableWidget = ({
      onReorder(fromIndex, toIndex); // Call the reorder function passed as a prop
    }
  };
+  console.log("widget.type", widget.type);

  return (
    <>
@@ -249,9 +252,12 @@ export const DraggableWidget = ({
        )}

        {/* Render charts based on widget type */}
-        
-        {widget.type === "progress" && (
-          <ProgressCard title={widget.title} data={widget.data} />
+
+        {widget.type === "progress 1" && (
+          <ProgressCard1 title={widget.title} id={widget.id} />
+        )}
+        {widget.type === "progress 2" && (
+          <ProgressCard2 title={widget.title} id={widget.id} />
        )}
        {widget.type === "line" && (
          <LineGraphComponent
@@ -260,14 +266,6 @@ export const DraggableWidget = ({
            title={widget.title}
            fontSize={widget.fontSize}
            fontWeight={widget.fontWeight}
-            // data={{
-            //   measurements: [
-            //     { name: "testDevice", fields: "powerConsumption" },
-            //     { name: "furnace", fields: "powerConsumption" },
-            //   ],
-            //   interval: 1000,
-            //   duration: "1h",
-            // }}
          />
        )}
        {widget.type === "bar" && (
@@ -277,14 +275,6 @@ export const DraggableWidget = ({
            title={widget.title}
            fontSize={widget.fontSize}
            fontWeight={widget.fontWeight}
-            // data={{
-            //   measurements: [
-            //     { name: "testDevice", fields: "powerConsumption" },
-            //     { name: "furnace", fields: "powerConsumption" },
-            //   ],
-            //   interval: 1000,
-            //   duration: "1h",
-            // }}
          />
        )}
        {widget.type === "pie" && (
@@ -294,14 +284,6 @@ export const DraggableWidget = ({
            title={widget.title}
            fontSize={widget.fontSize}
            fontWeight={widget.fontWeight}
-            // data={{
-            //   measurements: [
-            //     { name: "testDevice", fields: "powerConsumption" },
-            //     { name: "furnace", fields: "powerConsumption" },
-            //   ],
-            //   interval: 1000,
-            //   duration: "1h",
-            // }}
          />
        )}
        {widget.type === "doughnut" && (
--- a/app/src/components/ui/componets/Dropped3dWidget.tsx
+++ b/app/src/components/ui/componets/Dropped3dWidget.tsx
@@ -126,6 +126,7 @@ export default function Dropped3dWidgets() {
    return (
        <>
            {activeZoneWidgets.map(({ id, type, position }) => {
+                console.log('Typeeeeeeeeeeee',type);
                switch (type) {
                    case "ui-Widget 1":
                        return <ProductionCapacity key={id} position={position} />;
--- a/app/src/components/ui/realTimeVis/charts/ProgressCard1.tsx
+++ b/app/src/components/ui/realTimeVis/charts/ProgressCard1.tsx
@@ -0,0 +1,105 @@
+import { StockIncreseIcon } from "../../../icons/RealTimeVisulationIcons";
+import React, { useEffect, useMemo, useState } from "react";
+import { Line } from "react-chartjs-2";
+import io from "socket.io-client";
+import useChartStore from "../../../../store/useChartStore";
+import { useWidgetStore } from "../../../../store/useWidgetStore";
+import axios from "axios";
+
+const ProgressCard1 = ({ id,title,}: {
+  id: string,
+  title: string;
+}) => {
+    const { measurements: chartMeasurements, duration: chartDuration, name: widgetName } = useChartStore();
+    const [measurements, setmeasurements] = useState<any>({});
+    const [duration, setDuration] = useState("1h")
+    const [name, setName] = useState(title)
+    const [value, setValue] = useState<any>('')
+    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 socket = io(`http://${iotApiUrl}`);
+        if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0) return;
+    
+        const inputData = {
+          measurements,
+          duration,
+          interval: 1000,
+        };
+    
+    
+        const startStream = () => {  
+          socket.emit("lastInput", inputData);
+        };
+    
+        socket.on("connect", startStream);
+    
+        socket.on("lastOutput", (response) => {
+            const responseData = response.input1;
+            setValue(responseData);
+          
+        });
+    
+        return () => {
+          socket.off("lastOutput");
+          socket.emit("stop_stream"); // Stop streaming when component unmounts
+          socket.disconnect();
+        };
+      }, [measurements, duration]);
+    
+      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)
+              setName(response.data.widgetName)
+            } 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, widgetName])
+
+    return(
+        <div className="chart progressBar">
+          <div className="header">{name}</div>
+            <div className="stock">
+              <span className="stock-item">
+                <span className="stockValues">
+                <div className="value">{value}</div>
+                  <div className="key">Units</div>
+                  
+                </span>
+                <div className="stock-description">{
+                    measurements ? `${measurements?.input1?.fields}` : 'description'}</div>
+              </span>
+              <div className="icon">
+                <StockIncreseIcon />
+              </div>
+            </div>
+        </div>
+      )
+};
+
+export default ProgressCard1;
--- a/app/src/components/ui/realTimeVis/charts/ProgressCard2.tsx
+++ b/app/src/components/ui/realTimeVis/charts/ProgressCard2.tsx
@@ -0,0 +1,125 @@
+import { StockIncreseIcon } from "../../../icons/RealTimeVisulationIcons";
+import React, { useEffect, useMemo, useState } from "react";
+import { Line } from "react-chartjs-2";
+import io from "socket.io-client";
+import useChartStore from "../../../../store/useChartStore";
+import { useWidgetStore } from "../../../../store/useWidgetStore";
+import axios from "axios";
+
+const ProgressCard2 = ({ id,title,}: {
+  id: string,
+  title: string;
+}) => {
+    const { measurements: chartMeasurements, duration: chartDuration, name: widgetName } = useChartStore();
+    const [measurements, setmeasurements] = useState<any>({});
+    const [duration, setDuration] = useState("1h")
+    const [name, setName] = useState(title)
+    const [value1, setValue1] = useState<any>('')
+    const [value2, setValue2] = useState<any>('')
+    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(() => {
+        if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0) return;
+    
+        const socket = io(`http://${iotApiUrl}`);
+    
+        const inputData = {
+          measurements,
+          duration,
+          interval: 1000,
+        };
+    
+    
+        const startStream = () => {  
+          socket.emit("lastInput", inputData);
+        };
+    
+        socket.on("connect", startStream);
+    
+        socket.on("lastOutput", (response) => {
+            const responseData1 = response.input1;
+            const responseData2 = response.input2;
+            setValue1(responseData1);
+            setValue2(responseData2);   
+        });
+    
+        return () => {
+          socket.off("lastOutput");
+          socket.emit("stop_stream"); // Stop streaming when component unmounts
+          socket.disconnect();
+        };
+      }, [measurements, duration]);
+    
+      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)
+              setName(response.data.widgetName)
+            } 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, widgetName])
+
+    return(
+        <div className="chart progressBar">
+          <div className="header">{name}</div>
+          
+            <div className="stock">
+              <span className="stock-item">
+                <span className="stockValues">
+                <div className="value">{value1}</div>
+                  <div className="key">Units</div>
+                  
+                </span>
+                <div className="stock-description">{
+                    measurements ? `${measurements?.input1?.fields}` : 'description'}</div>
+              </span>
+              <div className="icon">
+                <StockIncreseIcon />
+              </div>
+            </div>
+
+            <div className="stock">
+              <span className="stock-item">
+                <span className="stockValues">
+                <div className="value">{value2}</div>
+                  <div className="key">Units</div>
+                  
+                </span>
+                <div className="stock-description">{
+                    measurements ? `${measurements?.input2?.fields}` : 'description'}</div>
+              </span>
+              <div className="icon">
+                <StockIncreseIcon />
+              </div>
+            </div>
+
+        </div>
+      )
+};
+
+export default ProgressCard2;
--- a/app/src/components/ui/realTimeVis/floating/FleetEfficiencyComponent.tsx
+++ b/app/src/components/ui/realTimeVis/floating/FleetEfficiencyComponent.tsx
@@ -1,14 +1,93 @@
-import React,{ useEffect, useState} from 'react'
+import React, { useState, useEffect } from 'react'
+import { Line } from 'react-chartjs-2'
+import useChartStore from '../../../../store/useChartStore';
+import { useWidgetStore } from '../../../../store/useWidgetStore';
+import axios from 'axios';
+import io from "socket.io-client";

 const FleetEfficiencyComponent = ({object}: any) => {
    const [ progress, setProgress ] = useState<any>(0)
+    const [measurements, setmeasurements] = useState<any>({});
+    const [duration, setDuration] = useState("1h")
+    const [name, setName] = useState(object.header ? object.header : '')
+    const email = localStorage.getItem("email") || "";
+    const organization = email?.split("@")[1]?.split(".")[0]
+    const { header, flotingDuration, flotingMeasurements } = useChartStore();
+    const { selectedChartId } = useWidgetStore();
+
+    const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;

    // Calculate the rotation angle for the progress bar
    const rotationAngle = 45 + progress * 1.8;
+
+
+    useEffect(() => {
+        if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0) return;
+    
+        const socket = io(`http://${iotApiUrl}`);
+    
+        const inputData = {
+          measurements,
+          duration,
+          interval: 1000,
+        };
+    
+    
+        const startStream = () => {  
+          socket.emit("lastInput", inputData);
+        };
+    
+        socket.on("connect", startStream);
+    
+        socket.on("lastOutput", (response) => {
+          const responseData = response.input1;
+          console.log(responseData);
+          
+          if (typeof responseData === "number") {
+            console.log("It's a number!");
+            setProgress(responseData);
+          }
+        });
+    
+        return () => {
+          socket.off("lastOutput");
+          socket.emit("stop_stream"); // Stop streaming when component unmounts
+          socket.disconnect();
+        };
+      }, [measurements, duration, iotApiUrl]);
+    
+      const fetchSavedInputes = async() => {
+        
+        if (object?.id !== "") {
+          try {
+            const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/A_floatWidget/${object?.id}/${organization}`);
+            if (response.status === 200) {
+              setmeasurements(response.data.Data.measurements)
+              setDuration(response.data.Data.duration)
+              setName(response.data.header)
+            } else {
+              console.log("Unexpected response:", response);
+            }
+          } catch (error) {
+            console.error("There was an error!", error);
+          }
+        }
+      }
+    
+      useEffect(() => {
+        fetchSavedInputes();
+      }, []);
+    
+      useEffect(() => {
+        if (selectedChartId?.id === object?.id) {
+          fetchSavedInputes();
+        }
+      }
+      ,[header, flotingDuration, flotingMeasurements])
  
    return (
        <>
-            <h2 className="header">Fleet Efficiency</h2>
+            <h2 className="header">{name}</h2>
            <div className="progressContainer">
                <div className="progress">
                    <div className="barOverflow">
--- a/app/src/components/ui/realTimeVis/floating/TotalCardComponent.tsx
+++ b/app/src/components/ui/realTimeVis/floating/TotalCardComponent.tsx
@@ -1,21 +1,95 @@
-import React from 'react'
-import { WalletIcon } from '../../../icons/3dChartIcons'
+import React, { useState, useEffect } from 'react'
+import { Line } from 'react-chartjs-2'
+import useChartStore from '../../../../store/useChartStore';
 import { useWidgetStore } from '../../../../store/useWidgetStore';
+import axios from 'axios';
+import io from "socket.io-client";
+import { WalletIcon } from '../../../icons/3dChartIcons';
+

 const TotalCardComponent = ({
    object
 }: any) => {

-    const { setSelectedChartId } =
-        useWidgetStore();
+    const [ progress, setProgress ] = useState<any>(0)
+    const [measurements, setmeasurements] = useState<any>({});
+    const [duration, setDuration] = useState("1h")
+    const [name, setName] = useState(object.header ? object.header : '')
+    const email = localStorage.getItem("email") || "";
+    const organization = email?.split("@")[1]?.split(".")[0]
+    const { header, flotingDuration, flotingMeasurements } = useChartStore();
+    const { selectedChartId } = useWidgetStore();
+
+    const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
+
+    useEffect(() => {
+        if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0) return;
+    
+        const socket = io(`http://${iotApiUrl}`);
+    
+        const inputData = {
+          measurements,
+          duration,
+          interval: 1000,
+        };
+    
+    
+        const startStream = () => {  
+          socket.emit("lastInput", inputData);
+        };
+    
+        socket.on("connect", startStream);
+    
+        socket.on("lastOutput", (response) => {
+          const responseData = response.input1;
+          
+          if (typeof responseData === "number") {
+            setProgress(responseData);
+          }
+        });
+    
+        return () => {
+          socket.off("lastOutput");
+          socket.emit("stop_stream"); // Stop streaming when component unmounts
+          socket.disconnect();
+        };
+      }, [measurements, duration, iotApiUrl]);
+    
+      const fetchSavedInputes = async() => {
+        
+        if (object?.id !== "") {
+          try {
+            const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/A_floatWidget/${object?.id}/${organization}`);
+            if (response.status === 200) {
+              setmeasurements(response.data.Data.measurements)
+              setDuration(response.data.Data.duration)
+              setName(response.data.header)
+            } else {
+              console.log("Unexpected response:", response);
+            }
+          } catch (error) {
+            console.error("There was an error!", error);
+          }
+        }
+      }
+    
+      useEffect(() => {
+        fetchSavedInputes();
+      }, []);
+    
+      useEffect(() => {
+        if (selectedChartId?.id === object?.id) {
+          fetchSavedInputes();
+        }
+      }
+      ,[header, flotingDuration, flotingMeasurements])
+
    return (
        <>
-            <div className="header-wrapper" onClick={() => {
-                setSelectedChartId(object.id)
-            }}>
-                <div className="header">{object.header}</div>
+            <div className="header-wrapper" >
+                <div className="header">{name}</div>
                <div className="data-values">
-                    <div className="value">{object.value}</div>
+                    <div className="value">{progress}</div>
                    <div className="per">{object.per}</div>
                </div>
            </div>