added api to fetch data

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

@@ -1,138 +1,164 @@
-import { useWidgetStore } from "../../../store/useWidgetStore";
-import ProgressCard from "../realTimeVis/charts/ProgressCard";
-import PieGraphComponent from "../realTimeVis/charts/PieGraphComponent";
-import BarGraphComponent from "../realTimeVis/charts/BarGraphComponent";
-import LineGraphComponent from "../realTimeVis/charts/LineGraphComponent";
-import RadarGraphComponent from "../realTimeVis/charts/RadarGraphComponent";
-import DoughnutGraphComponent from "../realTimeVis/charts/DoughnutGraphComponent";
-import PolarAreaGraphComponent from "../realTimeVis/charts/PolarAreaGraphComponent";
-
-export const DraggableWidget = ({
-  widget,
-  hiddenPanels, // Add this prop to track hidden panels
-}: {
-  widget: any;
-  hiddenPanels: string[]; // Array of hidden panel names
-}) => {
-  // console.log("widget: ", widget.type);
-  const { selectedChartId, setSelectedChartId } = useWidgetStore();
-
-  const handlePointerDown = () => {
-    if (selectedChartId?.id !== widget.id) {
-      setSelectedChartId(widget);
-    }
-  };
-
-  // Determine if the widget's panel is hidden
-  const isPanelHidden = hiddenPanels.includes(widget.panel);
-
-  return (
-    <>
-      <div
-        key={widget.id}
-        className={`chart-container ${
-          selectedChartId?.id === widget.id && "activeChart"
-        }`}
-        onPointerDown={handlePointerDown}
-        style={{
-          opacity: isPanelHidden ? 0 : 1, // Set opacity to 0 if the panel is hidden
-          pointerEvents: isPanelHidden ? "none" : "auto", // Disable interaction when hidden
-        }}
-      >
-        {/* Render charts based on widget type */}
-        {widget.type === "progress" && (
-          <ProgressCard title={widget.title} data={widget.data} />
-        )}
-        {widget.type === "line" && (
-          <LineGraphComponent
-            type={widget.type}
-            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" && (
-          <BarGraphComponent
-            type={widget.type}
-            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 === "radar" && (
-          <RadarGraphComponent
-            type={widget.type}
-            title={widget.title}
-            fontSize={widget.fontSize}
-            fontWeight={widget.fontWeight}
-            data={widget.data.measurements.map((item: any) => item.fields)}
-          />
-        )} */}
-        {widget.type === "pie" && (
-          <PieGraphComponent
-            type={widget.type}
-            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" && (
-          <DoughnutGraphComponent
-            type={widget.type}
-            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 === "polarArea" && (
-          <PolarAreaGraphComponent
-            type={widget.type}
-            title={widget.title}
-            fontSize={widget.fontSize}
-            fontWeight={widget.fontWeight}
-            data={{
-              measurements: [
-                { name: "testDevice", fields: "powerConsumption" },
-                { name: "furnace", fields: "powerConsumption" },
-              ],
-              interval: 1000,
-              duration: "1h",
-            }}
-          />
-        )}
-      </div>
-    </>
-  );
-};
+import { useWidgetStore } from "../../../store/useWidgetStore";
+import ProgressCard from "../realTimeVis/charts/ProgressCard";
+import PieGraphComponent from "../realTimeVis/charts/PieGraphComponent";
+import BarGraphComponent from "../realTimeVis/charts/BarGraphComponent";
+import LineGraphComponent from "../realTimeVis/charts/LineGraphComponent";
+import RadarGraphComponent from "../realTimeVis/charts/RadarGraphComponent";
+import DoughnutGraphComponent from "../realTimeVis/charts/DoughnutGraphComponent";
+import PolarAreaGraphComponent from "../realTimeVis/charts/PolarAreaGraphComponent";
+
+export const DraggableWidget = ({
+  widget,
+  hiddenPanels, // Add this prop to track hidden panels
+  index, onReorder
+}: {
+  widget: any;
+  hiddenPanels: string[]; // Array of hidden panel names
+  index: number; onReorder: (fromIndex: number, toIndex: number) => void
+}) => {
+  const { selectedChartId, setSelectedChartId } = useWidgetStore();
+
+  const handlePointerDown = () => {
+    if (selectedChartId?.id !== widget.id) {
+      setSelectedChartId(widget);
+    }
+  };
+
+  // Determine if the widget's panel is hidden
+  const isPanelHidden = hiddenPanels.includes(widget.panel);
+
+  const handleDragStart = (event: React.DragEvent<HTMLDivElement>) => {
+    event.dataTransfer.setData('text/plain', index.toString()); // Store the index of the dragged widget
+  };
+  const handleDragEnter = (event: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault(); // Allow drop
+  };
+
+  const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault(); // Allow drop
+  };
+
+  const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    const fromIndex = parseInt(event.dataTransfer.getData('text/plain'), 10); // Get the dragged widget's index
+    const toIndex = index; // The index of the widget where the drop occurred
+    if (fromIndex !== toIndex) {
+      onReorder(fromIndex, toIndex); // Call the reorder function passed as a prop
+    }
+  };
+
+
+  return (
+    <>
+      <div
+        draggable
+        key={widget.id}
+        className={`chart-container ${selectedChartId?.id === widget.id && "activeChart"
+          }`}
+        onPointerDown={handlePointerDown}
+        onDragStart={handleDragStart}
+        onDragEnter={handleDragEnter}
+        onDragOver={handleDragOver}
+        onDrop={handleDrop}
+        style={{
+          opacity: isPanelHidden ? 0 : 1, // Set opacity to 0 if the panel is hidden
+          pointerEvents: isPanelHidden ? "none" : "auto", // Disable interaction when hidden
+        }}
+      >
+        {/* Render charts based on widget type */}
+        {widget.type === "progress" && (
+          <ProgressCard title={widget.title} data={widget.data} />
+        )}
+        {widget.type === "line" && (
+          <LineGraphComponent
+            type={widget.type}
+            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" && (
+          <BarGraphComponent
+            type={widget.type}
+            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 === "radar" && (
+          <RadarGraphComponent
+            type={widget.type}
+            title={widget.title}
+            fontSize={widget.fontSize}
+            fontWeight={widget.fontWeight}
+            data={widget.data.measurements.map((item: any) => item.fields)}
+          />
+        )} */}
+        {widget.type === "pie" && (
+          <PieGraphComponent
+            type={widget.type}
+            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" && (
+          <DoughnutGraphComponent
+            type={widget.type}
+            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 === "polarArea" && (
+          <PolarAreaGraphComponent
+            type={widget.type}
+            title={widget.title}
+            fontSize={widget.fontSize}
+            fontWeight={widget.fontWeight}
+            data={{
+              measurements: [
+                { name: "testDevice", fields: "powerConsumption" },
+                { name: "furnace", fields: "powerConsumption" },
+              ],
+              interval: 1000,
+              duration: "1h",
+            }}
+          />
+        )}
+      </div>
+    </>
+  );
+};