first commit

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

@@ -0,0 +1,82 @@
+import { useWidgetStore } from "../../../store/useWidgetStore";
+import PieGraphComponent from "../charts/PieGraphComponent";
+import BarGraphComponent from "../charts/BarGraphComponent";
+import LineGraphComponent from "../charts/LineGraphComponent";
+
+export const DraggableWidget = ({ widget }: { widget: any }) => {
+  const { selectedChartId, setSelectedChartId } = useWidgetStore();
+
+  const handlePointerDown = () => {
+    if (selectedChartId?.id !== widget.id) {
+      setSelectedChartId(widget);
+    }
+  };
+
+  return (
+    <>
+      <div
+        key={widget.id}
+        className={`chart-container ${
+          selectedChartId?.id === widget.id && "activeChart"
+        }`}
+        onPointerDown={handlePointerDown}
+      >
+        {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 === "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",
+                }}
+              />
+            )}
+          </>
+        )}
+      </div>
+    </>
+  );
+};