From 7b2d77e273d064b74e5dd065a905aa20d6171c9f Mon Sep 17 00:00:00 2001
From: Nalvazhuthi <nalvazhuthi@hexrfactory.com>
Date: Mon, 14 Apr 2025 18:14:40 +0530
Subject: [PATCH] updated donut chart

---
 .../ui/inputs/MultiLevelDropDown.tsx          |  2 +-
 .../visualization/RealTimeVisulization.tsx    | 43 +++++++++----------
 .../2d/charts/DoughnutGraphComponent.tsx      | 22 +++++-----
 3 files changed, 32 insertions(+), 35 deletions(-)

diff --git a/app/src/components/ui/inputs/MultiLevelDropDown.tsx b/app/src/components/ui/inputs/MultiLevelDropDown.tsx
index 378313c..f2be121 100644
--- a/app/src/components/ui/inputs/MultiLevelDropDown.tsx
+++ b/app/src/components/ui/inputs/MultiLevelDropDown.tsx
@@ -259,8 +259,8 @@ const MultiLevelDropdown = ({
       {open && (
         <div className="dropdown-menu">
           <div className="dropdown-content ">
-            {/* loading list */}
             
+            {/* loading list */}
             {/* <div className="loading" /> */}
 
             {/* Unselect Option */}
diff --git a/app/src/modules/visualization/RealTimeVisulization.tsx b/app/src/modules/visualization/RealTimeVisulization.tsx
index b6569c3..e039592 100644
--- a/app/src/modules/visualization/RealTimeVisulization.tsx
+++ b/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;
diff --git a/app/src/modules/visualization/widgets/2d/charts/DoughnutGraphComponent.tsx b/app/src/modules/visualization/widgets/2d/charts/DoughnutGraphComponent.tsx
index 4947b94..3108d09 100644
--- a/app/src/modules/visualization/widgets/2d/charts/DoughnutGraphComponent.tsx
+++ b/app/src/modules/visualization/widgets/2d/charts/DoughnutGraphComponent.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useState } from "react";
-import { Line } from "react-chartjs-2";
+import { Doughnut } from "react-chartjs-2";
 import io from "socket.io-client";
 
 import axios from "axios";
@@ -16,7 +16,7 @@ interface ChartComponentProps {
   fontWeight?: "Light" | "Regular" | "Bold";
 }
 
-const LineGraphComponent = ({
+const DoughnutGraphComponent = ({
   id,
   type,
   title,
@@ -52,7 +52,7 @@ const LineGraphComponent = ({
   };
 
   useEffect(() => {
-  
+   
   },[])
 
   // Memoize Theme Colors
@@ -97,11 +97,11 @@ const LineGraphComponent = ({
           },
         },
         scales: {
-          x: {
-            ticks: {
-              display: true, // This hides the x-axis labels
-            },
-          },
+          // x: {
+          //   ticks: {
+          //     display: true, // This hides the x-axis labels
+          //   },
+          // },
         },
       }),
       [title, chartFontStyle, name]
@@ -161,8 +161,6 @@ 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)
@@ -186,7 +184,7 @@ const LineGraphComponent = ({
   }
   ,[chartMeasurements, chartDuration, widgetName])
 
-  return <Line data={Object.keys(measurements).length > 0 ? chartData : defaultData} options={options} />;
+  return <Doughnut data={Object.keys(measurements).length > 0 ? chartData : defaultData} options={options} />;
 };
 
-export default LineGraphComponent;
+export default DoughnutGraphComponent;