Add iot data and custom input card for floting cards

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState, useCallback } from "react";
-import { Widget } from "../../../store/useWidgetStore";
+import { useWidgetStore, Widget } from "../../../store/useWidgetStore";
 import { MoveArrowLeft, MoveArrowRight } from "../../icons/SimulationIcons";
 import { InfoIcon } from "../../icons/ExportCommonIcons";
 import { useDroppedObjectsStore, useFloatingWidget } from "../../../store/useDroppedObjectsStore";
@@ -74,6 +74,7 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
   const [showLeftArrow, setShowLeftArrow] = useState(false);
   const [showRightArrow, setShowRightArrow] = useState(false);
   const { floatingWidget, setFloatingWidget } = useFloatingWidget()
+  const{setSelectedChartId}=useWidgetStore()
 
   // Function to calculate overflow state
   const updateOverflowState = useCallback(() => {
@@ -152,9 +153,9 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
   async function handleSelect2dZoneData(zoneId: string, zoneName: string) {
     try {
       if (selectedZone?.zoneId === zoneId) {
-
         return;
       }
+      setSelectedChartId(null)
       const email = localStorage.getItem("email") || "";
       const organization = email?.split("@")[1]?.split(".")[0];
       // Fetch data from backend

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,
@@ -203,6 +205,7 @@ export const DraggableWidget = ({
       onReorder(fromIndex, toIndex); // Call the reorder function passed as a prop
     }
   };
+  console.log("widget.type", widget.type);
 
   return (
     <>
@@ -249,9 +252,12 @@ 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
@@ -260,14 +266,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" && (
@@ -277,14 +275,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" && (
@@ -294,14 +284,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" && (

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

@@ -126,6 +126,7 @@ export default function Dropped3dWidgets() {
     return (
         <>
             {activeZoneWidgets.map(({ id, type, position }) => {
+                console.log('Typeeeeeeeeeeee',type);
                 switch (type) {
                     case "ui-Widget 1":
                         return <ProductionCapacity key={id} position={position} />;