Merge branch 'main' into rtViz

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

@@ -5,6 +5,8 @@ import BarGraphComponent from "../realTimeVis/charts/BarGraphComponent";
 import LineGraphComponent from "../realTimeVis/charts/LineGraphComponent";
 import DoughnutGraphComponent from "../realTimeVis/charts/DoughnutGraphComponent";
 import PolarAreaGraphComponent from "../realTimeVis/charts/PolarAreaGraphComponent";
+import ProgressCard1 from "../realTimeVis/charts/ProgressCard1";
+import ProgressCard2 from "../realTimeVis/charts/ProgressCard2";
 import {
   DeleteIcon,
   DublicateIcon,
@@ -13,6 +15,7 @@ import {
 import { useEffect, useRef, useState } from "react";
 import { duplicateWidgetApi } from "../../../services/realTimeVisulization/zoneData/duplicateWidget";
 import { deleteWidgetApi } from "../../../services/realTimeVisulization/zoneData/deleteWidgetApi";
+import { useClickOutside } from "./functions/handleWidgetsOuterClick";
 import { useSocketStore } from "../../../store/store";
 
 type Side = "top" | "bottom" | "left" | "right";
@@ -81,6 +84,8 @@ export const DraggableWidget = ({
     }
   };
 
+  const chartWidget = useRef<HTMLDivElement>(null);
+
   const isPanelHidden = hiddenPanels.includes(widget.panel);
 
   const deleteSelectedChart = async () => {
@@ -117,13 +122,11 @@ export const DraggableWidget = ({
       //   }));
       // }
     } catch (error) {
-
     } finally {
       setOpenKebabId(null);
     }
   };
 
-
   const getCurrentWidgetCount = (panel: Side) =>
     selectedZone.widgets.filter((w) => w.panel === panel).length;
 
@@ -183,13 +186,11 @@ export const DraggableWidget = ({
       //   }));
       // }
     } catch (error) {
-
     } finally {
       setOpenKebabId(null);
     }
   };
 
-
   const handleKebabClick = (event: React.MouseEvent<HTMLDivElement>) => {
     event.stopPropagation();
     if (openKebabId === widget.id) {
@@ -237,23 +238,31 @@ export const DraggableWidget = ({
       onReorder(fromIndex, toIndex); // Call the reorder function passed as a prop
     }
   };
+  console.log("widget.type", widget.type);
 
+  // useClickOutside(chartWidget, () => {
+  //   setSelectedChartId(null);
+  // });
+
+  console.log('isPanelHidden: ', isPanelHidden);
   return (
     <>
       <div
         draggable
         key={widget.id}
-        className={`chart-container ${selectedChartId?.id === widget.id && "activeChart"
-          }`}
+        className={`chart-container ${
+          selectedChartId?.id === widget.id && "activeChart"
+        }`}
         onPointerDown={handlePointerDown}
         onDragStart={handleDragStart}
         onDragEnter={handleDragEnter}
         onDragOver={handleDragOver}
         onDrop={handleDrop}
         style={{
-          opacity: isPanelHidden ? 0 : 1,
           pointerEvents: isPanelHidden ? "none" : "auto",
         }}
+        ref={chartWidget}
+        onClick={() => setSelectedChartId(widget)}
       >
         {/* Kebab Icon */}
         <div className="icon kebab" onClick={handleKebabClick}>
@@ -264,8 +273,9 @@ export const DraggableWidget = ({
         {openKebabId === widget.id && (
           <div className="kebab-options" ref={widgetRef}>
             <div
-              className={`edit btn ${isPanelFull(widget.panel) ? "btn-blur" : ""
-                }`}
+              className={`edit btn ${
+                isPanelFull(widget.panel) ? "btn-blur" : ""
+              }`}
               onClick={isPanelFull(widget.panel) ? undefined : duplicateWidget}
             >
               <div className="icon">
@@ -284,8 +294,11 @@ export const DraggableWidget = ({
 
         {/* Render charts based on widget type */}
 
-        {widget.type === "progress" && (
-          <ProgressCard title={widget.title} data={widget.data} />
+        {widget.type === "progress 1" && (
+          <ProgressCard1 title={widget.title} id={widget.id} />
+        )}
+        {widget.type === "progress 2" && (
+          <ProgressCard2 title={widget.title} id={widget.id} />
         )}
         {widget.type === "line" && (
           <LineGraphComponent
@@ -294,14 +307,6 @@ export const DraggableWidget = ({
             title={widget.title}
             fontSize={widget.fontSize}
             fontWeight={widget.fontWeight}
-          // data={{
-          //   measurements: [
-          //     { name: "testDevice", fields: "powerConsumption" },
-          //     { name: "furnace", fields: "powerConsumption" },
-          //   ],
-          //   interval: 1000,
-          //   duration: "1h",
-          // }}
           />
         )}
         {widget.type === "bar" && (
@@ -311,14 +316,6 @@ export const DraggableWidget = ({
             title={widget.title}
             fontSize={widget.fontSize}
             fontWeight={widget.fontWeight}
-          // data={{
-          //   measurements: [
-          //     { name: "testDevice", fields: "powerConsumption" },
-          //     { name: "furnace", fields: "powerConsumption" },
-          //   ],
-          //   interval: 1000,
-          //   duration: "1h",
-          // }}
           />
         )}
         {widget.type === "pie" && (
@@ -328,14 +325,6 @@ export const DraggableWidget = ({
             title={widget.title}
             fontSize={widget.fontSize}
             fontWeight={widget.fontWeight}
-          // data={{
-          //   measurements: [
-          //     { name: "testDevice", fields: "powerConsumption" },
-          //     { name: "furnace", fields: "powerConsumption" },
-          //   ],
-          //   interval: 1000,
-          //   duration: "1h",
-          // }}
           />
         )}
         {widget.type === "doughnut" && (