updated donut chart

app/src/modules/visualization/RealTimeVisulization.tsx

@@ -93,6 +93,7 @@ const RealTimeVisulization: React.FC = () => {
       "sidebar-right-wrapper",
       "card",
       "dropdown-menu",
+      "dropdown-options",
     ],
     setMenuVisible: () => setSelectedChartId(null),
   });
@@ -158,52 +159,52 @@ const RealTimeVisulization: React.FC = () => {
     try {
       const email = localStorage.getItem("email") || "";
       const organization = email?.split("@")[1]?.split(".")[0];
-  
+
       const data = event.dataTransfer.getData("text/plain");
       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 rect = canvasElement.getBoundingClientRect();
       const relativeX = event.clientX - rect.left;
       const relativeY = event.clientY - rect.top;
-  
+
       // Widget dimensions
       const widgetWidth = droppedData.width || 125;
       const widgetHeight = droppedData.height || 100;
-  
+
       // Center the widget at cursor
       const centerOffsetX = widgetWidth / 2;
       const centerOffsetY = widgetHeight / 2;
-  
+
       const adjustedX = relativeX - centerOffsetX;
       const adjustedY = relativeY - centerOffsetY;
-  
+
       const finalPosition = determinePosition(rect, adjustedX, adjustedY);
       const [activeProp1, activeProp2] = getActiveProperties(finalPosition);
-  
+
       let finalY = 0;
       let finalX = 0;
-  
+
       if (activeProp1 === "top") {
         finalY = adjustedY;
       } else {
         finalY = rect.height - (adjustedY + widgetHeight);
       }
-  
+
       if (activeProp2 === "left") {
         finalX = adjustedX;
       } else {
         finalX = rect.width - (adjustedX + widgetWidth);
       }
-  
+
       // Clamp to boundaries
       finalX = Math.max(0, Math.min(rect.width - widgetWidth, finalX));
       finalY = Math.max(0, Math.min(rect.height - widgetHeight, finalY));
-  
+
       const boundedPosition = {
         ...finalPosition,
         [activeProp1]: finalY,
@@ -211,13 +212,13 @@ const RealTimeVisulization: React.FC = () => {
         [activeProp1 === "top" ? "bottom" : "top"]: "auto",
         [activeProp2 === "left" ? "right" : "left"]: "auto",
       };
-  
+
       const newObject = {
         ...droppedData,
         id: generateUniqueId(),
         position: boundedPosition,
       };
-  
+
       const existingZone =
         useDroppedObjectsStore.getState().zones[selectedZone.zoneName];
       if (!existingZone) {
@@ -225,24 +226,24 @@ const RealTimeVisulization: React.FC = () => {
           .getState()
           .setZone(selectedZone.zoneName, selectedZone.zoneId);
       }
-  
+
       const addFloatingWidget = {
         organization,
         widget: newObject,
         zoneId: selectedZone.zoneId,
       };
-  
+
       if (visualizationSocket) {
         visualizationSocket.emit("v2:viz-float:add", addFloatingWidget);
       }
-  
+
       useDroppedObjectsStore
         .getState()
         .addObject(selectedZone.zoneName, newObject);
-  
+
       const droppedObjectsStore = useDroppedObjectsStore.getState();
       const currentZone = droppedObjectsStore.zones[selectedZone.zoneName];
-  
+
       if (currentZone && currentZone.zoneId === selectedZone.zoneId) {
         console.log(
           `Objects for Zone ${selectedZone.zoneId}:`,
@@ -256,7 +257,6 @@ const RealTimeVisulization: React.FC = () => {
       console.error("Error in handleDrop:", error);
     }
   };
-  
 
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
@@ -301,10 +301,9 @@ const RealTimeVisulization: React.FC = () => {
     return () => resizeObserver.unobserve(canvas);
   }, []);
 
-
   return (
     <>
-          <style>
+      <style>
         {`
     :root {
       --realTimeViz-container-width: ${canvasDimensions.width}px;