fixed floting and 3d widget buges

app/.env

@@ -2,10 +2,10 @@
 PORT=8200 
 
 # Base URL for the server socket API, used for real-time communication (e.g., WebSockets).
-REACT_APP_SERVER_SOCKET_API_BASE_URL=192.168.0.111:8000
+REACT_APP_SERVER_SOCKET_API_BASE_URL=185.100.212.76:8000
 
 # Base URL for the server REST API, used for HTTP requests to the backend server.
-REACT_APP_SERVER_REST_API_BASE_URL=192.168.0.111:5000
+REACT_APP_SERVER_REST_API_BASE_URL=185.100.212.76:5000
 
 # Base URL for the server marketplace, used for market place model blob.
 REACT_APP_SERVER_MARKETPLACE_URL=185.100.212.76:50011

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

@@ -31,6 +31,7 @@ interface ProductionCapacityProps {
   type: string;
   position: [number, number, number];
   rotation: [number, number, number];
+  Data?: any,
   onContextMenu?: (event: React.MouseEvent) => void;
   // onPointerDown:any
 }
@@ -38,6 +39,7 @@ interface ProductionCapacityProps {
 const ProductionCapacity: React.FC<ProductionCapacityProps> = ({
   id,
   type,
+  Data,
   position,
   rotation,
   onContextMenu,
@@ -48,8 +50,8 @@ const ProductionCapacity: React.FC<ProductionCapacityProps> = ({
     duration: chartDuration,
     name: widgetName,
   } = useChartStore();
-  const [measurements, setmeasurements] = useState<any>({});
+  const [measurements, setmeasurements] = useState<any>(Data?.measurements ? Data.measurements : {});
-  const [duration, setDuration] = useState("1h");
+  const [duration, setDuration] = useState(Data?.duration ? Data.duration : "1h");
   const [name, setName] = useState("Widget");
   const [chartData, setChartData] = useState<{
     labels: string[];

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

@@ -44,11 +44,13 @@ interface ReturnOfInvestmentProps {
   type: string;
   position: [number, number, number];
   rotation: [number, number, number];
+  Data?: any;
   onContextMenu?: (event: React.MouseEvent) => void;
 }
 const ReturnOfInvestment: React.FC<ReturnOfInvestmentProps> = ({
   id,
   type,
+  Data,
   position,
   rotation,
   onContextMenu,
@@ -59,8 +61,8 @@ const ReturnOfInvestment: React.FC<ReturnOfInvestmentProps> = ({
     duration: chartDuration,
     name: widgetName,
   } = useChartStore();
-  const [measurements, setmeasurements] = useState<any>({});
+  const [measurements, setmeasurements] = useState<any>(Data?.measurements ? Data.measurements : {});
-  const [duration, setDuration] = useState("1h");
+  const [duration, setDuration] = useState(Data?.duration ? Data.duration : "1h");
   const [name, setName] = useState("Widget");
   const [chartData, setChartData] = useState<{
     labels: string[];

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

@@ -11,11 +11,13 @@ interface StateWorkingProps {
   type: string;
   position: [number, number, number];
   rotation: [number, number, number];
+  Data?:any;
   onContextMenu?: (event: React.MouseEvent) => void;
 }
 const StateWorking: React.FC<StateWorkingProps> = ({
   id,
   type,
+  Data,
   position,
   rotation,
   onContextMenu,
@@ -26,8 +28,8 @@ const StateWorking: React.FC<StateWorkingProps> = ({
     duration: chartDuration,
     name: widgetName,
   } = useChartStore();
-  const [measurements, setmeasurements] = useState<any>({});
+  const [measurements, setmeasurements] = useState<any>(Data?.measurements ? Data.measurements : {});
-  const [duration, setDuration] = useState("1h");
+  const [duration, setDuration] = useState(Data?.duration ? Data.duration : "1h");
   const [name, setName] = useState("Widget");
   const [datas, setDatas] = useState<any>({});
   const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;

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

@@ -46,12 +46,14 @@ interface ThroughputProps {
   type: string;
   position: [number, number, number];
   rotation: [number, number, number];
+  Data?:any;
   onContextMenu?: (event: React.MouseEvent) => void;
 }
 
 const Throughput: React.FC<ThroughputProps> = ({
   id,
   type,
+  Data,
   position,
   rotation,
   onContextMenu,
@@ -62,8 +64,8 @@ const Throughput: React.FC<ThroughputProps> = ({
     duration: chartDuration,
     name: widgetName,
   } = useChartStore();
-  const [measurements, setmeasurements] = useState<any>({});
+  const [measurements, setmeasurements] = useState<any>(Data?.measurements ? Data.measurements : {});
-  const [duration, setDuration] = useState("1h");
+  const [duration, setDuration] = useState(Data?.duration ? Data.duration : "1h");
   const [name, setName] = useState("Widget");
   const [chartData, setChartData] = useState<{
     labels: string[];

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/sidebarRight/visualization/IotInputCards/BarChartInput.tsx

@@ -61,20 +61,11 @@ const BarChartInput = (props: Props) => {
 
   }, [selectedChartId.id]);
 
-  useEffect(() => {
-    setMeasurements(selections);
-    updateDuration(duration);
-    updateName(widgetName);
-    console.log('Initial set state');
-  }, []);
-
   // Sync Zustand state when component mounts
   useEffect(() => {
     setMeasurements(selections);
     updateDuration(duration);
     updateName(widgetName);
-    console.log('change set state');
-    
   }, [selections, duration, widgetName]);
 
 

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

@@ -5,6 +5,7 @@ import {
     useSocketStore,
     useWidgetSubOption,
 } from "../../../store/store";
+import useChartStore from "../../../store/useChartStore";
 import useModuleStore from "../../../store/useModuleStore";
 import { ThreeState } from "../../../types/world/worldTypes";
 import * as THREE from "three";
@@ -30,6 +31,7 @@ import {
     update3dWidget,
     update3dWidgetRotation,
 } from "../../../services/realTimeVisulization/zoneData/update3dWidget";
+import { useWidgetStore } from "../../../store/useWidgetStore";
 type WidgetData = {
     id: string;
     type: string;
@@ -57,6 +59,8 @@ 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();
 
     const activeZoneWidgets = zoneWidgetData[selectedZone.zoneId] || [];
     useEffect(() => {
@@ -240,8 +244,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: [
@@ -250,6 +256,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,
@@ -497,8 +507,9 @@ export default function Dropped3dWidgets() {
     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"
@@ -522,6 +533,7 @@ export default function Dropped3dWidgets() {
                                     type={type}
                                     position={position}
                                     rotation={rotation}
+                                    Data={Data}
                                     onContextMenu={(e) => handleRightClick(e, id)}
                                 />
                             );
@@ -533,6 +545,7 @@ export default function Dropped3dWidgets() {
                                     type={type}
                                     position={position}
                                     rotation={rotation}
+                                    Data={Data}
                                     onContextMenu={(e) => handleRightClick(e, id)}
                                 />
                             );
@@ -544,6 +557,7 @@ export default function Dropped3dWidgets() {
                                     type={type}
                                     position={position}
                                     rotation={rotation}
+                                    Data={Data}
                                     onContextMenu={(e) => handleRightClick(e, id)}
                                 />
                             );
@@ -555,6 +569,7 @@ export default function Dropped3dWidgets() {
                                     type={type}
                                     position={position}
                                     rotation={rotation}
+                                    Data={Data}
                                     onContextMenu={(e) => handleRightClick(e, id)}
                                 />
                             );

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

@@ -160,6 +160,8 @@ const LineGraphComponent = ({
       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) {
+          console.log('line chart res',response);
+          
           setmeasurements(response.data.Data.measurements)
           setDuration(response.data.Data.duration)
           setName(response.data.widgetName)

app/src/components/ui/realTimeVis/floating/TotalCardComponent.tsx

@@ -12,7 +12,7 @@ const TotalCardComponent = ({
 }: any) => {
 
     const [ progress, setProgress ] = useState<any>(0)
-    const [measurements, setmeasurements] = useState<any>({});
+    const [measurements, setmeasurements] = useState<any>(object?.Data?.measurements ? object.Data.measurements : {});
     const [duration, setDuration] = useState("1h")
     const [name, setName] = useState(object.header ? object.header : '')
     const email = localStorage.getItem("email") || "";
@@ -61,6 +61,8 @@ const TotalCardComponent = ({
           try {
             const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/A_floatWidget/${object?.id}/${organization}`);
             if (response.status === 200) {
+              console.log(response);
+              
               setmeasurements(response.data.Data.measurements)
               setDuration(response.data.Data.duration)
               setName(response.data.header)

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,6 +130,7 @@ export const useDroppedObjectsStore = create<DroppedObjectsState>((set) => ({
             : originalObject.position.left,
       },
     };
+    console.log("duplicated object",duplicatedObject);
     
     let duplicateFloatingWidget = {
       organization: organization,

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 {