Merge remote-tracking branch 'origin/main' into simulation-arm

app/package-lock.json

@@ -48,6 +48,7 @@
         "zustand": "^5.0.0-rc.2"
       },
       "devDependencies": {
+        "@types/html2canvas": "^1.0.0",
         "@types/node": "^22.9.1",
         "@types/three": "^0.169.0",
         "axios": "^1.8.4",
@@ -2020,7 +2021,7 @@
       "version": "0.8.1",
       "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz",
       "integrity": "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@jridgewell/trace-mapping": "0.3.9"
       },
@@ -2032,7 +2033,7 @@
       "version": "0.3.9",
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz",
       "integrity": "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.0.3",
         "@jridgewell/sourcemap-codec": "^1.4.10"
@@ -4135,6 +4136,26 @@
         "url": "https://github.com/sponsors/gregberge"
       }
     },
+    "node_modules/@testing-library/dom": {
+      "version": "10.4.0",
+      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz",
+      "integrity": "sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.10.4",
+        "@babel/runtime": "^7.12.5",
+        "@types/aria-query": "^5.0.1",
+        "aria-query": "5.3.0",
+        "chalk": "^4.1.0",
+        "dom-accessibility-api": "^0.5.9",
+        "lz-string": "^1.5.0",
+        "pretty-format": "^27.0.2"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@testing-library/jest-dom": {
       "version": "5.17.0",
       "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.17.0.tgz",
@@ -4246,25 +4267,25 @@
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.11.tgz",
       "integrity": "sha512-DcRjDCujK/kCk/cUe8Xz8ZSpm8mS3mNNpta+jGCA6USEDfktlNvm1+IuZ9eTcDbNk41BHwpHHeW+N1lKCz4zOw==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@tsconfig/node12": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.11.tgz",
       "integrity": "sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@tsconfig/node14": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.3.tgz",
       "integrity": "sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@tsconfig/node16": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.4.tgz",
       "integrity": "sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@turf/along": {
       "version": "7.2.0",
@@ -6470,6 +6491,17 @@
       "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
       "integrity": "sha512-oh/6byDPnL1zeNXFrDXFLyZjkr1MsBG667IM792caf1L2UPOOMf65NFzjUH/ltyfwjAGfs1rsX1eftK0jC/KIg=="
     },
+    "node_modules/@types/html2canvas": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@types/html2canvas/-/html2canvas-1.0.0.tgz",
+      "integrity": "sha512-BJpVf+FIN9UERmzhbtUgpXj6XBZpG67FMgBLLoj9HZKd9XifcCpSV+UnFcwTZfEyun4U/KmCrrVOG7829L589w==",
+      "deprecated": "This is a stub types definition. html2canvas provides its own type definitions, so you do not need this installed.",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "html2canvas": "*"
+      }
+    },
     "node_modules/@types/http-errors": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/@types/http-errors/-/http-errors-2.0.4.tgz",
@@ -9007,7 +9039,7 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
       "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/cross-env": {
       "version": "7.0.3",
@@ -9884,7 +9916,7 @@
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
       "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=0.3.1"
       }
@@ -15247,7 +15279,7 @@
       "version": "1.3.6",
       "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
       "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/makeerror": {
       "version": "1.0.12",
@@ -20715,7 +20747,7 @@
       "version": "10.9.2",
       "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.2.tgz",
       "integrity": "sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@cspotcode/source-map-support": "^0.8.0",
         "@tsconfig/node10": "^1.0.7",
@@ -20758,7 +20790,7 @@
       "version": "8.3.4",
       "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.4.tgz",
       "integrity": "sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "acorn": "^8.11.0"
       },
@@ -20770,7 +20802,7 @@
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
       "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/tsconfig-paths": {
       "version": "3.15.0",
@@ -21266,7 +21298,7 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz",
       "integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/v8-to-istanbul": {
       "version": "8.1.1",
@@ -22325,7 +22357,7 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",
       "integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=6"
       }

app/package.json

@@ -70,6 +70,7 @@
     ]
   },
   "devDependencies": {
+    "@types/html2canvas": "^1.0.0",
     "@types/node": "^22.9.1",
     "@types/three": "^0.169.0",
     "axios": "^1.8.4",

app/src/components/layout/3D-cards/CardsScene.tsx

@@ -1,25 +0,0 @@
-import { Canvas } from "@react-three/fiber";
-import Throughput from "./cards/Throughput";
-import ReturnOfInvestment from "./cards/ReturnOfInvestment";
-import ProductionCapacity from "./cards/ProductionCapacity";
-import { OrbitControls } from "@react-three/drei";
-import StateWorking from "./cards/StateWorking";
-
-const CardsScene = () => {
-  return (
-    <div className="cards-scene" style={{ width: "100%", height: "100%" }}>
-      {/* <Canvas> */}
-        {/* 3d-cards */}
-
-        {/* <ProductionCapacity /> */}
-        {/* <ReturnOfInvestment /> */}
-        {/* <StateWorking /> */}
-        {/* <Throughput /> */}
-
-        {/* <OrbitControls /> */}
-      {/* </Canvas> */}
-    </div>
-  );
-};
-
-export default CardsScene;

app/src/components/layout/sidebarLeft/SideBarLeft.tsx

@@ -6,7 +6,7 @@ import useToggleStore from "../../../store/useUIToggleStore";
 import Assets from "./Assets";
 import useModuleStore from "../../../store/useModuleStore";
 import Widgets from "./visualization/widgets/Widgets";
-import Templates from "./visualization/Templates";
+import Templates from "../../../modules/visualization/template/Templates";
 import Search from "../../ui/inputs/Search";
 
 const SideBarLeft: React.FC = () => {

app/src/components/layout/sidebarLeft/visualization/widgets/Widgets2D.tsx

@@ -45,7 +45,10 @@ const ChartWidget: React.FC<WidgetProps> = ({ type, index, title }) => {
           ),
           title,
           panel: "top",
-          data: sampleData,
+          Data: {
+            measurements:{},
+            duration:'1h'
+          },
         });
       }}
       onDragEnd={() => setDraggedAsset(null)}

app/src/components/layout/sidebarLeft/visualization/widgets/WidgetsFloating.tsx

@@ -5,11 +5,11 @@ import {
   GlobeIcon,
   WalletIcon,
 } from "../../../../icons/3dChartIcons";
-import SimpleCard from "../../../../ui/realTimeVis/floating/SimpleCard";
+import SimpleCard from "../../../../../modules/visualization/widgets/floating/cards/SimpleCard";
 
-import WarehouseThroughput from "../../../../ui/realTimeVis/floating/WarehouseThroughput";
+import WarehouseThroughput from "../../../../../modules/visualization/widgets/floating/cards/WarehouseThroughput";
-import ProductivityDashboard from "../../../../ui/realTimeVis/floating/ProductivityDashboard";
+import ProductivityDashboard from "../../../../../modules/visualization/widgets/floating/cards/ProductivityDashboard";
-import FleetEfficiency from "../../../../ui/realTimeVis/floating/FleetEfficiency";
+import FleetEfficiency from "../../../../../modules/visualization/widgets/floating/cards/FleetEfficiency";
 
 interface Widget {
   id: string;
@@ -33,7 +33,7 @@ const WidgetsFloating = () => {
   };
 
   return (
-    <div className="floatingWidgets-wrapper">
+    <div className="floatingWidgets-wrapper widgets-wrapper">
       {/* {widgets.map((widget) => (
         <div
           key={widget.id}
@@ -48,24 +48,28 @@ const WidgetsFloating = () => {
       <SimpleCard
         header={"Today’s Earnings"}
         icon={WalletIcon}
+        iconName={"WalletIcon"}
         value={"$53,000"}
         per={"+55%"}
       />
       <SimpleCard
         header={"Today’s Users"}
         icon={GlobeIcon}
+        iconName={"GlobeIcon"}
         value={"1,200"}
         per={"+30%"}
       />
       <SimpleCard
         header={"New Clients"}
         icon={DocumentIcon}
+        iconName={"DocumentIcon"}
         value={"250"}
         per={"+12%"}
       />
       <SimpleCard
         header={"Total Sales"}
         icon={CartIcon}
+        iconName={"CartIcon"}
         value={"$150,000"}
         per={"+20%"}
       />{" "}

app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx

@@ -98,7 +98,7 @@ const GlobalProperties: React.FC = () => {
     // setPlaneValue({ height: value * 100, width: value * 100 });
   }
   function updatedGrid(value: number) {
-    console.log(" (value * 100) / 4 : ", (value * 100) / 4);
+    // console.log(" (value * 100) / 4 : ", (value * 100) / 4);
     setGridValue({ size: value * 100, divisions: (value * 100) / 4 });
     setPlaneValue({ height: value * 100, width: value * 100 });
   }

app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx

@@ -32,7 +32,7 @@ const ZoneProperties: React.FC = () => {
       if (response.message === "updated successfully") {
         setEdit(false);
       } else {
-        console.log(response);
+        // console.log(response);
       }
 
     } catch (error) {
@@ -63,7 +63,7 @@ const ZoneProperties: React.FC = () => {
         )
       );
     }else{
-      console.log(response?.message);
+      // console.log(response?.message);
     }
   }
   function handleVectorChange(key: "zoneViewPortTarget" | "zoneViewPortPosition", newValue: [number, number, number]) {

app/src/components/layout/sidebarRight/visualization/design/Design.tsx

@@ -3,7 +3,7 @@ import { useWidgetStore } from "../../../../../store/useWidgetStore";
 import ChartComponent from "../../../sidebarLeft/visualization/widgets/ChartComponent";
 import RegularDropDown from "../../../../ui/inputs/RegularDropDown";
 import { WalletIcon } from "../../../../icons/3dChartIcons";
-import SimpleCard from "../../../../ui/realTimeVis/floating/SimpleCard";
+import SimpleCard from "../../../../../modules/visualization/widgets/floating/cards/SimpleCard";
 
 interface Widget {
   id: string;

app/src/components/ui/Tools.tsx

@@ -15,7 +15,7 @@ import {
 } from "../icons/ExportToolsIcons";
 import { ArrowIcon, TickIcon } from "../icons/ExportCommonIcons";
 import useModuleStore, { useThreeDStore } from "../../store/useModuleStore";
-import { handleSaveTemplate } from "../../modules/visualization/handleSaveTemplate";
+import { handleSaveTemplate } from "../../modules/visualization/functions/handleSaveTemplate";
 import { usePlayButtonStore } from "../../store/usePlayButtonStore";
 import useTemplateStore from "../../store/useTemplateStore";
 import { useSelectedZoneStore } from "../../store/useZoneStore";

app/src/components/ui/componets/functions/convertAutoToNumeric.ts

@@ -1,41 +0,0 @@
-import { getActiveProperties } from "./getActiveProperties";
-
-export const convertAutoToNumeric = (
-  canvasRect: DOMRect,
-  position: {
-    top: number | "auto";
-    left: number | "auto";
-    right: number | "auto";
-    bottom: number | "auto";
-  }
-): { top: number; left: number; right: number; bottom: number } => {
-  const { width, height } = canvasRect;
-
-  // Determine which properties are active
-  const [activeProp1, activeProp2] = getActiveProperties(position);
-
-  let top = typeof position.top !== "string" ? position.top : 0;
-  let left = typeof position.left !== "string" ? position.left : 0;
-  let right = typeof position.right !== "string" ? position.right : 0;
-  let bottom = typeof position.bottom !== "string" ? position.bottom : 0;
-
-  // Calculate missing properties based on active properties
-  if (activeProp1 === "top") {
-    bottom = height - top;
-  } else if (activeProp1 === "bottom") {
-    top = height - bottom;
-  }
-
-  if (activeProp2 === "left") {
-    right = width - left;
-  } else if (activeProp2 === "right") {
-    left = width - right;
-  }
-
-  return {
-    top,
-    left,
-    right,
-    bottom,
-  };
-};

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

@@ -1,105 +0,0 @@
-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;

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

@@ -1,125 +0,0 @@
-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;

app/src/modules/builder/agv/agv.tsx

@@ -1,111 +1,108 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Line } from "@react-three/drei";
 import {
-  useNavMesh,
+	useNavMesh,
-  usePlayAgv,
+	usePlayAgv,
-  useSimulationStates,
+	useSimulationStates,
 } from "../../../store/store";
 import PathNavigator from "./pathNavigator";
-import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
+import { useAnimationPlaySpeed, usePlayButtonStore, useResetButtonStore } from "../../../store/usePlayButtonStore";
 
 type PathPoints = {
-  modelUuid: string;
+	modelUuid: string;
-  modelSpeed: number;
+	modelSpeed: number;
-  bufferTime: number;
+	bufferTime: number;
-  points: { x: number; y: number; z: number }[];
+	points: { x: number; y: number; z: number }[];
-  hitCount: number;
+	hitCount: number;
 };
 interface ProcessContainerProps {
-  processes: any[];
+	processes: any[];
-  agvRef: any;
+	agvRef: any;
-  MaterialRef: any;
+	MaterialRef: any;
 }
 
 const Agv: React.FC<ProcessContainerProps> = ({
-  processes,
+	processes,
-  agvRef,
+	agvRef,
-  MaterialRef,
+	MaterialRef,
 }) => {
-  const [pathPoints, setPathPoints] = useState<PathPoints[]>([]);
+	const [pathPoints, setPathPoints] = useState<PathPoints[]>([]);
-  const { simulationStates } = useSimulationStates();
+	const { simulationStates } = useSimulationStates();
-  const { navMesh } = useNavMesh();
+	const { navMesh } = useNavMesh();
-  const { isPlaying } = usePlayButtonStore();
+	const { isPlaying } = usePlayButtonStore();
-  const { PlayAgv, setPlayAgv } = usePlayAgv();
+	const { isReset, setReset } = useResetButtonStore();
+	const { speed } = useAnimationPlaySpeed();
+	const globalSpeed = useRef(1);
 
+	useEffect(() => { globalSpeed.current = speed }, [speed])
 
+	useEffect(() => {
+		if (!isPlaying || isReset) {
+			agvRef.current = [];
+		}
+	}, [isPlaying, isReset])
 
-  useEffect(() => {
+	useEffect(() => {
-    if (simulationStates.length > 0) {
+		if (simulationStates.length > 0) {
-      const agvModels = simulationStates.filter(
+			const agvModels = simulationStates.filter(
-        (val) => val.modelName === "agv" && val.type === "Vehicle"
+				(val) => val.modelName === "agv" && val.type === "Vehicle"
-      );
+			);
 
-      const newPathPoints = agvModels
+			const newPathPoints = agvModels
-        .filter(
+				.filter(
-          (model: any) =>
+					(model: any) =>
-            model.points &&
+						model.points &&
-            model.points.actions &&
+						model.points.actions &&
-            typeof model.points.actions.start === "object" &&
+						typeof model.points.actions.start === "object" &&
-            typeof model.points.actions.end === "object" &&
+						typeof model.points.actions.end === "object" &&
-            "x" in model.points.actions.start &&
+						"x" in model.points.actions.start &&
-            "y" in model.points.actions.start &&
+						"y" in model.points.actions.start &&
-            "x" in model.points.actions.end &&
+						"x" in model.points.actions.end &&
-            "y" in model.points.actions.end
+						"y" in model.points.actions.end
-        )
+				)
-        .map((model: any) => ({
+				.map((model: any) => ({
-          modelUuid: model.modeluuid,
+					modelUuid: model.modeluuid,
-          modelSpeed: model.points.speed,
+					modelSpeed: model.points.speed,
-          bufferTime: model.points.actions.buffer,
+					bufferTime: model.points.actions.buffer,
-          hitCount: model.points.actions.hitCount,
+					hitCount: model.points.actions.hitCount,
-          points: [
+					points: [
-            {
+						{ x: model.position[0], y: model.position[1], z: model.position[2], },
-              x: model.position[0],
+						{ x: model.points.actions.start.x, y: 0, z: model.points.actions.start.y, },
-              y: model.position[1],
+						{ x: model.points.actions.end.x, y: 0, z: model.points.actions.end.y, },
-              z: model.position[2],
+					],
-            },
+				}));
-            {
-              x: model.points.actions.start.x,
-              y: 0,
-              z: model.points.actions.start.y,
-            },
-            {
-              x: model.points.actions.end.x,
-              y: 0,
-              z: model.points.actions.end.y,
-            },
-          ],
-        }));
 
-      setPathPoints(newPathPoints);
+			setPathPoints(newPathPoints);
-    }
+		}
-  }, [simulationStates]);
+	}, [simulationStates]);
 
-  return (
+	return (
-    <>
+		<>
-      {pathPoints.map((pair, i) => (
+			{pathPoints.map((pair, i) => (
-        <group key={i} visible={!isPlaying}>
+				<group key={i} visible={!isPlaying}>
-          <PathNavigator
+					<PathNavigator
-            navMesh={navMesh}
+						navMesh={navMesh}
-            pathPoints={pair.points}
+						pathPoints={pair.points}
-            id={pair.modelUuid}
+						id={pair.modelUuid}
-            speed={pair.modelSpeed}
+						speed={pair.modelSpeed}
-            bufferTime={pair.bufferTime}
+						globalSpeed={globalSpeed.current}
-            hitCount={pair.hitCount}
+						bufferTime={pair.bufferTime}
-            processes={processes}
+						hitCount={pair.hitCount}
-            agvRef={agvRef}
+						processes={processes}
-            MaterialRef={MaterialRef}
+						agvRef={agvRef}
-          />
+						MaterialRef={MaterialRef}
+					/>
 
-          {pair.points.slice(1).map((point, idx) => (
+					{pair.points.slice(1).map((point, idx) => (
-            <mesh position={[point.x, point.y, point.z]} key={idx}>
+						<mesh position={[point.x, point.y, point.z]} key={idx}>
-              <sphereGeometry args={[0.3, 15, 15]} />
+							<sphereGeometry args={[0.3, 15, 15]} />
-              <meshStandardMaterial color="red" />
+							<meshStandardMaterial color="red" />
-            </mesh>
+						</mesh>
-          ))}
+					))}
-        </group>
+				</group>
-      ))}
+			))}
-    </>
+		</>
-  );
+	);
 };
 
 export default Agv;

app/src/modules/builder/agv/pathNavigator.tsx

@@ -3,15 +3,15 @@ import * as THREE from "three";
 import { useFrame, useThree } from "@react-three/fiber";
 import { NavMeshQuery } from "@recast-navigation/core";
 import { Line } from "@react-three/drei";
-import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
+import { useAnimationPlaySpeed, usePlayButtonStore } from "../../../store/usePlayButtonStore";
 import { usePlayAgv } from "../../../store/store";
-import crate from "../../../assets/gltf-glb/crate_box.glb";
 
 interface PathNavigatorProps {
   navMesh: any;
   pathPoints: any;
   id: string;
   speed: number;
+  globalSpeed: number,
   bufferTime: number;
   hitCount: number;
   processes: any[];
@@ -31,6 +31,7 @@ export default function PathNavigator({
   pathPoints,
   id,
   speed,
+  globalSpeed,
   bufferTime,
   hitCount,
   processes,
@@ -38,30 +39,12 @@ export default function PathNavigator({
   MaterialRef,
 }: PathNavigatorProps) {
   const [currentPhase, setCurrentPhase] = useState<Phase>("initial");
-  //
-
   const [path, setPath] = useState<[number, number, number][]>([]);
-  const PickUpDrop = useRef([]);
+  const [toPickupPath, setToPickupPath] = useState<[number, number, number][]>([]);
-
+  const [pickupDropPath, setPickupDropPath] = useState<[number, number, number][]>([]);
-  // const [currentPhase, setCurrentPhase] = useState<"initial" | "loop">(
+  const [dropPickupPath, setDropPickupPath] = useState<[number, number, number][]>([]);
-  //   "initial"
+  const [initialPosition, setInitialPosition] = useState<THREE.Vector3 | null>(null);
-  // );
+  const [initialRotation, setInitialRotation] = useState<THREE.Euler | null>(null);
-  const [toPickupPath, setToPickupPath] = useState<[number, number, number][]>(
-    []
-  );
-
-  const [pickupDropPath, setPickupDropPath] = useState<
-    [number, number, number][]
-  >([]);
-  const [dropPickupPath, setDropPickupPath] = useState<
-    [number, number, number][]
-  >([]);
-  const [initialPosition, setInitialPosition] = useState<THREE.Vector3 | null>(
-    null
-  );
-  const [initialRotation, setInitialRotation] = useState<THREE.Euler | null>(
-    null
-  );
   const [boxVisible, setBoxVisible] = useState(false);
 
   const distancesRef = useRef<number[]>([]);
@@ -70,11 +53,20 @@ export default function PathNavigator({
   const isWaiting = useRef(false);
   const timeoutRef = useRef<NodeJS.Timeout | null>(null);
   const hasStarted = useRef(false);
+  const hasReachedPickup = useRef(false);
 
   const { scene } = useThree();
   const { isPlaying } = usePlayButtonStore();
   const { PlayAgv, setPlayAgv } = usePlayAgv();
 
+  const boxRef = useRef<THREE.Mesh | null>(null);
+
+  const baseMaterials = useMemo(() => ({
+    Box: new THREE.MeshStandardMaterial({ color: 0x8b4513 }),
+    Crate: new THREE.MeshStandardMaterial({ color: 0x00ff00 }),
+    Default: new THREE.MeshStandardMaterial({ color: 0xcccccc })
+  }), []);
+
   useEffect(() => {
     const object = scene.getObjectByProperty("uuid", id);
     if (object) {
@@ -105,12 +97,16 @@ export default function PathNavigator({
 
     setPath([]);
     setCurrentPhase("initial");
+    setToPickupPath([]);
     setPickupDropPath([]);
     setDropPickupPath([]);
+    setBoxVisible(false);
     distancesRef.current = [];
     totalDistanceRef.current = 0;
     progressRef.current = 0;
     isWaiting.current = false;
+    hasStarted.current = false;
+    hasReachedPickup.current = false;
 
     if (initialPosition && initialRotation) {
       const object = scene.getObjectByProperty("uuid", id);
@@ -130,27 +126,16 @@ export default function PathNavigator({
 
     const [pickup, drop] = pathPoints.slice(-2);
 
-    PickUpDrop.current = pathPoints.slice(-2);
-
     const object = scene.getObjectByProperty("uuid", id);
-
     if (!object) return;
 
-    const currentPosition = {
+    const currentPosition = object.position;
-      x: object.position.x,
-      y: object.position.y,
-      z: object.position.z,
-    };
 
     const toPickupPath = computePath(currentPosition, pickup);
     const pickupToDropPath = computePath(pickup, drop);
     const dropToPickupPath = computePath(drop, pickup);
 
-    if (
+    if (toPickupPath.length && pickupToDropPath.length && dropToPickupPath.length) {
-      toPickupPath.length &&
-      pickupToDropPath.length &&
-      dropToPickupPath.length
-    ) {
       setPickupDropPath(pickupToDropPath);
       setDropPickupPath(dropToPickupPath);
       setToPickupPath(toPickupPath);
@@ -177,25 +162,9 @@ export default function PathNavigator({
     isWaiting.current = false;
   }, [path]);
 
-  // Add these refs outside the useFrame if not already present:
+  function logAgvStatus(id: string, status: string) {
-  const startPointReached = useRef(false);
+    // console.log(`AGV ${id}: ${status}`);
-
+  }
-  const baseMaterials = useMemo(
-    () => ({
-      Box: new THREE.MeshStandardMaterial({ color: 0x8b4513 }),
-      Crate: new THREE.MeshStandardMaterial({ color: 0x00ff00 }),
-      // Default: new THREE.MeshStandardMaterial({ color: 0x00ff00 }),
-      Default: new THREE.MeshStandardMaterial(),
-    }),
-    []
-  );
-
-  // Example usage:
-  const targetModelUUID = id; // Replace with your target ID
-  const matchedProcess = findProcessByTargetModelUUID(
-    processes,
-    targetModelUUID
-  );
 
   function findProcessByTargetModelUUID(processes: any, targetModelUUID: any) {
     for (const process of processes) {
@@ -206,75 +175,55 @@ export default function PathNavigator({
               (target: any) => target.modelUUID === targetModelUUID
             )
           ) {
-            //
+            return process.id;
-            return process.id; // Return the process if a match is found
           }
         }
       }
     }
-    return null; // Return null if no match is found
+    return null;
   }
 
-  useFrame((_, delta) => {});
-  const boxRef = useRef<THREE.Mesh | null>(null);
-
   useEffect(() => {
-    if (!scene || !boxRef || !processes) return;
+    if (!scene || !boxRef || !processes || !MaterialRef.current) return;
 
-    // 1. Find the existing object by UUID
     const existingObject = scene.getObjectByProperty("uuid", id);
     if (!existingObject) return;
 
-    // 2. Find the process that targets this object's modelUUID
+    if (boxRef.current?.parent) {
+      boxRef.current.parent.remove(boxRef.current);
+      boxRef.current = null;
+    }
+
     if (boxVisible) {
       const matchedProcess = findProcessByTargetModelUUID(processes, id);
-
+      let materialType: "Box" | "Crate" | "Default" = "Default";
-      // 3. Determine the material (from materialref) if a process is matched
-      let materialType = "Default";
 
       if (matchedProcess) {
         const materialEntry = MaterialRef.current.find((item: any) =>
           item.objects.some((obj: any) => obj.processId === matchedProcess)
         );
-        console.log("materialEntry: ", materialEntry);
         if (materialEntry) {
-          materialType = materialEntry.material; // "Box" or "Crate"
+          materialType = materialEntry.material;
         }
       }
 
-      // 4. Create the box mesh with the assigned material
       const boxGeometry = new THREE.BoxGeometry(0.5, 0.5, 0.5);
-      const boxMaterial = baseMaterials[materialType as MaterialType];
+      const boxMesh = new THREE.Mesh(boxGeometry, baseMaterials[materialType]);
-      const boxMesh = new THREE.Mesh(boxGeometry, boxMaterial);
       boxMesh.position.y = 1;
       boxMesh.name = `box-${id}`;
-
-      // 5. Add to scene and cleanup
       existingObject.add(boxMesh);
       boxRef.current = boxMesh;
     }
 
-    if (!startPointReached.current && boxVisible) {
-      setBoxVisible(false);
-    }
     return () => {
       if (boxRef.current?.parent) {
         boxRef.current.parent.remove(boxRef.current);
       }
-      boxRef.current = null;
     };
-  }, [
+  }, [processes, MaterialRef, boxVisible, scene, id, baseMaterials]);
-    processes,
-    MaterialRef,
-    boxVisible,
-    findProcessByTargetModelUUID,
-    startPointReached,
-  ]);
 
   useFrame((_, delta) => {
-    const currentAgv = (agvRef.current || []).find(
+    const currentAgv = (agvRef.current || []).find((agv: AGVData) => agv.vehicleId === id);
-      (agv: AGVData) => agv.vehicleId === id
-    );
 
     if (!scene || !id || !isPlaying) return;
 
@@ -283,7 +232,6 @@ export default function PathNavigator({
 
     if (isPlaying && !hasStarted.current) {
       hasStarted.current = false;
-      startPointReached.current = false;
       progressRef.current = 0;
       isWaiting.current = false;
       if (timeoutRef.current) {
@@ -295,10 +243,9 @@ export default function PathNavigator({
     const isAgvReady = () => {
       if (!agvRef.current || agvRef.current.length === 0) return false;
       if (!currentAgv) return false;
-      return hitCount === currentAgv.expectedHitCount;
+      return currentAgv.isActive && hitCount >= currentAgv.maxHitCount;
     };
 
-    // Step 1: Snap to start point on first play
     if (isPlaying && !hasStarted.current && toPickupPath.length > 0) {
       setBoxVisible(false);
       const startPoint = new THREE.Vector3(...toPickupPath[0]);
@@ -311,146 +258,132 @@ export default function PathNavigator({
       }
 
       hasStarted.current = true;
-      startPointReached.current = true;
       progressRef.current = 0;
-
+      hasReachedPickup.current = false;
       setToPickupPath(toPickupPath.slice(-1));
-
+      logAgvStatus(id, "Started from station, heading to pickup");
       return;
     }
 
-    // Step 2: Wait at start point for AGV readiness
+    if (isPlaying && currentPhase === "initial" && !hasReachedPickup.current) {
-    if (isPlaying && startPointReached.current && path.length === 0) {
+      const reached = moveAlongPath(object, path, distancesRef.current, speed, delta, progressRef);
-      if (!isAgvReady()) {
+
-        return; // Prevent transitioning to the next phase if AGV is not ready
+      if (reached) {
+        hasReachedPickup.current = true;
+        if (currentAgv) {
+          currentAgv.status = 'picking';
+        }
+        logAgvStatus(id, "Reached pickup point, Waiting for material");
       }
-
-      setBoxVisible(true);
-
-      setPath([...toPickupPath]); // Start path transition once the AGV is ready
-      setCurrentPhase("toDrop");
-      progressRef.current = 0;
-      console.log("startPointReached: ", startPointReached.current);
-      startPointReached.current = false;
-
       return;
     }
 
-    if (path.length < 2) return;
+    if (isPlaying && currentAgv?.isActive && currentPhase === "initial") {
+      if (!isAgvReady()) return;
+      setTimeout(() => {
+        setBoxVisible(true);
+        setPath([...pickupDropPath]);
+        setCurrentPhase("toDrop");
+        progressRef.current = 0;
+        logAgvStatus(id, "Started from pickup point, heading to drop point");
+        if (currentAgv) {
+          currentAgv.status = 'toDrop';
+        }
+      }, 0)
+      return;
+    }
 
-    progressRef.current += delta * speed;
+    if (isPlaying && currentPhase === "toDrop") {
+      const reached = moveAlongPath(object, path, distancesRef.current, speed, delta, progressRef);
 
+      if (reached && !isWaiting.current) {
+        isWaiting.current = true;
+        logAgvStatus(id, "Reached drop point");
+        if (currentAgv) {
+          currentAgv.status = 'droping';
+        }
+        timeoutRef.current = setTimeout(() => {
+          setPath([...dropPickupPath]);
+          setCurrentPhase("toPickup");
+          progressRef.current = 0;
+          isWaiting.current = false;
+          setBoxVisible(false);
+          if (currentAgv) {
+            currentAgv.status = 'toPickup';
+          }
+          logAgvStatus(id, "Started from droping point, heading to pickup point");
+        }, bufferTime * 1000);
+      }
+      return;
+    }
+
+    if (isPlaying && currentPhase === "toPickup") {
+      const reached = moveAlongPath(object, path, distancesRef.current, speed, delta, progressRef);
+
+      if (reached) {
+        if (currentAgv) {
+          currentAgv.isActive = false;
+        }
+        setCurrentPhase("initial");
+        if (currentAgv) {
+          currentAgv.status = 'picking';
+        }
+        logAgvStatus(id, "Reached pickup point again, cycle complete");
+      }
+      return;
+    }
+
+    moveAlongPath(object, path, distancesRef.current, speed, delta, progressRef);
+  });
+
+  function moveAlongPath(
+    object: THREE.Object3D,
+    path: [number, number, number][],
+    distances: number[],
+    speed: number,
+    delta: number,
+    progressRef: React.MutableRefObject<number>
+  ): boolean {
+    if (path.length < 2) return false;
+
+    progressRef.current += delta * (speed * globalSpeed);
     let covered = progressRef.current;
     let accumulated = 0;
     let index = 0;
 
-    if (distancesRef.current.length !== path.length - 1) {
+    for (; index < distances.length; index++) {
-      distancesRef.current = [];
+      const dist = distances[index];
-      totalDistanceRef.current = 0;
+      if (accumulated + dist >= covered) break;
+      accumulated += dist;
+    }
 
-      for (let i = 0; i < path.length - 1; i++) {
+    if (index >= path.length - 1) {
-        const start = new THREE.Vector3(...path[i]);
+      if (path.length > 1) {
-        const end = new THREE.Vector3(...path[i + 1]);
+        const lastDirection = new THREE.Vector3(...path[path.length - 1])
-        const distance = start.distanceTo(end);
+          .sub(new THREE.Vector3(...path[path.length - 2]))
-        distancesRef.current.push(distance);
+          .normalize();
-        totalDistanceRef.current += distance;
+        object.rotation.y = Math.atan2(lastDirection.x, lastDirection.z);
       }
+      return true;
     }
 
-    while (
-      index < distancesRef.current.length &&
-      covered > accumulated + distancesRef.current[index]
-    ) {
-      accumulated += distancesRef.current[index];
-      index++;
-    }
-
-    // AGV has completed its path
-    if (index >= distancesRef.current.length) {
-      progressRef.current = totalDistanceRef.current;
-
-      timeoutRef.current = setTimeout(() => {
-        if (!isAgvReady()) {
-          isWaiting.current = false;
-          return;
-        }
-
-        let nextPath = [];
-        let nextPhase = currentPhase;
-
-        if (currentPhase === "toDrop") {
-          nextPath = dropPickupPath;
-          nextPhase = "toPickup";
-          setBoxVisible(false);
-        } else if (currentPhase === "toPickup") {
-          // When returning to start point (toPickup phase completed)
-          // Set position to toPickupPath[1] instead of [0]
-          if (toPickupPath.length > 1) {
-            object.position.copy(new THREE.Vector3(...toPickupPath[1]));
-            // Also set rotation towards the next point if available
-            if (toPickupPath.length > 2) {
-              const nextPoint = new THREE.Vector3(...toPickupPath[2]);
-              const direction = nextPoint
-                .clone()
-                .sub(object.position)
-                .normalize();
-              object.rotation.y = Math.atan2(direction.x, direction.z);
-            }
-          }
-
-          // Reset the path and mark start point as reached
-          setPath([]);
-          startPointReached.current = true;
-          progressRef.current = 0;
-          distancesRef.current = [];
-
-          // Stop the AGV by setting isplaying to false
-          if (currentAgv) {
-            currentAgv.isplaying = false;
-          }
-
-          // Clear timeout and return to prevent further movement
-          if (timeoutRef.current) {
-            clearTimeout(timeoutRef.current);
-            timeoutRef.current = null;
-          }
-          return;
-        } else {
-          nextPath = pickupDropPath;
-          nextPhase = "toDrop";
-          setBoxVisible(true);
-        }
-
-        setPath([...nextPath]);
-        setCurrentPhase(nextPhase);
-        progressRef.current = 0;
-        isWaiting.current = false;
-        distancesRef.current = [];
-
-        // Reset hit count for the next cycle
-        if (agvRef.current) {
-          agvRef.current = agvRef.current.map((agv: AGVData) =>
-            agv.vehicleId === id ? { ...agv, hitCount: 0 } : agv
-          );
-        }
-      }, bufferTime * 1000);
-
-      return;
-    }
-
-    // Step 4: Interpolate position and rotation
     const start = new THREE.Vector3(...path[index]);
     const end = new THREE.Vector3(...path[index + 1]);
-    const dist = distancesRef.current[index];
+    const dist = distances[index];
-
-    if (!dist || dist === 0) return;
 
     const t = THREE.MathUtils.clamp((covered - accumulated) / dist, 0, 1);
     object.position.copy(start.clone().lerp(end, t));
 
-    const direction = new THREE.Vector3().subVectors(end, start).normalize();
+    if (dist > 0.1) {
-    object.rotation.y = Math.atan2(direction.x, direction.z);
+      const targetDirection = end.clone().sub(start).normalize();
-  });
+      const targetRotationY = Math.atan2(targetDirection.x, targetDirection.z);
+
+      const rotationSpeed = Math.min(5 * delta, 1);
+      object.rotation.y = THREE.MathUtils.lerp(object.rotation.y, targetRotationY, rotationSpeed);
+    }
+
+    return false;
+  }
 
   useEffect(() => {
     return () => {

app/src/modules/collaboration/collabCams.tsx

@@ -10,190 +10,227 @@ import { useNavigate } from "react-router-dom";
 import { Html } from "@react-three/drei";
 import CollabUserIcon from "./collabUserIcon";
 import { getAvatarColor } from "./users/functions/getAvatarColor";
+import useModuleStore from "../../store/useModuleStore";
 
 const CamModelsGroup = () => {
-	const navigate = useNavigate();
+  const navigate = useNavigate();
-	const groupRef = useRef<THREE.Group>(null);
+  const groupRef = useRef<THREE.Group>(null);
-	const email = localStorage.getItem("email");
+  const email = localStorage.getItem("email");
-	const { activeUsers, setActiveUsers } = useActiveUsers();
+  const { setActiveUsers } = useActiveUsers();
-	const { socket } = useSocketStore();
+  const { socket } = useSocketStore();
+  const { activeModule } = useModuleStore();
 
-	const loader = new GLTFLoader();
+  const loader = new GLTFLoader();
-	const dracoLoader = new DRACOLoader();
+  const dracoLoader = new DRACOLoader();
-	dracoLoader.setDecoderPath("three/examples/jsm/libs/draco/gltf/");
+  dracoLoader.setDecoderPath("three/examples/jsm/libs/draco/gltf/");
-	loader.setDRACOLoader(dracoLoader);
+  loader.setDRACOLoader(dracoLoader);
 
-	const [cams, setCams] = useState<any[]>([]);
+  const [cams, setCams] = useState<any[]>([]);
-	const [models, setModels] = useState<Record<string, { targetPosition: THREE.Vector3; targetRotation: THREE.Euler }>>({});
+  const [models, setModels] = useState<
+    Record<
+      string,
+      { targetPosition: THREE.Vector3; targetRotation: THREE.Euler }
+    >
+  >({});
 
-	const dedupeCams = (cams: any[]) => {
+  const dedupeCams = (cams: any[]) => {
-		const seen = new Set();
+    const seen = new Set();
-		return cams.filter((cam) => {
+    return cams.filter((cam) => {
-			if (seen.has(cam.uuid)) return false;
+      if (seen.has(cam.uuid)) return false;
-			seen.add(cam.uuid);
+      seen.add(cam.uuid);
-			return true;
+      return true;
-		});
+    });
-	};
+  };
 
-	const dedupeUsers = (users: any[]) => {
+  const dedupeUsers = (users: any[]) => {
-		const seen = new Set();
+    const seen = new Set();
-		return users.filter((user) => {
+    return users.filter((user) => {
-			if (seen.has(user._id)) return false;
+      if (seen.has(user._id)) return false;
-			seen.add(user._id);
+      seen.add(user._id);
-			return true;
+      return true;
-		});
+    });
-	};
+  };
 
-	useEffect(() => {
+  useEffect(() => {
-		if (!email) navigate("/");
+    if (!email) navigate("/");
 
-		if (!socket) return;
+    if (!socket) return;
-		const organization = email!.split("@")[1].split(".")[0];
+    const organization = email!.split("@")[1].split(".")[0];
 
-		socket.on("userConnectResponse", (data: any) => {
+    socket.on("userConnectResponse", (data: any) => {
-			if (!groupRef.current) return;
+      if (!groupRef.current) return;
-			if (data.data.userData.email === email) return;
+      if (data.data.userData.email === email) return;
-			if (socket.id === data.socketId || organization !== data.organization) return;
+      if (socket.id === data.socketId || organization !== data.organization)
+        return;
 
-			const model = groupRef.current.getObjectByProperty("uuid", data.data.userData._id);
+      const model = groupRef.current.getObjectByProperty(
-			if (model) {
+        "uuid",
-				groupRef.current.remove(model);
+        data.data.userData._id
-			}
+      );
+      if (model) {
+        groupRef.current.remove(model);
+      }
 
-			loader.load(camModel, (gltf) => {
+      loader.load(camModel, (gltf) => {
-				const newModel = gltf.scene.clone();
+        const newModel = gltf.scene.clone();
-				newModel.uuid = data.data.userData._id;
+        newModel.uuid = data.data.userData._id;
-				newModel.position.set(
+        newModel.position.set(
-					data.data.position.x,
+          data.data.position.x,
-					data.data.position.y,
+          data.data.position.y,
-					data.data.position.z
+          data.data.position.z
-				);
+        );
-				newModel.rotation.set(
+        newModel.rotation.set(
-					data.data.rotation.x,
+          data.data.rotation.x,
-					data.data.rotation.y,
+          data.data.rotation.y,
-					data.data.rotation.z
+          data.data.rotation.z
-				);
+        );
-				newModel.userData = data.data.userData;
+        newModel.userData = data.data.userData;
 
-				setCams((prev) => dedupeCams([...prev, newModel]));
+        setCams((prev) => dedupeCams([...prev, newModel]));
-				setActiveUsers((prev: any) =>
+        setActiveUsers((prev: any) =>
-					dedupeUsers([...prev, data.data.userData])
+          dedupeUsers([...prev, data.data.userData])
-				);
+        );
-			});
+      });
-		});
+    });
 
-		socket.on("userDisConnectResponse", (data: any) => {
+    socket.on("userDisConnectResponse", (data: any) => {
-			if (!groupRef.current) return;
+      if (!groupRef.current) return;
-			if (socket.id === data.socketId || organization !== data.organization) return;
+      if (socket.id === data.socketId || organization !== data.organization)
+        return;
 
-			setCams((prev) =>
+      setCams((prev) =>
-				prev.filter((cam) => cam.uuid !== data.data.userData._id)
+        prev.filter((cam) => cam.uuid !== data.data.userData._id)
-			);
+      );
-			setActiveUsers((prev: any) =>
+      setActiveUsers((prev: any) =>
-				prev.filter((user: any) => user._id !== data.data.userData._id)
+        prev.filter((user: any) => user._id !== data.data.userData._id)
-			);
+      );
-		});
+    });
 
-		socket.on("cameraUpdateResponse", (data: any) => {
+    socket.on("cameraUpdateResponse", (data: any) => {
-			if (
+      if (
-				!groupRef.current ||
+        !groupRef.current ||
-				socket.id === data.socketId ||
+        socket.id === data.socketId ||
-				organization !== data.organization
+        organization !== data.organization
-			)
+      )
-				return;
+        return;
 
-			setModels((prev) => ({
+      setModels((prev) => ({
-				...prev,
+        ...prev,
-				[data.data.userId]: {
+        [data.data.userId]: {
-					targetPosition: new THREE.Vector3(
+          targetPosition: new THREE.Vector3(
-						data.data.position.x,
+            data.data.position.x,
-						data.data.position.y,
+            data.data.position.y,
-						data.data.position.z
+            data.data.position.z
-					),
+          ),
-					targetRotation: new THREE.Euler(
+          targetRotation: new THREE.Euler(
-						data.data.rotation.x,
+            data.data.rotation.x,
-						data.data.rotation.y,
+            data.data.rotation.y,
-						data.data.rotation.z
+            data.data.rotation.z
-					),
+          ),
-				},
+        },
-			}));
+      }));
-		});
+    });
 
-		return () => {
+    return () => {
-			socket.off("userConnectResponse");
+      socket.off("userConnectResponse");
-			socket.off("userDisConnectResponse");
+      socket.off("userDisConnectResponse");
-			socket.off("cameraUpdateResponse");
+      socket.off("cameraUpdateResponse");
-		};
+    };
-	}, [socket]);
+  }, [socket]);
 
-	useFrame(() => {
+  useFrame(() => {
-		if (!groupRef.current) return;
+    if (!groupRef.current) return;
-		Object.keys(models).forEach((uuid) => {
+    Object.keys(models).forEach((uuid) => {
-			const model = groupRef.current!.getObjectByProperty("uuid", uuid);
+      const model = groupRef.current!.getObjectByProperty("uuid", uuid);
-			if (!model) return;
+      if (!model) return;
 
-			const { targetPosition, targetRotation } = models[uuid];
+      const { targetPosition, targetRotation } = models[uuid];
-			model.position.lerp(targetPosition, 0.1);
+      model.position.lerp(targetPosition, 0.1);
-			model.rotation.x = THREE.MathUtils.lerp(model.rotation.x, targetRotation.x, 0.1);
+      model.rotation.x = THREE.MathUtils.lerp(
-			model.rotation.y = THREE.MathUtils.lerp(model.rotation.y, targetRotation.y, 0.1);
+        model.rotation.x,
-			model.rotation.z = THREE.MathUtils.lerp(model.rotation.z, targetRotation.z, 0.1);
+        targetRotation.x,
-		});
+        0.1
-	});
+      );
+      model.rotation.y = THREE.MathUtils.lerp(
+        model.rotation.y,
+        targetRotation.y,
+        0.1
+      );
+      model.rotation.z = THREE.MathUtils.lerp(
+        model.rotation.z,
+        targetRotation.z,
+        0.1
+      );
+    });
+  });
 
-	useEffect(() => {
+  useEffect(() => {
-		if (!groupRef.current) return;
+    if (!groupRef.current) return;
-		const organization = email!.split("@")[1].split(".")[0];
+    const organization = email!.split("@")[1].split(".")[0];
 
-		getActiveUsersData(organization).then((data) => {
+    getActiveUsersData(organization).then((data) => {
-			const filteredData = data.cameraDatas.filter(
+      const filteredData = data.cameraDatas.filter(
-				(camera: any) => camera.userData.email !== email
+        (camera: any) => camera.userData.email !== email
-			);
+      );
 
-			if (filteredData.length > 0) {
+      if (filteredData.length > 0) {
-				loader.load(camModel, (gltf) => {
+        loader.load(camModel, (gltf) => {
-					const newCams = filteredData.map((cam: any) => {
+          const newCams = filteredData.map((cam: any) => {
-						const newModel = gltf.scene.clone();
+            const newModel = gltf.scene.clone();
-						newModel.uuid = cam.userData._id;
+            newModel.uuid = cam.userData._id;
-						newModel.position.set(cam.position.x, cam.position.y, cam.position.z);
+            newModel.position.set(
-						newModel.rotation.set(cam.rotation.x, cam.rotation.y, cam.rotation.z);
+              cam.position.x,
-						newModel.userData = cam.userData;
+              cam.position.y,
-						return newModel;
+              cam.position.z
-					});
+            );
+            newModel.rotation.set(
+              cam.rotation.x,
+              cam.rotation.y,
+              cam.rotation.z
+            );
+            newModel.userData = cam.userData;
+            return newModel;
+          });
 
-					const users = filteredData.map((cam: any) => cam.userData);
+          const users = filteredData.map((cam: any) => cam.userData);
-					setActiveUsers((prev: any) => dedupeUsers([...prev, ...users]));
+          setActiveUsers((prev: any) => dedupeUsers([...prev, ...users]));
-					setCams((prev) => dedupeCams([...prev, ...newCams]));
+          setCams((prev) => dedupeCams([...prev, ...newCams]));
-				});
+        });
-			}
+      }
-		});
+    });
-	}, []);
+  }, []);
 
-	return (
+  return (
-		<group ref={groupRef} name="Cam-Model-Group">
+    <group
-			{cams.map((cam, index) => (
+      ref={groupRef}
-				<primitive key={cam.uuid} object={cam}>
+      name="Cam-Model-Group"
-					<Html
+      visible={activeModule !== "visualization" ? true : false}
-						as="div"
+    >
-						center
+      {cams.map((cam, index) => (
-						zIndexRange={[1, 0]}
+        <primitive key={cam.uuid} object={cam}>
-						sprite
+          <Html
-						style={{
+            as="div"
-							color: "white",
+            center
-							textAlign: "center",
+            zIndexRange={[1, 0]}
-							fontFamily: "Arial, sans-serif",
+            sprite
-						}}
+            style={{
-						position={[-0.015, 0, 0.7]}
+              color: "white",
-					>
+              textAlign: "center",
-						<CollabUserIcon
+              fontFamily: "Arial, sans-serif",
-							userImage={cam.userData.userImage ||""}
+              display: `${activeModule !== "visualization" ? "" : "none"}`,
-							userName={cam.userData.userName}
+            }}
-							color={getAvatarColor(index, cam.userData.userName)}
+            position={[-0.015, 0, 0.7]}
-						/>
+          >
-					</Html>
+            <CollabUserIcon
-				</primitive>
+              userImage={cam.userData.userImage || ""}
-			))}
+              userName={cam.userData.userName}
-		</group>
+              color={getAvatarColor(index, cam.userData.userName)}
-	);
+            />
+          </Html>
+        </primitive>
+      ))}
+    </group>
+  );
 };
 
 export default CamModelsGroup;

app/src/modules/scene/IntialLoad/loadInitialFloorItems.ts

@@ -20,7 +20,6 @@ async function loadInitialFloorItems(
     const organization = (email!.split("@")[1]).split(".")[0];
 
     const items = await getFloorAssets(organization);
-    console.log('items: ', items);
     localStorage.setItem("FloorItems", JSON.stringify(items));
     await initializeDB();
 

app/src/modules/scene/controls/selection/selectionControls.tsx

@@ -14,7 +14,6 @@ import CopyPasteControls from "./copyPasteControls";
 import MoveControls from "./moveControls";
 import RotateControls from "./rotateControls";
 import useModuleStore from "../../../../store/useModuleStore";
-import { detectModifierKeys } from "../../../../utils/shortcutkeys/detectModifierKeys";
 
 const SelectionControls: React.FC = () => {
     const { camera, controls, gl, scene, pointer } = useThree();
@@ -102,13 +101,12 @@ const SelectionControls: React.FC = () => {
         };
 
         const onKeyDown = (event: KeyboardEvent) => {
-            const keyCombination = detectModifierKeys(event);
             if (movedObjects.length > 0 || rotatedObjects.length > 0) return;
-            if (keyCombination === "ESCAPE") {
+            if (event.key.toLowerCase() === "escape") {
                 event.preventDefault();
                 clearSelection();
             }
-            if (keyCombination === "DELETE") {
+            if (event.key.toLowerCase() === "delete") {
                 event.preventDefault();
                 deleteSelection();
             }

app/src/modules/scene/scene.tsx

@@ -18,8 +18,8 @@ import Simulation from "../simulation/simulation";
 
 // import Simulation from "./simulationtemp/simulation";
 import ZoneCentreTarget from "../../components/ui/componets/zoneCameraTarget";
-import Dropped3dWidgets from "../../components/ui/componets/Dropped3dWidget";
+import Dropped3dWidgets from "../../modules/visualization/widgets/3d/Dropped3dWidget";
-import ZoneAssets from "../../components/ui/componets/zoneAssets";
+import ZoneAssets from "../visualization/zoneAssets";
 
 export default function Scene() {
   const map = useMemo(

app/src/modules/simulation/process/processAnimator.tsx

@@ -26,6 +26,7 @@ const ProcessAnimator: React.FC<ProcessContainerProps> = ({
 }) => {
   const gltf = useLoader(GLTFLoader, crate) as GLTF;
   const groupRef = useRef<THREE.Group>(null);
+  const tempStackedObjectsRef = useRef<Record<string, boolean>>({});
 
   const {
     animationStates,
@@ -43,27 +44,19 @@ const ProcessAnimator: React.FC<ProcessContainerProps> = ({
     checkAndCountTriggers,
   } = useProcessAnimation(processes, setProcesses, agvRef);
 
-  const baseMaterials = useMemo(
+  const baseMaterials = useMemo(() => ({
-    () => ({
+    Box: new THREE.MeshStandardMaterial({ color: 0x8b4513 }),
-      Box: new THREE.MeshStandardMaterial({ color: 0x8b4513 }),
+    Crate: new THREE.MeshStandardMaterial({ color: 0x00ff00 }),
-      Crate: new THREE.MeshStandardMaterial({ color: 0x00ff00 }),
+    Default: new THREE.MeshStandardMaterial(),
-      // Default: new THREE.MeshStandardMaterial({ color: 0x00ff00 }),
+  }), []);
-      Default: new THREE.MeshStandardMaterial(),
-    }),
-    []
-  );
 
   useEffect(() => {
     // Update material references for all spawned objects
     Object.entries(animationStates).forEach(([processId, processState]) => {
       Object.keys(processState.spawnedObjects).forEach((objectId) => {
-        const entry = {
+        const entry = { processId, objectId, };
-          processId,
-          objectId,
-        };
 
-        const materialType =
+        const materialType = processState.spawnedObjects[objectId]?.currentMaterialType;
-          processState.spawnedObjects[objectId]?.currentMaterialType;
 
         if (!materialType) {
           return;
@@ -72,17 +65,13 @@ const ProcessAnimator: React.FC<ProcessContainerProps> = ({
         const matRefArray = MaterialRef.current;
 
         // Find existing material group
-        const existing = matRefArray.find(
+        const existing = matRefArray.find((entryGroup: { material: string; objects: any[] }) =>
-          (entryGroup: { material: string; objects: any[] }) =>
+          entryGroup.material === materialType
-            entryGroup.material === materialType
         );
 
         if (existing) {
           // Check if this processId + objectId already exists
-          const alreadyExists = existing.objects.some(
+          const alreadyExists = existing.objects.some((o: any) => o.processId === entry.processId && o.objectId === entry.objectId);
-            (o: any) =>
-              o.processId === entry.processId && o.objectId === entry.objectId
-          );
 
           if (!alreadyExists) {
             existing.objects.push(entry);
@@ -102,8 +91,7 @@ const ProcessAnimator: React.FC<ProcessContainerProps> = ({
 
   useFrame(() => {
     // Spawn logic frame
-    const currentTime =
+    const currentTime = clockRef.current.getElapsedTime() - elapsedBeforePauseRef.current;
-      clockRef.current.getElapsedTime() - elapsedBeforePauseRef.current;
 
     setAnimationStates((prev) => {
       const newStates = { ...prev };
@@ -131,10 +119,7 @@ const ProcessAnimator: React.FC<ProcessContainerProps> = ({
             : parseFloat(spawnAction.spawnInterval as string) || 0;
 
         // Check if this is a zero interval spawn and we already spawned an object
-        if (
+        if (spawnInterval === 0 && processState.hasSpawnedZeroIntervalObject === true) {
-          spawnInterval === 0 &&
-          processState.hasSpawnedZeroIntervalObject === true
-        ) {
           return; // Don't spawn more objects for zero interval
         }
 
@@ -312,35 +297,87 @@ const ProcessAnimator: React.FC<ProcessContainerProps> = ({
             //   }
             // }
 
+            // if (isLastPoint) {
+            //   if (currentPointData?.actions) {
+            //     const hasNonInherit = hasNonInheritActions(
+            //       currentPointData.actions
+            //     );
+            //     if (!hasNonInherit) {
+            //       // Remove the object if all actions are inherit
+            //       updatedObjects[objectId] = {
+            //         ...obj,
+            //         visible: false,
+            //         state: { ...stateRef, isAnimating: false },
+            //       };
+            //       return;
+            //     }
+            //   } else {
+            //     // No actions at last point - remove the object
+            //     updatedObjects[objectId] = {
+            //       ...obj,
+            //       visible: false,
+            //       state: { ...stateRef, isAnimating: false },
+            //     };
+            //     return;
+            //   }
+            // }
+
             if (isLastPoint) {
-              if (currentPointData?.actions) {
+              const isAgvPicking = agvRef.current.some(
-                const hasNonInherit = hasNonInheritActions(
+                (agv: any) => agv.processId === process.id && agv.status === "picking"
-                  currentPointData.actions
+              );
-                );
+
-                if (!hasNonInherit) {
+              const shouldHide = !currentPointData?.actions || !hasNonInheritActions(currentPointData.actions);
-                  // Remove the object if all actions are inherit
+
+              if (shouldHide) {
+                if (isAgvPicking) {
                   updatedObjects[objectId] = {
                     ...obj,
                     visible: false,
-                    state: { ...stateRef, isAnimating: false },
+                    state: {
+                      ...stateRef,
+                      isAnimating: false,
+                    },
+                  };
+                } else {
+                  tempStackedObjectsRef.current[objectId] = true;
+
+                  updatedObjects[objectId] = {
+                    ...obj,
+                    visible: true,
+                    state: {
+                      ...stateRef,
+                      isAnimating: true,
+                    },
                   };
-                  return;
                 }
-              } else {
+
-                // No actions at last point - remove the object
+                return;
+              }
+            }
+
+            if (tempStackedObjectsRef.current[objectId]) {
+              const isAgvPicking = agvRef.current.some(
+                (agv: any) => agv.processId === process.id && agv.status === "picking"
+              );
+
+              if (isAgvPicking) {
+                delete tempStackedObjectsRef.current[objectId];
+
                 updatedObjects[objectId] = {
                   ...obj,
                   visible: false,
-                  state: { ...stateRef, isAnimating: false },
+                  state: {
+                    ...stateRef,
+                    isAnimating: false,
+                  },
                 };
-                return;
               }
             }
 
             if (!isLastPoint) {
               const nextPoint = path[nextPointIdx];
-              const distance =
+              const distance = path[stateRef.currentIndex].distanceTo(nextPoint);
-                path[stateRef.currentIndex].distanceTo(nextPoint);
               const effectiveSpeed = stateRef.speed * speedRef.current;
               const movement = effectiveSpeed * delta;
 

app/src/modules/simulation/process/processCreator.tsx

@@ -57,7 +57,7 @@
 //   pointActions: PointAction[][];
 //   pointTriggers: PointTrigger[][];
 //   speed: number;
-//   isplaying: boolean;
+//   isActive: boolean;
 // }
 
 // interface ProcessCreatorProps {
@@ -147,7 +147,7 @@
 //   pointActions: [],
 //   pointTriggers: [], // Added point triggers array
 //   speed: 1,
-//   isplaying: false,
+//   isActive: false,
 // });
 
 // // Enhanced connection checking function
@@ -283,7 +283,7 @@
 //         pointActions,
 //         pointTriggers,
 //         speed: processSpeed,
-//         isplaying: false,
+//         isActive: false,
 //       };
 //     },
 //     [scene]
@@ -410,7 +410,7 @@
 //             p.connections.targets.map((t: { modelUUID: string }) => t.modelUUID)
 //           )
 //           .join(","),
-//         isplaying: false,
+//         isActive: false,
 //       }));
 //     }, [convertedPaths]);
 
@@ -459,6 +459,7 @@ import {
   ConveyorEventsSchema,
   VehicleEventsSchema,
 } from "../../../types/world/worldTypes";
+import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
 
 // Type definitions
 export interface PointAction {
@@ -495,7 +496,7 @@ export interface SimulationPath {
   points: PathPoint[];
   pathPosition: [number, number, number];
   speed?: number;
-  isplaying: boolean;
+  isActive: boolean;
 }
 
 export interface Process {
@@ -505,7 +506,7 @@ export interface Process {
   pointActions: PointAction[][];
   pointTriggers: PointTrigger[][];
   speed: number;
-  isplaying: boolean;
+  isActive: boolean;
 }
 
 interface ProcessCreatorProps {
@@ -538,13 +539,13 @@ function convertToSimulationPath(
         actions: Array.isArray(point.actions)
           ? point.actions.map(normalizeAction)
           : point.actions
-          ? [normalizeAction(point.actions)]
+            ? [normalizeAction(point.actions)]
-          : [],
+            : [],
         triggers: Array.isArray(point.triggers)
           ? point.triggers.map(normalizeTrigger)
           : point.triggers
-          ? [normalizeTrigger(point.triggers)]
+            ? [normalizeTrigger(point.triggers)]
-          : [],
+            : [],
         connections: {
           targets: point.connections.targets.map((target) => ({
             modelUUID: target.modelUUID,
@@ -556,7 +557,7 @@ function convertToSimulationPath(
         typeof path.speed === "string"
           ? parseFloat(path.speed) || 1
           : path.speed || 1,
-      isplaying: false, // Added missing property
+      isActive: false, // Added missing property
     };
   } else {
     // For vehicle paths, handle the case where triggers might not exist
@@ -570,8 +571,8 @@ function convertToSimulationPath(
           actions: Array.isArray(path.points.actions)
             ? path.points.actions.map(normalizeAction)
             : path.points.actions
-            ? [normalizeAction(path.points.actions)]
+              ? [normalizeAction(path.points.actions)]
-            : [],
+              : [],
           triggers: [],
           connections: {
             targets: path.points.connections.targets.map((target) => ({
@@ -582,7 +583,7 @@ function convertToSimulationPath(
       ],
       pathPosition: path.position,
       speed: path.points.speed || 1,
-      isplaying: false,
+      isActive: false,
     };
   }
 }
@@ -595,7 +596,7 @@ const createEmptyProcess = (): Process => ({
   pointActions: [],
   pointTriggers: [], // Added point triggers array
   speed: 1,
-  isplaying: false,
+  isActive: false,
 });
 
 // Enhanced connection checking function
@@ -731,7 +732,7 @@ export function useProcessCreation() {
         pointActions,
         pointTriggers,
         speed: processSpeed,
-        isplaying: false,
+        isActive: false,
       };
     },
     [scene]
@@ -824,6 +825,7 @@ const ProcessCreator: React.FC<ProcessCreatorProps> = React.memo(
     const { createProcessesFromPaths } = useProcessCreation();
     const prevPathsRef = useRef<SimulationPath[]>([]);
     const prevProcessesRef = useRef<Process[]>([]);
+    const { isPlaying } = usePlayButtonStore();
 
     const convertedPaths = useMemo((): SimulationPath[] => {
       if (!simulationStates) return [];
@@ -858,7 +860,7 @@ const ProcessCreator: React.FC<ProcessCreatorProps> = React.memo(
             p.connections.targets.map((t: { modelUUID: string }) => t.modelUUID)
           )
           .join(","),
-        isplaying: false,
+        isActive: false,
       }));
     }, [convertedPaths]);
 

app/src/modules/simulation/process/types.ts

@@ -39,7 +39,7 @@ export interface ProcessPath {
   pathRotation: number[];
   speed: number;
   type: "Conveyor" | "Vehicle";
-  isplaying: boolean
+  isActive: boolean
 }
 
 export interface ProcessData {

app/src/modules/simulation/simulation.tsx

@@ -15,7 +15,6 @@ import Agv from "../builder/agv/agv";
 function Simulation() {
   const { activeModule } = useModuleStore();
   const pathsGroupRef = useRef() as React.MutableRefObject<THREE.Group>;
-  const { simulationStates, setSimulationStates } = useSimulationStates();
   const [processes, setProcesses] = useState<any[]>([]);
   const agvRef = useRef([]);
   const MaterialRef = useRef([]);

app/src/modules/visualization/DisplayZone.tsx

@@ -1,255 +1,257 @@
-import React, { useEffect, useRef, useState, useCallback } from "react";
+import React, { useEffect, useRef, useState, useCallback } from "react";
-import { useWidgetStore, Widget } from "../../../store/useWidgetStore";
+import { useWidgetStore, Widget } from "../../store/useWidgetStore";
-import { MoveArrowLeft, MoveArrowRight } from "../../icons/SimulationIcons";
+
-import { InfoIcon } from "../../icons/ExportCommonIcons";
+import {
-import {
+  useDroppedObjectsStore,
-  useDroppedObjectsStore,
+  useFloatingWidget,
-  useFloatingWidget,
+} from "../../store/useDroppedObjectsStore";
-} from "../../../store/useDroppedObjectsStore";
+import { getSelect2dZoneData } from "../../services/realTimeVisulization/zoneData/getSelect2dZoneData";
-import { getSelect2dZoneData } from "../../../services/realTimeVisulization/zoneData/getSelect2dZoneData";
+import { getFloatingZoneData } from "../../services/realTimeVisulization/zoneData/getFloatingData";
-import { getFloatingZoneData } from "../../../services/realTimeVisulization/zoneData/getFloatingData";
+import { get3dWidgetZoneData } from "../../services/realTimeVisulization/zoneData/get3dWidgetData";
-import { get3dWidgetZoneData } from "../../../services/realTimeVisulization/zoneData/get3dWidgetData";
+import {
-
+  MoveArrowLeft,
-// Define the type for `Side`
+  MoveArrowRight,
-type Side = "top" | "bottom" | "left" | "right";
+} from "../../components/icons/SimulationIcons";
-
+import { InfoIcon } from "../../components/icons/ExportCommonIcons";
-interface HiddenPanels {
+
-  [zoneId: string]: Side[];
+// Define the type for `Side`
-}
+type Side = "top" | "bottom" | "left" | "right";
-
+
-interface DisplayZoneProps {
+interface HiddenPanels {
-  zonesData: {
+  [zoneId: string]: Side[];
-    [key: string]: {
+}
-      activeSides: Side[];
+
-      panelOrder: Side[];
+interface DisplayZoneProps {
-      lockedPanels: Side[];
+  zonesData: {
-      points: [];
+    [key: string]: {
-      widgets: Widget[];
+      activeSides: Side[];
-      zoneId: string;
+      panelOrder: Side[];
-      zoneViewPortTarget: number[];
+      lockedPanels: Side[];
-      zoneViewPortPosition: number[];
+      points: [];
-    };
+      widgets: Widget[];
-  };
+      zoneId: string;
-  selectedZone: {
+      zoneViewPortTarget: number[];
-    zoneName: string;
+      zoneViewPortPosition: number[];
-    activeSides: Side[];
+    };
-    panelOrder: Side[];
+  };
-    lockedPanels: Side[];
+  selectedZone: {
-    zoneId: string;
+    zoneName: string;
-    points: [];
+    activeSides: Side[];
-    zoneViewPortTarget: number[];
+    panelOrder: Side[];
-    zoneViewPortPosition: number[];
+    lockedPanels: Side[];
-    widgets: {
+    zoneId: string;
-      id: string;
+    points: [];
-      type: string;
+    zoneViewPortTarget: number[];
-      title: string;
+    zoneViewPortPosition: number[];
-      panel: Side;
+    widgets: {
-      data: any;
+      id: string;
-    }[];
+      type: string;
-  };
+      title: string;
-  setSelectedZone: React.Dispatch<
+      panel: Side;
-    React.SetStateAction<{
+      data: any;
-      zoneName: string;
+    }[];
-      activeSides: Side[];
+  };
-      panelOrder: Side[];
+  setSelectedZone: React.Dispatch<
-      lockedPanels: Side[];
+    React.SetStateAction<{
-      points: [];
+      zoneName: string;
-      zoneId: string;
+      activeSides: Side[];
-      zoneViewPortTarget: number[];
+      panelOrder: Side[];
-      zoneViewPortPosition: number[];
+      lockedPanels: Side[];
-      widgets: {
+      points: [];
-        id: string;
+      zoneId: string;
-        type: string;
+      zoneViewPortTarget: number[];
-        title: string;
+      zoneViewPortPosition: number[];
-        panel: Side;
+      widgets: {
-        data: any;
+        id: string;
-      }[];
+        type: string;
-    }>
+        title: string;
-  >;
+        panel: Side;
-  hiddenPanels: HiddenPanels; // Updated prop type
+        data: any;
-  setHiddenPanels: React.Dispatch<React.SetStateAction<HiddenPanels>>; // Updated prop type
+      }[];
-}
+    }>
-
+  >;
-const DisplayZone: React.FC<DisplayZoneProps> = ({
+  hiddenPanels: HiddenPanels; // Updated prop type
-  zonesData,
+  setHiddenPanels: React.Dispatch<React.SetStateAction<HiddenPanels>>; // Updated prop type
-  selectedZone,
+}
-  setSelectedZone,
+
-  hiddenPanels,
+const DisplayZone: React.FC<DisplayZoneProps> = ({
-}) => {
+  zonesData,
-  // Ref for the container element
+  selectedZone,
-  const containerRef = useRef<HTMLDivElement | null>(null);
+  setSelectedZone,
-  const scrollContainerRef = useRef<HTMLDivElement | null>(null);
+  hiddenPanels,
-
+}) => {
-  // State to track overflow visibility
+  // Ref for the container element
-  const [showLeftArrow, setShowLeftArrow] = useState(false);
+  const containerRef = useRef<HTMLDivElement | null>(null);
-  const [showRightArrow, setShowRightArrow] = useState(false);
+  const scrollContainerRef = useRef<HTMLDivElement | null>(null);
-  const { floatingWidget, setFloatingWidget } = useFloatingWidget()
+
-
+  // State to track overflow visibility
-  const { setSelectedChartId } = useWidgetStore()
+  const [showLeftArrow, setShowLeftArrow] = useState(false);
-
+  const [showRightArrow, setShowRightArrow] = useState(false);
-  // Function to calculate overflow state
+  const { floatingWidget, setFloatingWidget } = useFloatingWidget();
-  const updateOverflowState = useCallback(() => {
+
-    const container = scrollContainerRef.current;
+  const { setSelectedChartId } = useWidgetStore();
-    if (container) {
+
-      const isOverflowing = container.scrollWidth > container.clientWidth;
+  // Function to calculate overflow state
-      const canScrollLeft = container.scrollLeft > 0;
+  const updateOverflowState = useCallback(() => {
-      const canScrollRight =
+    const container = scrollContainerRef.current;
-        container.scrollLeft + container.clientWidth < container.scrollWidth;
+    if (container) {
-
+      const isOverflowing = container.scrollWidth > container.clientWidth;
-      setShowLeftArrow(isOverflowing && canScrollLeft);
+      const canScrollLeft = container.scrollLeft > 0;
-      setShowRightArrow(isOverflowing && canScrollRight);
+      const canScrollRight =
-    }
+        container.scrollLeft + container.clientWidth < container.scrollWidth;
-  }, []);
+
-
+      setShowLeftArrow(isOverflowing && canScrollLeft);
-  useEffect(() => {
+      setShowRightArrow(isOverflowing && canScrollRight);
-    const container = scrollContainerRef.current;
+    }
-    if (!container) return;
+  }, []);
-
+
-    // Initial calculation after the DOM has been rendered
+  useEffect(() => {
-    const observer = new ResizeObserver(updateOverflowState);
+    const container = scrollContainerRef.current;
-    observer.observe(container);
+    if (!container) return;
-
+
-    // Update on scroll
+    // Initial calculation after the DOM has been rendered
-    const handleScroll = () => updateOverflowState();
+    const observer = new ResizeObserver(updateOverflowState);
-    container.addEventListener("scroll", handleScroll);
+    observer.observe(container);
-
+
-    // Add mouse wheel listener for horizontal scrolling
+    // Update on scroll
-    const handleWheel = (event: WheelEvent) => {
+    const handleScroll = () => updateOverflowState();
-      if (Math.abs(event.deltaY) > Math.abs(event.deltaX)) {
+    container.addEventListener("scroll", handleScroll);
-        event.preventDefault();
+
-        container.scrollBy({
+    // Add mouse wheel listener for horizontal scrolling
-          left: event.deltaY * 2,
+    const handleWheel = (event: WheelEvent) => {
-          behavior: "smooth",
+      if (Math.abs(event.deltaY) > Math.abs(event.deltaX)) {
-        });
+        event.preventDefault();
-      }
+        container.scrollBy({
-    };
+          left: event.deltaY * 2,
-
+          behavior: "smooth",
-    container.addEventListener("wheel", handleWheel, { passive: false });
+        });
-
+      }
-    // Initial check
+    };
-    updateOverflowState();
+
-
+    container.addEventListener("wheel", handleWheel, { passive: false });
-    return () => {
+
-      observer.disconnect();
+    // Initial check
-      container.removeEventListener("scroll", handleScroll);
+    updateOverflowState();
-      container.removeEventListener("wheel", handleWheel);
+
-    };
+    return () => {
-  }, [updateOverflowState]);
+      observer.disconnect();
-
+      container.removeEventListener("scroll", handleScroll);
-  // Handle scrolling with navigation arrows
+      container.removeEventListener("wheel", handleWheel);
-  const handleScrollLeft = () => {
+    };
-    const container = scrollContainerRef.current;
+  }, [updateOverflowState]);
-    if (container) {
+
-      container.scrollBy({
+  // Handle scrolling with navigation arrows
-        left: -200,
+  const handleScrollLeft = () => {
-        behavior: "smooth",
+    const container = scrollContainerRef.current;
-      });
+    if (container) {
-    }
+      container.scrollBy({
-  };
+        left: -200,
-
+        behavior: "smooth",
-  const handleScrollRight = () => {
+      });
-    const container = scrollContainerRef.current;
+    }
-    if (container) {
+  };
-      container.scrollBy({
+
-        left: 200,
+  const handleScrollRight = () => {
-        behavior: "smooth",
+    const container = scrollContainerRef.current;
-      });
+    if (container) {
-    }
+      container.scrollBy({
-  };
+        left: 200,
-
+        behavior: "smooth",
-  async function handleSelect2dZoneData(zoneId: string, zoneName: string) {
+      });
-    try {
+    }
-      if (selectedZone?.zoneId === zoneId) {
+  };
-        return;
+
-      }
+  async function handleSelect2dZoneData(zoneId: string, zoneName: string) {
-      setSelectedChartId(null);
+    try {
-      const email = localStorage.getItem("email") || "";
+      if (selectedZone?.zoneId === zoneId) {
-      const organization = email?.split("@")[1]?.split(".")[0];
+        return;
-      let response = await getSelect2dZoneData(zoneId, organization);
+      }
-      console.log('response: ', response);
+      setSelectedChartId(null);
-      let res = await getFloatingZoneData(zoneId, organization);
+      const email = localStorage.getItem("email") || "";
-      console.log('res: ', res);
+      const organization = email?.split("@")[1]?.split(".")[0];
-
+      let response = await getSelect2dZoneData(zoneId, organization);
-      setFloatingWidget(res);
+      console.log("response: ", response);
-      // Set the selected zone in the store
+      let res = await getFloatingZoneData(zoneId, organization);
-      useDroppedObjectsStore.getState().setZone(zoneName, zoneId);
+      console.log("res: ", res);
-      if (Array.isArray(res)) {
+
-        res.forEach((val) => {
+      setFloatingWidget(res);
-          useDroppedObjectsStore.getState().addObject(zoneName, val);
+      // Set the selected zone in the store
-        });
+      useDroppedObjectsStore.getState().setZone(zoneName, zoneId);
-      }
+      if (Array.isArray(res)) {
-
+        res.forEach((val) => {
-      setSelectedZone({
+          useDroppedObjectsStore.getState().addObject(zoneName, val);
-        zoneName,
+        });
-        activeSides: response.activeSides || [],
+      }
-        panelOrder: response.panelOrder || [],
+
-        lockedPanels: response.lockedPanels || [],
+      setSelectedZone({
-        widgets: response.widgets || [],
+        zoneName,
-        points: response.points || [],
+        activeSides: response.activeSides || [],
-        zoneId: zoneId,
+        panelOrder: response.panelOrder || [],
-        zoneViewPortTarget: response.viewPortCenter || {},
+        lockedPanels: response.lockedPanels || [],
-        zoneViewPortPosition: response.viewPortposition || {},
+        widgets: response.widgets || [],
-      });
+        points: response.points || [],
-    } catch (error) {
+        zoneId: zoneId,
-
+        zoneViewPortTarget: response.viewPortCenter || {},
-    }
+        zoneViewPortPosition: response.viewPortposition || {},
-  }
+      });
-
+    } catch (error) {}
-  return (
+  }
-    <div
+
-      ref={containerRef}
+  return (
-      className={`zone-wrapper ${
+    <div
-        selectedZone?.activeSides?.includes("bottom") &&
+      ref={containerRef}
-        !hiddenPanels[selectedZone.zoneId]?.includes("bottom")
+      className={`zone-wrapper ${
-          ? "bottom"
+        selectedZone?.activeSides?.includes("bottom") &&
-          : ""
+        !hiddenPanels[selectedZone.zoneId]?.includes("bottom")
-      }`}
+          ? "bottom"
-    >
+          : ""
-      {/* Left Arrow */}
+      }`}
-      {showLeftArrow && (
+    >
-        <button className="arrow left-arrow" onClick={handleScrollLeft}>
+      {/* Left Arrow */}
-          <MoveArrowLeft />
+      {showLeftArrow && (
-        </button>
+        <button className="arrow left-arrow" onClick={handleScrollLeft}>
-      )}
+          <MoveArrowLeft />
-
+        </button>
-      {/* Scrollable Zones Container */}
+      )}
-      <div
+
-        ref={scrollContainerRef}
+      {/* Scrollable Zones Container */}
-        className="zones-wrapper"
+      <div
-        style={{ overflowX: "auto", whiteSpace: "nowrap" }}
+        ref={scrollContainerRef}
-      >
+        className="zones-wrapper"
-        {Object.keys(zonesData).length !== 0 ? (
+        style={{ overflowX: "auto", whiteSpace: "nowrap" }}
-          <>
+      >
-            {Object.keys(zonesData).map((zoneName, index) => (
+        {Object.keys(zonesData).length !== 0 ? (
-              <div
+          <>
-                key={index}
+            {Object.keys(zonesData).map((zoneName, index) => (
-                className={`zone ${
+              <div
-                  selectedZone.zoneName === zoneName ? "active" : ""
+                key={index}
-                }`}
+                className={`zone ${
-                onClick={() =>
+                  selectedZone.zoneName === zoneName ? "active" : ""
-                  handleSelect2dZoneData(zonesData[zoneName]?.zoneId, zoneName)
+                }`}
-                }
+                onClick={() =>
-              >
+                  handleSelect2dZoneData(zonesData[zoneName]?.zoneId, zoneName)
-                {zoneName}
+                }
-              </div>
+              >
-            ))}
+                {zoneName}
-          </>
+              </div>
-        ) : (
+            ))}
-          <div className="no-zone">
+          </>
-            <InfoIcon />
+        ) : (
-            No zones? Create one!
+          <div className="no-zone">
-          </div>
+            <InfoIcon />
-        )}
+            No zones? Create one!
-      </div>
+          </div>
-
+        )}
-      {/* Right Arrow */}
+      </div>
-      {showRightArrow && (
+
-        <button className="arrow right-arrow" onClick={handleScrollRight}>
+      {/* Right Arrow */}
-          <MoveArrowRight />
+      {showRightArrow && (
-        </button>
+        <button className="arrow right-arrow" onClick={handleScrollRight}>
-      )}
+          <MoveArrowRight />
-    </div>
+        </button>
-  );
+      )}
-};
+    </div>
-
+  );
-export default DisplayZone;
+};
+
+export default DisplayZone;

app/src/modules/visualization/RealTimeVisulization.tsx

@@ -1,34 +1,39 @@
 import React, { useEffect, useState, useRef } from "react";
-import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
+import { usePlayButtonStore } from "../../store/usePlayButtonStore";
-import Panel from "./Panel";
+import Panel from "./widgets/panel/Panel";
-import AddButtons from "./AddButtons";
+import AddButtons from "./widgets/panel/AddButtons";
-import { useSelectedZoneStore } from "../../../store/useZoneStore";
+import { useSelectedZoneStore } from "../../store/useZoneStore";
 import DisplayZone from "./DisplayZone";
-import Scene from "../../../modules/scene/scene";
+import Scene from "../scene/scene";
-import useModuleStore from "../../../store/useModuleStore";
+import useModuleStore from "../../store/useModuleStore";
 
-import { useDroppedObjectsStore, useFloatingWidget } from "../../../store/useDroppedObjectsStore";
+import {
+  useDroppedObjectsStore,
+  useFloatingWidget,
+} from "../../store/useDroppedObjectsStore";
 import {
   useAsset3dWidget,
   useSocketStore,
   useWidgetSubOption,
   useZones,
-} from "../../../store/store";
+} from "../../store/store";
-import { getZone2dData } from "../../../services/realTimeVisulization/zoneData/getZoneData";
+import { getZone2dData } from "../../services/realTimeVisulization/zoneData/getZoneData";
-import { generateUniqueId } from "../../../functions/generateUniqueId";
+import { generateUniqueId } from "../../functions/generateUniqueId";
 import { determinePosition } from "./functions/determinePosition";
-import { addingFloatingWidgets } from "../../../services/realTimeVisulization/zoneData/addFloatingWidgets";
+import { addingFloatingWidgets } from "../../services/realTimeVisulization/zoneData/addFloatingWidgets";
-import SocketRealTimeViz from "../../../modules/visualization/realTimeVizSocket.dev";
+import SocketRealTimeViz from "./socket/realTimeVizSocket.dev";
-import RenderOverlay from "../../templates/Overlay";
+import RenderOverlay from "../../components/templates/Overlay";
-import ConfirmationPopup from "../../layout/confirmationPopup/ConfirmationPopup";
+import ConfirmationPopup from "../../components/layout/confirmationPopup/ConfirmationPopup";
-import DroppedObjects from "./DroppedFloatingWidgets";
+import DroppedObjects from "./widgets/floating/DroppedFloatingWidgets";
-import EditWidgetOption from "../menu/EditWidgetOption";
+import EditWidgetOption from "../../components/ui/menu/EditWidgetOption";
 import {
   useEditWidgetOptionsStore,
   useRightClickSelected,
   useRightSelected,
-} from "../../../store/useZone3DWidgetStore";
+} from "../../store/useZone3DWidgetStore";
-import Dropped3dWidgets from "./Dropped3dWidget";
+import Dropped3dWidgets from "./widgets/3d/Dropped3dWidget";
+import OuterClick from "../../utils/outerClick";
+import { useWidgetStore } from "../../store/useWidgetStore";
 
 type Side = "top" | "bottom" | "left" | "right";
 
@@ -74,10 +79,22 @@ const RealTimeVisulization: React.FC = () => {
   const [openConfirmationPopup, setOpenConfirmationPopup] = useState(false);
 
   // const [floatingWidgets, setFloatingWidgets] = useState<Record<string, { zoneName: string; zoneId: string; objects: any[] }>>({});
-  const { floatingWidget, setFloatingWidget } = useFloatingWidget()
+  const { floatingWidget, setFloatingWidget } = useFloatingWidget();
   const { widgetSelect, setWidgetSelect } = useAsset3dWidget();
   const { widgetSubOption, setWidgetSubOption } = useWidgetSubOption();
   const { visualizationSocket } = useSocketStore();
+  const { setSelectedChartId } = useWidgetStore();
+
+  OuterClick({
+    contextClassName: [
+      "chart-container",
+      "floating",
+      "sidebar-right-wrapper",
+      "card",
+      "dropdown-menu",
+    ],
+    setMenuVisible: () => setSelectedChartId(null),
+  });
 
   useEffect(() => {
     async function GetZoneData() {
@@ -85,7 +102,7 @@ const RealTimeVisulization: React.FC = () => {
       const organization = email?.split("@")[1]?.split(".")[0];
       try {
         const response = await getZone2dData(organization);
-        console.log('response: ', response);
+        // console.log('response: ', response);
 
         if (!Array.isArray(response)) {
           return;
@@ -107,7 +124,7 @@ const RealTimeVisulization: React.FC = () => {
           {}
         );
         setZonesData(formattedData);
-      } catch (error) { }
+      } catch (error) {}
     }
 
     GetZoneData();
@@ -123,7 +140,7 @@ const RealTimeVisulization: React.FC = () => {
           activeSides: selectedZone.activeSides || [],
           panelOrder: selectedZone.panelOrder || [],
           lockedPanels: selectedZone.lockedPanels || [],
-          points:selectedZone.points||[],
+          points: selectedZone.points || [],
           zoneId: selectedZone.zoneId || "",
           zoneViewPortTarget: selectedZone.zoneViewPortTarget || [],
           zoneViewPortPosition: selectedZone.zoneViewPortPosition || [],
@@ -138,82 +155,99 @@ const RealTimeVisulization: React.FC = () => {
   const handleDrop = async (event: React.DragEvent<HTMLDivElement>) => {
     event.preventDefault();
     try {
-      event.preventDefault();
       const email = localStorage.getItem("email") || "";
       const organization = email?.split("@")[1]?.split(".")[0];
-
+  
       const data = event.dataTransfer.getData("text/plain");
-      // if (widgetSelect !== "") return;
       if (widgetSubOption === "3D") return;
       if (!data || selectedZone.zoneName === "") return;
-
+  
       const droppedData = JSON.parse(data);
       const canvasElement = document.getElementById("real-time-vis-canvas");
       if (!canvasElement) throw new Error("Canvas element not found");
-
+  
-      const canvasRect = canvasElement.getBoundingClientRect();
+      // Get canvas dimensions and mouse position
-      const relativeX = event.clientX - canvasRect.left;
+      const rect = canvasElement.getBoundingClientRect();
-      const relativeY = event.clientY - canvasRect.top;
+      let relativeX = (event.clientX - rect.left) ;
-
+      let relativeY = event.clientY - rect.top;
-      const newPosition = determinePosition(canvasRect, relativeX, relativeY);
+  
-      console.log("newPosition: ", newPosition);
+      // Widget dimensions (with defaults)
+      const widgetWidth = droppedData.width || 125; // 250/2 as default
+      const widgetHeight = droppedData.height || 100; // 83/2 as default
+  
+      // Clamp to ensure widget stays fully inside canvas
+      const clampedX = Math.max(
+        0, // Prevent going beyond left edge
+        Math.min(
+          relativeX,
+          rect.width - widgetWidth // Prevent going beyond right edge
+        )
+      );
+      
+      console.log('clampedX: ', clampedX);
+      const clampedY = Math.max(
+        0, // Prevent going beyond top edge
+        Math.min(
+          relativeY,
+          rect.height - widgetHeight // Prevent going beyond bottom edge
+        )
+      );
+  
+      // Debug logging (optional)
+      console.log("Drop coordinates:", {
+        rawX: relativeX,
+        rawY: relativeY,
+        clampedX,
+        clampedY,
+        canvasWidth: rect.width,
+        canvasHeight: rect.height,
+        widgetWidth,
+        widgetHeight
+      });
+  
+      const finalPosition = determinePosition(rect, clampedX, clampedY);
+  
       const newObject = {
         ...droppedData,
         id: generateUniqueId(),
-        position: determinePosition(canvasRect, relativeX, relativeY),
+        position: finalPosition,
       };
-
+  
-      // Only set zone if it’s not already in the store (prevents overwriting objects)
+      // Zone management
-      const existingZone =
+      const existingZone = useDroppedObjectsStore.getState().zones[selectedZone.zoneName];
-        useDroppedObjectsStore.getState().zones[selectedZone.zoneName];
       if (!existingZone) {
-        useDroppedObjectsStore
+        useDroppedObjectsStore.getState().setZone(selectedZone.zoneName, selectedZone.zoneId);
-          .getState()
-          .setZone(selectedZone.zoneName, selectedZone.zoneId);
       }
-
+  
-      let addFloatingWidget = {
+      // Socket emission
-        organization: organization,
+      const addFloatingWidget = {
+        organization,
         widget: newObject,
         zoneId: selectedZone.zoneId,
       };
-      console.log("newObject: ", newObject);
+  
-
       if (visualizationSocket) {
         visualizationSocket.emit("v2:viz-float:add", addFloatingWidget);
       }
-      useDroppedObjectsStore
+  
-        .getState()
+      // Store update
-        .addObject(selectedZone.zoneName, newObject);
+      useDroppedObjectsStore.getState().addObject(selectedZone.zoneName, newObject);
-
+  
-      //I need to console here objects based on selectedZone.zoneId
+      // Post-drop verification
-      // Console the objects after adding
       const droppedObjectsStore = useDroppedObjectsStore.getState();
       const currentZone = droppedObjectsStore.zones[selectedZone.zoneName];
-
+  
       if (currentZone && currentZone.zoneId === selectedZone.zoneId) {
-        console.log(
+        console.log(`Objects for Zone ${selectedZone.zoneId}:`, currentZone.objects);
-          `Objects for Zone ID: ${selectedZone.zoneId}`,
+        setFloatingWidget(currentZone.objects);
-          currentZone.objects
-        );
-        setFloatingWidget(currentZone.objects)
       } else {
-        console.warn("Zone not found or mismatched zoneId");
+        console.warn("Zone not found or zoneId mismatch");
       }
-
+  
-      // let response = await addingFloatingWidgets(
+    } catch (error) {
-      //   selectedZone.zoneId,
+      console.error("Error in handleDrop:", error);
-      //   organization,
+      // Consider adding user feedback here (e.g., toast notification)
-      //   newObject
+    }
-      // );
-      // Add the dropped object to the zone if the API call is successful
-      // if (response.message === "FloatWidget created successfully") {
-      // }
-
-      // Update floating widgets state
-
-    } catch (error) { }
-
   };
 
   useEffect(() => {
@@ -253,7 +287,7 @@ const RealTimeVisulization: React.FC = () => {
             <RenderOverlay>
               <ConfirmationPopup
                 message={"Are you sure want to delete?"}
-                onConfirm={() => console.log("confirm")}
+                onConfirm={() => console.log("Confirmed")}
                 onCancel={() => setOpenConfirmationPopup(false)}
               />
             </RenderOverlay>
@@ -286,7 +320,6 @@ const RealTimeVisulization: React.FC = () => {
                   "Horizontal Move",
                   "RotateX",
                   "RotateY",
-                  "RotateZ",
                   "Delete",
                 ]}
               />

app/src/modules/visualization/functions/captureVisualization.ts

@@ -1,33 +1,33 @@
-import html2canvas from "html2canvas";
+import html2canvas from "html2canvas";
-
+
-export const captureVisualization = async (): Promise<string | null> => {
+export const captureVisualization = async (): Promise<string | null> => {
-  const container = document.getElementById("real-time-vis-canvas");
+  const container = document.getElementById("real-time-vis-canvas");
-  if (!container) {
+  if (!container) {
-    console.error("Container element not found");
+    console.error("Container element not found");
-    return null;
+    return null;
-  }
+  }
-
+
-  try {
+  try {
-    // Hide any elements you don't want in the screenshot
+    // Hide any elements you don't want in the screenshot
-    const originalVisibility = container.style.visibility;
+    const originalVisibility = container.style.visibility;
-    container.style.visibility = 'visible';
+    container.style.visibility = 'visible';
-    
+    
-    const canvas = await html2canvas(container, {
+    const canvas = await html2canvas(container, {
-      scale: 2, // Higher scale for better quality
+      scale: 2, // Higher scale for better quality
-      logging: false, // Disable console logging
+      logging: false, // Disable console logging
-      useCORS: true, // Handle cross-origin images
+      useCORS: true, // Handle cross-origin images
-      allowTaint: true, // Allow tainted canvas
+      allowTaint: true, // Allow tainted canvas
-      backgroundColor: '#ffffff', // Set white background
+      backgroundColor: '#ffffff', // Set white background
-      removeContainer: true // Clean up temporary containers
+      removeContainer: true // Clean up temporary containers
-    });
+    });
-
+
-    // Restore original visibility
+    // Restore original visibility
-    container.style.visibility = originalVisibility;
+    container.style.visibility = originalVisibility;
-
+
-    // Convert to PNG with highest quality
+    // Convert to PNG with highest quality
-    return canvas.toDataURL('image/png', 1.0);
+    return canvas.toDataURL('image/png', 1.0);
-  } catch (error) {
+  } catch (error) {
-    console.error("Error capturing visualization:", error);
+    console.error("Error capturing visualization:", error);
-    return null;
+    return null;
-  }
+  }
-};
+};

app/src/modules/visualization/functions/determinePosition.ts

@@ -74,4 +74,4 @@ export function determinePosition(
   }
 
   return position;
-}
+}

app/src/modules/visualization/functions/handleSaveTemplate.ts

@@ -1,97 +1,97 @@
-import { Template } from "../../store/useTemplateStore";
+import { Template } from "../../../store/useTemplateStore";
-import { captureVisualization } from "./captureVisualization";
+import { captureVisualization } from "./captureVisualization";
-
+
-type HandleSaveTemplateProps = {
+type HandleSaveTemplateProps = {
-  addTemplate: (template: Template) => void;
+  addTemplate: (template: Template) => void;
-  floatingWidget: []; // Updated type from `[]` to `any[]` for clarity
+  floatingWidget: []; // Updated type from `[]` to `any[]` for clarity
-  widgets3D: []; // Updated type from `[]` to `any[]` for clarity
+  widgets3D: []; // Updated type from `[]` to `any[]` for clarity
-  selectedZone: {
+  selectedZone: {
-    panelOrder: string[];
+    panelOrder: string[];
-    widgets: any[];
+    widgets: any[];
-  };
+  };
-  templates?: Template[];
+  templates?: Template[];
-  visualizationSocket: any;
+  visualizationSocket: any;
-};
+};
-
+
-// Generate a unique ID
+// Generate a unique ID
-const generateUniqueId = (): string => {
+const generateUniqueId = (): string => {
-  return `${Date.now()}-${Math.random().toString(36).substring(2, 15)}`;
+  return `${Date.now()}-${Math.random().toString(36).substring(2, 15)}`;
-};
+};
-
+
-export const handleSaveTemplate = async ({
+export const handleSaveTemplate = async ({
-  addTemplate,
+  addTemplate,
-  floatingWidget,
+  floatingWidget,
-  widgets3D,
+  widgets3D,
-  selectedZone,
+  selectedZone,
-  templates = [],
+  templates = [],
-  visualizationSocket,
+  visualizationSocket,
-}: HandleSaveTemplateProps): Promise<void> => {
+}: HandleSaveTemplateProps): Promise<void> => {
-  console.log("floatingWidget: ", floatingWidget);
+  try {
-  try {
+    // Check if the selected zone has any widgets
-    // Check if the selected zone has any widgets
+    if (!selectedZone.panelOrder || selectedZone.panelOrder.length === 0) {
-    if (!selectedZone.panelOrder || selectedZone.panelOrder.length === 0) {
+      return;
-      return;
+    }
-    }
+
-
+    // Check if the template already exists
-    // Check if the template already exists
+    const isDuplicate = templates.some(
-    const isDuplicate = templates.some(
+      (template) =>
-      (template) =>
+        JSON.stringify(template.panelOrder) ===
-        JSON.stringify(template.panelOrder) ===
+          JSON.stringify(selectedZone.panelOrder) &&
-          JSON.stringify(selectedZone.panelOrder) &&
+        JSON.stringify(template.widgets) ===
-        JSON.stringify(template.widgets) ===
+          JSON.stringify(selectedZone.widgets)
-          JSON.stringify(selectedZone.widgets)
+    );
-    );
+
-
+    if (isDuplicate) {
-    if (isDuplicate) {
+      return;
-      return;
+    }
-    }
+
-
+    // Capture visualization snapshot
-    // Capture visualization snapshot
+    const snapshot = await captureVisualization();
-    const snapshot = await captureVisualization();
+
-
+    
-    if (!snapshot) {
+    if (!snapshot) {
-      return;
+      return;
-    }
+    }
-
+
-    // Create a new template
+    // Create a new template
-    const newTemplate: Template = {
+    const newTemplate: Template = {
-      id: generateUniqueId(),
+      id: generateUniqueId(),
-      name: `Template ${new Date().toISOString()}`, // Better name formatting
+      name: `Template ${new Date().toISOString()}`, // Better name formatting
-      panelOrder: selectedZone.panelOrder,
+      panelOrder: selectedZone.panelOrder,
-      widgets: selectedZone.widgets,
+      widgets: selectedZone.widgets,
-      snapshot,
+      snapshot,
-      floatingWidget,
+      floatingWidget,
-      widgets3D,
+      widgets3D,
-    };
+    };
-
+
-    // Extract organization from email
+    // Extract organization from email
-    const email = localStorage.getItem("email") || "";
+    const email = localStorage.getItem("email") || "";
-    const organization = email.includes("@")
+    const organization = email.includes("@")
-      ? email.split("@")[1]?.split(".")[0]
+      ? email.split("@")[1]?.split(".")[0]
-      : "";
+      : "";
-
+
-    if (!organization) {
+    if (!organization) {
-      return;
+      return;
-    }
+    }
-    let saveTemplate = {
+    let saveTemplate = {
-      organization: organization,
+      organization: organization,
-      template: newTemplate,
+      template: newTemplate,
-    };
+    };
-    if (visualizationSocket) {
+    if (visualizationSocket) {
-      visualizationSocket.emit("v2:viz-template:add", saveTemplate);
+      visualizationSocket.emit("v2:viz-template:add", saveTemplate);
-    }
+    }
-
+
-    // Save the template
+    // Save the template
-    try {
+    try {
-      addTemplate(newTemplate);
+      addTemplate(newTemplate);
-      // const response = await saveTemplateApi(organization, newTemplate);
+      // const response = await saveTemplateApi(organization, newTemplate);
-      //
+      //
-
+
-      // Add template only if API call succeeds
+      // Add template only if API call succeeds
-    } catch (apiError) {
+    } catch (apiError) {
-      //
+      //
-    }
+    }
-  } catch (error) {
+  } catch (error) {
-    //
+    //
-  }
+  }
-};
+};

app/src/modules/visualization/realTimeVizSocket.dev.tsx

@@ -1,238 +0,0 @@
-import { useEffect } from "react";
-import { useSocketStore } from "../../store/store";
-import { useSelectedZoneStore } from "../../store/useZoneStore";
-import { useDroppedObjectsStore } from "../../store/useDroppedObjectsStore";
-import { useZoneWidgetStore } from "../../store/useZone3DWidgetStore";
-import useTemplateStore from "../../store/useTemplateStore";
-
-type WidgetData = {
-    id: string;
-    type: string;
-    position: [number, number, number];
-    rotation?: [number, number, number];
-    tempPosition?: [number, number, number];
-};
-
-export default function SocketRealTimeViz() {
-    const { visualizationSocket } = useSocketStore();
-    const { setSelectedZone } = useSelectedZoneStore();
-    const deleteObject = useDroppedObjectsStore((state) => state.deleteObject);
-    const updateObjectPosition = useDroppedObjectsStore((state) => state.updateObjectPosition);
-    const { addWidget } = useZoneWidgetStore()
-    const { removeTemplate } = useTemplateStore();
-    const { setTemplates } = useTemplateStore();
-    const { zoneWidgetData, setZoneWidgetData, updateWidgetPosition, updateWidgetRotation } = useZoneWidgetStore();
-
-    useEffect(() => {
-        if (visualizationSocket) {
-            //add panel response
-            visualizationSocket.on("viz-panel:response:updates", (addPanel: any) => {
-
-                if (addPanel.success) {
-                    let addPanelData = addPanel.data.data
-                    setSelectedZone(addPanelData)
-                }
-            })
-            //delete panel response
-            visualizationSocket.on("viz-panel:response:delete", (deletePanel: any) => {
-
-                if (deletePanel.success) {
-                    let deletePanelData = deletePanel.data.data
-                    setSelectedZone(deletePanelData)
-                }
-            })
-            //clear Panel response
-            visualizationSocket.on("viz-panel:response:clear", (clearPanel: any) => {
-
-                if (clearPanel.success && clearPanel.message === "PanelWidgets cleared successfully") {
-
-                    let clearPanelData = clearPanel.data.data
-                    setSelectedZone(clearPanelData)
-                }
-            })
-            //lock Panel response
-            visualizationSocket.on("viz-panel:response:locked", (lockPanel: any) => {
-
-                if (lockPanel.success && lockPanel.message === "locked panel updated successfully") {
-
-                    let lockPanelData = lockPanel.data.data
-                    setSelectedZone(lockPanelData)
-                }
-            })
-            // add 2dWidget response
-            visualizationSocket.on("viz-widget:response:updates", (add2dWidget: any) => {
-
-
-                if (add2dWidget.success && add2dWidget.data) {
-                    setSelectedZone((prev) => {
-                        const isWidgetAlreadyAdded = prev.widgets.some(
-                            (widget) => widget.id === add2dWidget.data.widgetData.id
-                        );
-                        if (isWidgetAlreadyAdded) return prev; // Prevent duplicate addition
-                        return {
-                            ...prev,
-                            zoneId: add2dWidget.data.zoneId,
-                            zoneName: add2dWidget.data.zoneName,
-                            widgets: [...prev.widgets, add2dWidget.data.widgetData],  // Append new widget
-                        };
-                    });
-                }
-            });
-            //delete 2D Widget response
-            visualizationSocket.on("viz-widget:response:delete", (deleteWidget: any) => {
-
-
-                if (deleteWidget?.success && deleteWidget.data) {
-                    setSelectedZone((prevZone: any) => ({
-                        ...prevZone,
-                        zoneId: deleteWidget.data.zoneId,
-                        zoneName: deleteWidget.data.zoneName,
-                        widgets: deleteWidget.data.widgetDeleteDatas, // Replace with new widget list
-                    }));
-                }
-            });
-            //add Floating Widget response
-            visualizationSocket.on("viz-float:response:updates", (addFloatingWidget: any) => {
-
-
-                if (addFloatingWidget.success) {
-                    if (addFloatingWidget.success && addFloatingWidget.message === "FloatWidget created successfully") {
-                        const state = useDroppedObjectsStore.getState();
-                        const zone = state.zones[addFloatingWidget.data.zoneName];
-                        if (!zone) {
-                            state.setZone(addFloatingWidget.data.zoneName, addFloatingWidget.data.zoneId);
-                        }
-                        const existingObjects = zone ? zone.objects : [];
-                        const newWidget = addFloatingWidget.data.widget;
-                        // ✅ Check if the widget ID already exists before adding
-                        const isAlreadyAdded = existingObjects.some(obj => obj.id === newWidget.id);
-                        if (isAlreadyAdded) {
-
-                            return; // Don't add the widget if it already exists
-                        }
-                        // Add widget only if it doesn't exist
-                        state.addObject(addFloatingWidget.data.zoneName, newWidget);
-                    }
-                    if (addFloatingWidget.message === "Widget updated successfully") {
-                        updateObjectPosition(addFloatingWidget.data.zoneName, addFloatingWidget.data.index, addFloatingWidget.data.position);
-                    }
-                }
-            });
-            //duplicate Floating Widget response
-            visualizationSocket.on("viz-float:response:addDuplicate", (duplicateFloatingWidget: any) => {
-
-
-                if (duplicateFloatingWidget.success && duplicateFloatingWidget.message === "duplicate FloatWidget created successfully") {
-                    useDroppedObjectsStore.setState((state) => {
-                        const zone = state.zones[duplicateFloatingWidget.data.zoneName];
-                        if (!zone) return state; // Zone doesn't exist, return state as is
-                        const existingObjects = zone.objects;
-                        const newWidget = duplicateFloatingWidget.data.widget;
-                        // ✅ Check if the object with the same ID already exists
-                        const isAlreadyAdded = existingObjects.some(obj => obj.id === newWidget.id);
-                        if (isAlreadyAdded) {
-
-                            return state; // Don't update state if it's already there
-                        }
-                        return {
-                            zones: {
-                                ...state.zones,
-                                [duplicateFloatingWidget.data.zoneName]: {
-                                    ...zone,
-                                    objects: [...existingObjects, newWidget], // Append only if it's not a duplicate
-                                },
-                            },
-                        };
-                    });
-                }
-            });
-            //delete Floating Widget response
-            visualizationSocket.on("viz-float:response:delete", (deleteFloatingWidget: any) => {
-
-
-                if (deleteFloatingWidget.success) {
-                    deleteObject(deleteFloatingWidget.data.zoneName, deleteFloatingWidget.data.floatWidgetID);
-                }
-            });
-            //add 3D Widget response
-            visualizationSocket.on("viz-widget3D:response:updates", (add3DWidget: any) => {
-
-
-                if (add3DWidget.success) {
-
-                    if (add3DWidget.message === "Widget created successfully") {
-                        addWidget(add3DWidget.data.zoneId, add3DWidget.data.widget);
-                    }
-                }
-            });
-            //delete 3D Widget response
-            visualizationSocket.on("viz-widget3D:response:delete", (delete3DWidget: any) => {
-
-                // "3DWidget delete unsuccessfull"
-                if (delete3DWidget.success && delete3DWidget.message === "3DWidget delete successfull") {
-                    const activeZoneWidgets = zoneWidgetData[delete3DWidget.data.zoneId] || [];
-                    setZoneWidgetData(
-                        delete3DWidget.data.zoneId,
-                        activeZoneWidgets.filter((w: WidgetData) => w.id !== delete3DWidget.data.id)
-                    );
-                }
-            });
-            //update3D widget response
-            visualizationSocket.on("viz-widget3D:response:modifyPositionRotation", (update3DWidget: any) => {
-
-
-                if (update3DWidget.success && update3DWidget.message === "widget update successfully") {
-                    updateWidgetPosition(update3DWidget.data.zoneId, update3DWidget.data.widget.id, update3DWidget.data.widget.position);
-                    updateWidgetRotation(update3DWidget.data.zoneId, update3DWidget.data.widget.id, update3DWidget.data.widget.rotation);
-                }
-            });
-            // add Template response
-            visualizationSocket.on("viz-template:response:add", (addingTemplate: any) => {
-
-
-                if (addingTemplate.success) {
-                    if (addingTemplate.message === "Template saved successfully") {
-                        setTemplates(addingTemplate.data);
-                    }
-                }
-            });
-            //load Template response
-            visualizationSocket.on("viz-template:response:addTemplateZone", (loadTemplate: any) => {
-
-
-                if (loadTemplate.success) {
-                    if (loadTemplate.message === "Template placed in Zone") {
-                        let template = loadTemplate.data.template
-                        setSelectedZone({
-                            panelOrder: template.panelOrder,
-                            activeSides: Array.from(new Set(template.panelOrder)), // No merging with previous `activeSides`
-                            widgets: template.widgets,
-                        });
-                        useDroppedObjectsStore.getState().setZone(template.zoneName, template.zoneId);
-
-                        if (Array.isArray(template.floatingWidget)) {
-                            template.floatingWidget.forEach((val: any) => {
-                                useDroppedObjectsStore.getState().addObject(template.zoneName, val);
-                            });
-                        }
-                    }
-
-                }
-            });
-            //delete Template response
-            visualizationSocket.on("viz-template:response:delete", (deleteTemplate: any) => {
-
-
-                if (deleteTemplate.success) {
-                    if (deleteTemplate.message === 'Template deleted successfully') {
-                        removeTemplate(deleteTemplate.data);
-                    }
-                }
-            });
-        }
-    }, [visualizationSocket])
-
-    return (
-        <></>
-    )
-}

app/src/modules/visualization/socket/realTimeVizSocket.dev.tsx

@@ -0,0 +1,296 @@
+import { useEffect } from "react";
+import { useSocketStore } from "../../../store/store";
+import { useSelectedZoneStore } from "../../../store/useZoneStore";
+import { useDroppedObjectsStore } from "../../../store/useDroppedObjectsStore";
+import { useZoneWidgetStore } from "../../../store/useZone3DWidgetStore";
+import useTemplateStore from "../../../store/useTemplateStore";
+
+type WidgetData = {
+  id: string;
+  type: string;
+  position: [number, number, number];
+  rotation?: [number, number, number];
+  tempPosition?: [number, number, number];
+};
+
+export default function SocketRealTimeViz() {
+  const { visualizationSocket } = useSocketStore();
+  const { setSelectedZone } = useSelectedZoneStore();
+  const deleteObject = useDroppedObjectsStore((state) => state.deleteObject);
+  const updateObjectPosition = useDroppedObjectsStore(
+    (state) => state.updateObjectPosition
+  );
+  const { addWidget } = useZoneWidgetStore();
+  const { removeTemplate } = useTemplateStore();
+  const { setTemplates } = useTemplateStore();
+  const {
+    zoneWidgetData,
+    setZoneWidgetData,
+    updateWidgetPosition,
+    updateWidgetRotation,
+  } = useZoneWidgetStore();
+
+  useEffect(() => {
+    if (visualizationSocket) {
+      //add panel response
+      visualizationSocket.on("viz-panel:response:updates", (addPanel: any) => {
+        if (addPanel.success) {
+          let addPanelData = addPanel.data.data;
+          setSelectedZone(addPanelData);
+        }
+      });
+      //delete panel response
+      visualizationSocket.on(
+        "viz-panel:response:delete",
+        (deletePanel: any) => {
+          if (deletePanel.success) {
+            let deletePanelData = deletePanel.data.data;
+            setSelectedZone(deletePanelData);
+          }
+        }
+      );
+      //clear Panel response
+      visualizationSocket.on("viz-panel:response:clear", (clearPanel: any) => {
+        if (
+          clearPanel.success &&
+          clearPanel.message === "PanelWidgets cleared successfully"
+        ) {
+          let clearPanelData = clearPanel.data.data;
+          setSelectedZone(clearPanelData);
+        }
+      });
+      //lock Panel response
+      visualizationSocket.on("viz-panel:response:locked", (lockPanel: any) => {
+        if (
+          lockPanel.success &&
+          lockPanel.message === "locked panel updated successfully"
+        ) {
+          let lockPanelData = lockPanel.data.data;
+          setSelectedZone(lockPanelData);
+        }
+      });
+      // add 2dWidget response
+      visualizationSocket.on(
+        "viz-widget:response:updates",
+        (add2dWidget: any) => {
+          if (add2dWidget.success && add2dWidget.data) {
+            setSelectedZone((prev) => {
+              const isWidgetAlreadyAdded = prev.widgets.some(
+                (widget) => widget.id === add2dWidget.data.widgetData.id
+              );
+              if (isWidgetAlreadyAdded) return prev; // Prevent duplicate addition
+              return {
+                ...prev,
+                zoneId: add2dWidget.data.zoneId,
+                zoneName: add2dWidget.data.zoneName,
+                widgets: [...prev.widgets, add2dWidget.data.widgetData], // Append new widget
+              };
+            });
+          }
+        }
+      );
+      //delete 2D Widget response
+      visualizationSocket.on(
+        "viz-widget:response:delete",
+        (deleteWidget: any) => {
+          if (deleteWidget?.success && deleteWidget.data) {
+            setSelectedZone((prevZone: any) => ({
+              ...prevZone,
+              zoneId: deleteWidget.data.zoneId,
+              zoneName: deleteWidget.data.zoneName,
+              widgets: deleteWidget.data.widgetDeleteDatas, // Replace with new widget list
+            }));
+          }
+        }
+      );
+      //add Floating Widget response
+      visualizationSocket.on(
+        "viz-float:response:updates",
+        (addFloatingWidget: any) => {
+          if (addFloatingWidget.success) {
+            if (
+              addFloatingWidget.success &&
+              addFloatingWidget.message === "FloatWidget created successfully"
+            ) {
+              const state = useDroppedObjectsStore.getState();
+              const zone = state.zones[addFloatingWidget.data.zoneName];
+              if (!zone) {
+                state.setZone(
+                  addFloatingWidget.data.zoneName,
+                  addFloatingWidget.data.zoneId
+                );
+              }
+              const existingObjects = zone ? zone.objects : [];
+              const newWidget = addFloatingWidget.data.widget;
+              // ✅ Check if the widget ID already exists before adding
+              const isAlreadyAdded = existingObjects.some(
+                (obj) => obj.id === newWidget.id
+              );
+              if (isAlreadyAdded) {
+                return; // Don't add the widget if it already exists
+              }
+              // Add widget only if it doesn't exist
+              state.addObject(addFloatingWidget.data.zoneName, newWidget);
+            }
+            if (addFloatingWidget.message === "Widget updated successfully") {
+              updateObjectPosition(
+                addFloatingWidget.data.zoneName,
+                addFloatingWidget.data.index,
+                addFloatingWidget.data.position
+              );
+            }
+          }
+        }
+      );
+      //duplicate Floating Widget response
+      visualizationSocket.on(
+        "viz-float:response:addDuplicate",
+        (duplicateFloatingWidget: any) => {
+          if (
+            duplicateFloatingWidget.success &&
+            duplicateFloatingWidget.message ===
+              "duplicate FloatWidget created successfully"
+          ) {
+            useDroppedObjectsStore.setState((state) => {
+              const zone = state.zones[duplicateFloatingWidget.data.zoneName];
+              if (!zone) return state; // Zone doesn't exist, return state as is
+              const existingObjects = zone.objects;
+              const newWidget = duplicateFloatingWidget.data.widget;
+              // ✅ Check if the object with the same ID already exists
+              const isAlreadyAdded = existingObjects.some(
+                (obj) => obj.id === newWidget.id
+              );
+              if (isAlreadyAdded) {
+                return state; // Don't update state if it's already there
+              }
+              return {
+                zones: {
+                  ...state.zones,
+                  [duplicateFloatingWidget.data.zoneName]: {
+                    ...zone,
+                    objects: [...existingObjects, newWidget], // Append only if it's not a duplicate
+                  },
+                },
+              };
+            });
+          }
+        }
+      );
+      //delete Floating Widget response
+      visualizationSocket.on(
+        "viz-float:response:delete",
+        (deleteFloatingWidget: any) => {
+          if (deleteFloatingWidget.success) {
+            deleteObject(
+              deleteFloatingWidget.data.zoneName,
+              deleteFloatingWidget.data.floatWidgetID
+            );
+          }
+        }
+      );
+      //add 3D Widget response
+      visualizationSocket.on(
+        "viz-widget3D:response:updates",
+        (add3DWidget: any) => {
+          if (add3DWidget.success) {
+            if (add3DWidget.message === "Widget created successfully") {
+              addWidget(add3DWidget.data.zoneId, add3DWidget.data.widget);
+            }
+          }
+        }
+      );
+      //delete 3D Widget response
+      visualizationSocket.on(
+        "viz-widget3D:response:delete",
+        (delete3DWidget: any) => {
+          // "3DWidget delete unsuccessfull"
+          if (
+            delete3DWidget.success &&
+            delete3DWidget.message === "3DWidget delete successfull"
+          ) {
+            const activeZoneWidgets =
+              zoneWidgetData[delete3DWidget.data.zoneId] || [];
+            setZoneWidgetData(
+              delete3DWidget.data.zoneId,
+              activeZoneWidgets.filter(
+                (w: WidgetData) => w.id !== delete3DWidget.data.id
+              )
+            );
+          }
+        }
+      );
+      //update3D widget response
+      visualizationSocket.on(
+        "viz-widget3D:response:modifyPositionRotation",
+        (update3DWidget: any) => {
+          if (
+            update3DWidget.success &&
+            update3DWidget.message === "widget update successfully"
+          ) {
+            updateWidgetPosition(
+              update3DWidget.data.zoneId,
+              update3DWidget.data.widget.id,
+              update3DWidget.data.widget.position
+            );
+            updateWidgetRotation(
+              update3DWidget.data.zoneId,
+              update3DWidget.data.widget.id,
+              update3DWidget.data.widget.rotation
+            );
+          }
+        }
+      );
+      // add Template response
+      visualizationSocket.on(
+        "viz-template:response:add",
+        (addingTemplate: any) => {
+          if (addingTemplate.success) {
+            if (addingTemplate.message === "Template saved successfully") {
+              setTemplates(addingTemplate.data);
+            }
+          }
+        }
+      );
+      //load Template response
+      visualizationSocket.on(
+        "viz-template:response:addTemplateZone",
+        (loadTemplate: any) => {
+          if (loadTemplate.success) {
+            if (loadTemplate.message === "Template placed in Zone") {
+              let template = loadTemplate.data.template;
+              setSelectedZone({
+                panelOrder: template.panelOrder,
+                activeSides: Array.from(new Set(template.panelOrder)), // No merging with previous `activeSides`
+                widgets: template.widgets,
+              });
+              useDroppedObjectsStore
+                .getState()
+                .setZone(template.zoneName, template.zoneId);
+
+              if (Array.isArray(template.floatingWidget)) {
+                template.floatingWidget.forEach((val: any) => {
+                  useDroppedObjectsStore
+                    .getState()
+                    .addObject(template.zoneName, val);
+                });
+              }
+            }
+          }
+        }
+      );
+      //delete Template response
+      visualizationSocket.on(
+        "viz-template:response:delete",
+        (deleteTemplate: any) => {
+          if (deleteTemplate.success) {
+            if (deleteTemplate.message === "Template deleted successfully") {
+              removeTemplate(deleteTemplate.data);
+            }
+          }
+        }
+      );
+    }
+  }, [visualizationSocket]);
+
+  return <></>;
+}

app/src/modules/visualization/template/Templates.tsx

@@ -1,129 +1,135 @@
-import { useEffect } from "react";
+import { useEffect } from "react";
-import { useDroppedObjectsStore } from "../../../../store/useDroppedObjectsStore";
+import useTemplateStore from "../../../store/useTemplateStore";
-import useTemplateStore from "../../../../store/useTemplateStore";
+import { useSelectedZoneStore } from "../../../store/useZoneStore";
-import { useSelectedZoneStore } from "../../../../store/useZoneStore";
+import { useSocketStore } from "../../../store/store";
-import { getTemplateData } from "../../../../services/realTimeVisulization/zoneData/getTemplate";
+import { getTemplateData } from "../../../services/realTimeVisulization/zoneData/getTemplate";
-import { useSocketStore } from "../../../../store/store";
+import { useDroppedObjectsStore } from "../../../store/useDroppedObjectsStore";
-import RenameInput from "../../../ui/inputs/RenameInput";
+import RenameInput from "../../../components/ui/inputs/RenameInput";
-
+
-const Templates = () => {
+
-  const { templates, removeTemplate, setTemplates } = useTemplateStore();
+
-  const { setSelectedZone, selectedZone } = useSelectedZoneStore();
+const Templates = () => {
-  const { visualizationSocket } = useSocketStore();
+  const { templates, removeTemplate, setTemplates } = useTemplateStore();
-
+  const { setSelectedZone, selectedZone } = useSelectedZoneStore();
-  useEffect(() => {
+  const { visualizationSocket } = useSocketStore();
-    async function templateData() {
+
-      try {
+  useEffect(() => {
-        const email = localStorage.getItem("email") || "";
+    async function templateData() {
-        const organization = email?.split("@")[1]?.split(".")[0];
+      try {
-        let response = await getTemplateData(organization);
+        const email = localStorage.getItem("email") || "";
-        setTemplates(response);
+        const organization = email?.split("@")[1]?.split(".")[0];
-      } catch (error) {
+        let response = await getTemplateData(organization);
-        console.error("Error fetching template data:", error);
+        setTemplates(response);
-      }
+      } catch (error) {
-    }
+        console.error("Error fetching template data:", error);
-
+      }
-    templateData();
+    }
-  }, []);
+
-
+    templateData();
-  const handleDeleteTemplate = async (id: string) => {
+  }, []);
-    try {
+
-      const email = localStorage.getItem("email") || "";
+  const handleDeleteTemplate = async (
-      const organization = email?.split("@")[1]?.split(".")[0];
+    e: React.MouseEvent<HTMLButtonElement>,
-      let deleteTemplate = {
+    id: string
-        organization: organization,
+  ) => {
-        templateID: id,
+    try {
-      };
+      e.stopPropagation();
-      if (visualizationSocket) {
+      const email = localStorage.getItem("email") || "";
-        visualizationSocket.emit(
+
-          "v2:viz-template:deleteTemplate",
+      const organization = email?.split("@")[1]?.split(".")[0];
-          deleteTemplate
+      let deleteTemplate = {
-        );
+        organization: organization,
-      }
+        templateID: id,
-      removeTemplate(id);
+      };
-    } catch (error) {
+      if (visualizationSocket) {
-      console.error("Error deleting template:", error);
+        visualizationSocket.emit(
-    }
+          "v2:viz-template:deleteTemplate",
-  };
+          deleteTemplate
-
+        );
-  const handleLoadTemplate = async (template: any) => {
+      }
-    try {
+      removeTemplate(id);
-      if (selectedZone.zoneName === "") return;
+    } catch (error) {
-
+      console.error("Error deleting template:", error);
-      const email = localStorage.getItem("email") || "";
+    }
-      const organization = email?.split("@")[1]?.split(".")[0];
+  };
-
+
-      let loadingTemplate = {
+  const handleLoadTemplate = async (template: any) => {
-        organization: organization,
+    try {
-        zoneId: selectedZone.zoneId,
+      if (selectedZone.zoneName === "") return;
-        templateID: template.id,
+      const email = localStorage.getItem("email") || "";
-      };
+      const organization = email?.split("@")[1]?.split(".")[0];
-
+
-      if (visualizationSocket) {
+      let loadingTemplate = {
-        visualizationSocket.emit("v2:viz-template:addToZone", loadingTemplate);
+        organization: organization,
-      }
+        zoneId: selectedZone.zoneId,
-
+        templateID: template.id,
-      setSelectedZone({
+      };
-        panelOrder: template.panelOrder,
+
-        activeSides: Array.from(new Set(template.panelOrder)), // No merging with previous `activeSides`
+      if (visualizationSocket) {
-        widgets: template.widgets,
+        visualizationSocket.emit("v2:viz-template:addToZone", loadingTemplate);
-      });
+      }
-
+
-      useDroppedObjectsStore
+      setSelectedZone({
-        .getState()
+        panelOrder: template.panelOrder,
-        .setZone(selectedZone.zoneName, selectedZone.zoneId);
+        activeSides: Array.from(new Set(template.panelOrder)), // No merging with previous `activeSides`
-
+        widgets: template.widgets,
-      if (Array.isArray(template.floatingWidget)) {
+      });
-        template.floatingWidget.forEach((val: any) => {
+
-          useDroppedObjectsStore
+      useDroppedObjectsStore
-            .getState()
+        .getState()
-            .addObject(selectedZone.zoneName, val);
+        .setZone(selectedZone.zoneName, selectedZone.zoneId);
-        });
+
-      }
+      if (Array.isArray(template.floatingWidget)) {
-    } catch (error) {
+        template.floatingWidget.forEach((val: any) => {
-      console.error("Error loading template:", error);
+          useDroppedObjectsStore
-    }
+            .getState()
-  };
+            .addObject(selectedZone.zoneName, val);
-
+        });
-  return (
+      }
-    <div className="template-list">
+    } catch (error) {
-      {templates.map((template, index) => (
+      console.error("Error loading template:", error);
-        <div
+    }
-          key={template.id}
+  };
-          className="template-item"
+
-          onClick={() => handleLoadTemplate(template)}
+  return (
-        >
+    <div className="template-list">
-          {template?.snapshot && (
+      {templates.map((template, index) => (
-            <div className="template-image-container">
+        <div
-              <img
+          key={template.id}
-                src={template.snapshot}
+          className="template-item"
-                alt={`${template.name} preview`}
+         
-                className="template-image"
+        >
-              />
+          {template?.snapshot && (
-            </div>
+            <div className="template-image-container"  onClick={() => handleLoadTemplate(template)}>
-          )}
+              <img
-          <div className="template-details">
+                src={template.snapshot}
-            <div className="template-name">
+                alt={`${template.name} preview`}
-              {/* {`Template ${index + 1}`} */}
+                className="template-image"
-              <RenameInput value={`Template ${index + 1}`} />
+              />
-            </div>
+            </div>
-            <button
+          )}
-              onClick={() => handleDeleteTemplate(template.id)}
+          <div className="template-details">
-              className="delete-button"
+            <div className="template-name">
-              aria-label="Delete template"
+              {/* {`Template ${index + 1}`} */}
-            >
+              <RenameInput value={`Template ${index + 1}`} />
-              Delete
+            </div>
-            </button>
+            <button
-          </div>
+              onClick={(e) => handleDeleteTemplate(e, template.id)}
-        </div>
+              className="delete-button"
-      ))}
+              aria-label="Delete template"
-      {templates.length === 0 && (
+            >
-        <div className="no-templates">
+              Delete
-          No saved templates yet. Create one in the visualization view!
+            </button>
-        </div>
+          </div>
-      )}
+        </div>
-    </div>
+      ))}
-  );
+      {templates.length === 0 && (
-};
+        <div className="no-templates">
-
+          No saved templates yet. Create one in the visualization view!
-export default Templates;
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Templates;

app/src/modules/visualization/widgets/2d/DraggableWidget.tsx

@@ -1,24 +1,25 @@
-import { useWidgetStore } from "../../../store/useWidgetStore";
+import { useWidgetStore } from "../../../../store/useWidgetStore";
-import ProgressCard from "../realTimeVis/charts/ProgressCard";
+import ProgressCard from "../2d/charts/ProgressCard";
-import PieGraphComponent from "../realTimeVis/charts/PieGraphComponent";
+import PieGraphComponent from "../2d/charts/PieGraphComponent";
-import BarGraphComponent from "../realTimeVis/charts/BarGraphComponent";
+import BarGraphComponent from "../2d/charts/BarGraphComponent";
-import LineGraphComponent from "../realTimeVis/charts/LineGraphComponent";
+import LineGraphComponent from "../2d/charts/LineGraphComponent";
-import DoughnutGraphComponent from "../realTimeVis/charts/DoughnutGraphComponent";
+import DoughnutGraphComponent from "../2d/charts/DoughnutGraphComponent";
-import PolarAreaGraphComponent from "../realTimeVis/charts/PolarAreaGraphComponent";
+import PolarAreaGraphComponent from "../2d/charts/PolarAreaGraphComponent";
-import ProgressCard1 from "../realTimeVis/charts/ProgressCard1";
+import ProgressCard1 from "../2d/charts/ProgressCard1";
-import ProgressCard2 from "../realTimeVis/charts/ProgressCard2";
+import ProgressCard2 from "../2d/charts/ProgressCard2";
 import {
   DeleteIcon,
   DublicateIcon,
   KebabIcon,
-} from "../../icons/ExportCommonIcons";
+} from "../../../../components/icons/ExportCommonIcons";
 import { useEffect, useRef, useState } from "react";
-import { duplicateWidgetApi } from "../../../services/realTimeVisulization/zoneData/duplicateWidget";
+import { duplicateWidgetApi } from "../../../../services/realTimeVisulization/zoneData/duplicateWidget";
-import { deleteWidgetApi } from "../../../services/realTimeVisulization/zoneData/deleteWidgetApi";
+import { deleteWidgetApi } from "../../../../services/realTimeVisulization/zoneData/deleteWidgetApi";
-import { useClickOutside } from "./functions/handleWidgetsOuterClick";
+import { useClickOutside } from "../../functions/handleWidgetsOuterClick";
-import { useSocketStore } from "../../../store/store";
+import { useSocketStore } from "../../../../store/store";
-import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
+import { usePlayButtonStore } from "../../../../store/usePlayButtonStore";
-import OuterClick from "../../../utils/outerClick";
+import OuterClick from "../../../../utils/outerClick";
+import useChartStore from "../../../../store/useChartStore";
 
 type Side = "top" | "bottom" | "left" | "right";
 
@@ -44,7 +45,7 @@ export const DraggableWidget = ({
     zoneName: string;
     zoneId: string;
     activeSides: Side[];
-    points:[];
+    points: [];
     panelOrder: Side[];
     lockedPanels: Side[];
     widgets: Widget[];
@@ -54,7 +55,7 @@ export const DraggableWidget = ({
       zoneName: string;
       activeSides: Side[];
       panelOrder: Side[];
-      points:[];
+      points: [];
       lockedPanels: Side[];
       zoneId: string;
       zoneViewPortTarget: number[];
@@ -81,6 +82,16 @@ export const DraggableWidget = ({
   const [panelDimensions, setPanelDimensions] = useState<{
     [side in Side]?: { width: number; height: number };
   }>({});
+  const { measurements, duration, name } = useChartStore();
+  const { isPlaying } = usePlayButtonStore();
+
+  const [canvasDimensions, setCanvasDimensions] = useState({
+    width: 0,
+    height: 0,
+  });
+  useEffect(() => {
+    console.log("changes loggggg", measurements, duration, name);
+  }, [measurements, duration, name])
   const handlePointerDown = () => {
     if (selectedChartId?.id !== widget.id) {
       setSelectedChartId(widget);
@@ -89,17 +100,6 @@ export const DraggableWidget = ({
 
   const chartWidget = useRef<HTMLDivElement>(null);
 
-  OuterClick({
-    contextClassName: [
-      "chart-container",
-      "floating",
-      "sidebar-right-wrapper",
-      "card",
-      "dropdown-menu",
-    ],
-    setMenuVisible: () => setSelectedChartId(null),
-  });
-
   const deleteSelectedChart = async () => {
     try {
       const email = localStorage.getItem("email") || "";
@@ -139,43 +139,53 @@ export const DraggableWidget = ({
     }
   };
 
+  // Calculate panel size
+  const panelSize = Math.max(
+    Math.min(canvasDimensions.width * 0.25, canvasDimensions.height * 0.25),
+    170 // Min 170px
+  );
+
   const getCurrentWidgetCount = (panel: Side) =>
     selectedZone.widgets.filter((w) => w.panel === panel).length;
-
+  // Calculate panel capacity
+  
   const calculatePanelCapacity = (panel: Side) => {
-    const CHART_WIDTH = 150;
+    const CHART_WIDTH = panelSize;
-    const CHART_HEIGHT = 150;
+    const CHART_HEIGHT = panelSize;
-    const FALLBACK_HORIZONTAL_CAPACITY = 5;
-    const FALLBACK_VERTICAL_CAPACITY = 3;
 
     const dimensions = panelDimensions[panel];
     if (!dimensions) {
-      return panel === "top" || panel === "bottom"
+      return panel === "top" || panel === "bottom" ? 5 : 3; // Fallback capacities
-        ? FALLBACK_HORIZONTAL_CAPACITY
-        : FALLBACK_VERTICAL_CAPACITY;
     }
 
     return panel === "top" || panel === "bottom"
-      ? Math.floor(dimensions.width / CHART_WIDTH)
+      ? Math.max(1, Math.floor(dimensions.width / CHART_WIDTH))
-      : Math.floor(dimensions.height / CHART_HEIGHT);
+      : Math.max(1, Math.floor(dimensions.height / CHART_HEIGHT));
   };
 
   const isPanelFull = (panel: Side) => {
     const currentWidgetCount = getCurrentWidgetCount(panel);
     const panelCapacity = calculatePanelCapacity(panel);
-    return currentWidgetCount >= panelCapacity;
+
+    return currentWidgetCount >  panelCapacity;
   };
 
   const duplicateWidget = async () => {
     try {
       const email = localStorage.getItem("email") || "";
       const organization = email?.split("@")[1]?.split(".")[0];
+      console.log("widget data sent", widget);
+
 
       const duplicatedWidget: Widget = {
         ...widget,
+        Data: {
+          duration: duration,
+          measurements: { ...measurements }
+        },
         id: `${widget.id}-copy-${Date.now()}`,
       };
-      console.log('duplicatedWidget: ', duplicatedWidget);
+      console.log("duplicatedWidget: ", duplicatedWidget);
 
       let duplicateWidget = {
         organization: organization,
@@ -183,6 +193,8 @@ export const DraggableWidget = ({
         widget: duplicatedWidget,
       };
       if (visualizationSocket) {
+        console.log("duplecate widget", duplicateWidget);
+
         visualizationSocket.emit("v2:viz-widget:add", duplicateWidget);
       }
       setSelectedZone((prevZone: any) => ({
@@ -255,12 +267,7 @@ export const DraggableWidget = ({
   // useClickOutside(chartWidget, () => {
   //   setSelectedChartId(null);
   // });
-  const { isPlaying } = usePlayButtonStore();
 
-  const [canvasDimensions, setCanvasDimensions] = useState({
-    width: 0,
-    height: 0,
-  });
   // Track canvas dimensions
 
   // Current: Two identical useEffect hooks for canvas dimensions
@@ -298,9 +305,8 @@ export const DraggableWidget = ({
       <div
         draggable
         key={widget.id}
-        className={`chart-container ${
+        className={`chart-container ${selectedChartId?.id === widget.id && !isPlaying && "activeChart"
-          selectedChartId?.id === widget.id && !isPlaying && "activeChart"
+          }`}
-        }`}
         onPointerDown={handlePointerDown}
         onDragStart={handleDragStart}
         onDragEnter={handleDragEnter}
@@ -326,10 +332,9 @@ export const DraggableWidget = ({
         {openKebabId === widget.id && (
           <div className="kebab-options" ref={widgetRef}>
             <div
-              className={`edit btn ${
+              className={`edit btn ${isPanelFull(widget.panel) ? "btn-blur" : ""
-                isPanelFull(widget.panel) ? "btn-blur" : ""
+                }`}
-              }`}
+              onClick={duplicateWidget}
-              onClick={isPanelFull(widget.panel) ? undefined : duplicateWidget}
             >
               <div className="icon">
                 <DublicateIcon />
@@ -402,5 +407,3 @@ export const DraggableWidget = ({
     </>
   );
 };
-
-// by using canvasDimensions.height canvasDimensions.width dynamically div value insted of static 6 and 4 calculate according to canvasDimensions.width canvasDimensions.height

app/src/modules/visualization/widgets/2d/charts/BarGraphComponent.tsx

@@ -1,376 +1,377 @@
-// import React, { useEffect, useRef, useMemo, useState } from "react";
+// import React, { useEffect, useRef, useMemo, useState } from "react";
-// import { Chart } from "chart.js/auto";
+// import { Chart } from "chart.js/auto";
-// import { useThemeStore } from "../../../../store/useThemeStore";
+// import { useThemeStore } from "../../../../store/useThemeStore";
-// import io from "socket.io-client";
+// import io from "socket.io-client";
-// import { Bar } from 'react-chartjs-2';
+// import { Bar } from 'react-chartjs-2';
-// import useChartStore from "../../../../store/useChartStore";
+// import useChartStore from "../../../../store/useChartStore";
-
+
-// // WebSocket Connection
+// // WebSocket Connection
-// // const socket = io("http://localhost:5000"); // Adjust to your backend URL
+// // const socket = io("http://localhost:5000"); // Adjust to your backend URL
-
+
-// interface ChartComponentProps {
+// interface ChartComponentProps {
-//   type: any;
+//   type: any;
-//   title: string;
+//   title: string;
-//   fontFamily?: string;
+//   fontFamily?: string;
-//   fontSize?: string;
+//   fontSize?: string;
-//   fontWeight?: "Light" | "Regular" | "Bold";
+//   fontWeight?: "Light" | "Regular" | "Bold";
-//   data: any;
+//   data: any;
-// }
+// }
-
+
-// const LineGraphComponent = ({
+// const LineGraphComponent = ({
-//   type,
+//   type,
-//   title,
+//   title,
-//   fontFamily,
+//   fontFamily,
-//   fontSize,
+//   fontSize,
-//   fontWeight = "Regular",
+//   fontWeight = "Regular",
-//   data,
+//   data,
-// }: ChartComponentProps) => {
+// }: ChartComponentProps) => {
-//   const canvasRef = useRef<HTMLCanvasElement>(null);
+//   const canvasRef = useRef<HTMLCanvasElement>(null);
-//   const { themeColor } = useThemeStore();
+//   const { themeColor } = useThemeStore();
-//   const [chartData, setChartData] = useState<{ labels: string[]; datasets: any[] }>({
+//   const [chartData, setChartData] = useState<{ labels: string[]; datasets: any[] }>({
-//     labels: [],
+//     labels: [],
-//     datasets: [],
+//     datasets: [],
-//   });
+//   });
-
+
-//   const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
+//   const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
-
+
-//   const defaultData = {
+//   const defaultData = {
-//     labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
+//     labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
-//     datasets: [
+//     datasets: [
-//       {
+//       {
-//         label: "Dataset",
+//         label: "Dataset",
-//         data: [12, 19, 3, 5, 2, 3],
+//         data: [12, 19, 3, 5, 2, 3],
-//         backgroundColor: ["#6f42c1"],
+//         backgroundColor: ["#6f42c1"],
-//         borderColor: "#ffffff",
+//         borderColor: "#ffffff",
-//         borderWidth: 2,
+//         borderWidth: 2,
-//       },
+//       },
-//     ],
+//     ],
-//   };
+//   };
-
+
-//   // Memoize Theme Colors to Prevent Unnecessary Recalculations
+//   // Memoize Theme Colors to Prevent Unnecessary Recalculations
-//     const buttonActionColor = useMemo(
+//     const buttonActionColor = useMemo(
-//       () => themeColor[0] || "#5c87df",
+//       () => themeColor[0] || "#5c87df",
-//       [themeColor]
+//       [themeColor]
-//     );
+//     );
-//     const buttonAbortColor = useMemo(
+//     const buttonAbortColor = useMemo(
-//       () => themeColor[1] || "#ffffff",
+//       () => themeColor[1] || "#ffffff",
-//       [themeColor]
+//       [themeColor]
-//     );
+//     );
-  
+  
-//     // Memoize Font Weight Mapping
+//     // Memoize Font Weight Mapping
-//     const chartFontWeightMap = useMemo(
+//     const chartFontWeightMap = useMemo(
-//       () => ({
+//       () => ({
-//         Light: "lighter" as const,
+//         Light: "lighter" as const,
-//         Regular: "normal" as const,
+//         Regular: "normal" as const,
-//         Bold: "bold" as const,
+//         Bold: "bold" as const,
-//       }),
+//       }),
-//       []
+//       []
-//     );
+//     );
-  
+  
-//     // Parse and Memoize Font Size
+//     // Parse and Memoize Font Size
-//     const fontSizeValue = useMemo(
+//     const fontSizeValue = useMemo(
-//       () => (fontSize ? parseInt(fontSize) : 12),
+//       () => (fontSize ? parseInt(fontSize) : 12),
-//       [fontSize]
+//       [fontSize]
-//     );
+//     );
-  
+  
-//     // Determine and Memoize Font Weight
+//     // Determine and Memoize Font Weight
-//     const fontWeightValue = useMemo(
+//     const fontWeightValue = useMemo(
-//       () => chartFontWeightMap[fontWeight],
+//       () => chartFontWeightMap[fontWeight],
-//       [fontWeight, chartFontWeightMap]
+//       [fontWeight, chartFontWeightMap]
-//     );
+//     );
-  
+  
-//     // Memoize Chart Font Style
+//     // Memoize Chart Font Style
-//     const chartFontStyle = useMemo(
+//     const chartFontStyle = useMemo(
-//       () => ({
+//       () => ({
-//         family: fontFamily || "Arial",
+//         family: fontFamily || "Arial",
-//         size: fontSizeValue,
+//         size: fontSizeValue,
-//         weight: fontWeightValue,
+//         weight: fontWeightValue,
-//       }),
+//       }),
-//       [fontFamily, fontSizeValue, fontWeightValue]
+//       [fontFamily, fontSizeValue, fontWeightValue]
-//     );
+//     );
-  
+  
-//     // Memoize Chart Data
+//     // Memoize Chart Data
-//     // const data = useMemo(() => propsData, [propsData]);
+//     // const data = useMemo(() => propsData, [propsData]);
-  
+  
-//     // Memoize 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: {
+//           legend: {
-//             display: false,
+//             display: false,
-//           },
+//           },
-//         },
+//         },
-//         scales: {
+//         scales: {
-//           x: {
+//           x: {
-//             ticks: {
+//             ticks: {
-//               display: true, // This hides the x-axis labels
+//               display: true, // This hides the x-axis labels
-//             },
+//             },
-//           },
+//           },
-//         },
+//         },
-//       }),
+//       }),
-//       [title, chartFontStyle]
+//       [title, chartFontStyle]
-//     );
+//     );
-
+
-//     const { measurements, setMeasurements, updateDuration, duration } = useChartStore();
+//     const { measurements, setMeasurements, updateDuration, duration } = useChartStore();
-
+
-//   useEffect(() => {
+//   useEffect(() => {
-
+
-//     const socket = io(`http://${iotApiUrl}`);
+//     const socket = io(`http://${iotApiUrl}`);
-
+
-//     if ( measurements.length > 0 ) {
+//     if ( measurements.length > 0 ) {
-//       var inputes = {
+//       var inputes = {
-//         measurements: measurements,
+//         measurements: measurements,
-//         duration: duration,
+//         duration: duration,
-//         interval: 1000,
+//         interval: 1000,
-//       }
+//       }
-
+
-//     // Start stream
+//     // Start stream
-//     const startStream = () => {
+//     const startStream = () => {
-//       socket.emit("lineInput", inputes);
+//       socket.emit("lineInput", inputes);
-//     }
+//     }
-
+
-//     socket.on('connect', startStream);
+//     socket.on('connect', startStream);
-
+
-//     socket.on("lineOutput", (response) => {
+//     socket.on("lineOutput", (response) => {
-//       const responceData = response.data;
+//       const responceData = response.data;
-//       console.log("Received data:", responceData);
+//       console.log("Received data:", responceData);
-
+
-//       // Extract timestamps and values
+//       // Extract timestamps and values
-//       const labels = responceData.time;
+//       const labels = responceData.time;
-//       const datasets = measurements.map((measurement: any) => {
+//       const datasets = measurements.map((measurement: any) => {
-//         const key = `${measurement.name}.${measurement.fields}`;
+//         const key = `${measurement.name}.${measurement.fields}`;
-//         return {
+//         return {
-//           label: key,
+//           label: key,
-//           data: responceData[key]?.values ?? [], // Ensure it exists
+//           data: responceData[key]?.values ?? [], // Ensure it exists
-//           backgroundColor: "#6f42c1",
+//           backgroundColor: "#6f42c1",
-//           borderColor: "#ffffff",
+//           borderColor: "#ffffff",
-//         };
+//         };
-//       });
+//       });
-
+
-//       setChartData({ labels, datasets });
+//       setChartData({ labels, datasets });
-//     });
+//     });
-//     }
+//     }
-
+
-//     return () => {
+//     return () => {
-//       socket.off("lineOutput");
+//       socket.off("lineOutput");
-//       socket.emit("stop_stream"); // Stop streaming when component unmounts
+//       socket.emit("stop_stream"); // Stop streaming when component unmounts
-//     };
+//     };
-//   }, [measurements, duration]);
+//   }, [measurements, duration]);
-
+
-//   // useEffect(() => {
+//   // useEffect(() => {
-//   //   if (!canvasRef.current) return;
+//   //   if (!canvasRef.current) return;
-//   //   const ctx = canvasRef.current.getContext("2d");
+//   //   const ctx = canvasRef.current.getContext("2d");
-//   //   if (!ctx) return;
+//   //   if (!ctx) return;
-
+
-//   //   const chart = new Chart(ctx, {
+//   //   const chart = new Chart(ctx, {
-//   //     type,
+//   //     type,
-//   //     data: chartData,
+//   //     data: chartData,
-//   //     options: options,
+//   //     options: options,
-//   //   });
+//   //   });
-
+
-//   //   return () => chart.destroy();
+//   //   return () => chart.destroy();
-//   // }, [chartData, type, title]);
+//   // }, [chartData, type, title]);
-
+
-//   return <Bar data={measurements && measurements.length > 0 ? chartData : defaultData} options={options} />;
+//   return <Bar data={measurements && measurements.length > 0 ? chartData : defaultData} options={options} />;
-// };
+// };
-
+
-// export default LineGraphComponent;
+// export default LineGraphComponent;
-
+
-
+
-
+
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
-import { Bar } from "react-chartjs-2";
+import { Bar } from "react-chartjs-2";
-import io from "socket.io-client";
+import io from "socket.io-client";
-import { useThemeStore } from "../../../../store/useThemeStore";
+
-import useChartStore from "../../../../store/useChartStore";
+import axios from "axios";
-import { useWidgetStore } from "../../../../store/useWidgetStore";
+import { useThemeStore } from "../../../../../store/useThemeStore";
-import axios from "axios";
+import { useWidgetStore } from "../../../../../store/useWidgetStore";
-
+import useChartStore from "../../../../../store/useChartStore";
-interface ChartComponentProps {
+
-  id: string;
+interface ChartComponentProps {
-  type: any;
+  id: string;
-  title: string;
+  type: any;
-  fontFamily?: string;
+  title: string;
-  fontSize?: string;
+  fontFamily?: string;
-  fontWeight?: "Light" | "Regular" | "Bold";
+  fontSize?: string;
-}
+  fontWeight?: "Light" | "Regular" | "Bold";
-
+}
-const BarGraphComponent = ({
+
-  id,
+const BarGraphComponent = ({
-  type,
+  id,
-  title,
+  type,
-  fontFamily,
+  title,
-  fontSize,
+  fontFamily,
-  fontWeight = "Regular",
+  fontSize,
-}: ChartComponentProps) => {
+  fontWeight = "Regular",
-  const { themeColor } = useThemeStore();
+}: ChartComponentProps) => {
-  const { measurements: chartMeasurements, duration: chartDuration, name: widgetName } = useChartStore();
+  const { themeColor } = useThemeStore();
-  const [measurements, setmeasurements] = useState<any>({});
+  const { measurements: chartMeasurements, duration: chartDuration, name: widgetName } = useChartStore();
-  const [duration, setDuration] = useState("1h")
+  const [measurements, setmeasurements] = useState<any>({});
-  const [name, setName] = useState("Widget")
+  const [duration, setDuration] = useState("1h")
-  const [chartData, setChartData] = useState<{ labels: string[]; datasets: any[] }>({
+  const [name, setName] = useState("Widget")
-    labels: [],
+  const [chartData, setChartData] = useState<{ labels: string[]; datasets: any[] }>({
-    datasets: [],
+    labels: [],
-  });
+    datasets: [],
-   const { selectedChartId } = useWidgetStore();
+  });
-
+   const { selectedChartId } = useWidgetStore();
-  const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
+
-  const email = localStorage.getItem("email") || "";
+  const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
-  const organization = email?.split("@")[1]?.split(".")[0]
+  const email = localStorage.getItem("email") || "";
-  const defaultData = {
+  const organization = email?.split("@")[1]?.split(".")[0]
-    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
+  const defaultData = {
-    datasets: [
+    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
-      {
+    datasets: [
-        label: "Dataset",
+      {
-        data: [12, 19, 3, 5, 2, 3],
+        label: "Dataset",
-        backgroundColor: ["#6f42c1"],
+        data: [12, 19, 3, 5, 2, 3],
-        borderColor: "#b392f0",
+        backgroundColor: ["#6f42c1"],
-        borderWidth: 1,
+        borderColor: "#b392f0",
-      },
+        borderWidth: 1,
-    ],
+      },
-  };
+    ],
-
+  };
-  useEffect(() => {
+
-    
+  useEffect(() => {
-  },[])
+    
-
+  },[])
-  // Memoize Theme Colors
+
-  const buttonActionColor = useMemo(() => themeColor[0] || "#5c87df", [themeColor]);
+  // Memoize Theme Colors
-  const buttonAbortColor = useMemo(() => themeColor[1] || "#ffffff", [themeColor]);
+  const buttonActionColor = useMemo(() => themeColor[0] || "#5c87df", [themeColor]);
-
+  const buttonAbortColor = useMemo(() => themeColor[1] || "#ffffff", [themeColor]);
-  // Memoize Font Styling
+
-  const chartFontWeightMap = useMemo(
+  // Memoize Font Styling
-    () => ({
+  const chartFontWeightMap = useMemo(
-      Light: "lighter" as const,
+    () => ({
-      Regular: "normal" as const,
+      Light: "lighter" as const,
-      Bold: "bold" as const,
+      Regular: "normal" as const,
-    }),
+      Bold: "bold" as const,
-    []
+    }),
-  );
+    []
-
+  );
-  const fontSizeValue = useMemo(() => (fontSize ? parseInt(fontSize) : 12), [fontSize]);
+
-  const fontWeightValue = useMemo(() => chartFontWeightMap[fontWeight], [fontWeight, chartFontWeightMap]);
+  const fontSizeValue = useMemo(() => (fontSize ? parseInt(fontSize) : 12), [fontSize]);
-
+  const fontWeightValue = useMemo(() => chartFontWeightMap[fontWeight], [fontWeight, chartFontWeightMap]);
-  const chartFontStyle = useMemo(
+
-    () => ({
+  const chartFontStyle = useMemo(
-      family: fontFamily || "Arial",
+    () => ({
-      size: fontSizeValue,
+      family: fontFamily || "Arial",
-      weight: fontWeightValue,
+      size: fontSizeValue,
-    }),
+      weight: fontWeightValue,
-    [fontFamily, fontSizeValue, fontWeightValue]
+    }),
-  );
+    [fontFamily, fontSizeValue, fontWeightValue]
-
+  );
-    // Memoize Chart Options
+
-    const options = useMemo(
+    // Memoize Chart Options
-      () => ({
+    const options = useMemo(
-        responsive: true,
+      () => ({
-        maintainAspectRatio: false,
+        responsive: true,
-        plugins: {
+        maintainAspectRatio: false,
-          title: {
+        plugins: {
-            display: true,
+          title: {
-            text: name,
+            display: true,
-            font: chartFontStyle,
+            text: name,
-          },
+            font: chartFontStyle,
-          legend: {
+          },
-            display: false,
+          legend: {
-          },
+            display: false,
-        },
+          },
-        scales: {
+        },
-          x: {
+        scales: {
-            ticks: {
+          x: {
-              display: true, // This hides the x-axis labels
+            ticks: {
-            },
+              display: true, // This hides the x-axis labels
-          },
+            },
-        },
+          },
-      }),
+        },
-      [title, chartFontStyle, name]
+      }),
-    );
+      [title, chartFontStyle, name]
-
+    );
-    // useEffect(() => {console.log(measurements);
+
-    // },[measurements])
+    // useEffect(() => {console.log(measurements);
-
+    // },[measurements])
-  useEffect(() => {
+
-    if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0) return;
+  useEffect(() => {
-
+    if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0) return;
-    const socket = io(`http://${iotApiUrl}`);
+
-
+    const socket = io(`http://${iotApiUrl}`);
-    const inputData = {
+
-      measurements,
+    const inputData = {
-      duration,
+      measurements,
-      interval: 1000,
+      duration,
-    };
+      interval: 1000,
-
+    };
-
+
-    const startStream = () => {  
+
-      socket.emit("lineInput", inputData);
+    const startStream = () => {  
-    };
+      socket.emit("lineInput", inputData);
-
+    };
-    socket.on("connect", startStream);
+
-
+    socket.on("connect", startStream);
-    socket.on("lineOutput", (response) => {
+
-      const responseData = response.data;
+    socket.on("lineOutput", (response) => {
-
+      const responseData = response.data;
-      // Extract timestamps and values
+
-      const labels = responseData.time;
+      // Extract timestamps and values
-      const datasets = Object.keys(measurements).map((key) => {
+      const labels = responseData.time;
-        const measurement = measurements[key];
+      const datasets = Object.keys(measurements).map((key) => {
-        const datasetKey = `${measurement.name}.${measurement.fields}`;
+        const measurement = measurements[key];
-        return {
+        const datasetKey = `${measurement.name}.${measurement.fields}`;
-          label: datasetKey,
+        return {
-          data: responseData[datasetKey]?.values ?? [],
+          label: datasetKey,
-          backgroundColor: "#6f42c1",
+          data: responseData[datasetKey]?.values ?? [],
-          borderColor: "#b392f0",
+          backgroundColor: "#6f42c1",
-          borderWidth: 1,
+          borderColor: "#b392f0",
-        };
+          borderWidth: 1,
-      });
+        };
-
+      });
-      setChartData({ labels, datasets });
+
-    });
+      setChartData({ labels, datasets });
-
+    });
-    return () => {
+
-      socket.off("lineOutput");
+    return () => {
-      socket.emit("stop_stream"); // Stop streaming when component unmounts
+      socket.off("lineOutput");
-      socket.disconnect();
+      socket.emit("stop_stream"); // Stop streaming when component unmounts
-    };
+      socket.disconnect();
-  }, [measurements, duration, iotApiUrl]);
+    };
-
+  }, [measurements, duration, iotApiUrl]);
-  const fetchSavedInputes = async() => {
+
-    
+  const fetchSavedInputes = async() => {
-    if (id !== "") {
+    
-      try {
+    if (id !== "") {
-        const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${id}/${organization}`);
+      try {
-        if (response.status === 200) {
+        const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${id}/${organization}`);
-          setmeasurements(response.data.Data.measurements)
+        if (response.status === 200) {
-          setDuration(response.data.Data.duration)
+          setmeasurements(response.data.Data.measurements)
-          setName(response.data.widgetName)
+          setDuration(response.data.Data.duration)
-        } else {
+          setName(response.data.widgetName)
-          console.log("Unexpected response:", response);
+        } else {
-        }
+          console.log("Unexpected response:", response);
-      } catch (error) {
+        }
-        console.error("There was an error!", error);
+      } catch (error) {
-      }
+        console.error("There was an error!", error);
-    }
+      }
-  }
+    }
-
+  }
-  useEffect(() => {
+
-    fetchSavedInputes();
+  useEffect(() => {
-  }, []);
+    fetchSavedInputes();
-
+  }, []);
-  useEffect(() => {
+
-    if (selectedChartId?.id === id) {
+  useEffect(() => {
-      fetchSavedInputes();
+    if (selectedChartId?.id === id) {
-    }
+      fetchSavedInputes();
-  }
+    }
-  ,[chartMeasurements, chartDuration, widgetName])
+  }
-
+  ,[chartMeasurements, chartDuration, widgetName])
-  return <Bar data={Object.keys(measurements).length > 0 ? chartData : defaultData} options={options} />;
+
-};
+  return <Bar data={Object.keys(measurements).length > 0 ? chartData : defaultData} options={options} />;
-
+};
-export default BarGraphComponent;
+
+export default BarGraphComponent;

app/src/modules/visualization/widgets/2d/charts/DoughnutGraphComponent.tsx

@@ -1,189 +1,192 @@
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
-import { Doughnut } from "react-chartjs-2";
+import { Line } from "react-chartjs-2";
-import io from "socket.io-client";
+import io from "socket.io-client";
-import { useThemeStore } from "../../../../store/useThemeStore";
+
-import useChartStore from "../../../../store/useChartStore";
+import axios from "axios";
-import { useWidgetStore } from "../../../../store/useWidgetStore";
+import { useThemeStore } from "../../../../../store/useThemeStore";
-import axios from "axios";
+import { useWidgetStore } from "../../../../../store/useWidgetStore";
-
+import useChartStore from "../../../../../store/useChartStore";
-interface ChartComponentProps {
+
-  id: string;
+interface ChartComponentProps {
-  type: any;
+  id: string;
-  title: string;
+  type: any;
-  fontFamily?: string;
+  title: string;
-  fontSize?: string;
+  fontFamily?: string;
-  fontWeight?: "Light" | "Regular" | "Bold";
+  fontSize?: string;
-}
+  fontWeight?: "Light" | "Regular" | "Bold";
-
+}
-const DoughnutGraphComponent = ({
+
-  id,
+const LineGraphComponent = ({
-  type,
+  id,
-  title,
+  type,
-  fontFamily,
+  title,
-  fontSize,
+  fontFamily,
-  fontWeight = "Regular",
+  fontSize,
-}: ChartComponentProps) => {
+  fontWeight = "Regular",
-  const { themeColor } = useThemeStore();
+}: ChartComponentProps) => {
-  const { measurements: chartMeasurements, duration: chartDuration, name: widgetName } = useChartStore();
+  const { themeColor } = useThemeStore();
-  const [measurements, setmeasurements] = useState<any>({});
+  const { measurements: chartMeasurements, duration: chartDuration, name: widgetName } = useChartStore();
-  const [duration, setDuration] = useState("1h")
+  const [measurements, setmeasurements] = useState<any>({});
-  const [name, setName] = useState("Widget")
+  const [duration, setDuration] = useState("1h")
-  const [chartData, setChartData] = useState<{ labels: string[]; datasets: any[] }>({
+  const [name, setName] = useState("Widget")
-    labels: [],
+  const [chartData, setChartData] = useState<{ labels: string[]; datasets: any[] }>({
-    datasets: [],
+    labels: [],
-  });
+    datasets: [],
-   const { selectedChartId } = useWidgetStore();
+  });
-
+   const { selectedChartId } = useWidgetStore();
-  const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
+
-  const email = localStorage.getItem("email") || "";
+  const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
-  const organization = email?.split("@")[1]?.split(".")[0]
+  const email = localStorage.getItem("email") || "";
-  const defaultData = {
+  const organization = email?.split("@")[1]?.split(".")[0]
-    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
+  const defaultData = {
-    datasets: [
+    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
-      {
+    datasets: [
-        label: "Dataset",
+      {
-        data: [12, 19, 3, 5, 2, 3],
+        label: "Dataset",
-        backgroundColor: ["#6f42c1"],
+        data: [12, 19, 3, 5, 2, 3],
-        borderColor: "#b392f0",
+        backgroundColor: ["#6f42c1"],
-        borderWidth: 1,
+        borderColor: "#b392f0",
-      },
+        borderWidth: 1,
-    ],
+      },
-  };
+    ],
-
+  };
-  useEffect(() => {
+
-   
+  useEffect(() => {
-  },[])
+  
-
+  },[])
-  // Memoize Theme Colors
+
-  const buttonActionColor = useMemo(() => themeColor[0] || "#5c87df", [themeColor]);
+  // Memoize Theme Colors
-  const buttonAbortColor = useMemo(() => themeColor[1] || "#ffffff", [themeColor]);
+  const buttonActionColor = useMemo(() => themeColor[0] || "#5c87df", [themeColor]);
-
+  const buttonAbortColor = useMemo(() => themeColor[1] || "#ffffff", [themeColor]);
-  // Memoize Font Styling
+
-  const chartFontWeightMap = useMemo(
+  // Memoize Font Styling
-    () => ({
+  const chartFontWeightMap = useMemo(
-      Light: "lighter" as const,
+    () => ({
-      Regular: "normal" as const,
+      Light: "lighter" as const,
-      Bold: "bold" as const,
+      Regular: "normal" as const,
-    }),
+      Bold: "bold" as const,
-    []
+    }),
-  );
+    []
-
+  );
-  const fontSizeValue = useMemo(() => (fontSize ? parseInt(fontSize) : 12), [fontSize]);
+
-  const fontWeightValue = useMemo(() => chartFontWeightMap[fontWeight], [fontWeight, chartFontWeightMap]);
+  const fontSizeValue = useMemo(() => (fontSize ? parseInt(fontSize) : 12), [fontSize]);
-
+  const fontWeightValue = useMemo(() => chartFontWeightMap[fontWeight], [fontWeight, chartFontWeightMap]);
-  const chartFontStyle = useMemo(
+
-    () => ({
+  const chartFontStyle = useMemo(
-      family: fontFamily || "Arial",
+    () => ({
-      size: fontSizeValue,
+      family: fontFamily || "Arial",
-      weight: fontWeightValue,
+      size: fontSizeValue,
-    }),
+      weight: fontWeightValue,
-    [fontFamily, fontSizeValue, fontWeightValue]
+    }),
-  );
+    [fontFamily, fontSizeValue, fontWeightValue]
-
+  );
-    // Memoize Chart Options
+
-    const options = useMemo(
+    // Memoize Chart Options
-      () => ({
+    const options = useMemo(
-        responsive: true,
+      () => ({
-        maintainAspectRatio: false,
+        responsive: true,
-        plugins: {
+        maintainAspectRatio: false,
-          title: {
+        plugins: {
-            display: true,
+          title: {
-            text: name,
+            display: true,
-            font: chartFontStyle,
+            text: name,
-          },
+            font: chartFontStyle,
-          legend: {
+          },
-            display: false,
+          legend: {
-          },
+            display: false,
-        },
+          },
-        scales: {
+        },
-          // x: {
+        scales: {
-          //   ticks: {
+          x: {
-          //     display: true, // This hides the x-axis labels
+            ticks: {
-          //   },
+              display: true, // This hides the x-axis labels
-          // },
+            },
-        },
+          },
-      }),
+        },
-      [title, chartFontStyle, name]
+      }),
-    );
+      [title, chartFontStyle, name]
-
+    );
-    // useEffect(() => {console.log(measurements);
+
-    // },[measurements])
+    // useEffect(() => {console.log(measurements);
-
+    // },[measurements])
-  useEffect(() => {
+
-    if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0) return;
+  useEffect(() => {
-
+    if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0) return;
-    const socket = io(`http://${iotApiUrl}`);
+
-
+    const socket = io(`http://${iotApiUrl}`);
-    const inputData = {
+
-      measurements,
+    const inputData = {
-      duration,
+      measurements,
-      interval: 1000,
+      duration,
-    };
+      interval: 1000,
-
+    };
-
+
-    const startStream = () => {  
+
-      socket.emit("lineInput", inputData);
+    const startStream = () => {  
-    };
+      socket.emit("lineInput", inputData);
-
+    };
-    socket.on("connect", startStream);
+
-
+    socket.on("connect", startStream);
-    socket.on("lineOutput", (response) => {
+
-      const responseData = response.data;
+    socket.on("lineOutput", (response) => {
-
+      const responseData = response.data;
-      // Extract timestamps and values
+
-      const labels = responseData.time;
+      // Extract timestamps and values
-      const datasets = Object.keys(measurements).map((key) => {
+      const labels = responseData.time;
-        const measurement = measurements[key];
+      const datasets = Object.keys(measurements).map((key) => {
-        const datasetKey = `${measurement.name}.${measurement.fields}`;
+        const measurement = measurements[key];
-        return {
+        const datasetKey = `${measurement.name}.${measurement.fields}`;
-          label: datasetKey,
+        return {
-          data: responseData[datasetKey]?.values ?? [],
+          label: datasetKey,
-          backgroundColor: "#6f42c1",
+          data: responseData[datasetKey]?.values ?? [],
-          borderColor: "#b392f0",
+          backgroundColor: "#6f42c1",
-          borderWidth: 1,
+          borderColor: "#b392f0",
-        };
+          borderWidth: 1,
-      });
+        };
-
+      });
-      setChartData({ labels, datasets });
+
-    });
+      setChartData({ labels, datasets });
-
+    });
-    return () => {
+
-      socket.off("lineOutput");
+    return () => {
-      socket.emit("stop_stream"); // Stop streaming when component unmounts
+      socket.off("lineOutput");
-      socket.disconnect();
+      socket.emit("stop_stream"); // Stop streaming when component unmounts
-    };
+      socket.disconnect();
-  }, [measurements, duration, iotApiUrl]);
+    };
-
+  }, [measurements, duration, iotApiUrl]);
-  const fetchSavedInputes = async() => {
+
-    
+  const fetchSavedInputes = async() => {
-    if (id !== "") {
+    
-      try {
+    if (id !== "") {
-        const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${id}/${organization}`);
+      try {
-        if (response.status === 200) {
+        const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${id}/${organization}`);
-          setmeasurements(response.data.Data.measurements)
+        if (response.status === 200) {
-          setDuration(response.data.Data.duration)
+          console.log('line chart res',response);
-          setName(response.data.widgetName)
+          
-        } else {
+          setmeasurements(response.data.Data.measurements)
-          console.log("Unexpected response:", response);
+          setDuration(response.data.Data.duration)
-        }
+          setName(response.data.widgetName)
-      } catch (error) {
+        } else {
-        console.error("There was an error!", error);
+          console.log("Unexpected response:", response);
-      }
+        }
-    }
+      } catch (error) {
-  }
+        console.error("There was an error!", error);
-
+      }
-  useEffect(() => {
+    }
-    fetchSavedInputes();
+  }
-  }, []);
+
-
+  useEffect(() => {
-  useEffect(() => {
+    fetchSavedInputes();
-    if (selectedChartId?.id === id) {
+  }, []);
-      fetchSavedInputes();
+
-    }
+  useEffect(() => {
-  }
+    if (selectedChartId?.id === id) {
-  ,[chartMeasurements, chartDuration, widgetName])
+      fetchSavedInputes();
-
+    }
-  return <Doughnut data={Object.keys(measurements).length > 0 ? chartData : defaultData} options={options} />;
+  }
-};
+  ,[chartMeasurements, chartDuration, widgetName])
-
+
-export default DoughnutGraphComponent;
+  return <Line data={Object.keys(measurements).length > 0 ? chartData : defaultData} options={options} />;
+};
+
+export default LineGraphComponent;

app/src/modules/visualization/widgets/2d/charts/LineGraphComponent.tsx

@@ -1,189 +1,212 @@
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
-import { Line } from "react-chartjs-2";
+import { Line } from "react-chartjs-2";
-import io from "socket.io-client";
+import io from "socket.io-client";
-import { useThemeStore } from "../../../../store/useThemeStore";
+
-import useChartStore from "../../../../store/useChartStore";
+import axios from "axios";
-import { useWidgetStore } from "../../../../store/useWidgetStore";
+import { useThemeStore } from "../../../../../store/useThemeStore";
-import axios from "axios";
+import useChartStore from "../../../../../store/useChartStore";
-
+import { useWidgetStore } from "../../../../../store/useWidgetStore";
-interface ChartComponentProps {
+
-  id: string;
+interface ChartComponentProps {
-  type: any;
+  id: string;
-  title: string;
+  type: any;
-  fontFamily?: string;
+  title: string;
-  fontSize?: string;
+  fontFamily?: string;
-  fontWeight?: "Light" | "Regular" | "Bold";
+  fontSize?: string;
-}
+  fontWeight?: "Light" | "Regular" | "Bold";
-
+}
-const LineGraphComponent = ({
+
-  id,
+const LineGraphComponent = ({
-  type,
+  id,
-  title,
+  type,
-  fontFamily,
+  title,
-  fontSize,
+  fontFamily,
-  fontWeight = "Regular",
+  fontSize,
-}: ChartComponentProps) => {
+  fontWeight = "Regular",
-  const { themeColor } = useThemeStore();
+}: ChartComponentProps) => {
-  const { measurements: chartMeasurements, duration: chartDuration, name: widgetName } = useChartStore();
+  const { themeColor } = useThemeStore();
-  const [measurements, setmeasurements] = useState<any>({});
+  const {
-  const [duration, setDuration] = useState("1h")
+    measurements: chartMeasurements,
-  const [name, setName] = useState("Widget")
+    duration: chartDuration,
-  const [chartData, setChartData] = useState<{ labels: string[]; datasets: any[] }>({
+    name: widgetName,
-    labels: [],
+  } = useChartStore();
-    datasets: [],
+  const [measurements, setmeasurements] = useState<any>({});
-  });
+  const [duration, setDuration] = useState("1h");
-   const { selectedChartId } = useWidgetStore();
+  const [name, setName] = useState("Widget");
-
+  const [chartData, setChartData] = useState<{
-  const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
+    labels: string[];
-  const email = localStorage.getItem("email") || "";
+    datasets: any[];
-  const organization = email?.split("@")[1]?.split(".")[0]
+  }>({
-  const defaultData = {
+    labels: [],
-    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
+    datasets: [],
-    datasets: [
+  });
-      {
+  const { selectedChartId } = useWidgetStore();
-        label: "Dataset",
+
-        data: [12, 19, 3, 5, 2, 3],
+  const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
-        backgroundColor: ["#6f42c1"],
+  const email = localStorage.getItem("email") || "";
-        borderColor: "#b392f0",
+  const organization = email?.split("@")[1]?.split(".")[0];
-        borderWidth: 1,
+  const defaultData = {
-      },
+    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
-    ],
+    datasets: [
-  };
+      {
-
+        label: "Dataset",
-  useEffect(() => {
+        data: [12, 19, 3, 5, 2, 3],
-  
+        backgroundColor: ["#6f42c1"],
-  },[])
+        borderColor: "#b392f0",
-
+        borderWidth: 1,
-  // Memoize Theme Colors
+      },
-  const buttonActionColor = useMemo(() => themeColor[0] || "#5c87df", [themeColor]);
+    ],
-  const buttonAbortColor = useMemo(() => themeColor[1] || "#ffffff", [themeColor]);
+  };
-
+
-  // Memoize Font Styling
+  useEffect(() => {}, []);
-  const chartFontWeightMap = useMemo(
+
-    () => ({
+  // Memoize Theme Colors
-      Light: "lighter" as const,
+  const buttonActionColor = useMemo(
-      Regular: "normal" as const,
+    () => themeColor[0] || "#5c87df",
-      Bold: "bold" as const,
+    [themeColor]
-    }),
+  );
-    []
+  const buttonAbortColor = useMemo(
-  );
+    () => themeColor[1] || "#ffffff",
-
+    [themeColor]
-  const fontSizeValue = useMemo(() => (fontSize ? parseInt(fontSize) : 12), [fontSize]);
+  );
-  const fontWeightValue = useMemo(() => chartFontWeightMap[fontWeight], [fontWeight, chartFontWeightMap]);
+
-
+  // Memoize Font Styling
-  const chartFontStyle = useMemo(
+  const chartFontWeightMap = useMemo(
-    () => ({
+    () => ({
-      family: fontFamily || "Arial",
+      Light: "lighter" as const,
-      size: fontSizeValue,
+      Regular: "normal" as const,
-      weight: fontWeightValue,
+      Bold: "bold" as const,
-    }),
+    }),
-    [fontFamily, fontSizeValue, fontWeightValue]
+    []
-  );
+  );
-
+
-    // Memoize Chart Options
+  const fontSizeValue = useMemo(
-    const options = useMemo(
+    () => (fontSize ? parseInt(fontSize) : 12),
-      () => ({
+    [fontSize]
-        responsive: true,
+  );
-        maintainAspectRatio: false,
+  const fontWeightValue = useMemo(
-        plugins: {
+    () => chartFontWeightMap[fontWeight],
-          title: {
+    [fontWeight, chartFontWeightMap]
-            display: true,
+  );
-            text: name,
+
-            font: chartFontStyle,
+  const chartFontStyle = useMemo(
-          },
+    () => ({
-          legend: {
+      family: fontFamily || "Arial",
-            display: false,
+      size: fontSizeValue,
-          },
+      weight: fontWeightValue,
-        },
+    }),
-        scales: {
+    [fontFamily, fontSizeValue, fontWeightValue]
-          x: {
+  );
-            ticks: {
+
-              display: true, // This hides the x-axis labels
+  // Memoize Chart Options
-            },
+  const options = useMemo(
-          },
+    () => ({
-        },
+      responsive: true,
-      }),
+      maintainAspectRatio: false,
-      [title, chartFontStyle, name]
+      plugins: {
-    );
+        title: {
-
+          display: true,
-    // useEffect(() => {console.log(measurements);
+          text: name,
-    // },[measurements])
+          font: chartFontStyle,
-
+        },
-  useEffect(() => {
+        legend: {
-    if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0) return;
+          display: false,
-
+        },
-    const socket = io(`http://${iotApiUrl}`);
+      },
-
+      scales: {
-    const inputData = {
+        x: {
-      measurements,
+          ticks: {
-      duration,
+            display: true, // This hides the x-axis labels
-      interval: 1000,
+          },
-    };
+        },
-
+      },
-
+    }),
-    const startStream = () => {  
+    [title, chartFontStyle, name]
-      socket.emit("lineInput", inputData);
+  );
-    };
+
-
+  // useEffect(() => {console.log(measurements);
-    socket.on("connect", startStream);
+  // },[measurements])
-
+
-    socket.on("lineOutput", (response) => {
+  useEffect(() => {
-      const responseData = response.data;
+    if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0)
-
+      return;
-      // Extract timestamps and values
+
-      const labels = responseData.time;
+    const socket = io(`http://${iotApiUrl}`);
-      const datasets = Object.keys(measurements).map((key) => {
+
-        const measurement = measurements[key];
+    const inputData = {
-        const datasetKey = `${measurement.name}.${measurement.fields}`;
+      measurements,
-        return {
+      duration,
-          label: datasetKey,
+      interval: 1000,
-          data: responseData[datasetKey]?.values ?? [],
+    };
-          backgroundColor: "#6f42c1",
+
-          borderColor: "#b392f0",
+    const startStream = () => {
-          borderWidth: 1,
+      socket.emit("lineInput", inputData);
-        };
+    };
-      });
+
-
+    socket.on("connect", startStream);
-      setChartData({ labels, datasets });
+
-    });
+    socket.on("lineOutput", (response) => {
-
+      const responseData = response.data;
-    return () => {
+
-      socket.off("lineOutput");
+      // Extract timestamps and values
-      socket.emit("stop_stream"); // Stop streaming when component unmounts
+      const labels = responseData.time;
-      socket.disconnect();
+      const datasets = Object.keys(measurements).map((key) => {
-    };
+        const measurement = measurements[key];
-  }, [measurements, duration, iotApiUrl]);
+        const datasetKey = `${measurement.name}.${measurement.fields}`;
-
+        return {
-  const fetchSavedInputes = async() => {
+          label: datasetKey,
-    
+          data: responseData[datasetKey]?.values ?? [],
-    if (id !== "") {
+          backgroundColor: "#6f42c1",
-      try {
+          borderColor: "#b392f0",
-        const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${id}/${organization}`);
+          borderWidth: 1,
-        if (response.status === 200) {
+        };
-          setmeasurements(response.data.Data.measurements)
+      });
-          setDuration(response.data.Data.duration)
+
-          setName(response.data.widgetName)
+      setChartData({ labels, datasets });
-        } else {
+    });
-          console.log("Unexpected response:", response);
+
-        }
+    return () => {
-      } catch (error) {
+      socket.off("lineOutput");
-        console.error("There was an error!", error);
+      socket.emit("stop_stream"); // Stop streaming when component unmounts
-      }
+      socket.disconnect();
-    }
+    };
-  }
+  }, [measurements, duration, iotApiUrl]);
-
+
-  useEffect(() => {
+  const fetchSavedInputes = async () => {
-    fetchSavedInputes();
+    if (id !== "") {
-  }, []);
+      try {
-
+        const response = await axios.get(
-  useEffect(() => {
+          `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${id}/${organization}`
-    if (selectedChartId?.id === id) {
+        );
-      fetchSavedInputes();
+        if (response.status === 200) {
-    }
+          setmeasurements(response.data.Data.measurements);
-  }
+          setDuration(response.data.Data.duration);
-  ,[chartMeasurements, chartDuration, widgetName])
+          setName(response.data.widgetName);
-
+        } else {
-  return <Line data={Object.keys(measurements).length > 0 ? chartData : defaultData} options={options} />;
+          console.log("Unexpected response:", response);
-};
+        }
-
+      } catch (error) {
-export default LineGraphComponent;
+        console.error("There was an error!", error);
+      }
+    }
+  };
+
+  useEffect(() => {
+    fetchSavedInputes();
+  }, []);
+
+  useEffect(() => {
+    if (selectedChartId?.id === id) {
+      fetchSavedInputes();
+    }
+  }, [chartMeasurements, chartDuration, widgetName]);
+
+  return (
+    <Line
+      data={Object.keys(measurements).length > 0 ? chartData : defaultData}
+      options={options}
+    />
+  );
+};
+
+export default LineGraphComponent;

app/src/modules/visualization/widgets/2d/charts/PieGraphComponent.tsx

@@ -1,375 +1,397 @@
-// import React, { useEffect, useRef, useMemo, useState } from "react";
+// import React, { useEffect, useRef, useMemo, useState } from "react";
-// import { Chart } from "chart.js/auto";
+// import { Chart } from "chart.js/auto";
-// import { useThemeStore } from "../../../../store/useThemeStore";
+// import { useThemeStore } from "../../../../store/useThemeStore";
-// import io from "socket.io-client";
+// import io from "socket.io-client";
-// import { Pie } from 'react-chartjs-2';
+// import { Pie } from 'react-chartjs-2';
-// import useChartStore from "../../../../store/useChartStore";
+// import useChartStore from "../../../../store/useChartStore";
-
+
-// // WebSocket Connection
+// // WebSocket Connection
-// // const socket = io("http://localhost:5000"); // Adjust to your backend URL
+// // const socket = io("http://localhost:5000"); // Adjust to your backend URL
-
+
-// interface ChartComponentProps {
+// interface ChartComponentProps {
-//   type: any;
+//   type: any;
-//   title: string;
+//   title: string;
-//   fontFamily?: string;
+//   fontFamily?: string;
-//   fontSize?: string;
+//   fontSize?: string;
-//   fontWeight?: "Light" | "Regular" | "Bold";
+//   fontWeight?: "Light" | "Regular" | "Bold";
-//   data: any;
+//   data: any;
-// }
+// }
-
+
-// const PieChartComponent = ({
+// const PieChartComponent = ({
-//   type,
+//   type,
-//   title,
+//   title,
-//   fontFamily,
+//   fontFamily,
-//   fontSize,
+//   fontSize,
-//   fontWeight = "Regular",
+//   fontWeight = "Regular",
-//   data,
+//   data,
-// }: ChartComponentProps) => {
+// }: ChartComponentProps) => {
-//   const canvasRef = useRef<HTMLCanvasElement>(null);
+//   const canvasRef = useRef<HTMLCanvasElement>(null);
-//   const { themeColor } = useThemeStore();
+//   const { themeColor } = useThemeStore();
-//   const [chartData, setChartData] = useState<{ labels: string[]; datasets: any[] }>({
+//   const [chartData, setChartData] = useState<{ labels: string[]; datasets: any[] }>({
-//     labels: [],
+//     labels: [],
-//     datasets: [],
+//     datasets: [],
-//   });
+//   });
-
+
-//   const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
+//   const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
-
+
-//   const defaultData = {
+//   const defaultData = {
-//     labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
+//     labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
-//     datasets: [
+//     datasets: [
-//       {
+//       {
-//         label: "Dataset",
+//         label: "Dataset",
-//         data: [12, 19, 3, 5, 2, 3],
+//         data: [12, 19, 3, 5, 2, 3],
-//         backgroundColor: ["#6f42c1"],
+//         backgroundColor: ["#6f42c1"],
-//         borderColor: "#ffffff",
+//         borderColor: "#ffffff",
-//         borderWidth: 2,
+//         borderWidth: 2,
-//       },
+//       },
-//     ],
+//     ],
-//   };
+//   };
-
+
-//   // Memoize Theme Colors to Prevent Unnecessary Recalculations
+//   // Memoize Theme Colors to Prevent Unnecessary Recalculations
-//     const buttonActionColor = useMemo(
+//     const buttonActionColor = useMemo(
-//       () => themeColor[0] || "#6f42c1",
+//       () => themeColor[0] || "#6f42c1",
-//       [themeColor]
+//       [themeColor]
-//     );
+//     );
-//     const buttonAbortColor = useMemo(
+//     const buttonAbortColor = useMemo(
-//       () => themeColor[1] || "#ffffff",
+//       () => themeColor[1] || "#ffffff",
-//       [themeColor]
+//       [themeColor]
-//     );
+//     );
-  
+
-//     // Memoize Font Weight Mapping
+//     // Memoize Font Weight Mapping
-//     const chartFontWeightMap = useMemo(
+//     const chartFontWeightMap = useMemo(
-//       () => ({
+//       () => ({
-//         Light: "lighter" as const,
+//         Light: "lighter" as const,
-//         Regular: "normal" as const,
+//         Regular: "normal" as const,
-//         Bold: "bold" as const,
+//         Bold: "bold" as const,
-//       }),
+//       }),
-//       []
+//       []
-//     );
+//     );
-  
+
-//     // Parse and Memoize Font Size
+//     // Parse and Memoize Font Size
-//     const fontSizeValue = useMemo(
+//     const fontSizeValue = useMemo(
-//       () => (fontSize ? parseInt(fontSize) : 12),
+//       () => (fontSize ? parseInt(fontSize) : 12),
-//       [fontSize]
+//       [fontSize]
-//     );
+//     );
-  
+
-//     // Determine and Memoize Font Weight
+//     // Determine and Memoize Font Weight
-//     const fontWeightValue = useMemo(
+//     const fontWeightValue = useMemo(
-//       () => chartFontWeightMap[fontWeight],
+//       () => chartFontWeightMap[fontWeight],
-//       [fontWeight, chartFontWeightMap]
+//       [fontWeight, chartFontWeightMap]
-//     );
+//     );
-  
+
-//     // Memoize Chart Font Style
+//     // Memoize Chart Font Style
-//     const chartFontStyle = useMemo(
+//     const chartFontStyle = useMemo(
-//       () => ({
+//       () => ({
-//         family: fontFamily || "Arial",
+//         family: fontFamily || "Arial",
-//         size: fontSizeValue,
+//         size: fontSizeValue,
-//         weight: fontWeightValue,
+//         weight: fontWeightValue,
-//       }),
+//       }),
-//       [fontFamily, fontSizeValue, fontWeightValue]
+//       [fontFamily, fontSizeValue, fontWeightValue]
-//     );
+//     );
-  
+
-//     // Memoize Chart Data
+//     // Memoize Chart Data
-//     // const data = useMemo(() => propsData, [propsData]);
+//     // const data = useMemo(() => propsData, [propsData]);
-  
+
-//     // Memoize 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: {
+//           legend: {
-//             display: false,
+//             display: false,
-//           },
+//           },
-//         },
+//         },
-//         scales: {
+//         scales: {
-//           // x: {
+//           // x: {
-//           //   ticks: {
+//           //   ticks: {
-//           //     display: true, // This hides the x-axis labels
+//           //     display: true, // This hides the x-axis labels
-//           //   },
+//           //   },
-//           // },
+//           // },
-//         },
+//         },
-//       }),
+//       }),
-//       [title, chartFontStyle]
+//       [title, chartFontStyle]
-//     );
+//     );
-
+
-//     const { measurements, setMeasurements, updateDuration, duration } = useChartStore();
+//     const { measurements, setMeasurements, updateDuration, duration } = useChartStore();
-
+
-//   useEffect(() => {
+//   useEffect(() => {
-
+
-//     const socket = io(`http://${iotApiUrl}`);
+//     const socket = io(`http://${iotApiUrl}`);
-
+
-//     if ( measurements.length > 0 ) {
+//     if ( measurements.length > 0 ) {
-//       var inputes = {
+//       var inputes = {
-//         measurements: measurements,
+//         measurements: measurements,
-//         duration: duration,
+//         duration: duration,
-//         interval: 1000,
+//         interval: 1000,
-//       }
+//       }
-
+
-//     // Start stream
+//     // Start stream
-//     const startStream = () => {
+//     const startStream = () => {
-//       socket.emit("lineInput", inputes);
+//       socket.emit("lineInput", inputes);
-//     }
+//     }
-
+
-//     socket.on('connect', startStream);
+//     socket.on('connect', startStream);
-
+
-//     socket.on("lineOutput", (response) => {
+//     socket.on("lineOutput", (response) => {
-//       const responceData = response.data;
+//       const responceData = response.data;
-//       console.log("Received data:", responceData);
+//       console.log("Received data:", responceData);
-
+
-//       // Extract timestamps and values
+//       // Extract timestamps and values
-//       const labels = responceData.time;
+//       const labels = responceData.time;
-//       const datasets = measurements.map((measurement: any) => {
+//       const datasets = measurements.map((measurement: any) => {
-//         const key = `${measurement.name}.${measurement.fields}`;
+//         const key = `${measurement.name}.${measurement.fields}`;
-//         return {
+//         return {
-//           label: key,
+//           label: key,
-//           data: responceData[key]?.values ?? [], // Ensure it exists
+//           data: responceData[key]?.values ?? [], // Ensure it exists
-//           backgroundColor: "#6f42c1",
+//           backgroundColor: "#6f42c1",
-//           borderColor: "#ffffff",
+//           borderColor: "#ffffff",
-//         };
+//         };
-//       });
+//       });
-
+
-//       setChartData({ labels, datasets });
+//       setChartData({ labels, datasets });
-//     });
+//     });
-//     }
+//     }
-
+
-//     return () => {
+//     return () => {
-//       socket.off("lineOutput");
+//       socket.off("lineOutput");
-//       socket.emit("stop_stream"); // Stop streaming when component unmounts
+//       socket.emit("stop_stream"); // Stop streaming when component unmounts
-//     };
+//     };
-//   }, [measurements, duration]);
+//   }, [measurements, duration]);
-
+
-//   // useEffect(() => {
+//   // useEffect(() => {
-//   //   if (!canvasRef.current) return;
+//   //   if (!canvasRef.current) return;
-//   //   const ctx = canvasRef.current.getContext("2d");
+//   //   const ctx = canvasRef.current.getContext("2d");
-//   //   if (!ctx) return;
+//   //   if (!ctx) return;
-
+
-//   //   const chart = new Chart(ctx, {
+//   //   const chart = new Chart(ctx, {
-//   //     type,
+//   //     type,
-//   //     data: chartData,
+//   //     data: chartData,
-//   //     options: options,
+//   //     options: options,
-//   //   });
+//   //   });
-
+
-//   //   return () => chart.destroy();
+//   //   return () => chart.destroy();
-//   // }, [chartData, type, title]);
+//   // }, [chartData, type, title]);
-
+
-//   return <Pie data={measurements && measurements.length > 0 ? chartData : defaultData} options={options} />;
+//   return <Pie data={measurements && measurements.length > 0 ? chartData : defaultData} options={options} />;
-// };
+// };
-
+
-// export default PieChartComponent;
+// export default PieChartComponent;
-
+
-
+import React, { useEffect, useMemo, useState } from "react";
-import React, { useEffect, useMemo, useState } from "react";
+import { Pie } from "react-chartjs-2";
-import { Pie } from "react-chartjs-2";
+import io from "socket.io-client";
-import io from "socket.io-client";
+
-import { useThemeStore } from "../../../../store/useThemeStore";
+import axios from "axios";
-import useChartStore from "../../../../store/useChartStore";
+import { useThemeStore } from "../../../../../store/useThemeStore";
-import { useWidgetStore } from "../../../../store/useWidgetStore";
+import useChartStore from "../../../../../store/useChartStore";
-import axios from "axios";
+import { useWidgetStore } from "../../../../../store/useWidgetStore";
-
+
-interface ChartComponentProps {
+interface ChartComponentProps {
-  id: string;
+  id: string;
-  type: any;
+  type: any;
-  title: string;
+  title: string;
-  fontFamily?: string;
+  fontFamily?: string;
-  fontSize?: string;
+  fontSize?: string;
-  fontWeight?: "Light" | "Regular" | "Bold";
+  fontWeight?: "Light" | "Regular" | "Bold";
-}
+}
-
+
-const PieChartComponent = ({
+const PieChartComponent = ({
-  id,
+  id,
-  type,
+  type,
-  title,
+  title,
-  fontFamily,
+  fontFamily,
-  fontSize,
+  fontSize,
-  fontWeight = "Regular",
+  fontWeight = "Regular",
-}: ChartComponentProps) => {
+}: ChartComponentProps) => {
-  const { themeColor } = useThemeStore();
+  const { themeColor } = useThemeStore();
-  const { measurements: chartMeasurements, duration: chartDuration, name: widgetName } = useChartStore();
+  const {
-  const [measurements, setmeasurements] = useState<any>({});
+    measurements: chartMeasurements,
-  const [duration, setDuration] = useState("1h")
+    duration: chartDuration,
-  const [name, setName] = useState("Widget")
+    name: widgetName,
-  const [chartData, setChartData] = useState<{ labels: string[]; datasets: any[] }>({
+  } = useChartStore();
-    labels: [],
+  const [measurements, setmeasurements] = useState<any>({});
-    datasets: [],
+  const [duration, setDuration] = useState("1h");
-  });
+  const [name, setName] = useState("Widget");
-   const { selectedChartId } = useWidgetStore();
+  const [chartData, setChartData] = useState<{
-
+    labels: string[];
-  const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
+    datasets: any[];
-  const email = localStorage.getItem("email") || "";
+  }>({
-  const organization = email?.split("@")[1]?.split(".")[0]
+    labels: [],
-  const defaultData = {
+    datasets: [],
-    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
+  });
-    datasets: [
+  const { selectedChartId } = useWidgetStore();
-      {
+
-        label: "Dataset",
+  const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
-        data: [12, 19, 3, 5, 2, 3],
+  const email = localStorage.getItem("email") || "";
-        backgroundColor: ["#6f42c1"],
+  const organization = email?.split("@")[1]?.split(".")[0];
-        borderColor: "#b392f0",
+  const defaultData = {
-        borderWidth: 1,
+    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
-      },
+    datasets: [
-    ],
+      {
-  };
+        label: "Dataset",
-
+        data: [12, 19, 3, 5, 2, 3],
-  useEffect(() => {
+        backgroundColor: ["#6f42c1"],
-  
+        borderColor: "#b392f0",
-  },[])
+        borderWidth: 1,
-
+      },
-  // Memoize Theme Colors
+    ],
-  const buttonActionColor = useMemo(() => themeColor[0] || "#5c87df", [themeColor]);
+  };
-  const buttonAbortColor = useMemo(() => themeColor[1] || "#ffffff", [themeColor]);
+
-
+  useEffect(() => {}, []);
-  // Memoize Font Styling
+
-  const chartFontWeightMap = useMemo(
+  // Memoize Theme Colors
-    () => ({
+  const buttonActionColor = useMemo(
-      Light: "lighter" as const,
+    () => themeColor[0] || "#5c87df",
-      Regular: "normal" as const,
+    [themeColor]
-      Bold: "bold" as const,
+  );
-    }),
+  const buttonAbortColor = useMemo(
-    []
+    () => themeColor[1] || "#ffffff",
-  );
+    [themeColor]
-
+  );
-  const fontSizeValue = useMemo(() => (fontSize ? parseInt(fontSize) : 12), [fontSize]);
+
-  const fontWeightValue = useMemo(() => chartFontWeightMap[fontWeight], [fontWeight, chartFontWeightMap]);
+  // Memoize Font Styling
-
+  const chartFontWeightMap = useMemo(
-  const chartFontStyle = useMemo(
+    () => ({
-    () => ({
+      Light: "lighter" as const,
-      family: fontFamily || "Arial",
+      Regular: "normal" as const,
-      size: fontSizeValue,
+      Bold: "bold" as const,
-      weight: fontWeightValue,
+    }),
-    }),
+    []
-    [fontFamily, fontSizeValue, fontWeightValue]
+  );
-  );
+
-
+  const fontSizeValue = useMemo(
-    // Memoize Chart Options
+    () => (fontSize ? parseInt(fontSize) : 12),
-    const options = useMemo(
+    [fontSize]
-      () => ({
+  );
-        responsive: true,
+  const fontWeightValue = useMemo(
-        maintainAspectRatio: false,
+    () => chartFontWeightMap[fontWeight],
-        plugins: {
+    [fontWeight, chartFontWeightMap]
-          title: {
+  );
-            display: true,
+
-            text: name,
+  const chartFontStyle = useMemo(
-            font: chartFontStyle,
+    () => ({
-          },
+      family: fontFamily || "Arial",
-          legend: {
+      size: fontSizeValue,
-            display: false,
+      weight: fontWeightValue,
-          },
+    }),
-        },
+    [fontFamily, fontSizeValue, fontWeightValue]
-        scales: {
+  );
-          // x: {
+
-          //   ticks: {
+  // Memoize Chart Options
-          //     display: true, // This hides the x-axis labels
+  const options = useMemo(
-          //   },
+    () => ({
-          // },
+      responsive: true,
-        },
+      maintainAspectRatio: false,
-      }),
+      plugins: {
-      [title, chartFontStyle, name]
+        title: {
-    );
+          display: true,
-
+          text: name,
-    // useEffect(() => {console.log(measurements);
+          font: chartFontStyle,
-    // },[measurements])
+        },
-
+        legend: {
-  useEffect(() => {
+          display: false,
-    if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0) return;
+        },
-
+      },
-    const socket = io(`http://${iotApiUrl}`);
+      scales: {
-
+        // x: {
-    const inputData = {
+        //   ticks: {
-      measurements,
+        //     display: true, // This hides the x-axis labels
-      duration,
+        //   },
-      interval: 1000,
+        // },
-    };
+      },
-
+    }),
-
+    [title, chartFontStyle, name]
-    const startStream = () => {  
+  );
-      socket.emit("lineInput", inputData);
+
-    };
+  // useEffect(() => {console.log(measurements);
-
+  // },[measurements])
-    socket.on("connect", startStream);
+
-
+  useEffect(() => {
-    socket.on("lineOutput", (response) => {
+    if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0)
-      const responseData = response.data;
+      return;
-
+
-      // Extract timestamps and values
+    const socket = io(`http://${iotApiUrl}`);
-      const labels = responseData.time;
+
-      const datasets = Object.keys(measurements).map((key) => {
+    const inputData = {
-        const measurement = measurements[key];
+      measurements,
-        const datasetKey = `${measurement.name}.${measurement.fields}`;
+      duration,
-        return {
+      interval: 1000,
-          label: datasetKey,
+    };
-          data: responseData[datasetKey]?.values ?? [],
+
-          backgroundColor: "#6f42c1",
+    const startStream = () => {
-          borderColor: "#b392f0",
+      socket.emit("lineInput", inputData);
-          borderWidth: 1,
+    };
-        };
+
-      });
+    socket.on("connect", startStream);
-
+
-      setChartData({ labels, datasets });
+    socket.on("lineOutput", (response) => {
-    });
+      const responseData = response.data;
-
+
-    return () => {
+      // Extract timestamps and values
-      socket.off("lineOutput");
+      const labels = responseData.time;
-      socket.emit("stop_stream"); // Stop streaming when component unmounts
+      const datasets = Object.keys(measurements).map((key) => {
-      socket.disconnect();
+        const measurement = measurements[key];
-    };
+        const datasetKey = `${measurement.name}.${measurement.fields}`;
-  }, [measurements, duration, iotApiUrl]);
+        return {
-
+          label: datasetKey,
-  const fetchSavedInputes = async() => {
+          data: responseData[datasetKey]?.values ?? [],
-    
+          backgroundColor: "#6f42c1",
-    if (id !== "") {
+          borderColor: "#b392f0",
-      try {
+          borderWidth: 1,
-        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)
+      setChartData({ labels, datasets });
-          setName(response.data.widgetName)
+    });
-        } else {
+
-          console.log("Unexpected response:", response);
+    return () => {
-        }
+      socket.off("lineOutput");
-      } catch (error) {
+      socket.emit("stop_stream"); // Stop streaming when component unmounts
-        console.error("There was an error!", error);
+      socket.disconnect();
-      }
+    };
-    }
+  }, [measurements, duration, iotApiUrl]);
-  }
+
-
+  const fetchSavedInputes = async () => {
-  useEffect(() => {
+    if (id !== "") {
-    fetchSavedInputes();
+      try {
-  }, []);
+        const response = await axios.get(
-
+          `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${id}/${organization}`
-  useEffect(() => {
+        );
-    if (selectedChartId?.id === id) {
+        if (response.status === 200) {
-      fetchSavedInputes();
+          setmeasurements(response.data.Data.measurements);
-    }
+          setDuration(response.data.Data.duration);
-  }
+          setName(response.data.widgetName);
-  ,[chartMeasurements, chartDuration, widgetName])
+        } else {
-
+          console.log("Unexpected response:", response);
-  return <Pie data={Object.keys(measurements).length > 0 ? chartData : defaultData} options={options} />;
+        }
-};
+      } catch (error) {
-
+        console.error("There was an error!", error);
-export default PieChartComponent;
+      }
+    }
+  };
+
+  useEffect(() => {
+    fetchSavedInputes();
+  }, []);
+
+  useEffect(() => {
+    if (selectedChartId?.id === id) {
+      fetchSavedInputes();
+    }
+  }, [chartMeasurements, chartDuration, widgetName]);
+
+  return (
+    <Pie
+      data={Object.keys(measurements).length > 0 ? chartData : defaultData}
+      options={options}
+    />
+  );
+};
+
+export default PieChartComponent;

app/src/modules/visualization/widgets/2d/charts/PolarAreaGraphComponent.tsx

@@ -1,189 +1,212 @@
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
-import { PolarArea } from "react-chartjs-2";
+import { PolarArea } from "react-chartjs-2";
-import io from "socket.io-client";
+import io from "socket.io-client";
-import { useThemeStore } from "../../../../store/useThemeStore";
+
-import useChartStore from "../../../../store/useChartStore";
+import axios from "axios";
-import { useWidgetStore } from "../../../../store/useWidgetStore";
+import { useThemeStore } from "../../../../../store/useThemeStore";
-import axios from "axios";
+import useChartStore from "../../../../../store/useChartStore";
-
+import { useWidgetStore } from "../../../../../store/useWidgetStore";
-interface ChartComponentProps {
+
-  id: string;
+interface ChartComponentProps {
-  type: any;
+  id: string;
-  title: string;
+  type: any;
-  fontFamily?: string;
+  title: string;
-  fontSize?: string;
+  fontFamily?: string;
-  fontWeight?: "Light" | "Regular" | "Bold";
+  fontSize?: string;
-}
+  fontWeight?: "Light" | "Regular" | "Bold";
-
+}
-const PolarAreaGraphComponent = ({
+
-  id,
+const PolarAreaGraphComponent = ({
-  type,
+  id,
-  title,
+  type,
-  fontFamily,
+  title,
-  fontSize,
+  fontFamily,
-  fontWeight = "Regular",
+  fontSize,
-}: ChartComponentProps) => {
+  fontWeight = "Regular",
-  const { themeColor } = useThemeStore();
+}: ChartComponentProps) => {
-  const { measurements: chartMeasurements, duration: chartDuration, name: widgetName } = useChartStore();
+  const { themeColor } = useThemeStore();
-  const [measurements, setmeasurements] = useState<any>({});
+  const {
-  const [duration, setDuration] = useState("1h")
+    measurements: chartMeasurements,
-  const [name, setName] = useState("Widget")
+    duration: chartDuration,
-  const [chartData, setChartData] = useState<{ labels: string[]; datasets: any[] }>({
+    name: widgetName,
-    labels: [],
+  } = useChartStore();
-    datasets: [],
+  const [measurements, setmeasurements] = useState<any>({});
-  });
+  const [duration, setDuration] = useState("1h");
-   const { selectedChartId } = useWidgetStore();
+  const [name, setName] = useState("Widget");
-
+  const [chartData, setChartData] = useState<{
-  const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
+    labels: string[];
-  const email = localStorage.getItem("email") || "";
+    datasets: any[];
-  const organization = email?.split("@")[1]?.split(".")[0]
+  }>({
-  const defaultData = {
+    labels: [],
-    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
+    datasets: [],
-    datasets: [
+  });
-      {
+  const { selectedChartId } = useWidgetStore();
-        label: "Dataset",
+
-        data: [12, 19, 3, 5, 2, 3],
+  const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
-        backgroundColor: ["#6f42c1"],
+  const email = localStorage.getItem("email") || "";
-        borderColor: "#b392f0",
+  const organization = email?.split("@")[1]?.split(".")[0];
-        borderWidth: 1,
+  const defaultData = {
-      },
+    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
-    ],
+    datasets: [
-  };
+      {
-
+        label: "Dataset",
-  useEffect(() => {
+        data: [12, 19, 3, 5, 2, 3],
-
+        backgroundColor: ["#6f42c1"],
-  },[])
+        borderColor: "#b392f0",
-
+        borderWidth: 1,
-  // Memoize Theme Colors
+      },
-  const buttonActionColor = useMemo(() => themeColor[0] || "#5c87df", [themeColor]);
+    ],
-  const buttonAbortColor = useMemo(() => themeColor[1] || "#ffffff", [themeColor]);
+  };
-
+
-  // Memoize Font Styling
+  useEffect(() => {}, []);
-  const chartFontWeightMap = useMemo(
+
-    () => ({
+  // Memoize Theme Colors
-      Light: "lighter" as const,
+  const buttonActionColor = useMemo(
-      Regular: "normal" as const,
+    () => themeColor[0] || "#5c87df",
-      Bold: "bold" as const,
+    [themeColor]
-    }),
+  );
-    []
+  const buttonAbortColor = useMemo(
-  );
+    () => themeColor[1] || "#ffffff",
-
+    [themeColor]
-  const fontSizeValue = useMemo(() => (fontSize ? parseInt(fontSize) : 12), [fontSize]);
+  );
-  const fontWeightValue = useMemo(() => chartFontWeightMap[fontWeight], [fontWeight, chartFontWeightMap]);
+
-
+  // Memoize Font Styling
-  const chartFontStyle = useMemo(
+  const chartFontWeightMap = useMemo(
-    () => ({
+    () => ({
-      family: fontFamily || "Arial",
+      Light: "lighter" as const,
-      size: fontSizeValue,
+      Regular: "normal" as const,
-      weight: fontWeightValue,
+      Bold: "bold" as const,
-    }),
+    }),
-    [fontFamily, fontSizeValue, fontWeightValue]
+    []
-  );
+  );
-
+
-    // Memoize Chart Options
+  const fontSizeValue = useMemo(
-    const options = useMemo(
+    () => (fontSize ? parseInt(fontSize) : 12),
-      () => ({
+    [fontSize]
-        responsive: true,
+  );
-        maintainAspectRatio: false,
+  const fontWeightValue = useMemo(
-        plugins: {
+    () => chartFontWeightMap[fontWeight],
-          title: {
+    [fontWeight, chartFontWeightMap]
-            display: true,
+  );
-            text: name,
+
-            font: chartFontStyle,
+  const chartFontStyle = useMemo(
-          },
+    () => ({
-          legend: {
+      family: fontFamily || "Arial",
-            display: false,
+      size: fontSizeValue,
-          },
+      weight: fontWeightValue,
-        },
+    }),
-        scales: {
+    [fontFamily, fontSizeValue, fontWeightValue]
-          // x: {
+  );
-          //   ticks: {
+
-          //     display: true, // This hides the x-axis labels
+  // Memoize Chart Options
-          //   },
+  const options = useMemo(
-          // },
+    () => ({
-        },
+      responsive: true,
-      }),
+      maintainAspectRatio: false,
-      [title, chartFontStyle, name]
+      plugins: {
-    );
+        title: {
-
+          display: true,
-    // useEffect(() => {console.log(measurements);
+          text: name,
-    // },[measurements])
+          font: chartFontStyle,
-
+        },
-  useEffect(() => {
+        legend: {
-    if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0) return;
+          display: false,
-
+        },
-    const socket = io(`http://${iotApiUrl}`);
+      },
-
+      scales: {
-    const inputData = {
+        // x: {
-      measurements,
+        //   ticks: {
-      duration,
+        //     display: true, // This hides the x-axis labels
-      interval: 1000,
+        //   },
-    };
+        // },
-
+      },
-
+    }),
-    const startStream = () => {  
+    [title, chartFontStyle, name]
-      socket.emit("lineInput", inputData);
+  );
-    };
+
-
+  // useEffect(() => {console.log(measurements);
-    socket.on("connect", startStream);
+  // },[measurements])
-
+
-    socket.on("lineOutput", (response) => {
+  useEffect(() => {
-      const responseData = response.data;
+    if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0)
-
+      return;
-      // Extract timestamps and values
+
-      const labels = responseData.time;
+    const socket = io(`http://${iotApiUrl}`);
-      const datasets = Object.keys(measurements).map((key) => {
+
-        const measurement = measurements[key];
+    const inputData = {
-        const datasetKey = `${measurement.name}.${measurement.fields}`;
+      measurements,
-        return {
+      duration,
-          label: datasetKey,
+      interval: 1000,
-          data: responseData[datasetKey]?.values ?? [],
+    };
-          backgroundColor: "#6f42c1",
+
-          borderColor: "#b392f0",
+    const startStream = () => {
-          borderWidth: 1,
+      socket.emit("lineInput", inputData);
-        };
+    };
-      });
+
-
+    socket.on("connect", startStream);
-      setChartData({ labels, datasets });
+
-    });
+    socket.on("lineOutput", (response) => {
-
+      const responseData = response.data;
-    return () => {
+
-      socket.off("lineOutput");
+      // Extract timestamps and values
-      socket.emit("stop_stream"); // Stop streaming when component unmounts
+      const labels = responseData.time;
-      socket.disconnect();
+      const datasets = Object.keys(measurements).map((key) => {
-    };
+        const measurement = measurements[key];
-  }, [measurements, duration, iotApiUrl]);
+        const datasetKey = `${measurement.name}.${measurement.fields}`;
-
+        return {
-  const fetchSavedInputes = async() => {
+          label: datasetKey,
-    
+          data: responseData[datasetKey]?.values ?? [],
-    if (id !== "") {
+          backgroundColor: "#6f42c1",
-      try {
+          borderColor: "#b392f0",
-        const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${id}/${organization}`);
+          borderWidth: 1,
-        if (response.status === 200) {
+        };
-          setmeasurements(response.data.Data.measurements)
+      });
-          setDuration(response.data.Data.duration)
+
-          setName(response.data.widgetName)
+      setChartData({ labels, datasets });
-        } else {
+    });
-          console.log("Unexpected response:", response);
+
-        }
+    return () => {
-      } catch (error) {
+      socket.off("lineOutput");
-        console.error("There was an error!", error);
+      socket.emit("stop_stream"); // Stop streaming when component unmounts
-      }
+      socket.disconnect();
-    }
+    };
-  }
+  }, [measurements, duration, iotApiUrl]);
-
+
-  useEffect(() => {
+  const fetchSavedInputes = async () => {
-    fetchSavedInputes();
+    if (id !== "") {
-  }, []);
+      try {
-
+        const response = await axios.get(
-  useEffect(() => {
+          `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${id}/${organization}`
-    if (selectedChartId?.id === id) {
+        );
-      fetchSavedInputes();
+        if (response.status === 200) {
-    }
+          setmeasurements(response.data.Data.measurements);
-  }
+          setDuration(response.data.Data.duration);
-  ,[chartMeasurements, chartDuration, widgetName])
+          setName(response.data.widgetName);
-
+        } else {
-  return <PolarArea data={Object.keys(measurements).length > 0 ? chartData : defaultData} options={options} />;
+          console.log("Unexpected response:", response);
-};
+        }
-
+      } catch (error) {
-export default PolarAreaGraphComponent;
+        console.error("There was an error!", error);
+      }
+    }
+  };
+
+  useEffect(() => {
+    fetchSavedInputes();
+  }, []);
+
+  useEffect(() => {
+    if (selectedChartId?.id === id) {
+      fetchSavedInputes();
+    }
+  }, [chartMeasurements, chartDuration, widgetName]);
+
+  return (
+    <PolarArea
+      data={Object.keys(measurements).length > 0 ? chartData : defaultData}
+      options={options}
+    />
+  );
+};
+
+export default PolarAreaGraphComponent;

app/src/modules/visualization/widgets/2d/charts/ProgressCard.tsx

@@ -1,29 +1,29 @@
-import { StockIncreseIcon } from "../../../icons/RealTimeVisulationIcons";
+import { StockIncreseIcon } from "../../../../../components/icons/RealTimeVisulationIcons";
-
+
-const ProgressCard = ({
+const ProgressCard = ({
-  title,
+  title,
-  data,
+  data,
-}: {
+}: {
-  title: string;
+  title: string;
-  data: { stocks: Array<{ key: string; value: number; description: string }> };
+  data: { stocks: Array<{ key: string; value: number; description: string }> };
-}) => (
+}) => (
-  <div className="chart progressBar">
+  <div className="chart progressBar">
-    <div className="header">{title}</div>
+    <div className="header">{title}</div>
-    {data?.stocks?.map((stock, index) => (
+    {data?.stocks?.map((stock, index) => (
-      <div key={index} className="stock">
+      <div key={index} className="stock">
-        <span className="stock-item">
+        <span className="stock-item">
-          <span className="stockValues">
+          <span className="stockValues">
-            <div className="key">{stock.key}</div>
+            <div className="key">{stock.key}</div>
-            <div className="value">{stock.value}</div>
+            <div className="value">{stock.value}</div>
-          </span>
+          </span>
-          <div className="stock-description">{stock.description}</div>
+          <div className="stock-description">{stock.description}</div>
-        </span>
+        </span>
-        <div className="icon">
+        <div className="icon">
-          <StockIncreseIcon />
+          <StockIncreseIcon />
-        </div>
+        </div>
-      </div>
+      </div>
-    ))}
+    ))}
-  </div>
+  </div>
-);
+);
-
+
-export default ProgressCard;
+export default ProgressCard;

app/src/modules/visualization/widgets/2d/charts/ProgressCard1.tsx

@@ -0,0 +1,105 @@
+import React, { useEffect, useMemo, useState } from "react";
+import { Line } from "react-chartjs-2";
+import io from "socket.io-client";
+
+import axios from "axios";
+import useChartStore from "../../../../../store/useChartStore";
+import { useWidgetStore } from "../../../../../store/useWidgetStore";
+import { StockIncreseIcon } from "../../../../../components/icons/RealTimeVisulationIcons";
+
+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;

app/src/modules/visualization/widgets/2d/charts/ProgressCard2.tsx

@@ -0,0 +1,125 @@
+import React, { useEffect, useMemo, useState } from "react";
+import { Line } from "react-chartjs-2";
+import io from "socket.io-client";
+
+import axios from "axios";
+import useChartStore from "../../../../../store/useChartStore";
+import { useWidgetStore } from "../../../../../store/useWidgetStore";
+import { StockIncreseIcon } from "../../../../../components/icons/RealTimeVisulationIcons";
+
+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;

app/src/modules/visualization/widgets/2d/charts/RadarGraphComponent.tsx

@@ -1,102 +1,102 @@
-import React, { useMemo } from "react";
+import React, { useMemo } from "react";
-import { Radar } from "react-chartjs-2";
+import { Radar } from "react-chartjs-2";
-import { ChartOptions, ChartData, RadialLinearScaleOptions } from "chart.js";
+import { ChartOptions, ChartData, RadialLinearScaleOptions } from "chart.js";
-
+
-interface ChartComponentProps {
+interface ChartComponentProps {
-  type: string;
+  type: string;
-  title: string;
+  title: string;
-  fontFamily?: string;
+  fontFamily?: string;
-  fontSize?: string;
+  fontSize?: string;
-  fontWeight?: "Light" | "Regular" | "Bold";
+  fontWeight?: "Light" | "Regular" | "Bold";
-  data: number[]; // Expecting an array of numbers for radar chart data
+  data: number[]; // Expecting an array of numbers for radar chart data
-}
+}
-
+
-const RadarGraphComponent = ({
+const RadarGraphComponent = ({
-  title,
+  title,
-  fontFamily,
+  fontFamily,
-  fontSize,
+  fontSize,
-  fontWeight = "Regular",
+  fontWeight = "Regular",
-  data, // Now guaranteed to be number[]
+  data, // Now guaranteed to be number[]
-}: ChartComponentProps) => {
+}: ChartComponentProps) => {
-  // Memoize Font Weight Mapping
+  // Memoize Font Weight Mapping
-  const chartFontWeightMap = useMemo(
+  const chartFontWeightMap = useMemo(
-    () => ({
+    () => ({
-      Light: "lighter" as const,
+      Light: "lighter" as const,
-      Regular: "normal" as const,
+      Regular: "normal" as const,
-      Bold: "bold" as const,
+      Bold: "bold" as const,
-    }),
+    }),
-    []
+    []
-  );
+  );
-
+
-  const fontSizeValue = useMemo(
+  const fontSizeValue = useMemo(
-    () => (fontSize ? parseInt(fontSize) : 12),
+    () => (fontSize ? parseInt(fontSize) : 12),
-    [fontSize]
+    [fontSize]
-  );
+  );
-
+
-  const fontWeightValue = useMemo(
+  const fontWeightValue = useMemo(
-    () => chartFontWeightMap[fontWeight],
+    () => chartFontWeightMap[fontWeight],
-    [fontWeight, chartFontWeightMap]
+    [fontWeight, chartFontWeightMap]
-  );
+  );
-
+
-  const chartFontStyle = useMemo(
+  const chartFontStyle = useMemo(
-    () => ({
+    () => ({
-      family: fontFamily || "Arial",
+      family: fontFamily || "Arial",
-      size: fontSizeValue,
+      size: fontSizeValue,
-      weight: fontWeightValue,
+      weight: fontWeightValue,
-    }),
+    }),
-    [fontFamily, fontSizeValue, fontWeightValue]
+    [fontFamily, fontSizeValue, fontWeightValue]
-  );
+  );
-
+
-  const options: ChartOptions<"radar"> = useMemo(
+  const options: ChartOptions<"radar"> = 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: {
+        legend: {
-          display: false,
+          display: false,
-          position: "top",
+          position: "top",
-        },
+        },
-      },
+      },
-      scales: {
+      scales: {
-        r: {
+        r: {
-          min: 0,
+          min: 0,
-          max: 100,
+          max: 100,
-          angleLines: {
+          angleLines: {
-            display: true,
+            display: true,
-          },
+          },
-          ticks: {
+          ticks: {
-            display: true,
+            display: true,
-            stepSize: 20,
+            stepSize: 20,
-          },
+          },
-        } as RadialLinearScaleOptions,
+        } as RadialLinearScaleOptions,
-      },
+      },
-    }),
+    }),
-    [title, chartFontStyle]
+    [title, chartFontStyle]
-  );
+  );
-
+
-  const chartData: ChartData<"radar"> = useMemo(
+  const chartData: ChartData<"radar"> = useMemo(
-    () => ({
+    () => ({
-      labels: ["January", "February", "March", "April", "May", "June", "July"],
+      labels: ["January", "February", "March", "April", "May", "June", "July"],
-      datasets: [
+      datasets: [
-        {
+        {
-          label: "Dataset 1",
+          label: "Dataset 1",
-          data, // Use the data passed as a prop
+          data, // Use the data passed as a prop
-          backgroundColor: "rgba(111, 66, 193, 0.2)",
+          backgroundColor: "rgba(111, 66, 193, 0.2)",
-          borderColor: "#6f42c1",
+          borderColor: "#6f42c1",
-          borderWidth: 2,
+          borderWidth: 2,
-          fill: true,
+          fill: true,
-        },
+        },
-      ],
+      ],
-    }),
+    }),
-    [data]
+    [data]
-  );
+  );
-
+
-  return <Radar data={chartData} options={options} />;
+  return <Radar data={chartData} options={options} />;
-};
+};
-
+
-export default RadarGraphComponent;
+export default RadarGraphComponent;

app/src/modules/visualization/widgets/3d/Dropped3dWidget.tsx

@@ -1,35 +1,25 @@
+import * as THREE from "three";
 import { useThree } from "@react-three/fiber";
 import React, { useEffect, useRef, useState } from "react";
-import {
+import { useAsset3dWidget, useSocketStore, useWidgetSubOption } from "../../../../store/store";
-    useAsset3dWidget,
+import useModuleStore from "../../../../store/useModuleStore";
-    useSocketStore,
+import { ThreeState } from "../../../../types/world/worldTypes";
-    useWidgetSubOption,
+import { useSelectedZoneStore } from "../../../../store/useZoneStore";
-} from "../../../store/store";
+import { useEditWidgetOptionsStore, useLeftData, useRightClickSelected, useRightSelected, useTopData, useZoneWidgetStore } from "../../../../store/useZone3DWidgetStore";
-import useModuleStore from "../../../store/useModuleStore";
+import { use3DWidget } from "../../../../store/useDroppedObjectsStore";
-import { ThreeState } from "../../../types/world/worldTypes";
+import { get3dWidgetZoneData } from "../../../../services/realTimeVisulization/zoneData/get3dWidgetData";
-import * as THREE from "three";
+import { generateUniqueId } from "../../../../functions/generateUniqueId";
-import Throughput from "../../layout/3D-cards/cards/Throughput";
+import ProductionCapacity from "./cards/ProductionCapacity";
-import ProductionCapacity from "../../layout/3D-cards/cards/ProductionCapacity";
+import ReturnOfInvestment from "./cards/ReturnOfInvestment";
-import ReturnOfInvestment from "../../layout/3D-cards/cards/ReturnOfInvestment";
+import StateWorking from "./cards/StateWorking";
-import StateWorking from "../../layout/3D-cards/cards/StateWorking";
+import Throughput from "./cards/Throughput";
-import { useSelectedZoneStore } from "../../../store/useZoneStore";
+import { useWidgetStore } from "../../../../store/useWidgetStore";
-import { generateUniqueId } from "../../../functions/generateUniqueId";
+import useChartStore from "../../../../store/useChartStore";
-import { adding3dWidgets } from "../../../services/realTimeVisulization/zoneData/add3dWidget";
+
-import { get3dWidgetZoneData } from "../../../services/realTimeVisulization/zoneData/get3dWidgetData";
+
-import { use3DWidget } from "../../../store/useDroppedObjectsStore";
+
-import {
+
-    useEditWidgetOptionsStore,
+
-    useLeftData,
-    useRightClickSelected,
-    useRightSelected,
-    useTopData,
-    useZoneWidgetStore,
-} from "../../../store/useZone3DWidgetStore";
-import { delete3dWidgetApi } from "../../../services/realTimeVisulization/zoneData/delete3dWidget";
-import {
-    update3dWidget,
-    update3dWidgetRotation,
-} from "../../../services/realTimeVisulization/zoneData/update3dWidget";
 type WidgetData = {
     id: string;
     type: string;
@@ -57,10 +47,14 @@ export default function Dropped3dWidgets() {
     const planeIntersect = useRef(new THREE.Vector3());
     const rotationStartRef = useRef<[number, number, number]>([0, 0, 0]);
     const mouseStartRef = useRef<{ x: number; y: number }>({ x: 0, y: 0 });
+    const { setSelectedChartId } = useWidgetStore();
+    const { measurements, duration} = useChartStore();
     let [floorPlanesVertical, setFloorPlanesVertical] = useState(
         new THREE.Plane(new THREE.Vector3(0, 1, 0))
     );
-
+    const [intersectcontextmenu, setintersectcontextmenu] = useState<number | undefined>();
+    const [horizontalX, setHorizontalX] = useState<number | undefined>();
+    const [horizontalZ, setHorizontalZ] = useState<number | undefined>();
 
     const activeZoneWidgets = zoneWidgetData[selectedZone.zoneId] || [];
     useEffect(() => {
@@ -177,26 +171,30 @@ export default function Dropped3dWidgets() {
         };
 
         const onDrop = (event: any) => {
-            
             event.preventDefault();
             event.stopPropagation();
-
+        
             hasEntered.current = false;
-
+        
             const email = localStorage.getItem("email") || "";
             const organization = email?.split("@")[1]?.split(".")[0];
-
+        
             const newWidget = createdWidgetRef.current;
             if (!newWidget || !widgetSelect.startsWith("ui")) return;
-
+        
             // ✅ Extract 2D drop position
-            const [x, , z] = newWidget.position;
+            let [x, y, z] = newWidget.position;
-
+        
+            // ✅ Clamp Y to at least 0
+            y = Math.max(y, 0);
+            newWidget.position = [x, y, z];
+        
             // ✅ Prepare polygon from selectedZone.points
             const points3D = selectedZone.points as Array<[number, number, number]>;
             const zonePolygonXZ = points3D.map(([x, , z]) => [x, z] as [number, number]);
-
+        
             const isInside = isPointInPolygon([x, z], zonePolygonXZ);
+        
             // ✅ Remove temp widget
             const prevWidgets = useZoneWidgetStore.getState().zoneWidgetData[selectedZone.zoneId] || [];
             const cleanedWidgets = prevWidgets.filter(w => w.id !== newWidget.id);
@@ -206,26 +204,29 @@ export default function Dropped3dWidgets() {
                     [selectedZone.zoneId]: cleanedWidgets,
                 },
             }));
+        
+            // (Optional) Prevent adding if dropped outside zone
             // if (!isInside) {
-                
             //     createdWidgetRef.current = null;
-            //     return; // Stop here
+            //     return;
             // }
-            // ✅ Add widget if inside polygon
+        
+            // ✅ Add widget
             addWidget(selectedZone.zoneId, newWidget);
-
+        
             const add3dWidget = {
                 organization,
                 widget: newWidget,
                 zoneId: selectedZone.zoneId,
             };
-
+        
             if (visualizationSocket) {
                 visualizationSocket.emit("v2:viz-3D-widget:add", add3dWidget);
             }
-
+        
             createdWidgetRef.current = null;
         };
+        
 
 
         canvasElement.addEventListener("dragenter", handleDragEnter);
@@ -249,8 +250,10 @@ export default function Dropped3dWidgets() {
                 const widgetToDuplicate = activeZoneWidgets.find(
                     (w: WidgetData) => w.id === rightClickSelected
                 );
+                console.log("3d widget to duplecate", widgetToDuplicate);
+
                 if (!widgetToDuplicate) return;
-                const newWidget: WidgetData = {
+                const newWidget: any = {
                     id: generateUniqueId(),
                     type: widgetToDuplicate.type,
                     position: [
@@ -259,6 +262,10 @@ export default function Dropped3dWidgets() {
                         widgetToDuplicate.position[2] + 0.5,
                     ],
                     rotation: widgetToDuplicate.rotation || [0, 0, 0],
+                    Data:{
+                        measurements: measurements,
+                        duration: duration
+                    },
                 };
                 const adding3dWidget = {
                     organization: organization,
@@ -331,28 +338,40 @@ export default function Dropped3dWidgets() {
         return inside;
     }
     const [prevX, setPrevX] = useState(0);
- 
+
     useEffect(() => {
         const email = localStorage.getItem("email") || "";
         const organization = email?.split("@")[1]?.split(".")[0];
         const handleMouseDown = (event: MouseEvent) => {
             if (!rightClickSelected || !rightSelect) return;
+            const selectedZoneId = Object.keys(zoneWidgetData).find(
+                (zoneId: string) =>
+                    zoneWidgetData[zoneId].some(
+                        (widget: WidgetData) => widget.id === rightClickSelected
+                    )
+            );
+            if (!selectedZoneId) return;
+            const selectedWidget = zoneWidgetData[selectedZoneId].find(
+                (widget: WidgetData) => widget.id === rightClickSelected
+            );
+            if (!selectedWidget) return
+            // let points = [];
+            // points.push(new THREE.Vector3(0, 0, 0));
+            // points.push(new THREE.Vector3(0, selectedWidget.position[1], 0));
+            // const newgeometry = new THREE.BufferGeometry().setFromPoints(points);
+            // let vector = new THREE.Vector3();
+            // camera.getWorldDirection(vector);
+            // let cameraDirection = vector;
+            // let newPlane = new THREE.Plane(cameraDirection);
+            // floorPlanesVertical = newPlane;
+            // setFloorPlanesVertical(newPlane);
+            // const intersect1 = raycaster?.ray?.intersectPlane(
+            //     floorPlanesVertical,
+            //     planeIntersect.current
+            // );
+            
+            // setintersectcontextmenu(intersect1.y);
 
-            const cameraDirection = new THREE.Vector3();
-            camera.getWorldDirection(cameraDirection);
-        
-            // Plane normal should be perpendicular to screen (XZ move), so use screen right direction
-            const right = new THREE.Vector3();
-            camera.getWorldDirection(cameraDirection);
-            cameraDirection.y = 0;
-            cameraDirection.normalize();
-        
-            right.crossVectors(new THREE.Vector3(0, 1, 0), cameraDirection).normalize();
-        
-            // Create a plane that allows vertical movement
-            const verticalPlane = new THREE.Plane().setFromNormalAndCoplanarPoint(right, new THREE.Vector3(0, 0, 0));
-        
-            setFloorPlanesVertical(verticalPlane);
             if (rightSelect === "RotateX" || rightSelect === "RotateY") {
                 mouseStartRef.current = { x: event.clientX, y: event.clientY };
 
@@ -370,6 +389,7 @@ export default function Dropped3dWidgets() {
                     rotationStartRef.current = selectedWidget.rotation || [0, 0, 0];
                 }
             }
+          
         };
 
         const handleMouseMove = (event: MouseEvent) => {
@@ -392,90 +412,110 @@ export default function Dropped3dWidgets() {
 
             raycaster.setFromCamera(mouse, camera);
 
-            if (rightSelect === "Horizontal Move" &&raycaster.ray.intersectPlane(plane.current, planeIntersect.current)) {
+            if (rightSelect === "Horizontal Move") {
-                const points3D = selectedZone.points as Array<[number, number, number]>;
+                const intersect = raycaster.ray.intersectPlane(plane.current, planeIntersect.current);
-                const zonePolygonXZ = points3D.map(([x, , z]) => [x, z] as [number, number]);
+                if (
-                const newPosition: [number, number, number] = [
+                    intersect &&
-                    planeIntersect.current.x,
+                    typeof horizontalX === "number" &&
-                    selectedWidget.position[1],
+                    typeof horizontalZ === "number"
-                    planeIntersect.current.z,
+                ) {
-                ];
+                    const selectedZoneId = Object.keys(zoneWidgetData).find(zoneId =>
-                const isInside = isPointInPolygon(
+                        zoneWidgetData[zoneId].some(widget => widget.id === rightClickSelected)
-                    [newPosition[0], newPosition[2]],
+                    );
-                    zonePolygonXZ
+                    if (!selectedZoneId) return;
-                );
+
-                // if (isInside) {
+                    const selectedWidget = zoneWidgetData[selectedZoneId].find(widget => widget.id === rightClickSelected);
+                    if (!selectedWidget) return;
+
+                    const newPosition: [number, number, number] = [
+                        intersect.x + horizontalX,
+                        selectedWidget.position[1],
+                        intersect.z + horizontalZ,
+                    ];
+
+                    
                     updateWidgetPosition(selectedZoneId, rightClickSelected, newPosition);
-                // }
+                }
             }
 
+
             if (rightSelect === "Vertical Move") {
-                if (raycaster.ray.intersectPlane(floorPlanesVertical, planeIntersect.current)) {
+                const intersect = raycaster.ray.intersectPlane(floorPlanesVertical, planeIntersect.current);
-                    const currentY = selectedWidget.position[1];
+            
-                    const newY = planeIntersect.current.y;
+                if (intersect && typeof intersectcontextmenu === "number") {
-                    console.log('planeIntersect.current: ', planeIntersect.current);
+                    const diff = intersect.y - intersectcontextmenu;
-                
+                    const unclampedY = selectedWidget.position[1] + diff;
-                    const deltaY = newY - currentY;
+                    const newY = Math.max(0, unclampedY); // Prevent going below floor (y=0)
-                
+                    
-                    // Reject if jump is too large (safety check)
+                    setintersectcontextmenu(intersect.y);
-                    if (Math.abs(deltaY) > 200) return;
+            
-                
+                    const newPosition: [number, number, number] = [
-                    // Clamp jump or apply smoothing
+                        selectedWidget.position[0],
-                    const clampedY = currentY + THREE.MathUtils.clamp(deltaY, -10, 10);
+                        newY,
-                
+                        selectedWidget.position[2],
-                    if (clampedY > 0) {
+                    ];
-                        updateWidgetPosition(selectedZoneId, rightClickSelected, [
+            
-                            selectedWidget.position[0],
+                    updateWidgetPosition(selectedZoneId, rightClickSelected, newPosition);
-                            clampedY,
-                            selectedWidget.position[2],
-                        ]);
-                    }
                 }
             }
+            
+            if (rightSelect?.startsWith("Rotate")) {
+                const axis = rightSelect.slice(-1).toLowerCase(); // "x", "y", or "z"
+                const currentX = event.pageX;
+                const sign = currentX > prevX ? 1 : currentX < prevX ? -1 : 0;
+                setPrevX(currentX);
+                if (selectedWidget?.rotation && selectedWidget.rotation.length >= 3) {
+                    const index = axis === "x" ? 0 : axis === "y" ? 1 : 2;
+                    const currentRotation = selectedWidget.rotation as [number, number, number]; // assert type
+                    const newRotation: [number, number, number] = [...currentRotation];
+                    newRotation[index] += 0.05 * sign;
+                    updateWidgetRotation(selectedZoneId, rightClickSelected, newRotation);
+                }
+            }
+            // if (rightSelect === "RotateX") {
+            //     
+            //     const currentX = event.pageX;
+            //     const sign = currentX > prevX ? 1 : currentX < prevX ? -1 : 0;
+            //     
+            //     setPrevX(currentX);
+            //     if (selectedWidget?.rotation && selectedWidget.rotation.length >= 3) {
+            //         
+            //         const newRotation: [number, number, number] = [
+            //             selectedWidget.rotation[0] + 0.05 * sign,
+            //             selectedWidget.rotation[1],
+            //             selectedWidget.rotation[2],
+            //         ];
+            //         updateWidgetRotation(selectedZoneId, rightClickSelected, newRotation);
+            //     }
+            // }
+            // if (rightSelect === "RotateY") {
+            //     const currentX = event.pageX;
+            //     const sign = currentX > prevX ? 1 : currentX < prevX ? -1 : 0;
+            //     setPrevX(currentX);
+            //     if (selectedWidget?.rotation && selectedWidget.rotation.length >= 3) {
+            //         const newRotation: [number, number, number] = [
+            //             selectedWidget.rotation[0],
+            //             selectedWidget.rotation[1] + 0.05 * sign,
+            //             selectedWidget.rotation[2],
+            //         ];
 
-            if (rightSelect === "RotateX") {
+            //         updateWidgetRotation(selectedZoneId, rightClickSelected, newRotation);
-                const currentX = event.pageX;
+            //     }
-                const sign = currentX > prevX ? 1 : currentX < prevX ? -1 : 0;
+            // }
-                setPrevX(currentX);
+            // if (rightSelect === "RotateZ") {
-                if (selectedWidget?.rotation && selectedWidget.rotation.length >= 3) {
+            //     const currentX = event.pageX;
-                    const newRotation: [number, number, number] = [
+            //     const sign = currentX > prevX ? 1 : currentX < prevX ? -1 : 0;
-                        selectedWidget.rotation[0] + 0.05 * sign,
+            //     setPrevX(currentX);
-                        selectedWidget.rotation[1],
+            //     if (selectedWidget?.rotation && selectedWidget.rotation.length >= 3) {
-                        selectedWidget.rotation[2],
+            //         const newRotation: [number, number, number] = [
-                    ];
+            //             selectedWidget.rotation[0],
-                    
+            //             selectedWidget.rotation[1],
-                    updateWidgetRotation(selectedZoneId, rightClickSelected, newRotation);
+            //             selectedWidget.rotation[2] + 0.05 * sign,
-                }
+            //         ];
-            }
 
-            if (rightSelect === "RotateY") {
+            //         updateWidgetRotation(selectedZoneId, rightClickSelected, newRotation);
-                const currentX = event.pageX;
+            //     }
-                const sign = currentX > prevX ? 1 : currentX < prevX ? -1 : 0;
+            // }
-                setPrevX(currentX);
-                if (selectedWidget?.rotation && selectedWidget.rotation.length >= 3) {
-                    const newRotation: [number, number, number] = [
-                        selectedWidget.rotation[0] ,
-                        selectedWidget.rotation[1]+ 0.05 * sign,
-                        selectedWidget.rotation[2],
-                    ];
-                    
-                    updateWidgetRotation(selectedZoneId, rightClickSelected, newRotation);
-                }
-            }
-            if (rightSelect === "RotateZ") {
-                const currentX = event.pageX;
-                const sign = currentX > prevX ? 1 : currentX < prevX ? -1 : 0;
-                setPrevX(currentX);
-                if (selectedWidget?.rotation && selectedWidget.rotation.length >= 3) {
-                    const newRotation: [number, number, number] = [
-                        selectedWidget.rotation[0] ,
-                        selectedWidget.rotation[1],
-                        selectedWidget.rotation[2]+ 0.05 * sign,
-                    ];
-                    
-                    updateWidgetRotation(selectedZoneId, rightClickSelected, newRotation);
-                }
-            }
         };
         const handleMouseUp = () => {
             if (!rightClickSelected || !rightSelect) return;
@@ -525,7 +565,7 @@ export default function Dropped3dWidgets() {
                 const rotation = selectedWidget.rotation || [0, 0, 0];
 
                 let lastRotation = formatValues(rotation) as [number, number, number];
-             
+
                 // (async () => {
                 //     let response = await update3dWidgetRotation(selectedZoneId, organization, rightClickSelected, lastRotation);
                 //
@@ -564,11 +604,60 @@ export default function Dropped3dWidgets() {
         };
     }, [rightClickSelected, rightSelect, zoneWidgetData, gl]);
 
+    const handleRightClick3d = (event: React.MouseEvent, id: string) => {
+        event.preventDefault();
+
+        const canvasElement = document.getElementById("real-time-vis-canvas");
+        if (!canvasElement) throw new Error("Canvas element not found");
+
+        const canvasRect = canvasElement.getBoundingClientRect();
+        const relativeX = event.clientX - canvasRect.left;
+        const relativeY = event.clientY - canvasRect.top;
+
+        setEditWidgetOptions(true);
+        setRightClickSelected(id);
+        setTop(relativeY);
+        setLeft(relativeX);
+
+        const selectedZoneId = Object.keys(zoneWidgetData).find(zoneId =>
+            zoneWidgetData[zoneId].some(widget => widget.id === id)
+        );
+        if (!selectedZoneId) return;
+
+        const selectedWidget = zoneWidgetData[selectedZoneId].find(widget => widget.id === id);
+        if (!selectedWidget) return;
+
+        const { top, left, width, height } = canvasElement.getBoundingClientRect();
+        mouse.x = ((event.clientX - left) / width) * 2 - 1;
+        mouse.y = -((event.clientY - top) / height) * 2 + 1;
+
+        raycaster.setFromCamera(mouse, camera);
+
+        const cameraDirection = new THREE.Vector3();
+        camera.getWorldDirection(cameraDirection);
+        const verticalPlane = new THREE.Plane(cameraDirection);
+        setFloorPlanesVertical(verticalPlane);
+
+        const intersectPoint = raycaster.ray.intersectPlane(verticalPlane, planeIntersect.current);
+        if (intersectPoint) {
+            setintersectcontextmenu(intersectPoint.y);
+        }
+        const intersect2 = raycaster.ray.intersectPlane(plane.current, planeIntersect.current);
+        if (intersect2) {
+            const xDiff = -intersect2.x + selectedWidget.position[0];
+            const zDiff = -intersect2.z + selectedWidget.position[2];
+            setHorizontalX(xDiff);
+            setHorizontalZ(zDiff);
+        }
+    };
+
+
     return (
         <>
             {activeZoneWidgets.map(
-                ({ id, type, position, rotation = [0, 0, 0] }: WidgetData) => {
+                ({ id, type, position, Data, rotation = [0, 0, 0] }: any) => {
                     const handleRightClick = (event: React.MouseEvent, id: string) => {
+                        setSelectedChartId({ id: id, type: type })
                         event.preventDefault();
                         const canvasElement = document.getElementById(
                             "real-time-vis-canvas"
@@ -581,6 +670,7 @@ export default function Dropped3dWidgets() {
                         setRightClickSelected(id);
                         setTop(relativeY);
                         setLeft(relativeX);
+                        handleRightClick3d(event, id)
                     };
 
                     switch (type) {
@@ -592,6 +682,7 @@ export default function Dropped3dWidgets() {
                                     type={type}
                                     position={position}
                                     rotation={rotation}
+                                    Data={Data}
                                     onContextMenu={(e) => handleRightClick(e, id)}
                                 />
                             );
@@ -603,6 +694,7 @@ export default function Dropped3dWidgets() {
                                     type={type}
                                     position={position}
                                     rotation={rotation}
+                                    Data={Data}
                                     onContextMenu={(e) => handleRightClick(e, id)}
                                 />
                             );
@@ -614,6 +706,7 @@ export default function Dropped3dWidgets() {
                                     type={type}
                                     position={position}
                                     rotation={rotation}
+                                    Data={Data}
                                     onContextMenu={(e) => handleRightClick(e, id)}
                                 />
                             );
@@ -625,6 +718,7 @@ export default function Dropped3dWidgets() {
                                     type={type}
                                     position={position}
                                     rotation={rotation}
+                                    Data={Data}
                                     onContextMenu={(e) => handleRightClick(e, id)}
                                 />
                             );

app/src/modules/visualization/widgets/3d/cards/ProductionCapacity.tsx

@@ -1,267 +1,270 @@
-import { Html } from "@react-three/drei";
+import { Html } from "@react-three/drei";
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
-import { Bar } from "react-chartjs-2";
+import { Bar } from "react-chartjs-2";
-import {
+import {
-  Chart as ChartJS,
+  Chart as ChartJS,
-  CategoryScale,
+  CategoryScale,
-  LinearScale,
+  LinearScale,
-  BarElement,
+  BarElement,
-  Title,
+  Title,
-  Tooltip,
+  Tooltip,
-  Legend,
+  Legend,
-  TooltipItem, // Import TooltipItem for typing
+  TooltipItem, // Import TooltipItem for typing
-} from "chart.js";
+} from "chart.js";
-import { ThroughputIcon } from "../../../icons/3dChartIcons";
+
-import { useWidgetStore } from "../../../../store/useWidgetStore";
+import axios from "axios";
-import useChartStore from "../../../../store/useChartStore";
+import io from "socket.io-client";
-import axios from "axios";
+import { useWidgetStore } from "../../../../../store/useWidgetStore";
-import io from "socket.io-client";
+import useChartStore from "../../../../../store/useChartStore";
-
+
-// Register ChartJS components
+// Register ChartJS components
-ChartJS.register(
+ChartJS.register(
-  CategoryScale,
+  CategoryScale,
-  LinearScale,
+  LinearScale,
-  BarElement,
+  BarElement,
-  Title,
+  Title,
-  Tooltip,
+  Tooltip,
-  Legend
+  Legend
-);
+);
-interface ProductionCapacityProps {
+interface ProductionCapacityProps {
-  id: string;
+  id: string;
-  type: string;
+  type: string;
-  position: [number, number, number];
+  position: [number, number, number];
-  rotation: [number, number, number];
+  rotation: [number, number, number];
-  onContextMenu?: (event: React.MouseEvent) => void;
+  Data?: any,
-  // onPointerDown:any
+  onContextMenu?: (event: React.MouseEvent) => void;
-}
+  // onPointerDown:any
-
+}
-const ProductionCapacity: React.FC<ProductionCapacityProps> = ({
+
-  id,
+const ProductionCapacity: React.FC<ProductionCapacityProps> = ({
-  type,
+  id,
-  position,
+  type,
-  rotation,
+  Data,
-  onContextMenu,
+  position,
-}) => {
+  rotation,
-  const { selectedChartId, setSelectedChartId } = useWidgetStore();
+  onContextMenu,
-  const {
+}) => {
-    measurements: chartMeasurements,
+  const { selectedChartId, setSelectedChartId } = useWidgetStore();
-    duration: chartDuration,
+  const {
-    name: widgetName,
+    measurements: chartMeasurements,
-  } = useChartStore();
+    duration: chartDuration,
-  const [measurements, setmeasurements] = useState<any>({});
+    name: widgetName,
-  const [duration, setDuration] = useState("1h");
+  } = useChartStore();
-  const [name, setName] = useState("Widget");
+  const [measurements, setmeasurements] = useState<any>(Data?.measurements ? Data.measurements : {});
-  const [chartData, setChartData] = useState<{
+  const [duration, setDuration] = useState(Data?.duration ? Data.duration : "1h");
-    labels: string[];
+  const [name, setName] = useState("Widget");
-    datasets: any[];
+  const [chartData, setChartData] = useState<{
-  }>({
+    labels: string[];
-    labels: [],
+    datasets: any[];
-    datasets: [],
+  }>({
-  });
+    labels: [],
-  const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
+    datasets: [],
-  const email = localStorage.getItem("email") || "";
+  });
-  const organization = email?.split("@")[1]?.split(".")[0];
+  const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
-  // Chart data for a week
+  const email = localStorage.getItem("email") || "";
-  const defaultChartData = {
+  const organization = email?.split("@")[1]?.split(".")[0];
-    labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], // Days of the week
+  // Chart data for a week
-    datasets: [
+  const defaultChartData = {
-      {
+    labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], // Days of the week
-        label: "Production Capacity (units/day)",
+    datasets: [
-        data: [1500, 1600, 1400, 1700, 1800, 1900, 2000], // Example daily production data
+      {
-        backgroundColor: "#6f42c1", // Theme color
+        label: "Production Capacity (units/day)",
-        borderColor: "#6f42c1",
+        data: [1500, 1600, 1400, 1700, 1800, 1900, 2000], // Example daily production data
-        borderWidth: 1,
+        backgroundColor: "#6f42c1", // Theme color
-        borderRadius: 8, // Rounded corners for the bars
+        borderColor: "#6f42c1",
-        borderSkipped: false, // Ensure all corners are rounded
+        borderWidth: 1,
-      },
+        borderRadius: 8, // Rounded corners for the bars
-    ],
+        borderSkipped: false, // Ensure all corners are rounded
-  };
+      },
-
+    ],
-  // Chart options
+  };
-  const chartOptions = {
+
-    responsive: true,
+  // Chart options
-    plugins: {
+  const chartOptions = {
-      legend: {
+    responsive: true,
-        display: false, // Hide legend
+    plugins: {
-      },
+      legend: {
-      title: {
+        display: false, // Hide legend
-        display: true,
+      },
-        text: "Weekly Production Capacity",
+      title: {
-        font: {
+        display: true,
-          size: 16,
+        text: "Weekly Production Capacity",
-        },
+        font: {
-      },
+          size: 16,
-      tooltip: {
+        },
-        callbacks: {
+      },
-          // Explicitly type the context parameter
+      tooltip: {
-          label: (context: TooltipItem<"bar">) => {
+        callbacks: {
-            const value = context.parsed.y; // Extract the y-axis value
+          // Explicitly type the context parameter
-            return `${value} units`; // Customize tooltip to display "units"
+          label: (context: TooltipItem<"bar">) => {
-          },
+            const value = context.parsed.y; // Extract the y-axis value
-        },
+            return `${value} units`; // Customize tooltip to display "units"
-      },
+          },
-    },
+        },
-    scales: {
+      },
-      x: {
+    },
-        grid: {
+    scales: {
-          display: false, // Hide x-axis grid lines
+      x: {
-        },
+        grid: {
-      },
+          display: false, // Hide x-axis grid lines
-      y: {
+        },
-        display: false, // Remove the y-axis completely
+      },
-      },
+      y: {
-    },
+        display: false, // Remove the y-axis completely
-  };
+      },
-
+    },
-  useEffect(() => {
+  };
-    if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0)
+
-      return;
+  useEffect(() => {
-
+    if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0)
-    const socket = io(`http://${iotApiUrl}`);
+      return;
-
+
-    const inputData = {
+    const socket = io(`http://${iotApiUrl}`);
-      measurements,
+
-      duration,
+    const inputData = {
-      interval: 1000,
+      measurements,
-    };
+      duration,
-
+      interval: 1000,
-    const startStream = () => {
+    };
-      socket.emit("lineInput", inputData);
+
-    };
+    const startStream = () => {
-
+      socket.emit("lineInput", inputData);
-    socket.on("connect", startStream);
+    };
-
+
-    socket.on("lineOutput", (response) => {
+    socket.on("connect", startStream);
-      const responseData = response.data;
+
-
+    socket.on("lineOutput", (response) => {
-      // Extract timestamps and values
+      const responseData = response.data;
-      const labels = responseData.time;
+
-      const datasets = Object.keys(measurements).map((key) => {
+      // Extract timestamps and values
-        const measurement = measurements[key];
+      const labels = responseData.time;
-        const datasetKey = `${measurement.name}.${measurement.fields}`;
+      const datasets = Object.keys(measurements).map((key) => {
-        return {
+        const measurement = measurements[key];
-          label: datasetKey,
+        const datasetKey = `${measurement.name}.${measurement.fields}`;
-          data: responseData[datasetKey]?.values ?? [],
+        return {
-          backgroundColor: "#6f42c1", // Theme color
+          label: datasetKey,
-          borderColor: "#6f42c1",
+          data: responseData[datasetKey]?.values ?? [],
-          borderWidth: 1,
+          backgroundColor: "#6f42c1", // Theme color
-          borderRadius: 8, // Rounded corners for the bars
+          borderColor: "#6f42c1",
-          borderSkipped: false, // Ensure all corners are rounded
+          borderWidth: 1,
-        };
+          borderRadius: 8, // Rounded corners for the bars
-      });
+          borderSkipped: false, // Ensure all corners are rounded
-
+        };
-      setChartData({ labels, datasets });
+      });
-    });
+
-
+      setChartData({ labels, datasets });
-    return () => {
+    });
-      socket.off("lineOutput");
+
-      socket.emit("stop_stream"); // Stop streaming when component unmounts
+    return () => {
-      socket.disconnect();
+      socket.off("lineOutput");
-    };
+      socket.emit("stop_stream"); // Stop streaming when component unmounts
-  }, [measurements, duration, iotApiUrl]);
+      socket.disconnect();
-
+    };
-  const fetchSavedInputes = async () => {
+  }, [measurements, duration, iotApiUrl]);
-    if (id !== "") {
+
-      try {
+  const fetchSavedInputes = async () => {
-        const response = await axios.get(
+    if (id !== "") {
-          `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/widget3D/${id}/${organization}`
+      try {
-        );
+        const response = await axios.get(
-
+          `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/widget3D/${id}/${organization}`
-        if (response.status === 200) {
+        );
-          setmeasurements(response.data.Data.measurements);
+
-          setDuration(response.data.Data.duration);
+        if (response.status === 200) {
-          setName(response.data.widgetName);
+          setmeasurements(response.data.Data.measurements);
-        } else {
+          setDuration(response.data.Data.duration);
-        }
+          setName(response.data.widgetName);
-      } catch (error) { }
+        } else {
-    }
+        }
-  };
+      } catch (error) { }
-
+    }
-  useEffect(() => {
+  };
-    fetchSavedInputes();
+
-  }, []);
+  useEffect(() => {
-
+    fetchSavedInputes();
-  useEffect(() => {
+  }, []);
-    if (selectedChartId?.id === id) {
+
-      fetchSavedInputes();
+  useEffect(() => {
-    }
+    if (selectedChartId?.id === id) {
-  }, [chartMeasurements, chartDuration, widgetName]);
+      fetchSavedInputes();
-
+    }
-  useEffect(() => { }, [rotation]);
+  }, [chartMeasurements, chartDuration, widgetName]);
-
+
-
+  useEffect(() => { }, [rotation]);
-
+
-  return (
+
-
+
-    <Html
+  return (
-      position={position}
+
-      scale={[0.5, 0.5, 0.5]}
+    <Html
-      rotation={rotation}
+      position={position}
-      transform
+      scale={[0.5, 0.5, 0.5]}
-      sprite={false}
+      rotation={rotation}
-      zIndexRange={[1, 0]}
+      transform
-      // style={{
+      sprite={false}
-      //   transform: transformStyle.transform,
+      zIndexRange={[1, 0]}
-      //   transformStyle: "preserve-3d",
+      // style={{
-      //   transition: "transform 0.1s ease-out",
+      //   transform: transformStyle.transform,
-      // }}
+      //   transformStyle: "preserve-3d",
-      onDragOver={(e) => {
+      //   transition: "transform 0.1s ease-out",
-        e.preventDefault();
+      // }}
-        e.stopPropagation();
+      onDragOver={(e) => {
-      }}
+        e.preventDefault();
-      onDrop={(e) => {
+        e.stopPropagation();
-        e.preventDefault();
+      }}
-        // e.stopPropagation();
+      onDrop={(e) => {
-      }}
+        e.preventDefault();
-      wrapperClass="pointer-none"
+        // e.stopPropagation();
-
+      }}
-    >
+      wrapperClass="pointer-none"
-      <div
+
-        className={`productionCapacity-wrapper card ${selectedChartId?.id === id ? "activeChart" : ""}`}
+    >
-        onClick={() => setSelectedChartId({ id: id, type: type })}
+      <div
-        onContextMenu={onContextMenu}
+        className={`productionCapacity-wrapper card ${selectedChartId?.id === id ? "activeChart" : ""}`}
-
+        onClick={() => setSelectedChartId({ id: id, type: type })}
-        style={{
+        onContextMenu={onContextMenu}
-          width: "300px", // Original width
+
-          height: "300px", // Original height
+        style={{
-          // transform: transformStyle.transform,
+          width: "300px", // Original width
-          transformStyle: "preserve-3d",
+          height: "300px", // Original height
-          position: "absolute",
+          // transform: transformStyle.transform,
-        }}
+          transformStyle: "preserve-3d",
-      >
+          position: "absolute",
-        <div className="headeproductionCapacityr-wrapper">
+          transform:'translate(-50%, -50%)',
-          <div className="header">Production Capacity</div>
+        }}
-          <div className="production-capacity">
+      >
-            <div className="value">1,200</div>{" "}
+        <div className="headeproductionCapacityr-wrapper">
-            <div className="value">units/hour</div>
+          <div className="header">Production Capacity</div>
-          </div>
+          <div className="production-capacity">
-          <div className="production-capacity">
+            <div className="value">1,200</div>{" "}
-            <div className="current">
+            <div className="value">units/hour</div>
-              <div className="key">Current</div>
+          </div>
-              <div className="value">1500</div>
+          <div className="production-capacity">
-            </div>
+            <div className="current">
-            <div className="target">
+              <div className="key">Current</div>
-              <div className="key">Target</div>
+              <div className="value">1500</div>
-              <div className="value">2.345</div>
+            </div>
-            </div>
+            <div className="target">
-            {/* <div className="value">units/hour</div> */}
+              <div className="key">Target</div>
-          </div>
+              <div className="value">2.345</div>
-        </div>{" "}
+            </div>
-        <div className="bar-chart charts">
+            {/* <div className="value">units/hour</div> */}
-          {/* Bar Chart */}
+          </div>
-          <Bar
+        </div>{" "}
-            data={
+        <div className="bar-chart charts">
-              Object.keys(measurements).length > 0
+          {/* Bar Chart */}
-                ? chartData
+          <Bar
-                : defaultChartData
+            data={
-            }
+              Object.keys(measurements).length > 0
-            options={chartOptions}
+                ? chartData
-          />
+                : defaultChartData
-        </div>
+            }
-      </div>
+            options={chartOptions}
-    </Html>
+          />
-
+        </div>
-  );
+      </div>
-};
+    </Html>
-
+
-export default ProductionCapacity;
+  );
+};
+
+export default ProductionCapacity;

app/src/modules/visualization/widgets/3d/cards/ReturnOfInvestment.tsx

@@ -1,275 +1,279 @@
-import { Html } from "@react-three/drei";
+import { Html } from "@react-three/drei";
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
-import { Line } from "react-chartjs-2";
+import { Line } from "react-chartjs-2";
-import {
+import {
-  Chart as ChartJS,
+  Chart as ChartJS,
-  CategoryScale,
+  CategoryScale,
-  LinearScale,
+  LinearScale,
-  PointElement,
+  PointElement,
-  LineElement,
+  LineElement,
-  Tooltip,
+  Tooltip,
-  ChartData,
+  ChartData,
-  ChartOptions,
+  ChartOptions,
-} from "chart.js";
+} from "chart.js";
-import { WavyIcon } from "../../../icons/3dChartIcons";
+
-import { useWidgetStore } from "../../../../store/useWidgetStore";
+
-import useChartStore from "../../../../store/useChartStore";
+import axios from "axios";
-import axios from "axios";
+import io from "socket.io-client";
-import io from "socket.io-client";
+import { useWidgetStore } from "../../../../../store/useWidgetStore";
-
+import useChartStore from "../../../../../store/useChartStore";
-// Register Chart.js components
+import { WavyIcon } from "../../../../../components/icons/3dChartIcons";
-ChartJS.register(
+
-  CategoryScale,
+// Register Chart.js components
-  LinearScale,
+ChartJS.register(
-  PointElement,
+  CategoryScale,
-  LineElement,
+  LinearScale,
-  Tooltip
+  PointElement,
-);
+  LineElement,
-
+  Tooltip
-// Define Props for SmoothLineGraphComponent
+);
-interface SmoothLineGraphProps {
+
-  data: ChartData<"line">; // Type for chart data
+// Define Props for SmoothLineGraphComponent
-  options?: ChartOptions<"line">; // Type for chart options (optional)
+interface SmoothLineGraphProps {
-}
+  data: ChartData<"line">; // Type for chart data
-
+  options?: ChartOptions<"line">; // Type for chart options (optional)
-// SmoothLineGraphComponent using react-chartjs-2
+}
-const SmoothLineGraphComponent: React.FC<SmoothLineGraphProps> = ({
+
-  data,
+// SmoothLineGraphComponent using react-chartjs-2
-  options,
+const SmoothLineGraphComponent: React.FC<SmoothLineGraphProps> = ({
-}) => {
+  data,
-  return <Line data={data} options={options} />;
+  options,
-};
+}) => {
-interface ReturnOfInvestmentProps {
+  return <Line data={data} options={options} />;
-  id: string;
+};
-  type: string;
+interface ReturnOfInvestmentProps {
-  position: [number, number, number];
+  id: string;
-  rotation: [number, number, number];
+  type: string;
-  onContextMenu?: (event: React.MouseEvent) => void;
+  position: [number, number, number];
-}
+  rotation: [number, number, number];
-const ReturnOfInvestment: React.FC<ReturnOfInvestmentProps> = ({
+  Data?: any;
-  id,
+  onContextMenu?: (event: React.MouseEvent) => void;
-  type,
+}
-  position,
+const ReturnOfInvestment: React.FC<ReturnOfInvestmentProps> = ({
-  rotation,
+  id,
-  onContextMenu,
+  type,
-}) => {
+  Data,
-  const { selectedChartId, setSelectedChartId } = useWidgetStore();
+  position,
-  const {
+  rotation,
-    measurements: chartMeasurements,
+  onContextMenu,
-    duration: chartDuration,
+}) => {
-    name: widgetName,
+  const { selectedChartId, setSelectedChartId } = useWidgetStore();
-  } = useChartStore();
+  const {
-  const [measurements, setmeasurements] = useState<any>({});
+    measurements: chartMeasurements,
-  const [duration, setDuration] = useState("1h");
+    duration: chartDuration,
-  const [name, setName] = useState("Widget");
+    name: widgetName,
-  const [chartData, setChartData] = useState<{
+  } = useChartStore();
-    labels: string[];
+  const [measurements, setmeasurements] = useState<any>(Data?.measurements ? Data.measurements : {});
-    datasets: any[];
+  const [duration, setDuration] = useState(Data?.duration ? Data.duration : "1h");
-  }>({
+  const [name, setName] = useState("Widget");
-    labels: [],
+  const [chartData, setChartData] = useState<{
-    datasets: [],
+    labels: string[];
-  });
+    datasets: any[];
-  const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
+  }>({
-  const email = localStorage.getItem("email") || "";
+    labels: [],
-  const organization = email?.split("@")[1]?.split(".")[0];
+    datasets: [],
-  // Improved sample data for the smooth curve graph (single day)
+  });
-  const graphData: ChartData<"line"> = {
+  const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
-    labels: [
+  const email = localStorage.getItem("email") || "";
-      "12 AM",
+  const organization = email?.split("@")[1]?.split(".")[0];
-      "3 AM",
+  // Improved sample data for the smooth curve graph (single day)
-      "6 AM",
+  const graphData: ChartData<"line"> = {
-      "9 AM",
+    labels: [
-      "12 PM",
+      "12 AM",
-      "3 PM",
+      "3 AM",
-      "6 PM",
+      "6 AM",
-      "9 PM",
+      "9 AM",
-      "12 AM",
+      "12 PM",
-    ],
+      "3 PM",
-    datasets: [
+      "6 PM",
-      {
+      "9 PM",
-        label: "Investment",
+      "12 AM",
-        data: [100, 250, 400, 400, 500, 600, 700, 800, 900], // Example investment growth
+    ],
-        borderColor: "rgba(75, 192, 192, 1)", // Light blue color
+    datasets: [
-        backgroundColor: "rgba(75, 192, 192, 0.2)",
+      {
-        fill: true,
+        label: "Investment",
-        tension: 0.4, // Smooth curve effect
+        data: [100, 250, 400, 400, 500, 600, 700, 800, 900], // Example investment growth
-        pointRadius: 0, // Hide dots
+        borderColor: "rgba(75, 192, 192, 1)", // Light blue color
-        pointHoverRadius: 0, // Hide hover dots
+        backgroundColor: "rgba(75, 192, 192, 0.2)",
-      },
+        fill: true,
-      {
+        tension: 0.4, // Smooth curve effect
-        label: "Return",
+        pointRadius: 0, // Hide dots
-        data: [100, 200, 500, 250, 300, 350, 400, 450, 500], // Example return values
+        pointHoverRadius: 0, // Hide hover dots
-        borderColor: "rgba(255, 99, 132, 1)", // Pink color
+      },
-        backgroundColor: "rgba(255, 99, 132, 0.2)",
+      {
-        fill: true,
+        label: "Return",
-        tension: 0.4, // Smooth curve effect
+        data: [100, 200, 500, 250, 300, 350, 400, 450, 500], // Example return values
-        pointRadius: 0, // Hide dots
+        borderColor: "rgba(255, 99, 132, 1)", // Pink color
-        pointHoverRadius: 0, // Hide hover dots
+        backgroundColor: "rgba(255, 99, 132, 0.2)",
-      },
+        fill: true,
-    ],
+        tension: 0.4, // Smooth curve effect
-  };
+        pointRadius: 0, // Hide dots
-
+        pointHoverRadius: 0, // Hide hover dots
-  // Options for the smooth curve graph
+      },
-  const graphOptions: ChartOptions<"line"> = {
+    ],
-    responsive: true,
+  };
-    maintainAspectRatio: false,
+
-    plugins: {
+  // Options for the smooth curve graph
-      tooltip: {
+  const graphOptions: ChartOptions<"line"> = {
-        enabled: true, // Enable tooltips on hover
+    responsive: true,
-        mode: "index", // Show both datasets' values at the same index
+    maintainAspectRatio: false,
-        intersect: false, // Allow hovering anywhere on the graph
+    plugins: {
-      },
+      tooltip: {
-    },
+        enabled: true, // Enable tooltips on hover
-    scales: {
+        mode: "index", // Show both datasets' values at the same index
-      x: {
+        intersect: false, // Allow hovering anywhere on the graph
-        grid: {
+      },
-          display: false, // Hide x-axis grid lines
+    },
-        },
+    scales: {
-        ticks: {
+      x: {
-          display: false, // Hide x-axis labels
+        grid: {
-        },
+          display: false, // Hide x-axis grid lines
-      },
+        },
-      y: {
+        ticks: {
-        grid: {
+          display: false, // Hide x-axis labels
-          display: false, // Hide y-axis grid lines
+        },
-        },
+      },
-        ticks: {
+      y: {
-          display: false, // Hide y-axis labels
+        grid: {
-        },
+          display: false, // Hide y-axis grid lines
-      },
+        },
-    },
+        ticks: {
-  };
+          display: false, // Hide y-axis labels
-
+        },
-  useEffect(() => {
+      },
-    if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0)
+    },
-      return;
+  };
-
+
-    const socket = io(`http://${iotApiUrl}`);
+  useEffect(() => {
-
+    if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0)
-    const inputData = {
+      return;
-      measurements,
+
-      duration,
+    const socket = io(`http://${iotApiUrl}`);
-      interval: 1000,
+
-    };
+    const inputData = {
-
+      measurements,
-    const startStream = () => {
+      duration,
-      socket.emit("lineInput", inputData);
+      interval: 1000,
-    };
+    };
-
+
-    socket.on("connect", startStream);
+    const startStream = () => {
-
+      socket.emit("lineInput", inputData);
-    socket.on("lineOutput", (response) => {
+    };
-      const responseData = response.data;
+
-
+    socket.on("connect", startStream);
-      // Extract timestamps and values
+
-      const labels = responseData.time;
+    socket.on("lineOutput", (response) => {
-      const datasets = Object.keys(measurements).map((key, index) => {
+      const responseData = response.data;
-        const measurement = measurements[key];
+
-        const datasetKey = `${measurement.name}.${measurement.fields}`;
+      // Extract timestamps and values
-        return {
+      const labels = responseData.time;
-          label: datasetKey,
+      const datasets = Object.keys(measurements).map((key, index) => {
-          data: responseData[datasetKey]?.values ?? [],
+        const measurement = measurements[key];
-          borderColor:
+        const datasetKey = `${measurement.name}.${measurement.fields}`;
-            index === 0 ? "rgba(75, 192, 192, 1)" : "rgba(255, 99, 132, 1)", // Light blue color
+        return {
-          backgroundColor:
+          label: datasetKey,
-            index === 0 ? "rgba(75, 192, 192, 0.2)" : "rgba(255, 99, 132, 0.2)",
+          data: responseData[datasetKey]?.values ?? [],
-          fill: true,
+          borderColor:
-          tension: 0.4, // Smooth curve effect
+            index === 0 ? "rgba(75, 192, 192, 1)" : "rgba(255, 99, 132, 1)", // Light blue color
-          pointRadius: 0, // Hide dots
+          backgroundColor:
-          pointHoverRadius: 0, // Hide hover dots
+            index === 0 ? "rgba(75, 192, 192, 0.2)" : "rgba(255, 99, 132, 0.2)",
-        };
+          fill: true,
-      });
+          tension: 0.4, // Smooth curve effect
-
+          pointRadius: 0, // Hide dots
-      setChartData({ labels, datasets });
+          pointHoverRadius: 0, // Hide hover dots
-    });
+        };
-
+      });
-    return () => {
+
-      socket.off("lineOutput");
+      setChartData({ labels, datasets });
-      socket.emit("stop_stream"); // Stop streaming when component unmounts
+    });
-      socket.disconnect();
+
-    };
+    return () => {
-  }, [measurements, duration, iotApiUrl]);
+      socket.off("lineOutput");
-
+      socket.emit("stop_stream"); // Stop streaming when component unmounts
-  const fetchSavedInputes = async () => {
+      socket.disconnect();
-    if (id !== "") {
+    };
-      try {
+  }, [measurements, duration, iotApiUrl]);
-        const response = await axios.get(
+
-          `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/widget3D/${id}/${organization}`
+  const fetchSavedInputes = async () => {
-        );
+    if (id !== "") {
-        if (response.status === 200) {
+      try {
-          setmeasurements(response.data.Data.measurements);
+        const response = await axios.get(
-          setDuration(response.data.Data.duration);
+          `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/widget3D/${id}/${organization}`
-          setName(response.data.widgetName);
+        );
-        } else {
+        if (response.status === 200) {
-          console.log("Unexpected response:", response);
+          setmeasurements(response.data.Data.measurements);
-        }
+          setDuration(response.data.Data.duration);
-      } catch (error) {
+          setName(response.data.widgetName);
-        console.error("There was an error!", error);
+        } else {
-      }
+          console.log("Unexpected response:", response);
-    }
+        }
-  };
+      } catch (error) {
-
+        console.error("There was an error!", error);
-  useEffect(() => {
+      }
-    fetchSavedInputes();
+    }
-  }, []);
+  };
-
+
-  useEffect(() => {
+  useEffect(() => {
-    if (selectedChartId?.id === id) {
+    fetchSavedInputes();
-      fetchSavedInputes();
+  }, []);
-    }
+
-  }, [chartMeasurements, chartDuration, widgetName]);
+  useEffect(() => {
-  const rotationDegrees = {
+    if (selectedChartId?.id === id) {
-    x: (rotation[0] * 180) / Math.PI,
+      fetchSavedInputes();
-    y: (rotation[1] * 180) / Math.PI,
+    }
-    z: (rotation[2] * 180) / Math.PI,
+  }, [chartMeasurements, chartDuration, widgetName]);
-  };
+  const rotationDegrees = {
-
+    x: (rotation[0] * 180) / Math.PI,
-  const transformStyle = {
+    y: (rotation[1] * 180) / Math.PI,
-    transform: `rotateX(${rotationDegrees.x}deg) rotateY(${rotationDegrees.y}deg) rotateZ(${rotationDegrees.z}deg)`,
+    z: (rotation[2] * 180) / Math.PI,
-  };
+  };
-
+
-  return (
+  const transformStyle = {
-    <Html
+    transform: `rotateX(${rotationDegrees.x}deg) rotateY(${rotationDegrees.y}deg) rotateZ(${rotationDegrees.z}deg)`,
-      position={[position[0], position[1], position[2]]}
+  };
-      rotation={rotation}
+
-      scale={[0.5, 0.5, 0.5]}
+  return (
-      transform
+    <Html
-      zIndexRange={[1, 0]}
+      position={[position[0], position[1], position[2]]}
-      sprite={false} 
+      rotation={rotation}
-      // style={{
+      scale={[0.5, 0.5, 0.5]}
-      //   transform: transformStyle.transform,
+      transform
-      //   transformStyle: "preserve-3d",
+      zIndexRange={[1, 0]}
-      //   transition: "transform 0.1s ease-out",
+      sprite={false} 
-      // }}
+      // style={{
-    >
+      //   transform: transformStyle.transform,
-      <div
+      //   transformStyle: "preserve-3d",
-        className={`returnOfInvestment card ${
+      //   transition: "transform 0.1s ease-out",
-          selectedChartId?.id === id ? "activeChart" : ""
+      // }}
-        }`}
+    >
-        onClick={() => setSelectedChartId({ id: id, type: type })}
+      <div
-        onContextMenu={onContextMenu}
+        className={`returnOfInvestment card ${
-      >
+          selectedChartId?.id === id ? "activeChart" : ""
-        <div className="header">Return of Investment</div>
+        }`}
-        <div className="lineGraph charts">
+        onClick={() => setSelectedChartId({ id: id, type: type })}
-          {/* Smooth curve graph with two datasets */}
+        onContextMenu={onContextMenu}
-          <SmoothLineGraphComponent
+      >
-            data={Object.keys(measurements).length > 0 ? chartData : graphData}
+        <div className="header">Return of Investment</div>
-            options={graphOptions}
+        <div className="lineGraph charts">
-          />
+          {/* Smooth curve graph with two datasets */}
-        </div>
+          <SmoothLineGraphComponent
-        <div className="returns-wrapper">
+            data={Object.keys(measurements).length > 0 ? chartData : graphData}
-          <div className="icon">
+            options={graphOptions}
-            <WavyIcon />
+          />
-          </div>
+        </div>
-          <div className="value">5.78</div>
+        <div className="returns-wrapper">
-          <div className="key">Years</div>
+          <div className="icon">
-        </div>
+            <WavyIcon />
-        <div className="footer">
+          </div>
-          in <span>5y</span> with avg <span>7%</span> yearly return
+          <div className="value">5.78</div>
-        </div>
+          <div className="key">Years</div>
-      </div>
+        </div>
-    </Html>
+        <div className="footer">
-  );
+          in <span>5y</span> with avg <span>7%</span> yearly return
-};
+        </div>
-
+      </div>
-export default ReturnOfInvestment;
+    </Html>
+  );
+};
+
+export default ReturnOfInvestment;

app/src/modules/visualization/widgets/3d/cards/StateWorking.tsx

@@ -1,201 +1,204 @@
-import { Html } from "@react-three/drei";
+import { Html } from "@react-three/drei";
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
-import { useWidgetStore } from "../../../../store/useWidgetStore";
+
-import useChartStore from "../../../../store/useChartStore";
+import axios from "axios";
-import axios from "axios";
+import io from "socket.io-client";
-import io from "socket.io-client";
+import { useWidgetStore } from "../../../../../store/useWidgetStore";
-
+import useChartStore from "../../../../../store/useChartStore";
-// import image from "../../../../assets/image/temp/image.png";
+
-interface StateWorkingProps {
+// import image from "../../../../assets/image/temp/image.png";
-  id: string;
+interface StateWorkingProps {
-  type: string;
+  id: string;
-  position: [number, number, number];
+  type: string;
-  rotation: [number, number, number];
+  position: [number, number, number];
-  onContextMenu?: (event: React.MouseEvent) => void;
+  rotation: [number, number, number];
-}
+  Data?:any;
-const StateWorking: React.FC<StateWorkingProps> = ({
+  onContextMenu?: (event: React.MouseEvent) => void;
-  id,
+}
-  type,
+const StateWorking: React.FC<StateWorkingProps> = ({
-  position,
+  id,
-  rotation,
+  type,
-  onContextMenu,
+  Data,
-}) => {
+  position,
-  const { selectedChartId, setSelectedChartId } = useWidgetStore();
+  rotation,
-  const {
+  onContextMenu,
-    measurements: chartMeasurements,
+}) => {
-    duration: chartDuration,
+  const { selectedChartId, setSelectedChartId } = useWidgetStore();
-    name: widgetName,
+  const {
-  } = useChartStore();
+    measurements: chartMeasurements,
-  const [measurements, setmeasurements] = useState<any>({});
+    duration: chartDuration,
-  const [duration, setDuration] = useState("1h");
+    name: widgetName,
-  const [name, setName] = useState("Widget");
+  } = useChartStore();
-  const [datas, setDatas] = useState<any>({});
+  const [measurements, setmeasurements] = useState<any>(Data?.measurements ? Data.measurements : {});
-  const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
+  const [duration, setDuration] = useState(Data?.duration ? Data.duration : "1h");
-  const email = localStorage.getItem("email") || "";
+  const [name, setName] = useState("Widget");
-  const organization = email?.split("@")[1]?.split(".")[0];
+  const [datas, setDatas] = useState<any>({});
-  // const datas = [
+  const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
-  //   { key: "Oil Tank:", value: "24/341" },
+  const email = localStorage.getItem("email") || "";
-  //   { key: "Oil Refin:", value: 36.023 },
+  const organization = email?.split("@")[1]?.split(".")[0];
-  //   { key: "Transmission:", value: 36.023 },
+  // const datas = [
-  //   { key: "Fuel:", value: 36732 },
+  //   { key: "Oil Tank:", value: "24/341" },
-  //   { key: "Power:", value: 1300 },
+  //   { key: "Oil Refin:", value: 36.023 },
-  //   { key: "Time:", value: 13 - 9 - 2023 },
+  //   { key: "Transmission:", value: 36.023 },
-  // ];
+  //   { key: "Fuel:", value: 36732 },
-
+  //   { key: "Power:", value: 1300 },
-  useEffect(() => {
+  //   { key: "Time:", value: 13 - 9 - 2023 },
-    if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0)
+  // ];
-      return;
+
-    const socket = io(`http://${iotApiUrl}`);
+  useEffect(() => {
-    const inputData = {
+    if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0)
-      measurements,
+      return;
-      duration,
+    const socket = io(`http://${iotApiUrl}`);
-      interval: 1000,
+    const inputData = {
-    };
+      measurements,
-    const startStream = () => {
+      duration,
-      socket.emit("lastInput", inputData);
+      interval: 1000,
-    };
+    };
-    socket.on("connect", startStream);
+    const startStream = () => {
-    socket.on("lastOutput", (response) => {
+      socket.emit("lastInput", inputData);
-      const responseData = response;
+    };
-
+    socket.on("connect", startStream);
-      setDatas(responseData);
+    socket.on("lastOutput", (response) => {
-    });
+      const responseData = response;
-
+
-    return () => {
+      setDatas(responseData);
-      socket.off("lastOutput");
+    });
-      socket.emit("stop_stream"); // Stop streaming when component unmounts
+
-      socket.disconnect();
+    return () => {
-    };
+      socket.off("lastOutput");
-  }, [measurements, duration, iotApiUrl]);
+      socket.emit("stop_stream"); // Stop streaming when component unmounts
-
+      socket.disconnect();
-  const fetchSavedInputes = async () => {
+    };
-    if (id !== "") {
+  }, [measurements, duration, iotApiUrl]);
-      try {
+
-        const response = await axios.get(
+  const fetchSavedInputes = async () => {
-          `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/widget3D/${id}/${organization}`
+    if (id !== "") {
-        );
+      try {
-        if (response.status === 200) {
+        const response = await axios.get(
-          setmeasurements(response.data.Data.measurements);
+          `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/widget3D/${id}/${organization}`
-          setDuration(response.data.Data.duration);
+        );
-          setName(response.data.widgetName);
+        if (response.status === 200) {
-        } else {
+          setmeasurements(response.data.Data.measurements);
-          console.log("Unexpected response:", response);
+          setDuration(response.data.Data.duration);
-        }
+          setName(response.data.widgetName);
-      } catch (error) {
+        } else {
-        console.error("There was an error!", error);
+          console.log("Unexpected response:", response);
-      }
+        }
-    }
+      } catch (error) {
-  };
+        console.error("There was an error!", error);
-
+      }
-  useEffect(() => {
+    }
-    fetchSavedInputes();
+  };
-  }, []);
+
-
+  useEffect(() => {
-  useEffect(() => {
+    fetchSavedInputes();
-    if (selectedChartId?.id === id) {
+  }, []);
-      fetchSavedInputes();
+
-    }
+  useEffect(() => {
-  }, [chartMeasurements, chartDuration, widgetName]);
+    if (selectedChartId?.id === id) {
-
+      fetchSavedInputes();
-  const rotationDegrees = {
+    }
-    x: (rotation[0] * 180) / Math.PI,
+  }, [chartMeasurements, chartDuration, widgetName]);
-    y: (rotation[1] * 180) / Math.PI,
+
-    z: (rotation[2] * 180) / Math.PI,
+  const rotationDegrees = {
-  };
+    x: (rotation[0] * 180) / Math.PI,
-
+    y: (rotation[1] * 180) / Math.PI,
-  const transformStyle = {
+    z: (rotation[2] * 180) / Math.PI,
-    transform: `rotateX(${rotationDegrees.x}deg) rotateY(${rotationDegrees.y}deg) rotateZ(${rotationDegrees.z}deg)`,
+  };
-  };
+
-  return (
+  const transformStyle = {
-    <Html
+    transform: `rotateX(${rotationDegrees.x}deg) rotateY(${rotationDegrees.y}deg) rotateZ(${rotationDegrees.z}deg)`,
-      position={[position[0], position[1], position[2]]}
+  };
-      rotation={rotation}
+  return (
-      scale={[0.5, 0.5, 0.5]}
+    <Html
-      transform
+      position={[position[0], position[1], position[2]]}
-      zIndexRange={[1, 0]}
+      rotation={rotation}
-      sprite={false} 
+      scale={[0.5, 0.5, 0.5]}
-      // style={{
+      transform
-      //   transform: transformStyle.transform,
+      zIndexRange={[1, 0]}
-      //   transformStyle: "preserve-3d",
+      sprite={false} 
-      //   transition: "transform 0.1s ease-out",
+      // style={{
-      // }}
+      //   transform: transformStyle.transform,
-    >
+      //   transformStyle: "preserve-3d",
-      <div
+      //   transition: "transform 0.1s ease-out",
-        className={`stateWorking-wrapper card ${
+      // }}
-          selectedChartId?.id === id ? "activeChart" : ""
+    >
-        }`}
+      <div
-        onClick={() => setSelectedChartId({ id: id, type: type })}
+        className={`stateWorking-wrapper card ${
-        onContextMenu={onContextMenu}
+          selectedChartId?.id === id ? "activeChart" : ""
-      >
+        }`}
-        <div className="header-wrapper">
+        onClick={() => setSelectedChartId({ id: id, type: type })}
-          <div className="header">
+        onContextMenu={onContextMenu}
-            <span>State</span>
+      >
-            <span>
+        <div className="header-wrapper">
-              {datas?.input1 ? datas.input1 : "input1"} <span>.</span>
+          <div className="header">
-            </span>
+            <span>State</span>
-          </div>
+            <span>
-          <div className="img">{/* <img src={image} alt="" /> */}</div>
+              {datas?.input1 ? datas.input1 : "input1"} <span>.</span>
-        </div>
+            </span>
-        {/* Data */}
+          </div>
-        <div className="data-wrapper">
+          <div className="img">{/* <img src={image} alt="" /> */}</div>
-          {/* {datas.map((data, index) => (
+        </div>
-            <div className="data-table" key={index}>
+        {/* Data */}
-              <div className="data">{data.key}</div>
+        <div className="data-wrapper">
-              <div className="key">{data.value}</div>
+          {/* {datas.map((data, index) => (
-            </div>
+            <div className="data-table" key={index}>
-          ))} */}
+              <div className="data">{data.key}</div>
-          <div className="data-table">
+              <div className="key">{data.value}</div>
-            <div className="data">
+            </div>
-              {measurements?.input2?.fields
+          ))} */}
-                ? measurements.input2.fields
+          <div className="data-table">
-                : "input2"}
+            <div className="data">
-            </div>
+              {measurements?.input2?.fields
-            <div className="key">{datas?.input2 ? datas.input2 : "data"}</div>
+                ? measurements.input2.fields
-          </div>
+                : "input2"}
-          <div className="data-table">
+            </div>
-            <div className="data">
+            <div className="key">{datas?.input2 ? datas.input2 : "data"}</div>
-              {measurements?.input3?.fields
+          </div>
-                ? measurements.input3.fields
+          <div className="data-table">
-                : "input3"}
+            <div className="data">
-            </div>
+              {measurements?.input3?.fields
-            <div className="key">{datas?.input3 ? datas.input3 : "data"}</div>
+                ? measurements.input3.fields
-          </div>
+                : "input3"}
-          <div className="data-table">
+            </div>
-            <div className="data">
+            <div className="key">{datas?.input3 ? datas.input3 : "data"}</div>
-              {measurements?.input4?.fields
+          </div>
-                ? measurements.input4.fields
+          <div className="data-table">
-                : "input4"}
+            <div className="data">
-            </div>
+              {measurements?.input4?.fields
-            <div className="key">{datas?.input4 ? datas.input4 : "data"}</div>
+                ? measurements.input4.fields
-          </div>
+                : "input4"}
-          <div className="data-table">
+            </div>
-            <div className="data">
+            <div className="key">{datas?.input4 ? datas.input4 : "data"}</div>
-              {measurements?.input5?.fields
+          </div>
-                ? measurements.input5.fields
+          <div className="data-table">
-                : "input5"}
+            <div className="data">
-            </div>
+              {measurements?.input5?.fields
-            <div className="key">{datas?.input5 ? datas.input5 : "data"}</div>
+                ? measurements.input5.fields
-          </div>
+                : "input5"}
-          <div className="data-table">
+            </div>
-            <div className="data">
+            <div className="key">{datas?.input5 ? datas.input5 : "data"}</div>
-              {measurements?.input6?.fields
+          </div>
-                ? measurements.input6.fields
+          <div className="data-table">
-                : "input6"}
+            <div className="data">
-            </div>
+              {measurements?.input6?.fields
-            <div className="key">{datas?.input6 ? datas.input6 : "data"}</div>
+                ? measurements.input6.fields
-          </div>
+                : "input6"}
-          <div className="data-table">
+            </div>
-            <div className="data">
+            <div className="key">{datas?.input6 ? datas.input6 : "data"}</div>
-              {measurements?.input7?.fields
+          </div>
-                ? measurements.input7.fields
+          <div className="data-table">
-                : "input7"}
+            <div className="data">
-            </div>
+              {measurements?.input7?.fields
-            <div className="key">{datas?.input7 ? datas.input7 : "data"}</div>
+                ? measurements.input7.fields
-          </div>
+                : "input7"}
-        </div>
+            </div>
-      </div>
+            <div className="key">{datas?.input7 ? datas.input7 : "data"}</div>
-    </Html>
+          </div>
-  );
+        </div>
-};
+      </div>
-
+    </Html>
-export default StateWorking;
+  );
+};
+
+export default StateWorking;

app/src/modules/visualization/widgets/3d/cards/Throughput.tsx

@@ -1,266 +1,270 @@
-import { Html } from "@react-three/drei";
+import { Html } from "@react-three/drei";
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
-import { Line } from "react-chartjs-2";
+import { Line } from "react-chartjs-2";
-import {
+import {
-  Chart as ChartJS,
+  Chart as ChartJS,
-  CategoryScale,
+  CategoryScale,
-  LinearScale,
+  LinearScale,
-  PointElement,
+  PointElement,
-  LineElement,
+  LineElement,
-  Title,
+  Title,
-  Tooltip,
+  Tooltip,
-  Legend,
+  Legend,
-  ChartData,
+  ChartData,
-  ChartOptions,
+  ChartOptions,
-} from "chart.js";
+} from "chart.js";
-import { ThroughputIcon } from "../../../icons/3dChartIcons";
+
-import { useWidgetStore } from "../../../../store/useWidgetStore";
+
-import useChartStore from "../../../../store/useChartStore";
+import axios from "axios";
-import axios from "axios";
+import io from "socket.io-client";
-import io from "socket.io-client";
+import { useWidgetStore } from "../../../../../store/useWidgetStore";
-
+import useChartStore from "../../../../../store/useChartStore";
-// Register Chart.js components
+import { ThroughputIcon } from "../../../../../components/icons/3dChartIcons";
-ChartJS.register(
+
-  CategoryScale,
+// Register Chart.js components
-  LinearScale,
+ChartJS.register(
-  PointElement,
+  CategoryScale,
-  LineElement,
+  LinearScale,
-  Title,
+  PointElement,
-  Tooltip,
+  LineElement,
-  Legend
+  Title,
-);
+  Tooltip,
-
+  Legend
-// Define Props for LineGraphComponent
+);
-interface LineGraphProps {
+
-  data: ChartData<"line">; // Type for chart data
+// Define Props for LineGraphComponent
-  options?: ChartOptions<"line">; // Type for chart options (optional)
+interface LineGraphProps {
-}
+  data: ChartData<"line">; // Type for chart data
-
+  options?: ChartOptions<"line">; // Type for chart options (optional)
-// LineGraphComponent using react-chartjs-2
+}
-const LineGraphComponent: React.FC<LineGraphProps> = ({ data, options }) => {
+
-  return <Line data={data} options={options} />;
+// LineGraphComponent using react-chartjs-2
-};
+const LineGraphComponent: React.FC<LineGraphProps> = ({ data, options }) => {
-
+  return <Line data={data} options={options} />;
-interface ThroughputProps {
+};
-  id: string;
+
-  type: string;
+interface ThroughputProps {
-  position: [number, number, number];
+  id: string;
-  rotation: [number, number, number];
+  type: string;
-  onContextMenu?: (event: React.MouseEvent) => void;
+  position: [number, number, number];
-}
+  rotation: [number, number, number];
-
+  Data?:any;
-const Throughput: React.FC<ThroughputProps> = ({
+  onContextMenu?: (event: React.MouseEvent) => void;
-  id,
+}
-  type,
+
-  position,
+const Throughput: React.FC<ThroughputProps> = ({
-  rotation,
+  id,
-  onContextMenu,
+  type,
-}) => {
+  Data,
-  const { selectedChartId, setSelectedChartId } = useWidgetStore();
+  position,
-  const {
+  rotation,
-    measurements: chartMeasurements,
+  onContextMenu,
-    duration: chartDuration,
+}) => {
-    name: widgetName,
+  const { selectedChartId, setSelectedChartId } = useWidgetStore();
-  } = useChartStore();
+  const {
-  const [measurements, setmeasurements] = useState<any>({});
+    measurements: chartMeasurements,
-  const [duration, setDuration] = useState("1h");
+    duration: chartDuration,
-  const [name, setName] = useState("Widget");
+    name: widgetName,
-  const [chartData, setChartData] = useState<{
+  } = useChartStore();
-    labels: string[];
+  const [measurements, setmeasurements] = useState<any>(Data?.measurements ? Data.measurements : {});
-    datasets: any[];
+  const [duration, setDuration] = useState(Data?.duration ? Data.duration : "1h");
-  }>({
+  const [name, setName] = useState("Widget");
-    labels: [],
+  const [chartData, setChartData] = useState<{
-    datasets: [],
+    labels: string[];
-  });
+    datasets: any[];
-  const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
+  }>({
-  const email = localStorage.getItem("email") || "";
+    labels: [],
-  const organization = email?.split("@")[1]?.split(".")[0];
+    datasets: [],
-
+  });
-  // Sample data for the line graph
+  const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
-  const graphData: ChartData<"line"> = {
+  const email = localStorage.getItem("email") || "";
-    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
+  const organization = email?.split("@")[1]?.split(".")[0];
-    datasets: [
+
-      {
+  // Sample data for the line graph
-        label: "Throughput",
+  const graphData: ChartData<"line"> = {
-        data: [1000, 1200, 1100, 1300, 1250, 1400], // Example throughput values
+    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
-        borderColor: "rgba(75, 192, 192, 1)",
+    datasets: [
-        backgroundColor: "rgba(75, 192, 192, 0.2)",
+      {
-        fill: true,
+        label: "Throughput",
-      },
+        data: [1000, 1200, 1100, 1300, 1250, 1400], // Example throughput values
-    ],
+        borderColor: "rgba(75, 192, 192, 1)",
-  };
+        backgroundColor: "rgba(75, 192, 192, 0.2)",
-
+        fill: true,
-  // Options for the line graph
+      },
-  const graphOptions: ChartOptions<"line"> = {
+    ],
-    responsive: true,
+  };
-    plugins: {
+
-      legend: {
+  // Options for the line graph
-        position: "top",
+  const graphOptions: ChartOptions<"line"> = {
-        display: false,
+    responsive: true,
-      },
+    plugins: {
-      title: {
+      legend: {
-        display: true,
+        position: "top",
-        text: "Throughput Over Time",
+        display: false,
-      },
+      },
-    },
+      title: {
-    scales: {
+        display: true,
-      x: {
+        text: "Throughput Over Time",
-        grid: {
+      },
-          display: true, // Show vertical grid lines
+    },
-        },
+    scales: {
-        ticks: {
+      x: {
-          display: false, // Hide x-axis labels
+        grid: {
-        },
+          display: true, // Show vertical grid lines
-      },
+        },
-      y: {
+        ticks: {
-        grid: {
+          display: false, // Hide x-axis labels
-          display: false, // Hide horizontal grid lines
+        },
-        },
+      },
-        ticks: {
+      y: {
-          display: false, // Hide y-axis labels
+        grid: {
-        },
+          display: false, // Hide horizontal grid lines
-      },
+        },
-    },
+        ticks: {
-  };
+          display: false, // Hide y-axis labels
-
+        },
-  useEffect(() => {
+      },
-    if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0)
+    },
-      return;
+  };
-
+
-    const socket = io(`http://${iotApiUrl}`);
+  useEffect(() => {
-
+    if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0)
-    const inputData = {
+      return;
-      measurements,
+
-      duration,
+    const socket = io(`http://${iotApiUrl}`);
-      interval: 1000,
+
-    };
+    const inputData = {
-
+      measurements,
-    const startStream = () => {
+      duration,
-      socket.emit("lineInput", inputData);
+      interval: 1000,
-    };
+    };
-
+
-    socket.on("connect", startStream);
+    const startStream = () => {
-
+      socket.emit("lineInput", inputData);
-    socket.on("lineOutput", (response) => {
+    };
-      const responseData = response.data;
+
-
+    socket.on("connect", startStream);
-      // Extract timestamps and values
+
-      const labels = responseData.time;
+    socket.on("lineOutput", (response) => {
-      const datasets = Object.keys(measurements).map((key) => {
+      const responseData = response.data;
-        const measurement = measurements[key];
+
-        const datasetKey = `${measurement.name}.${measurement.fields}`;
+      // Extract timestamps and values
-        return {
+      const labels = responseData.time;
-          label: datasetKey,
+      const datasets = Object.keys(measurements).map((key) => {
-          data: responseData[datasetKey]?.values ?? [],
+        const measurement = measurements[key];
-          borderColor: "rgba(75, 192, 192, 1)",
+        const datasetKey = `${measurement.name}.${measurement.fields}`;
-          backgroundColor: "rgba(75, 192, 192, 0.2)",
+        return {
-          fill: true,
+          label: datasetKey,
-        };
+          data: responseData[datasetKey]?.values ?? [],
-      });
+          borderColor: "rgba(75, 192, 192, 1)",
-
+          backgroundColor: "rgba(75, 192, 192, 0.2)",
-      setChartData({ labels, datasets });
+          fill: true,
-    });
+        };
-
+      });
-    return () => {
+
-      socket.off("lineOutput");
+      setChartData({ labels, datasets });
-      socket.emit("stop_stream"); // Stop streaming when component unmounts
+    });
-      socket.disconnect();
+
-    };
+    return () => {
-  }, [measurements, duration, iotApiUrl]);
+      socket.off("lineOutput");
-
+      socket.emit("stop_stream"); // Stop streaming when component unmounts
-  const fetchSavedInputes = async () => {
+      socket.disconnect();
-    if (id !== "") {
+    };
-      try {
+  }, [measurements, duration, iotApiUrl]);
-        const response = await axios.get(
+
-          `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/widget3D/${id}/${organization}`
+  const fetchSavedInputes = async () => {
-        );
+    if (id !== "") {
-        if (response.status === 200) {
+      try {
-          setmeasurements(response.data.Data.measurements);
+        const response = await axios.get(
-          setDuration(response.data.Data.duration);
+          `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/widget3D/${id}/${organization}`
-          setName(response.data.widgetName);
+        );
-        } else {
+        if (response.status === 200) {
-          console.log("Unexpected response:", response);
+          setmeasurements(response.data.Data.measurements);
-        }
+          setDuration(response.data.Data.duration);
-      } catch (error) {
+          setName(response.data.widgetName);
-        console.error("There was an error!", error);
+        } else {
-      }
+          console.log("Unexpected response:", response);
-    }
+        }
-  };
+      } catch (error) {
-
+        console.error("There was an error!", error);
-  useEffect(() => {
+      }
-    fetchSavedInputes();
+    }
-  }, []);
+  };
-
+
-  useEffect(() => {
+  useEffect(() => {
-    if (selectedChartId?.id === id) {
+    fetchSavedInputes();
-      fetchSavedInputes();
+  }, []);
-    }
+
-  }, [chartMeasurements, chartDuration, widgetName]);
+  useEffect(() => {
-  const rotationDegrees = {
+    if (selectedChartId?.id === id) {
-    x: (rotation[0] * 180) / Math.PI,
+      fetchSavedInputes();
-    y: (rotation[1] * 180) / Math.PI,
+    }
-    z: (rotation[2] * 180) / Math.PI,
+  }, [chartMeasurements, chartDuration, widgetName]);
-  };
+  const rotationDegrees = {
-
+    x: (rotation[0] * 180) / Math.PI,
-  const transformStyle = {
+    y: (rotation[1] * 180) / Math.PI,
-    transform: `rotateX(${rotationDegrees.x}deg) rotateY(${rotationDegrees.y}deg) rotateZ(${rotationDegrees.z}deg)`,
+    z: (rotation[2] * 180) / Math.PI,
-  };
+  };
-
+
-  return (
+  const transformStyle = {
-    <Html
+    transform: `rotateX(${rotationDegrees.x}deg) rotateY(${rotationDegrees.y}deg) rotateZ(${rotationDegrees.z}deg)`,
-      position={[position[0], position[1], position[2]]}
+  };
-      rotation={rotation}
+
-      scale={[0.5, 0.5, 0.5]}
+  return (
-      transform
+    <Html
-      zIndexRange={[1, 0]}
+      position={[position[0], position[1], position[2]]}
-      sprite={false} 
+      rotation={rotation}
-      // style={{
+      scale={[0.5, 0.5, 0.5]}
-      //   transform: transformStyle.transform,
+      transform
-      //   transformStyle: "preserve-3d",
+      zIndexRange={[1, 0]}
-      //   transition: "transform 0.1s ease-out",
+      sprite={false} 
-      // }}
+      // style={{
-    >
+      //   transform: transformStyle.transform,
-      <div
+      //   transformStyle: "preserve-3d",
-        className={`throughput-wrapper card ${
+      //   transition: "transform 0.1s ease-out",
-          selectedChartId?.id === id ? "activeChart" : ""
+      // }}
-        }`}
+    >
-        onClick={() => setSelectedChartId({ id: id, type: type })}
+      <div
-        onContextMenu={onContextMenu}
+        className={`throughput-wrapper card ${
-      >
+          selectedChartId?.id === id ? "activeChart" : ""
-        <div className="header">{name}</div>
+        }`}
-        <div className="display-value">
+        onClick={() => setSelectedChartId({ id: id, type: type })}
-          <div className="left">
+        onContextMenu={onContextMenu}
-            <div className="icon">
+      >
-              <ThroughputIcon />
+        <div className="header">{name}</div>
-            </div>
+        <div className="display-value">
-            <div className="value-container">
+          <div className="left">
-              <div className="value-wrapper">
+            <div className="icon">
-                <div className="value">1,200</div>
+              <ThroughputIcon />
-                <div className="key"> Units/hr</div>
+            </div>
-              </div>
+            <div className="value-container">
-              <div className="total-sales">
+              <div className="value-wrapper">
-                <div className="value">316</div>
+                <div className="value">1,200</div>
-                <div className="key">sales</div>
+                <div className="key"> Units/hr</div>
-              </div>
+              </div>
-            </div>
+              <div className="total-sales">
-          </div>
+                <div className="value">316</div>
-          <div className="right">
+                <div className="key">sales</div>
-            <div className="percent-increase">5.77%</div>
+              </div>
-          </div>
+            </div>
-        </div>
+          </div>
-        <div className="line-graph">
+          <div className="right">
-          {/* Line graph using react-chartjs-2 */}
+            <div className="percent-increase">5.77%</div>
-          <LineGraphComponent
+          </div>
-            data={Object.keys(measurements).length > 0 ? chartData : graphData}
+        </div>
-            options={graphOptions}
+        <div className="line-graph">
-          />
+          {/* Line graph using react-chartjs-2 */}
-        </div>
+          <LineGraphComponent
-        <div className="footer">
+            data={Object.keys(measurements).length > 0 ? chartData : graphData}
-          You made an extra <span className="value">$1256.13</span> this month
+            options={graphOptions}
-        </div>
+          />
-      </div>
+        </div>
-    </Html>
+        <div className="footer">
-  );
+          You made an extra <span className="value">$1256.13</span> this month
-};
+        </div>
-
+      </div>
-export default Throughput;
+    </Html>
+  );
+};
+
+export default Throughput;

app/src/modules/visualization/widgets/floating/DroppedFloatingWidgets.tsx

@@ -1,29 +1,29 @@
-import { WalletIcon } from "../../icons/3dChartIcons";
+import { WalletIcon } from "../../../../components/icons/3dChartIcons";
 import { useEffect, useRef, useState } from "react";
 import {
   useDroppedObjectsStore,
   Zones,
-} from "../../../store/useDroppedObjectsStore";
+} from "../../../../store/useDroppedObjectsStore";
-import useModuleStore from "../../../store/useModuleStore";
+import useModuleStore from "../../../../store/useModuleStore";
-import { determinePosition } from "./functions/determinePosition";
+import { determinePosition } from "../../functions/determinePosition";
-import { getActiveProperties } from "./functions/getActiveProperties";
+import { getActiveProperties } from "../../functions/getActiveProperties";
-import { addingFloatingWidgets } from "../../../services/realTimeVisulization/zoneData/addFloatingWidgets";
+import { addingFloatingWidgets } from "../../../../services/realTimeVisulization/zoneData/addFloatingWidgets";
 import {
   DublicateIcon,
   KebabIcon,
   DeleteIcon,
-} from "../../icons/ExportCommonIcons";
+} from "../../../../components/icons/ExportCommonIcons";
 import DistanceLines from "./DistanceLines"; // Import the DistanceLines component
-import { deleteFloatingWidgetApi } from "../../../services/realTimeVisulization/zoneData/deleteFloatingWidget";
+import { deleteFloatingWidgetApi } from "../../../../services/realTimeVisulization/zoneData/deleteFloatingWidget";
 
-import TotalCardComponent from "../realTimeVis/floating/TotalCardComponent";
+import TotalCardComponent from "./cards/TotalCardComponent";
-import WarehouseThroughputComponent from "../realTimeVis/floating/WarehouseThroughputComponent";
+import WarehouseThroughputComponent from "./cards/WarehouseThroughputComponent";
-import FleetEfficiencyComponent from "../realTimeVis/floating/FleetEfficiencyComponent";
+import FleetEfficiencyComponent from "./cards/FleetEfficiencyComponent";
-import { useWidgetStore } from "../../../store/useWidgetStore";
+import { useWidgetStore } from "../../../../store/useWidgetStore";
-import { useSocketStore } from "../../../store/store";
+import { useSocketStore } from "../../../../store/store";
-import { useClickOutside } from "./functions/handleWidgetsOuterClick";
+import { useClickOutside } from "../../functions/handleWidgetsOuterClick";
-import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
+import { usePlayButtonStore } from "../../../../store/usePlayButtonStore";
-import { useSelectedZoneStore } from "../../../store/useZoneStore";
+import { useSelectedZoneStore } from "../../../../store/useZoneStore";
 interface DraggingState {
   zone: string;
   index: number;
@@ -560,7 +560,7 @@ const DroppedObjects: React.FC = () => {
             key={`${zoneName}-${index}`}
             className={`${obj.className} ${
               selectedChartId?.id === obj.id && "activeChart"
-            }`}
+            } `}
             ref={chartWidget}
             style={{
               position: "absolute",
@@ -569,7 +569,9 @@ const DroppedObjects: React.FC = () => {
               right: rightPosition,
               bottom: bottomPosition,
               pointerEvents: isPlaying ? "none" : "auto",
-              minHeight: `${obj.className === "warehouseThroughput" && "150px !important"} `
+              minHeight: `${
+                obj.className === "warehouseThroughput" && "150px !important"
+              } `,
             }}
             onPointerDown={(event) => {
               setSelectedChartId(obj);
@@ -661,3 +663,4 @@ const DroppedObjects: React.FC = () => {
 };
 
 export default DroppedObjects;
+

app/src/modules/visualization/widgets/floating/cards/FleetEfficiency.tsx

@@ -1,49 +1,49 @@
-const FleetEfficiency = () => {
+const FleetEfficiency = () => {
-  const progress = 50; // Example progress value (0-100)
+  const progress = 50; // Example progress value (0-100)
-
+
-  // Calculate the rotation angle for the progress bar
+  // Calculate the rotation angle for the progress bar
-  const rotationAngle = 45 + progress * 1.8;
+  const rotationAngle = 45 + progress * 1.8;
-
+
-  const handleDragStart = (event: React.DragEvent<HTMLDivElement>) => {
+  const handleDragStart = (event: React.DragEvent<HTMLDivElement>) => {
-    const rect = event.currentTarget.getBoundingClientRect(); // Get position
+    const rect = event.currentTarget.getBoundingClientRect(); // Get position
-
+
-    const cardData = JSON.stringify({
+    const cardData = JSON.stringify({
-      className: event.currentTarget.className,
+      className: event.currentTarget.className,
-      position: [rect.top, rect.left], // Store position
+      position: [rect.top, rect.left], // Store position
-      value: rotationAngle, // Example value (you can change if dynamic)
+      value: rotationAngle, // Example value (you can change if dynamic)
-      per: progress,
+      per: progress,
-
+
-    });
+    });
-    event.dataTransfer.setData("text/plain", cardData);
+    event.dataTransfer.setData("text/plain", cardData);
-  };
+  };
-
+
-
+
-  return (
+  return (
-    <div className="fleetEfficiency floating" draggable onDragStart={handleDragStart}>
+    <div className="fleetEfficiency floating" draggable onDragStart={handleDragStart}>
-      <h2 className="header">Fleet Efficiency</h2>
+      <h2 className="header">Fleet Efficiency</h2>
-
+
-      <div className="progressContainer">
+      <div className="progressContainer">
-        <div className="progress">
+        <div className="progress">
-          <div className="barOverflow">
+          <div className="barOverflow">
-            {/* Apply dynamic rotation to the bar */}
+            {/* Apply dynamic rotation to the bar */}
-            <div
+            <div
-              className="bar"
+              className="bar"
-              style={{ transform: `rotate(${rotationAngle}deg)` }}
+              style={{ transform: `rotate(${rotationAngle}deg)` }}
-            ></div>
+            ></div>
-          </div>
+          </div>
-        </div>
+        </div>
-      </div>
+      </div>
-
+
-      <div className="scaleLabels">
+      <div className="scaleLabels">
-        <span>0%</span>
+        <span>0%</span>
-        <div className="centerText">
+        <div className="centerText">
-          <div className="percentage">{progress}%</div>
+          <div className="percentage">{progress}%</div>
-          <div className="status">Optimal</div>
+          <div className="status">Optimal</div>
-        </div>
+        </div>
-        <span>100%</span>
+        <span>100%</span>
-      </div>
+      </div>
-    </div>
+    </div>
-  );
+  );
-};
+};
-
+
-export default FleetEfficiency;
+export default FleetEfficiency;

app/src/modules/visualization/widgets/floating/cards/FleetEfficiencyComponent.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react'
 import { Line } from 'react-chartjs-2'
-import useChartStore from '../../../../store/useChartStore';
+import useChartStore from '../../../../../store/useChartStore';
-import { useWidgetStore } from '../../../../store/useWidgetStore';
+import { useWidgetStore } from '../../../../../store/useWidgetStore';
 import axios from 'axios';
 import io from "socket.io-client";
 
@@ -41,7 +41,7 @@ const FleetEfficiencyComponent = ({object}: any) => {
     
         socket.on("lastOutput", (response) => {
           const responseData = response.input1;
-          console.log(responseData);
+          // console.log(responseData);
           
           if (typeof responseData === "number") {
             console.log("It's a number!");

app/src/modules/visualization/widgets/floating/cards/ProductivityDashboard.tsx

@@ -1,86 +1,86 @@
-import React from "react";
+import React from "react";
-
+
-
+
-interface ProductivityData {
+interface ProductivityData {
-  distancePerTask: number;
+  distancePerTask: number;
-  spaceUtilization: number;
+  spaceUtilization: number;
-  taskCompletionTime: string;
+  taskCompletionTime: string;
-}
+}
-
+
-const ProductivityDashboard: React.FC = () => {
+const ProductivityDashboard: React.FC = () => {
-  const data: ProductivityData = {
+  const data: ProductivityData = {
-    distancePerTask: 45,
+    distancePerTask: 45,
-    spaceUtilization: 72,
+    spaceUtilization: 72,
-    taskCompletionTime: "7:44",
+    taskCompletionTime: "7:44",
-  };
+  };
-
+
-  // Function to calculate the stroke dash offset for the circular progress
+  // Function to calculate the stroke dash offset for the circular progress
-  const calculateDashOffset = (percentage: number, circumference: number) => {
+  const calculateDashOffset = (percentage: number, circumference: number) => {
-    return circumference - (percentage / 100) * circumference;
+    return circumference - (percentage / 100) * circumference;
-  };
+  };
-
+
-  // Constants for the circular progress chart
+  // Constants for the circular progress chart
-  const radius = 60; // Radius of the circle
+  const radius = 60; // Radius of the circle
-  const strokeWidth = 10; // Thickness of the stroke
+  const strokeWidth = 10; // Thickness of the stroke
-  const diameter = radius * 2; // Diameter of the circle
+  const diameter = radius * 2; // Diameter of the circle
-  const circumference = Math.PI * (radius * 2); // Circumference of the circle
+  const circumference = Math.PI * (radius * 2); // Circumference of the circle
-
+
-  return (
+  return (
-    <div className="productivity-dashboard">
+    <div className="productivity-dashboard">
-      <header>
+      <header>
-        <h2>Productivity</h2>
+        <h2>Productivity</h2>
-        <div className="options">...</div>
+        <div className="options">...</div>
-      </header>
+      </header>
-      <main>
+      <main>
-        <section className="metrics">
+        <section className="metrics">
-          <div className="metric">
+          <div className="metric">
-            <p className="label">Distance per Task</p>
+            <p className="label">Distance per Task</p>
-            <p className="value">{data.distancePerTask} m</p>
+            <p className="value">{data.distancePerTask} m</p>
-          </div>
+          </div>
-          <div className="metric">
+          <div className="metric">
-            <p className="label">Space Utilization</p>
+            <p className="label">Space Utilization</p>
-            <p className="value">{data.spaceUtilization}%</p>
+            <p className="value">{data.spaceUtilization}%</p>
-          </div>
+          </div>
-        </section>
+        </section>
-        <section className="chart-section">
+        <section className="chart-section">
-          <svg
+          <svg
-            className="progress-circle"
+            className="progress-circle"
-            width={diameter}
+            width={diameter}
-            height={diameter}
+            height={diameter}
-            viewBox={`0 0 ${diameter} ${diameter}`}
+            viewBox={`0 0 ${diameter} ${diameter}`}
-          >
+          >
-            {/* Background Circle */}
+            {/* Background Circle */}
-            <circle
+            <circle
-              cx={radius}
+              cx={radius}
-              cy={radius}
+              cy={radius}
-              r={radius - strokeWidth / 2}
+              r={radius - strokeWidth / 2}
-              fill="transparent"
+              fill="transparent"
-              stroke="#6c757d"
+              stroke="#6c757d"
-              strokeWidth={strokeWidth}
+              strokeWidth={strokeWidth}
-            />
+            />
-            {/* Progress Circle */}
+            {/* Progress Circle */}
-            <circle
+            <circle
-              cx={radius}
+              cx={radius}
-              cy={radius}
+              cy={radius}
-              r={radius - strokeWidth / 2}
+              r={radius - strokeWidth / 2}
-              fill="transparent"
+              fill="transparent"
-              stroke="#2ecc71"
+              stroke="#2ecc71"
-              strokeWidth={strokeWidth}
+              strokeWidth={strokeWidth}
-              strokeDasharray={circumference}
+              strokeDasharray={circumference}
-              strokeDashoffset={calculateDashOffset(data.spaceUtilization, circumference)}
+              strokeDashoffset={calculateDashOffset(data.spaceUtilization, circumference)}
-              strokeLinecap="round"
+              strokeLinecap="round"
-              transform={`rotate(-90 ${radius} ${radius})`}
+              transform={`rotate(-90 ${radius} ${radius})`}
-            />
+            />
-          </svg>
+          </svg>
-          <div className="chart-details">
+          <div className="chart-details">
-            <p className="title">Task Completion Time</p>
+            <p className="title">Task Completion Time</p>
-            <p className="time">{data.taskCompletionTime}</p>
+            <p className="time">{data.taskCompletionTime}</p>
-            <p className="subtitle">Total Score</p>
+            <p className="subtitle">Total Score</p>
-          </div>
+          </div>
-        </section>
+        </section>
-      </main>
+      </main>
-    </div>
+    </div>
-  );
+  );
-};
+};
-
+
 export default ProductivityDashboard;

app/src/modules/visualization/widgets/floating/cards/SimpleCard.tsx

@@ -1,55 +1,58 @@
-import React from "react";
+import React from "react";
-
+
-interface SimpleCardProps {
+interface SimpleCardProps {
-  header: string;
+  header: string;
-  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>; // React component for SVG icon
+  icon: React.ElementType; // React component for SVG icon
-  value: string;
+  iconName?: string;
-  per: string; // Percentage change
+  value: string;
-  position?: [number, number];
+  per: string; // Percentage change
-}
+  position?: [number, number];
-
+}
-const SimpleCard: React.FC<SimpleCardProps> = ({
+
-  header,
+const SimpleCard: React.FC<SimpleCardProps> = ({
-  icon: Icon,
+  header,
-  value,
+  icon: Icon,
-  per,
+  iconName,
-  position = [0, 0],
+  value,
-}) => {
+  per,
-  const handleDragStart = (event: React.DragEvent<HTMLDivElement>) => {
+  position = [0, 0],
-    const rect = event.currentTarget.getBoundingClientRect(); // Get position
+}) => {
-    const cardData = JSON.stringify({
+  const handleDragStart = (event: React.DragEvent<HTMLDivElement>) => {
-      header,
+    const rect = event.currentTarget.getBoundingClientRect(); // Get position
-      value,
+
-      per,
+    const cardData = JSON.stringify({
-      icon: Icon,
+      header,
-
+      value,
-      className: event.currentTarget.className,
+      per,
-      position: [rect.top, rect.left], // ✅ Store position
+      iconName: iconName || "UnknownIcon", // Use the custom iconName
-    });
+      className: event.currentTarget.className,
-
+      position: [rect.top, rect.left], // ✅ Store position
-    event.dataTransfer.setData("text/plain", cardData);
+    });
-  };
+
-
+    event.dataTransfer.setData("text/plain", cardData);
-  return (
+    console.log("cardData: ", cardData);
-    <div
+  };
-      className="floating total-card"
+
-      draggable
+  return (
-      onDragStart={handleDragStart}
+    <div
-      style={{ top: position[0], left: position[1] }} // No need for ?? 0 if position is guaranteed
+      className="floating total-card"
-    >
+      draggable
-      <div className="header-wrapper">
+      onDragStart={handleDragStart}
-        <div className="header">{header}</div>
+      style={{ top: position[0], left: position[1] }} // No need for ?? 0 if position is guaranteed
-        <div className="data-values">
+    >
-          <div className="value">{value}</div>
+      <div className="header-wrapper">
-          <div className="per">{per}</div>
+        <div className="header">{header}</div>
-        </div>
+        <div className="data-values">
-      </div>
+          <div className="value">{value}</div>
-
+          <div className="per">{per}</div>
-      <div className="icon">
+        </div>
-        <Icon />
+      </div>
-      </div>
+
-    </div>
+      <div className="icon">
-  );
+        <Icon />
-};
+      </div>
-
+    </div>
-export default SimpleCard;
+  );
+};
+
+export default SimpleCard;

app/src/modules/visualization/widgets/floating/cards/TotalCardComponent.tsx

@@ -1,10 +1,15 @@
 import React, { useState, useEffect } from "react";
 import { Line } from "react-chartjs-2";
-import useChartStore from "../../../../store/useChartStore";
+import useChartStore from "../../../../../store/useChartStore";
-import { useWidgetStore } from "../../../../store/useWidgetStore";
+import { useWidgetStore } from "../../../../../store/useWidgetStore";
 import axios from "axios";
 import io from "socket.io-client";
-import { WalletIcon } from "../../../icons/3dChartIcons";
+import {
+  CartIcon,
+  DocumentIcon,
+  GlobeIcon,
+  WalletIcon,
+} from "../../../../../components/icons/3dChartIcons";
 
 const TotalCardComponent = ({ object }: any) => {
   const [progress, setProgress] = useState<any>(0);
@@ -77,6 +82,20 @@ const TotalCardComponent = ({ object }: any) => {
     }
   }, [header, flotingDuration, flotingMeasurements]);
 
+  const mapIcon = (iconName: string) => {
+    switch (iconName) {
+      case "WalletIcon":
+        return <WalletIcon />;
+      case "GlobeIcon":
+        return <GlobeIcon />;
+      case "DocumentIcon":
+        return <DocumentIcon />;
+      case "CartIcon":
+        return <CartIcon />;
+      default:
+        return <WalletIcon />;
+    }
+  };
   return (
     <>
       <div className="header-wrapper">
@@ -86,9 +105,7 @@ const TotalCardComponent = ({ object }: any) => {
           <div className="per">{object.per}</div>
         </div>
       </div>
-      <div className="icon">
+      <div className="icon">{mapIcon(object.iconName)}</div>
-        <WalletIcon />
-      </div>
     </>
   );
 };

app/src/modules/visualization/widgets/floating/cards/WarehouseThroughput.tsx

@@ -1,149 +1,149 @@
-import React from "react";
+import React from "react";
-import { Line } from "react-chartjs-2";
+import { Line } from "react-chartjs-2";
-import {
+import {
-  Chart as ChartJS,
+  Chart as ChartJS,
-  CategoryScale,
+  CategoryScale,
-  LinearScale,
+  LinearScale,
-  PointElement,
+  PointElement,
-  LineElement,
+  LineElement,
-  Title,
+  Title,
-  Tooltip,
+  Tooltip,
-  Legend,
+  Legend,
-  Filler, // Import Filler for area fill
+  Filler, // Import Filler for area fill
-} from "chart.js";
+} from "chart.js";
-
+
-// Register ChartJS components
+// Register ChartJS components
-ChartJS.register(
+ChartJS.register(
-  CategoryScale,
+  CategoryScale,
-  LinearScale,
+  LinearScale,
-  PointElement,
+  PointElement,
-  LineElement,
+  LineElement,
-  Title,
+  Title,
-  Tooltip,
+  Tooltip,
-  Legend,
+  Legend,
-  Filler
+  Filler
-);
+);
-
+
-const WarehouseThroughput = () => {
+const WarehouseThroughput = () => {
-  // Line graph data for a year (monthly throughput)
+  // Line graph data for a year (monthly throughput)
-  const lineGraphData = {
+  const lineGraphData = {
-    labels: [
+    labels: [
-      "Jan",
+      "Jan",
-      "Feb",
+      "Feb",
-      "Mar",
+      "Mar",
-      "Apr",
+      "Apr",
-      "May",
+      "May",
-      "Jun",
+      "Jun",
-      "Jul",
+      "Jul",
-      "Aug",
+      "Aug",
-      "Sep",
+      "Sep",
-      "Oct",
+      "Oct",
-      "Nov",
+      "Nov",
-      "Dec",
+      "Dec",
-    ], // Months of the year
+    ], // Months of the year
-    datasets: [
+    datasets: [
-      {
+      {
-        label: "Throughput (units/month)",
+        label: "Throughput (units/month)",
-        data: [500, 400, 300, 450, 350, 250, 200, 300, 250, 150, 100, 150], // Example monthly data
+        data: [500, 400, 300, 450, 350, 250, 200, 300, 250, 150, 100, 150], // Example monthly data
-        borderColor: "#6f42c1", // Use the desired color for the line (purple)
+        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
+        backgroundColor: "rgba(111, 66, 193, 0.2)", // Use a semi-transparent purple for the fill
-        borderWidth: 2, // Line thickness
+        borderWidth: 2, // Line thickness
-        fill: true, // Enable fill for this dataset
+        fill: true, // Enable fill for this dataset
-        pointRadius: 0, // Remove dots at each data point
+        pointRadius: 0, // Remove dots at each data point
-        tension: 0.5, // Smooth interpolation for the line
+        tension: 0.5, // Smooth interpolation for the line
-      },
+      },
-    ],
+    ],
-  };
+  };
-
+
-  // Line graph options
+  // Line graph options
-  const lineGraphOptions = {
+  const lineGraphOptions = {
-    responsive: true,
+    responsive: true,
-    maintainAspectRatio: false, // Allow custom height/width adjustments
+    maintainAspectRatio: false, // Allow custom height/width adjustments
-    plugins: {
+    plugins: {
-      legend: {
+      legend: {
-        display: false, // Hide legend
+        display: false, // Hide legend
-      },
+      },
-      title: {
+      title: {
-        display: false, // No chart title needed
+        display: false, // No chart title needed
-      },
+      },
-      tooltip: {
+      tooltip: {
-        callbacks: {
+        callbacks: {
-          label: (context: any) => {
+          label: (context: any) => {
-            const value = context.parsed.y;
+            const value = context.parsed.y;
-            return `${value} units`; // Customize tooltip to display "units"
+            return `${value} units`; // Customize tooltip to display "units"
-          },
+          },
-        },
+        },
-      },
+      },
-    },
+    },
-    scales: {
+    scales: {
-      x: {
+      x: {
-        grid: {
+        grid: {
-          display: false, // Hide x-axis grid lines
+          display: false, // Hide x-axis grid lines
-        },
+        },
-        ticks: {
+        ticks: {
-          maxRotation: 0, // Prevent label rotation
+          maxRotation: 0, // Prevent label rotation
-          autoSkip: false, // Display all months
+          autoSkip: false, // Display all months
-          font: {
+          font: {
-            size: 8, // Adjust font size for readability
+            size: 8, // Adjust font size for readability
-            color: "#ffffff", // Light text color for labels
+            color: "#ffffff", // Light text color for labels
-          },
+          },
-        },
+        },
-      },
+      },
-      y: {
+      y: {
-        display: true, // Show y-axis
+        display: true, // Show y-axis
-        grid: {
+        grid: {
-          drawBorder: false, // Remove border line
+          drawBorder: false, // Remove border line
-          color: "rgba(255, 255, 255, 0.2)", // Light gray color for grid lines
+          color: "rgba(255, 255, 255, 0.2)", // Light gray color for grid lines
-          borderDash: [5, 5], // Dotted line style (array defines dash and gap lengths)
+          borderDash: [5, 5], // Dotted line style (array defines dash and gap lengths)
-        },
+        },
-        ticks: {
+        ticks: {
-          font: {
+          font: {
-            size: 8, // Adjust font size for readability
+            size: 8, // Adjust font size for readability
-            color: "#ffffff", // Light text color for ticks
+            color: "#ffffff", // Light text color for ticks
-          },
+          },
-        },
+        },
-      },
+      },
-    },
+    },
-    elements: {
+    elements: {
-      line: {
+      line: {
-        tension: 0.5, // Smooth interpolation for the line
+        tension: 0.5, // Smooth interpolation for the line
-      },
+      },
-    },
+    },
-  };
+  };
-
+
-  const handleDragStart = (event: React.DragEvent<HTMLDivElement>) => {
+  const handleDragStart = (event: React.DragEvent<HTMLDivElement>) => {
-    const rect = event.currentTarget.getBoundingClientRect(); // Get element position
+    const rect = event.currentTarget.getBoundingClientRect(); // Get element position
-
+
-    const cardData = JSON.stringify({
+    const cardData = JSON.stringify({
-      header: "Warehouse Throughput", // Static header
+      header: "Warehouse Throughput", // Static header
-      value: "+5", // Example value (you can change if dynamic)
+      value: "+5", // Example value (you can change if dynamic)
-      per: "2025", // Example percentage or date
+      per: "2025", // Example percentage or date
-      icon: "📊", // Placeholder for an icon (if needed)
+      icon: "📊", // Placeholder for an icon (if needed)
-      className: event.currentTarget.className,
+      className: event.currentTarget.className,
-      position: [rect.top, rect.left], // ✅ Store initial position
+      position: [rect.top, rect.left], // ✅ Store initial position
-      lineGraphData, // ✅ Include chart data
+      lineGraphData, // ✅ Include chart data
-      lineGraphOptions, // ✅ Include chart options
+      lineGraphOptions, // ✅ Include chart options
-    });
+    });
-
+
-
+
-    event.dataTransfer.setData("text/plain", cardData);
+    event.dataTransfer.setData("text/plain", cardData);
-    // event.dataTransfer.effectAllowed = "move"; // Improve drag effect
+    // event.dataTransfer.effectAllowed = "move"; // Improve drag effect
-  };
+  };
-
+
-  return (
+  return (
-    <div className="warehouseThroughput floating" style={{ minHeight: "160px !important" }} draggable onDragStart={handleDragStart}>
+    <div className="warehouseThroughput floating" style={{ minHeight: "160px !important" }} draggable onDragStart={handleDragStart}>
-      <div className="header">
+      <div className="header">
-        <h2>Warehouse Throughput</h2>
+        <h2>Warehouse Throughput</h2>
-        <p>
+        <p>
-          <span>(+5) more</span> in 2025
+          <span>(+5) more</span> in 2025
-        </p>
+        </p>
-      </div>
+      </div>
-      <div className="lineGraph" style={{ height: "100%" }}>
+      <div className="lineGraph" style={{ height: "100%" }}>
-        {/* Line Graph */}
+        {/* Line Graph */}
-        <Line data={lineGraphData} options={lineGraphOptions} />
+        <Line data={lineGraphData} options={lineGraphOptions} />
-      </div>
+      </div>
-    </div>
+    </div>
-  );
+  );
-};
+};
-
+
-export default WarehouseThroughput;
+export default WarehouseThroughput;

app/src/modules/visualization/widgets/floating/cards/WarehouseThroughputComponent.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react'
 import { Line } from 'react-chartjs-2'
-import useChartStore from '../../../../store/useChartStore';
+import useChartStore from '../../../../../store/useChartStore';
-import { useWidgetStore } from '../../../../store/useWidgetStore';
+import { useWidgetStore } from '../../../../../store/useWidgetStore';
 import axios from 'axios';
 import io from "socket.io-client";
 

app/src/modules/visualization/widgets/panel/AddButtons.tsx

@@ -3,11 +3,11 @@ import {
   CleanPannel,
   EyeIcon,
   LockIcon,
-} from "../../icons/RealTimeVisulationIcons";
+} from "../../../../components/icons/RealTimeVisulationIcons";
-import { AddIcon } from "../../icons/ExportCommonIcons";
+import { AddIcon } from "../../../../components/icons/ExportCommonIcons";
-import { useSocketStore } from "../../../store/store";
+import { useSocketStore } from "../../../../store/store";
-import { clearPanel } from "../../../services/realTimeVisulization/zoneData/clearPanel";
+import { clearPanel } from "../../../../services/realTimeVisulization/zoneData/clearPanel";
-import { lockPanel } from "../../../services/realTimeVisulization/zoneData/lockPanel";
+import { lockPanel } from "../../../../services/realTimeVisulization/zoneData/lockPanel";
 
 // Define the type for `Side`
 type Side = "top" | "bottom" | "left" | "right";

app/src/modules/visualization/widgets/panel/Panel.tsx

@@ -1,10 +1,10 @@
 import React, { useEffect, useMemo, useRef, useState } from "react";
-import { useWidgetStore } from "../../../store/useWidgetStore";
+
-import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
-import { DraggableWidget } from "./DraggableWidget";
 import { arrayMove } from "@dnd-kit/sortable";
-import { addingWidgets } from "../../../services/realTimeVisulization/zoneData/addWidgets";
+import { useAsset3dWidget, useSocketStore } from "../../../../store/store";
-import { useAsset3dWidget, useSocketStore } from "../../../store/store";
+import { usePlayButtonStore } from "../../../../store/usePlayButtonStore";
+import { useWidgetStore } from "../../../../store/useWidgetStore";
+import { DraggableWidget } from "../2d/DraggableWidget";
 
 type Side = "top" | "bottom" | "left" | "right";
 
@@ -22,7 +22,7 @@ interface PanelProps {
     activeSides: Side[];
     panelOrder: Side[];
     lockedPanels: Side[];
-    points:[];
+    points: [];
     zoneId: string;
     zoneViewPortTarget: number[];
     zoneViewPortPosition: number[];
@@ -34,7 +34,7 @@ interface PanelProps {
       activeSides: Side[];
       panelOrder: Side[];
       lockedPanels: Side[];
-      points:[];
+      points: [];
       zoneId: string;
       zoneViewPortTarget: number[];
       zoneViewPortPosition: number[];
@@ -108,9 +108,8 @@ const Panel: React.FC<PanelProps> = ({
         case "bottom":
           return {
             minWidth: "170px",
-            width: `calc(100% - ${
+            width: `calc(100% - ${(leftActive ? panelSize : 0) + (rightActive ? panelSize : 0)
-              (leftActive ? panelSize : 0) + (rightActive ? panelSize : 0)
+              }px)`,
-            }px)`,
             minHeight: "170px",
             height: `${panelSize}px`,
             left: leftActive ? `${panelSize}px` : "0",
@@ -123,9 +122,8 @@ const Panel: React.FC<PanelProps> = ({
             minWidth: "170px",
             width: `${panelSize}px`,
             minHeight: "170px",
-            height: `calc(100% - ${
+            height: `calc(100% - ${(topActive ? panelSize : 0) + (bottomActive ? panelSize : 0)
-              (topActive ? panelSize : 0) + (bottomActive ? panelSize : 0)
+              }px)`,
-            }px)`,
             top: topActive ? `${panelSize}px` : "0",
             bottom: bottomActive ? `${panelSize}px` : "0",
             [side]: "0",
@@ -151,6 +149,7 @@ const Panel: React.FC<PanelProps> = ({
     const currentWidgetsCount = getCurrentWidgetCount(panel);
     const maxCapacity = calculatePanelCapacity(panel);
 
+
     if (currentWidgetsCount < maxCapacity) {
       addWidgetToPanel(draggedAsset, panel);
     }
@@ -284,9 +283,8 @@ const Panel: React.FC<PanelProps> = ({
         <div
           key={side}
           id="panel-wrapper"
-          className={`panel ${side}-panel absolute ${
+          className={`panel ${side}-panel absolute ${hiddenPanels[selectedZone.zoneId]?.includes(side) ? "hidePanel" : ""
-            hiddenPanels[selectedZone.zoneId]?.includes(side) ? "hidePanel" : ""
+            }`}
-          }`}
           style={getPanelStyle(side)}
           onDrop={(e) => handleDrop(e, side)}
           onDragOver={(e) => e.preventDefault()}
@@ -303,7 +301,7 @@ const Panel: React.FC<PanelProps> = ({
             style={{
               pointerEvents:
                 selectedZone.lockedPanels.includes(side) ||
-                hiddenPanels[selectedZone.zoneId]?.includes(side)
+                  hiddenPanels[selectedZone.zoneId]?.includes(side)
                   ? "none"
                   : "auto",
               opacity: selectedZone.lockedPanels.includes(side) ? "0.8" : "1",

app/src/modules/visualization/zoneAssets.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useRef } from 'react'
-import { useSelectedFloorItem, useZoneAssetId } from '../../../store/store';
+import { useSelectedFloorItem, useZoneAssetId } from '../../store/store';
 import * as THREE from "three";
 import { useThree } from '@react-three/fiber';
-import * as Types from "../../../types/world/worldTypes";
+import * as Types from "../../types/world/worldTypes";
 export default function ZoneAssets() {
     const { zoneAssetId, setZoneAssetId } = useZoneAssetId();
     const { setSelectedFloorItem } = useSelectedFloorItem();

app/src/pages/Project.tsx

@@ -3,7 +3,7 @@ import ModuleToggle from "../components/ui/ModuleToggle";
 import SideBarLeft from "../components/layout/sidebarLeft/SideBarLeft";
 import SideBarRight from "../components/layout/sidebarRight/SideBarRight";
 import useModuleStore, { useThreeDStore } from "../store/useModuleStore";
-import RealTimeVisulization from "../components/ui/componets/RealTimeVisulization";
+import RealTimeVisulization from "../modules/visualization/RealTimeVisulization";
 import Tools from "../components/ui/Tools";
 // import Scene from "../modules/scene/scene";
 import {

app/src/services/realTimeVisulization/zoneData/addFloatingWidgets.ts

@@ -8,7 +8,7 @@ export const addingFloatingWidgets = async (
 ) => {
   
   
-  
+
   try {
     const response = await fetch(
       `${url_Backend_dwinzo}/api/v2/floatwidget/save`,

app/src/store/useDroppedObjectsStore.ts

@@ -1,6 +1,7 @@
 import { create } from "zustand";
 import { addingFloatingWidgets } from "../services/realTimeVisulization/zoneData/addFloatingWidgets";
 import { useSocketStore } from "./store";
+import useChartStore from "./useChartStore";
 
 type DroppedObject = {
   className: string;
@@ -96,7 +97,10 @@ export const useDroppedObjectsStore = create<DroppedObjectsState>((set) => ({
     const state = useDroppedObjectsStore.getState(); // Get the current state
     const zone = state.zones[zoneName];
     let socketState = useSocketStore.getState();
+    let iotData = useChartStore.getState();
     let visualizationSocket = socketState.visualizationSocket;
+    let iotMeasurements = iotData.flotingMeasurements;
+    let iotDuration = iotData.flotingDuration;
 
     if (!zone) return;
 
@@ -109,6 +113,10 @@ export const useDroppedObjectsStore = create<DroppedObjectsState>((set) => ({
     // Create a shallow copy of the object with a unique ID and slightly adjusted position
     const duplicatedObject: DroppedObject = {
       ...originalObject,
+      Data:{
+        measurements: iotMeasurements,
+        duration: iotDuration,
+      },
       id: `${originalObject.id}-copy-${Date.now()}`, // Unique ID
       position: {
         ...originalObject.position,
@@ -122,7 +130,8 @@ export const useDroppedObjectsStore = create<DroppedObjectsState>((set) => ({
             : originalObject.position.left,
       },
     };
-
+    console.log("duplicated object",duplicatedObject);
+    
     let duplicateFloatingWidget = {
       organization: organization,
       widget: duplicatedObject,

app/src/store/useWidgetStore.ts

@@ -8,22 +8,8 @@ export interface Widget {
   fontFamily?: string;
   fontSize?: string;
   fontWeight?: string;
-  data: {
+  data?: any;
-    // Chart data
+  Data?:any;
-    labels?: string[];
-    datasets?: Array<{
-      data: number[];
-      backgroundColor: string;
-      borderColor: string;
-      borderWidth: number;
-    }>;
-    // Progress card data
-    stocks?: Array<{
-      key: string;
-      value: number;
-      description: string;
-    }>;
-  };
 }
 
 interface WidgetStore {

app/src/styles/layout/sidebar.scss

@@ -130,13 +130,15 @@
         grid-column: 1 / -1;
       }
 
-      .widget-left-sideBar {
+      .widgets-wrapper {
-        .widgets-wrapper {
+
+        min-height: 50vh;
+        max-height: 60vh;
+        overflow: auto;
+      }
+
+      .widget-left-sideBar {
 
-          min-height: 50vh;
-          max-height: 60vh;
-          overflow: auto;
-        }
 
         .widget2D {
           overflow: auto;
@@ -1088,43 +1090,51 @@
           right: -10px;
           transform: translate(0, -50%);
         }
-        &:nth-child(1), &:nth-child(9) {
+
+        &:nth-child(1),
+        &:nth-child(9) {
           &::after {
             @include gradient-by-child(1); // First child uses the first color
           }
         }
 
-        &:nth-child(2), &:nth-child(10) {
+        &:nth-child(2),
+        &:nth-child(10) {
           &::after {
             @include gradient-by-child(2); // Second child uses the second color
           }
         }
 
-        &:nth-child(3), &:nth-child(11) {
+        &:nth-child(3),
+        &:nth-child(11) {
           &::after {
             @include gradient-by-child(3); // Third child uses the third color
           }
         }
 
-        &:nth-child(4), &:nth-child(12) {
+        &:nth-child(4),
+        &:nth-child(12) {
           &::after {
             @include gradient-by-child(4); // Fourth child uses the fourth color
           }
         }
 
-        &:nth-child(5), &:nth-child(13) {
+        &:nth-child(5),
+        &:nth-child(13) {
           &::after {
             @include gradient-by-child(5); // Fifth child uses the fifth color
           }
         }
 
-        &:nth-child(6), &:nth-child(14) {
+        &:nth-child(6),
+        &:nth-child(14) {
           &::after {
             @include gradient-by-child(6); // Fifth child uses the fifth color
           }
         }
 
-        &:nth-child(7), &:nth-child(15) {
+        &:nth-child(7),
+        &:nth-child(15) {
           &::after {
             @include gradient-by-child(7); // Fifth child uses the fifth color
           }
@@ -1160,6 +1170,7 @@
         position: relative;
         overflow: hidden;
         padding: 0;
+
         &:hover {
           .asset-name {
             opacity: 1;
@@ -1173,21 +1184,24 @@
           padding: 8px;
           width: 100%;
           font-size: var(--font-size-regular);
-          background: color-mix(
+          background: color-mix(in srgb,
-            in srgb,
+              var(--background-color) 40%,
-            var(--background-color) 40%,
+              transparent);
-            transparent
-          );
           backdrop-filter: blur(5px);
           opacity: 0;
           transition: opacity 0.3s ease;
 
           /* Added properties for ellipsis */
-          display: -webkit-box; /* Necessary for multiline truncation */
+          display: -webkit-box;
-          -webkit-line-clamp: 2; /* Number of lines to show */
+          /* Necessary for multiline truncation */
-          -webkit-box-orient: vertical; /* Box orientation for the ellipsis */
+          -webkit-line-clamp: 2;
-          overflow: hidden; /* Hide overflowing content */
+          /* Number of lines to show */
-          text-overflow: ellipsis; /* Add ellipsis for truncated content */
+          -webkit-box-orient: vertical;
+          /* Box orientation for the ellipsis */
+          overflow: hidden;
+          /* Hide overflowing content */
+          text-overflow: ellipsis;
+          /* Add ellipsis for truncated content */
         }
 
         .asset-image {
@@ -1257,4 +1271,4 @@
   .assets-wrapper {
     margin: 0;
   }
-}
+}

app/src/styles/pages/realTimeViz.scss

@@ -285,9 +285,6 @@
         }
       }
 
-      .chart-container.notLinked {
-        border-color: red;
-      }
 
       .close-btn {
         position: absolute;
@@ -755,6 +752,13 @@
   z-index: 2 !important;
 }
 
+.chart-container.notLinked {
+
+  outline: 1px solid red;
+
+
+}
+
 .connectionSuccess {
   outline-color: #43c06d;
 }