first commit

app/src/components/layout/sidebarLeft/visualization/widgets/Widgets2D.tsx

@@ -0,0 +1,141 @@
+import React from "react";
+import { useWidgetStore } from "../../../../../store/useWidgetStore";
+import { ChartType } from "chart.js/auto";
+import ChartComponent from "./ChartComponent";
+import { StockIncreseIcon } from "../../../../icons/RealTimeVisulationIcons";
+
+const chartTypes: ChartType[] = [
+  "bar",
+  "line",
+  "pie",
+  "doughnut",
+  "radar",
+  "polarArea",
+];
+
+const sampleData = {
+  labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
+  datasets: [
+    {
+      data: [65, 59, 80, 81, 56, 55, 40],
+      backgroundColor: "#6f42c1",
+      borderColor: "#ffffff",
+      borderWidth: 1,
+    },
+  ],
+};
+
+interface WidgetProps {
+  type: ChartType;
+  index: number;
+  title: string;
+}
+
+const ChartWidget: React.FC<WidgetProps> = ({ type, index, title }) => {
+  const { setDraggedAsset } = useWidgetStore((state) => state);
+
+  return (
+    <div
+      className={`chart chart-${index + 1}`}
+      draggable
+      onDragStart={() => {
+        setDraggedAsset({
+          type,
+          id: `widget-${index + 1}`,
+          title,
+          panel: "top",
+          data: sampleData,
+        });
+      }}
+      onDragEnd={() => setDraggedAsset(null)}
+    >
+      <ChartComponent type={type} title={title} data={sampleData} />
+    </div>
+  );
+};
+
+const ProgressBarWidget = ({
+  id,
+  title,
+  data,
+}: {
+  id: string;
+  title: string;
+  data: any;
+}) => {
+  const { setDraggedAsset } = useWidgetStore((state) => state);
+
+  return (
+    <div
+      className="chart progressBar"
+      draggable
+      onDragStart={() => {
+        setDraggedAsset({
+          type: "progress",
+          id,
+          title,
+          panel: "top",
+          data,
+        });
+      }}
+      onDragEnd={() => setDraggedAsset(null)}
+    >
+      <div className="header">{title}</div>
+      {data.stocks.map((stock: any, index: number) => (
+        <div className="stock" key={index}>
+          <span className="stock-item">
+            <span className="stockValues">
+              <div className="key">{stock.key}</div>
+              <div className="value">{stock.value}</div>
+            </span>
+            <div className="stock-description">{stock.description}</div>
+          </span>
+          <div className="icon">
+            <StockIncreseIcon />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+const Widgets2D = () => {
+  return (
+    <div className="widget2D">
+      <div className="chart-container">
+        {chartTypes.map((type, index) => {
+          const widgetTitle = `Widget ${index + 1}`;
+          return (
+            <ChartWidget
+              key={index}
+              type={type}
+              index={index}
+              title={widgetTitle}
+            />
+          );
+        })}
+        <ProgressBarWidget
+          id="widget-7"
+          title="Widget 7"
+          data={{
+            stocks: [
+              { key: "units", value: 1000, description: "Initial stock" },
+            ],
+          }}
+        />
+        <ProgressBarWidget
+          id="widget-8"
+          title="Widget 8"
+          data={{
+            stocks: [
+              { key: "units", value: 1000, description: "Initial stock" },
+              { key: "units", value: 500, description: "Additional stock" },
+            ],
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default Widgets2D;