Merge branch 'realTimeVisulization' of http://185.100.212.76:7776/Dwinzo-Beta/Dwinzo_dev into realTimeVisulization

2025-04-01 14:27:19 +05:30 · 2025-04-01 14:27:19 +05:30 · 03e7c32bfb
parent 6f483baf8d
commit 03e7c32bfb
15 changed files with 741 additions and 119 deletions
--- a/app/src/components/layout/sidebarLeft/visualization/widgets/Widgets2D.tsx
+++ b/app/src/components/layout/sidebarLeft/visualization/widgets/Widgets2D.tsx
@ -99,6 +99,7 @@ const ProgressBarWidget = ({
    </div>
  );
 };
+console.log(chartTypes,"chartTypes");

 const Widgets2D = () => {
  return (
--- a/app/src/components/layout/sidebarRight/visualization/IotInputCards/BarChartInput.tsx
+++ b/app/src/components/layout/sidebarRight/visualization/IotInputCards/BarChartInput.tsx
@ -0,0 +1,177 @@
+import React, { useEffect, useState } from "react";
+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";
+import RenameInput from "../../../../ui/inputs/RenameInput";
+
+type Props = {};
+
+const BarChartInput = (props: Props) => {
+  const [widgetName, setWidgetName] = useState('Widget');
+  const { setMeasurements, updateDuration, updateName } = useChartStore();
+  const [duration, setDuration] = useState('1h')
+  const [dropDowndata, setDropDownData] = useState({});
+  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);
+          setDropDownData(response.data);
+        } else {
+          console.log("Unexpected response:", response);
+        }
+      } catch (error) {
+        console.error("There was an error!", error);
+      }
+    };
+    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)
+            setWidgetName(response.data.widgetName)
+          } 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(() => {
+    setMeasurements(selections);
+    updateDuration(duration);
+    updateName(widgetName);
+  }, [selections, duration, widgetName]);
+
+
+  const sendInputes = async (inputMeasurement: any, inputDuration: any, inputName: any) => {
+    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,
+          widgetName: inputName,
+          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
+    console.log(newSelections);
+    if (await sendInputes(newSelections, duration, widgetName)) {
+      setSelections(newSelections);
+    }
+    // sendInputes(newSelections, duration); // Send data to server
+    // return newSelections;
+    // };
+  };
+
+  const handleSelectDuration = async (option: string) => {
+    if (await sendInputes(selections, option, widgetName)) {
+      setDuration(option);
+    }
+    // setDuration(option);
+  };
+
+  const handleNameChange = async (name:any) => {
+    console.log('name change requested',name);
+    
+    if (await sendInputes(selections, duration, name)) {
+      setWidgetName(name);
+    }
+  }
+
+  return (
+    <>
+      <div className="inputs-wrapper">
+        <div className="datas">
+          <div className="datas__label">Title</div>
+          <RenameInput value={selectedChartId?.title || "untited"} onRename={handleNameChange}/>
+        </div>
+        {[...Array(3)].map((_, index) => {
+          const inputKey = `input${index + 1}`;
+          return (
+            <div key={index} className="datas">
+              <div className="datas__label">Input {index + 1}</div>
+              <div className="datas__class">
+                <MultiLevelDropdown
+                  data={dropDowndata}
+                  onSelect={(selectedData) => handleSelect(inputKey, selectedData)}
+                  onUnselect={() => handleSelect(inputKey, null)}
+                  selectedValue={selections[inputKey]} // Load from Zustand
+                />
+                <div className="icon">
+                  <AddIcon />
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+      <div>
+        <div className="datas">
+          <div className="datas__label">Duration</div>
+          <div className="datas__class">
+            <RegularDropDown
+              header={duration}
+              options={["1h", "2h", "12h"]}
+              onSelect={handleSelectDuration}
+              search={false}
+            />
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default BarChartInput;
--- a/app/src/components/layout/sidebarRight/visualization/IotInputCards/FlotingWidgetInput.tsx
+++ b/app/src/components/layout/sidebarRight/visualization/IotInputCards/FlotingWidgetInput.tsx
@ -12,7 +12,7 @@ type Props = {};

 const FlotingWidgetInput = (props: Props) => {
  const [widgetName, setWidgetName] = useState('Widget');
-  const { setMeasurements, updateDuration, updateName } = useChartStore();
+  const { setFlotingMeasurements, updateFlotingDuration, updateHeader } = useChartStore();
  const [duration, setDuration] = useState('1h')
  const [dropDowndata, setDropDownData] = useState({});
  const [selections, setSelections] = useState<Record<string, { name: string; fields: string }>>({});
@ -43,11 +43,13 @@ const FlotingWidgetInput = (props: Props) => {
    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}`);
+          const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/A_floatWidget/${selectedChartId.id}/${organization}`);
          if (response.status === 200) {
+            console.log(response.data);
+            
            setSelections(response.data.Data.measurements)
            setDuration(response.data.Data.duration)
-            setWidgetName(response.data.widgetName)
+            setWidgetName(response.data.header)
          } else {
            console.log("Unexpected response:", response);
          }
@ -63,9 +65,9 @@ const FlotingWidgetInput = (props: Props) => {

  // Sync Zustand state when component mounts
  useEffect(() => {
-    setMeasurements(selections);
-    updateDuration(duration);
-    updateName(widgetName);
+    setFlotingMeasurements(selections);
+    updateFlotingDuration(duration);
+    updateHeader(widgetName);
  }, [selections, duration, widgetName]);


@ -76,8 +78,7 @@ const FlotingWidgetInput = (props: Props) => {
        zoneId: selectedZone.zoneId,
        widget: {
          id: selectedChartId.id,
-          panel: selectedChartId.panel,
-          widgetName: inputName,
+          header: inputName,
          Data: {
            measurements: inputMeasurement,
            duration: inputDuration
@ -135,7 +136,7 @@ const FlotingWidgetInput = (props: Props) => {
      <div className="inputs-wrapper">
        <div className="datas">
          <div className="datas__label">Title</div>
-          <RenameInput value={selectedChartId?.title || "untited"} onRename={handleNameChange}/>
+          <RenameInput value={selectedChartId?.header || "untited"} onRename={handleNameChange}/>
        </div>
        {[...Array(6)].map((_, index) => {
          const inputKey = `input${index + 1}`;
--- a/app/src/components/layout/sidebarRight/visualization/IotInputCards/InputSelecterComponent.tsx
+++ b/app/src/components/layout/sidebarRight/visualization/IotInputCards/InputSelecterComponent.tsx
@ -0,0 +1,75 @@
+import React from 'react'
+import LineGrapInput from './LineGrapInput'
+import BarChartInput from './BarChartInput'
+import PieChartInput from './PieChartInput'
+import FlotingWidgetInput from './FlotingWidgetInput'
+import WarehouseThroughputInputComponent from './WarehouseThroughputInputComponent'
+import { useWidgetStore } from '../../../../../store/useWidgetStore'
+
+const InputSelecterComponent = () => {
+    const { selectedChartId } = useWidgetStore();
+    console.log('selectedChartId:',selectedChartId);
+    
+
+  if (selectedChartId && selectedChartId.type && selectedChartId.type === 'bar' ) {
+    return (
+        <>
+        <div className="sideBarHeader">2D Widget Input</div>
+        <BarChartInput />
+        </>
+      )
+  }
+
+  else if (selectedChartId && selectedChartId.type && selectedChartId.type === 'line' ) {
+    return (
+        <>
+        <div className="sideBarHeader">2D Widget Input</div>
+        <LineGrapInput />
+        </>
+      )
+  }
+
+  else if (selectedChartId && selectedChartId.type && selectedChartId.type === 'pie' ) {
+    return (
+        <>
+        <div className="sideBarHeader">2D Widget Input</div>
+        <PieChartInput />
+        </>
+      )
+  }
+
+  else if (selectedChartId && selectedChartId.type && selectedChartId.type === 'doughnut' ) {
+    return (
+        <>
+        <div className="sideBarHeader">2D Widget Input</div>
+        <PieChartInput />
+        </>
+      )
+  }
+
+  else if (selectedChartId && selectedChartId.type && selectedChartId.type === 'polarArea' ) {
+    return (
+        <>
+        <div className="sideBarHeader">2D Widget Input</div>
+        <PieChartInput />
+        </>
+      )
+  }
+
+  else if (selectedChartId && selectedChartId.className && selectedChartId.className === 'warehouseThroughput floating' ) {
+    return (
+        <>
+        <div className="sideBarHeader">Floting Widget Input</div>
+        <WarehouseThroughputInputComponent />
+        </>
+      )
+  }
+
+  else {
+    return (
+        <div>No chart selected</div>
+      )
+  }
+}
+
+export default InputSelecterComponent
--- a/app/src/components/layout/sidebarRight/visualization/IotInputCards/LineGrapInput.tsx
+++ b/app/src/components/layout/sidebarRight/visualization/IotInputCards/LineGrapInput.tsx
@ -256,7 +256,7 @@ const LineGrapInput = (props: Props) => {
          <div className="datas__label">Title</div>
          <RenameInput value={selectedChartId?.title || "untited"} onRename={handleNameChange}/>
        </div>
-        {[...Array(6)].map((_, index) => {
+        {[...Array(4)].map((_, index) => {
          const inputKey = `input${index + 1}`;
          return (
            <div key={index} className="datas">
--- a/app/src/components/layout/sidebarRight/visualization/IotInputCards/PieChartInput.tsx
+++ b/app/src/components/layout/sidebarRight/visualization/IotInputCards/PieChartInput.tsx
@ -1,78 +1,177 @@
-import React, { useEffect, useState } from 'react'
-import MultiLevelDropdown from '../../../../ui/inputs/MultiLevelDropDown'
-import { AddIcon } from '../../../../icons/ExportCommonIcons'
-import axios from 'axios'
+import React, { useEffect, useState } from "react";
+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";
+import RenameInput from "../../../../ui/inputs/RenameInput";

-type Props = {}
+type Props = {};

 const PieChartInput = (props: Props) => {
-    const [dropDowndata, setDropDownData] = useState({})
-    const [selections, setSelections] = useState<Record<string, {name: string, fields: string}>>({})
-    const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
+  const [widgetName, setWidgetName] = useState('Widget');
+  const { setMeasurements, updateDuration, updateName } = useChartStore();
+  const [duration, setDuration] = useState('1h')
+  const [dropDowndata, setDropDownData] = useState({});
+  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);
-                    setDropDownData(response.data)
-                } else {
-                    console.log('Unexpected response:', response);
-                }
-            } catch (error) {
-                console.error('There was an error!', error);
-            }
-        };
-        fetchZoneData();
-    }, []);
-
-    useEffect(() => {console.log(selections);
-    },[selections])
-
-    const handleSelect = (inputKey: string, selectedData: {name: string, fields: string} | null) => {
-        setSelections(prev => {
-            if (selectedData === null) {
-                const newSelections = {...prev};
-                delete newSelections[inputKey];
-                return newSelections;
-            } else {
-                return {
-                    ...prev,
-                    [inputKey]: selectedData
-                };
-            }
-        });
+  useEffect(() => {
+    const fetchZoneData = async () => {
+      try {
+        const response = await axios.get(`http://${iotApiUrl}/getinput`);
+        if (response.status === 200) {
+          // console.log("dropdown data:", response.data);
+          setDropDownData(response.data);
+        } else {
+          console.log("Unexpected response:", response);
+        }
+      } catch (error) {
+        console.error("There was an error!", error);
+      }
    };
+    fetchZoneData();
+  }, []);

-    return (
-        <>
-        <div className="inputs-wrapper">
-            {[...Array(3)].map((_, index) => {
-                const inputKey = `input${index+1}`;
-                return (
-                    <div key={index} className="datas">
-                        <div className="datas__label">Input {index+1}</div>
-                        <div className="datas__class">
-                            <MultiLevelDropdown 
-                                data={dropDowndata} 
-                                onSelect={(selectedData) => handleSelect(inputKey, selectedData)}
-                                onUnselect={() => handleSelect(inputKey, null)}
-                                selectedValue={selections[inputKey]}
-                            />
-                            <div className="icon">
-                                <AddIcon />
-                            </div>
-                        </div>
-                    </div>
-                );
-            })}
-        </div>
-        <div>
-            
-        </div>
-        </>
-    )
-}
+  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)
+            setWidgetName(response.data.widgetName)
+          } else {
+            console.log("Unexpected response:", response);
+          }
+        } catch (error) {
+          console.error("There was an error!", error);
+        }
+      }
+    }

-export default PieChartInput
+    fetchSavedInputes();
+
+  }, [selectedChartId.id]);
+
+  // Sync Zustand state when component mounts
+  useEffect(() => {
+    setMeasurements(selections);
+    updateDuration(duration);
+    updateName(widgetName);
+  }, [selections, duration, widgetName]);
+
+
+  const sendInputes = async (inputMeasurement: any, inputDuration: any, inputName: any) => {
+    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,
+          widgetName: inputName,
+          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
+    console.log(newSelections);
+    if (await sendInputes(newSelections, duration, widgetName)) {
+      setSelections(newSelections);
+    }
+    // sendInputes(newSelections, duration); // Send data to server
+    // return newSelections;
+    // };
+  };
+
+  const handleSelectDuration = async (option: string) => {
+    if (await sendInputes(selections, option, widgetName)) {
+      setDuration(option);
+    }
+    // setDuration(option);
+  };
+
+  const handleNameChange = async (name:any) => {
+    console.log('name change requested',name);
+    
+    if (await sendInputes(selections, duration, name)) {
+      setWidgetName(name);
+    }
+  }
+
+  return (
+    <>
+      <div className="inputs-wrapper">
+        <div className="datas">
+          <div className="datas__label">Title</div>
+          <RenameInput value={selectedChartId?.title || "untited"} onRename={handleNameChange}/>
+        </div>
+        {[...Array(2)].map((_, index) => {
+          const inputKey = `input${index + 1}`;
+          return (
+            <div key={index} className="datas">
+              <div className="datas__label">Input {index + 1}</div>
+              <div className="datas__class">
+                <MultiLevelDropdown
+                  data={dropDowndata}
+                  onSelect={(selectedData) => handleSelect(inputKey, selectedData)}
+                  onUnselect={() => handleSelect(inputKey, null)}
+                  selectedValue={selections[inputKey]} // Load from Zustand
+                />
+                <div className="icon">
+                  <AddIcon />
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+      <div>
+        <div className="datas">
+          <div className="datas__label">Duration</div>
+          <div className="datas__class">
+            <RegularDropDown
+              header={duration}
+              options={["1h", "2h", "12h"]}
+              onSelect={handleSelectDuration}
+              search={false}
+            />
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default PieChartInput;
--- a/app/src/components/layout/sidebarRight/visualization/IotInputCards/WarehouseThroughputInputComponent.tsx
+++ b/app/src/components/layout/sidebarRight/visualization/IotInputCards/WarehouseThroughputInputComponent.tsx
@ -0,0 +1,178 @@
+import React, { useEffect, useState } from "react";
+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";
+import RenameInput from "../../../../ui/inputs/RenameInput";
+
+type Props = {};
+
+const WarehouseThroughputInputComponent = (props: Props) => {
+  const [widgetName, setWidgetName] = useState('Widget');
+  const { setFlotingMeasurements, updateFlotingDuration, updateHeader } = useChartStore();
+  const [duration, setDuration] = useState('1h')
+  const [dropDowndata, setDropDownData] = useState({});
+  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);
+          setDropDownData(response.data);
+        } else {
+          console.log("Unexpected response:", response);
+        }
+      } catch (error) {
+        console.error("There was an error!", error);
+      }
+    };
+    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/A_floatWidget/${selectedChartId.id}/${organization}`);
+          if (response.status === 200) {
+            console.log(response.data);
+            
+            setSelections(response.data.Data.measurements)
+            setDuration(response.data.Data.duration)
+            setWidgetName(response.data.header)
+          } 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(() => {
+    setFlotingMeasurements(selections);
+    updateFlotingDuration(duration);
+    updateHeader(widgetName);
+  }, [selections, duration, widgetName]);
+
+
+  const sendInputes = async (inputMeasurement: any, inputDuration: any, inputName: any) => {
+    try {
+      const response = await axios.post(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/floatwidget/save`, {
+        organization: organization,
+        zoneId: selectedZone.zoneId,
+        widget: {
+          id: selectedChartId.id,
+          header: inputName,
+          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
+    console.log(newSelections);
+    if (await sendInputes(newSelections, duration, widgetName)) {
+      setSelections(newSelections);
+    }
+    // sendInputes(newSelections, duration); // Send data to server
+    // return newSelections;
+    // };
+  };
+
+  const handleSelectDuration = async (option: string) => {
+    if (await sendInputes(selections, option, widgetName)) {
+      setDuration(option);
+    }
+    // setDuration(option);
+  };
+
+  const handleNameChange = async (name:any) => {
+    console.log('name change requested',name);
+    
+    if (await sendInputes(selections, duration, name)) {
+      setWidgetName(name);
+    }
+  }
+
+  return (
+    <>
+      <div className="inputs-wrapper">
+        <div className="datas">
+          <div className="datas__label">Title</div>
+          <RenameInput value={selectedChartId?.header || "untited"} onRename={handleNameChange}/>
+        </div>
+        {[...Array(1)].map((_, index) => {
+          const inputKey = `input${index + 1}`;
+          return (
+            <div key={index} className="datas">
+              <div className="datas__label">Input {index + 1}</div>
+              <div className="datas__class">
+                <MultiLevelDropdown
+                  data={dropDowndata}
+                  onSelect={(selectedData) => handleSelect(inputKey, selectedData)}
+                  onUnselect={() => handleSelect(inputKey, null)}
+                  selectedValue={selections[inputKey]} // Load from Zustand
+                />
+                <div className="icon">
+                  <AddIcon />
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+      <div>
+        <div className="datas">
+          <div className="datas__label">Duration</div>
+          <div className="datas__class">
+            <RegularDropDown
+              header={duration}
+              options={["1h", "2h", "12h"]}
+              onSelect={handleSelectDuration}
+              search={false}
+            />
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default WarehouseThroughputInputComponent;
--- a/app/src/components/layout/sidebarRight/visualization/data/Data.tsx
+++ b/app/src/components/layout/sidebarRight/visualization/data/Data.tsx
@ -4,6 +4,7 @@ import { AddIcon, RemoveIcon } from "../../../../icons/ExportCommonIcons";
 import MultiLevelDropDown from "../../../../ui/inputs/MultiLevelDropDown";
 import LineGrapInput from "../IotInputCards/LineGrapInput";
 import RenameInput from "../../../../ui/inputs/RenameInput";
+import InputSelecterComponent from "../IotInputCards/InputSelecterComponent";

 // Define the data structure for demonstration purposes
 const DATA_STRUCTURE = {
@ -133,8 +134,7 @@ const Data = () => {
      {
        chartDataGroups[selectedChartId?.id] && 
        <>
-        <div className="sideBarHeader">2D Widget Input</div>
-        <LineGrapInput />
+        <InputSelecterComponent />
        </>
      }

--- a/app/src/components/ui/componets/DroppedFloatingWidgets.tsx
+++ b/app/src/components/ui/componets/DroppedFloatingWidgets.tsx
@ -379,14 +379,13 @@ const DroppedObjects: React.FC = () => {
            </>
          ) : obj.className === "warehouseThroughput floating" ? (
            <>
-              <WarehouseThroughputComponent />
+              <WarehouseThroughputComponent object={obj}/>
            </>
          ) : obj.className === "fleetEfficiency floating" ? (
            <>
              <FleetEfficiencyComponent object={obj} />
            </>
          ) : null}
-          {renderObjectContent(obj)}
          <div
            className="icon kebab"
            onClick={(event) => handleKebabClick(obj.id, event)}
--- 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,10 +1,11 @@
-import React from 'react'
+import React,{ useEffect, useState} from 'react'

-type Props = {}
+const FleetEfficiencyComponent = ({object}: any) => {
+    const [ progress, setProgress ] = useState<any>(0)

-const FleetEfficiencyComponent = ({
-    object
-}: any) => {
+    // Calculate the rotation angle for the progress bar
+    const rotationAngle = 45 + progress * 1.8;
+  
    return (
        <>
            <h2 className="header">Fleet Efficiency</h2>
@ -13,7 +14,7 @@ const FleetEfficiencyComponent = ({
                    <div className="barOverflow">
                        <div
                            className="bar"
-                            style={{ transform: `rotate(${object.value}deg)` }}
+                            style={{ transform: `rotate(${rotationAngle}deg)` }}
                        ></div>
                    </div>
                </div>
@ -21,7 +22,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/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>
        </>
    )
--- a/app/src/store/store.ts
+++ b/app/src/store/store.ts
@ -11,7 +11,7 @@ export const useSocketStore = create<any>((set: any, get: any) => ({
      return;
    }

-    const socket = io(`http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/Builder`, {
+    const socket = io(`http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}`, {
      reconnection: false,
      auth: { email, organization },
    });
--- a/app/src/store/useChartStore.ts
+++ b/app/src/store/useChartStore.ts
@ -10,9 +10,15 @@ interface MeasurementStore {
  interval: number;
  duration: string;
  name: string;
+  header: string;
+  flotingDuration: string;
+  flotingMeasurements: Record<string, Measurement>;  // Change array to Record<string, Measurement>
  setMeasurements: (newMeasurements: Record<string, Measurement>) => void;
  updateDuration: (newDuration: string) => void;
  updateName: (newName: string) => void;
+  updateHeader: (newHeader: string) => void;
+  updateFlotingDuration: (newFlotingDuration: string) => void;
+  setFlotingMeasurements: (newFlotingMeasurements: Record<string, Measurement>) => void;
 }

 const useChartStore = create<MeasurementStore>((set) => ({
@ -20,6 +26,9 @@ const useChartStore = create<MeasurementStore>((set) => ({
  interval: 1000,
  duration: "1h",
  name:'',
+  header:'',
+  flotingDuration: "1h",
+  flotingMeasurements: {},

  setMeasurements: (newMeasurements) =>
    set(() => ({ measurements: newMeasurements })),
@ -28,7 +37,16 @@ const useChartStore = create<MeasurementStore>((set) => ({
    set(() => ({ duration: newDuration })),
  
  updateName: (newName) =>
-    set(() => ({ duration: newName })),
+    set(() => ({ name: newName })),
+
+  updateHeader: (newHeader) =>
+    set(() => ({ header: newHeader })),
+
+  updateFlotingDuration: (newFlotingDuration) =>
+    set(() => ({ flotingDuration: newFlotingDuration })),
+
+  setFlotingMeasurements: (newFlotingMeasurements) =>
+    set(() => ({ flotingMeasurements: newFlotingMeasurements })),
 }));

 export default useChartStore;
--- a/app/src/styles/pages/realTimeViz.scss
+++ b/app/src/styles/pages/realTimeViz.scss
@ -196,7 +196,7 @@
        border-radius: 8px;
        box-shadow: 0px 2px 6px 0px rgba(60, 60, 67, 0.1);
        padding: 6px 0;
-        background-color: white;
+        background-color: var(--background-color);
        position: relative;

        .kebab {