updated donut chart

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 */}

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),
   });
@@ -257,7 +258,6 @@ const RealTimeVisulization: React.FC = () => {
     }
   };
 
-
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
       const editWidgetOptions = document.querySelector(
@@ -301,7 +301,6 @@ const RealTimeVisulization: React.FC = () => {
     return () => resizeObserver.unobserve(canvas);
   }, []);
 
-
   return (
     <>
       <style>

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,
@@ -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;