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

@@ -98,14 +98,14 @@ export const DraggableWidget = ({
         widgetID: widget.id,
         organization: organization,
       };
-      console.log("deleteWidget: ", deleteWidget);
+
       if (visualizationSocket) {
         visualizationSocket.emit("v2:viz-widget:delete", deleteWidget);
       }
       const updatedWidgets = selectedZone.widgets.filter(
         (w: Widget) => w.id !== widget.id
       );
-      console.log("updatedWidgets: ", updatedWidgets);
+
       setSelectedZone((prevZone: any) => ({
         ...prevZone,
         widgets: updatedWidgets,
@@ -250,7 +250,12 @@ export const DraggableWidget = ({
     height: 0,
   });
   // Track canvas dimensions
-  useEffect(() => {
+
+  
+
+// Current: Two identical useEffect hooks for canvas dimensions
+// Remove the duplicate and keep only one
+useEffect(() => {
   const canvas = document.getElementById("real-time-vis-canvas");
   if (!canvas) return;
 
@@ -262,43 +267,13 @@ export const DraggableWidget = ({
     });
   };
 
-    // Initial measurement
   updateCanvasDimensions();
-
-    // Set up ResizeObserver to track changes
   const resizeObserver = new ResizeObserver(updateCanvasDimensions);
   resizeObserver.observe(canvas);
 
-    return () => {
+  return () => resizeObserver.unobserve(canvas);
-      resizeObserver.unobserve(canvas);
+}, []);
-    };
-  }, []);
 
-  useEffect(() => {
-    const canvas = document.getElementById("real-time-vis-canvas");
-    if (!canvas) return;
-
-    const updateCanvasDimensions = () => {
-      const rect = canvas.getBoundingClientRect();
-      setCanvasDimensions({
-        width: rect.width,
-        height: rect.height,
-      });
-    };
-
-    // Initial measurement
-    updateCanvasDimensions();
-
-    // Set up ResizeObserver to track changes
-    const resizeObserver = new ResizeObserver(updateCanvasDimensions);
-    resizeObserver.observe(canvas);
-
-    return () => {
-      resizeObserver.unobserve(canvas);
-    };
-  }, []);
-
-  console.log("selectedChartId: ", widget);
   return (
     <>
       <style>
@@ -418,4 +393,4 @@ export const DraggableWidget = ({
   );
 };
 
-// in style if widget .panel is top or bottom set width if left or right set height
+// while resize calculate  --realTimeViz-container-height pprperly

app/src/styles/pages/realTimeViz.scss

@@ -117,6 +117,7 @@
 
   .zone-wrapper.bottom {
     bottom: calc(var(--realTimeViz-container-height) * 0.27);
+    bottom: 200px;
   }
 
   .content-container {
@@ -306,7 +307,7 @@
 
         .chart-container {
 
-          min-width: 150px;
+          min-width: 160px;
         }
       }
     }
@@ -346,11 +347,8 @@
 
         .chart-container {
           width: 100%;
-
+          min-height: 160px;
-
-          min-height: 150px;
           max-height: 100%;
-          // border: 1px dashed var(--background-color-gray);
           border-radius: 8px;
           box-shadow: var(--box-shadow-medium);
           padding: 6px 0;
@@ -370,7 +368,8 @@
 
 .playingFlase {
   .zone-wrapper.bottom {
-    bottom: calc(var(--realTimeViz-container-height) * 0.25);
+    bottom: calc(var(--realTimeViz-container-height) * 0.3);
+    bottom: 210px;
   }
 }