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

2025-04-02 18:32:44 +05:30
parent f13065f811 26a6200867
commit 70aeee068f
48 changed files with 3286 additions and 432 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 {
@@ -73,7 +73,8 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
  // State to track overflow visibility
  const [showLeftArrow, setShowLeftArrow] = useState(false);
  const [showRightArrow, setShowRightArrow] = useState(false);
-  const { floatingWidget, setFloatingWidget } = useFloatingWidget();
+  const { floatingWidget, setFloatingWidget } = useFloatingWidget()
+  const{setSelectedChartId}=useWidgetStore()

  // Function to calculate overflow state
  const updateOverflowState = useCallback(() => {
@@ -150,6 +151,7 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
      if (selectedZone?.zoneId === zoneId) {
        return;
      }
+      setSelectedChartId(null)
      const email = localStorage.getItem("email") || "";
      const organization = email?.split("@")[1]?.split(".")[0];
      let response = await getSelect2dZoneData(zoneId, organization);
--- 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,
@@ -226,6 +228,7 @@ export const DraggableWidget = ({
      onReorder(fromIndex, toIndex); // Call the reorder function passed as a prop
    }
  };
+  console.log("widget.type", widget.type);

  // useClickOutside(chartWidget, () => {
  //   setSelectedChartId(null);
@@ -281,8 +284,11 @@ 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
@@ -291,14 +297,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" && (
@@ -308,14 +306,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" && (
@@ -325,14 +315,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
@@ -135,22 +135,23 @@ export default function Dropped3dWidgets() {
  // Get widgets for the currently active zone
  const activeZoneWidgets = zoneWidgetData[selectedZone.zoneId] || [];

-  return (
-    <>
-      {activeZoneWidgets.map(({ id, type, position }) => {
-        switch (type) {
-          case "ui-Widget 1":
-            return <ProductionCapacity key={id} position={position} />;
-          case "ui-Widget 2":
-            return <ReturnOfInvestment key={id} position={position} />;
-          case "ui-Widget 3":
-            return <StateWorking key={id} position={position} />;
-          case "ui-Widget 4":
-            return <Throughput key={id} position={position} />;
-          default:
-            return null;
-        }
-      })}
-    </>
-  );
+    return (
+        <>
+            {activeZoneWidgets.map(({ id, type, position }) => {
+                console.log('Typeeeeeeeeeeee',type);
+                switch (type) {
+                    case "ui-Widget 1":
+                        return <ProductionCapacity key={id} id={id} type={type} position={position} />;
+                    case "ui-Widget 2":
+                        return <ReturnOfInvestment key={id} id={id} type={type} position={position} />;
+                    case "ui-Widget 3":
+                        return <StateWorking key={id} id={id} type={type} position={position} />;
+                    case "ui-Widget 4":
+                        return <Throughput key={id} id={id} type={type} position={position} />;
+                    default:
+                        return null;
+                }
+            })}
+        </>
+    );
 }
--- a/app/src/components/ui/componets/DroppedFloatingWidgets.tsx
+++ b/app/src/components/ui/componets/DroppedFloatingWidgets.tsx
@@ -526,7 +526,7 @@ const DroppedObjects: React.FC = () => {
            </>
          ) : obj.className === "warehouseThroughput floating" ? (
            <>
-              <WarehouseThroughputComponent />
+              <WarehouseThroughputComponent object={obj}/>
            </>
          ) : obj.className === "fleetEfficiency floating" ? (
            <>
--- a/app/src/components/ui/inputs/InputRange.tsx
+++ b/app/src/components/ui/inputs/InputRange.tsx
@@ -8,6 +8,7 @@ interface InputToggleProps {
  onChange?: (value: number) => void; // Function to handle toggle clicks
  disabled?: boolean;
  value?: number;
+  onPointerUp?: (value: number) => void;
 }

 const InputRange: React.FC<InputToggleProps> = ({
@@ -17,9 +18,10 @@ const InputRange: React.FC<InputToggleProps> = ({
  min,
  max,
  disabled,
-  value = 5,
+  value,
+  onPointerUp,
 }) => {
-  const [rangeValue, setRangeValue] = useState<number>(value);
+  const [rangeValue, setRangeValue] = useState<number>(value ? value : 5);

  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
    const newValue = parseInt(e.target.value); // Parse the value to an integer
@@ -31,8 +33,22 @@ const InputRange: React.FC<InputToggleProps> = ({
    }
  }
  useEffect(() => {
-    setRangeValue(value);
+    value && setRangeValue(value);
  }, [value]);
+  function handlePointerUp(e: React.PointerEvent<HTMLInputElement>) {
+    const newValue = parseInt(e.currentTarget.value, 10); // Parse value correctly
+
+    if (onPointerUp) {
+      onPointerUp(newValue); // Call the callback function if it exists
+    }
+  }
+  function handlekey(e: React.KeyboardEvent<HTMLInputElement>) {
+    const newValue = parseInt(e.currentTarget.value, 10); // Parse value correctly
+
+    if (onPointerUp) {
+      onPointerUp(newValue); // Call the callback function if it exists
+    }
+  }

  return (
    <div className="input-range-container">
@@ -52,6 +68,7 @@ const InputRange: React.FC<InputToggleProps> = ({
          onChange={handleChange}
          disabled={disabled}
          value={rangeValue}
+          onPointerUp={handlePointerUp}
        />
        <input
          type="number"
@@ -61,6 +78,12 @@ const InputRange: React.FC<InputToggleProps> = ({
          value={rangeValue}
          onChange={handleChange}
          disabled={disabled}
+          onKeyUp={(e) => {
+            if (e.key === "ArrowUp" || e.key === "ArrowDown") {
+              console.log("e.key: ", e.key);
+              handlekey(e);
+            }
+          }}
        />
      </div>
    </div>
--- 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/FleetEfficiency.tsx
+++ b/app/src/components/ui/realTimeVis/floating/FleetEfficiency.tsx
@@ -1,8 +1,8 @@
 const FleetEfficiency = () => {
-  const progress = 75; // Example progress value (0-100)
+  const progress = 50; // Example progress value (0-100)

  // Calculate the rotation angle for the progress bar
-  const rotationAngle = -90 + progress * 3.6; // Progress starts from the left (-90°)
+  const rotationAngle = 45 + progress * 1.8;

  const handleDragStart = (event: React.DragEvent<HTMLDivElement>) => {
    const rect = event.currentTarget.getBoundingClientRect(); // Get position
--- a/app/src/components/ui/realTimeVis/floating/FleetEfficiencyComponent.tsx
+++ b/app/src/components/ui/realTimeVis/floating/FleetEfficiencyComponent.tsx
@@ -1,19 +1,99 @@
-import React 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";

-type Props = {}
+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 FleetEfficiencyComponent = ({
-    object
-}: any) => {
+    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">
                        <div
                            className="bar"
-                            style={{ transform: `rotate(${object.value}deg)` }}
+                            style={{ transform: `rotate(${rotationAngle}deg)` }}
                        ></div>
                    </div>
                </div>
@@ -21,7 +101,7 @@ const FleetEfficiencyComponent = ({
            <div className="scaleLabels">
                <span>0%</span>
                <div className="centerText">
-                    <div className="percentage">{object.per}%</div>
+                    <div className="percentage">{progress}%</div>
                    <div className="status">Optimal</div>
                </div>
                <span>100%</span>
--- 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>
--- a/app/src/components/ui/realTimeVis/floating/WarehouseThroughputComponent.tsx
+++ b/app/src/components/ui/realTimeVis/floating/WarehouseThroughputComponent.tsx
@@ -1,6 +1,9 @@
-import React, { 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 WarehouseThroughputComponent = ({
    object
@@ -8,6 +11,17 @@ const WarehouseThroughputComponent = ({

    const [measurements, setmeasurements] = useState<any>({});
    const [duration, setDuration] = useState("1h")
+    const [name, setName] = useState(object.header ? object.header : '')
+    const [chartData, setChartData] = useState<{ labels: string[]; datasets: any[] }>({
+      labels: [],
+      datasets: [],
+    });
+    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;

    const lineGraphData = {
        labels: [
@@ -95,35 +109,94 @@ const WarehouseThroughputComponent = ({
      };


-    //   const fetchSavedInputes = async() => {
+      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("lineInput", inputData);
+        };
+    
+        socket.on("connect", startStream);
+    
+        socket.on("lineOutput", (response) => {
+          const responseData = response.data;
+    
+          // Extract timestamps and values
+          const labels = responseData.time;
+          const datasets = Object.keys(measurements).map((key) => {
+            const measurement = measurements[key];
+            const datasetKey = `${measurement.name}.${measurement.fields}`;
+            return {
+              label: datasetKey,
+              data: responseData[datasetKey]?.values ?? [],
+              borderColor: "#6f42c1", // Use the desired color for the line (purple)
+              backgroundColor: "rgba(111, 66, 193, 0.2)", // Use a semi-transparent purple for the fill
+              borderWidth: 2, // Line thickness
+              fill: true, // Enable fill for this dataset
+              pointRadius: 0, // Remove dots at each data point
+              tension: 0.5, // Smooth interpolation for the line
+            };
+          });
+    
+          setChartData({ labels, datasets });
+        });
+    
+        return () => {
+          socket.off("lineOutput");
+          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])
    
-    //     if (object.id !== "") {
-    //       try {
-    //         const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_LOCAL_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);
-    //       }
-    //     }
-    //   }
-
      
    return (
        <>
            <div className="header">
-                <h2>Warehouse Throughput</h2>
-                <p>
+                <h2>{name}</h2>
+                {/* <p>
                    <span>(+5) more</span> in 2025
-                </p>
+                </p> */}
            </div>
            <div className="lineGraph" style={{ height: "100%" }}>
-                <Line data={lineGraphData} options={lineGraphOptions} />
+                <Line data={ Object.keys(measurements).length > 0 ? chartData : lineGraphData} options={lineGraphOptions} />
            </div>
        </>
    )