Your commit message

app/src/components/layout/sidebarRight/visualization/data/Data.tsx

@@ -0,0 +1,138 @@
+import React, { useEffect, useState } from "react";
+import { useWidgetStore } from "../../../../../store/useWidgetStore";
+import { RemoveIcon } from "../../../../icons/ExportCommonIcons";
+import RegularDropDown from "../../../../ui/inputs/RegularDropDown";
+import MultiLevelDropDown from "../../../../ui/inputs/MultiLevelDropDown";
+
+interface Child {
+  id: number;
+  easing: string;
+}
+const DATA_STRUCTURE = {
+  furnace: {
+    coolingRate: "coolingRate",
+    furnaceTemperature: "furnaceTemperature",
+    heatingRate: "heatingRate",
+    machineId: "machineId",
+    powerConsumption: "powerConsumption",
+    status: "status",
+    timestamp: "timestamp",
+    vacuumLevel: "vacuumLevel",
+  },
+  testDevice: {
+    abrasiveLevel: {
+      data1: "Data 1",
+      data2: "Data 2",
+      data3: "Data 3",
+    },
+    airPressure: "airPressure",
+    machineId: "machineId",
+    powerConsumption: "powerConsumption",
+    status: "status",
+    temperature: {
+      data1: "Data 1",
+      data2: "Data 2",
+      data3: "Data 3",
+    },
+    timestamp: {
+      data1: "Data 1",
+      data2: "Data 2",
+      data3: "Data 3",
+    },
+  },
+};
+
+interface Group {
+  id: number;
+  easing: string;
+  children: Child[];
+}
+
+const Data = () => {
+  const { selectedChartId } = useWidgetStore();
+
+  // State to store groups for all widgets (using Widget.id as keys)
+  const [chartDataGroups, setChartDataGroups] = useState<
+    Record<string, Group[]>
+  >({});
+
+  useEffect(() => {
+    // Initialize data groups for the newly selected widget if it doesn't exist
+    if (selectedChartId && !chartDataGroups[selectedChartId.id]) {
+      setChartDataGroups((prev) => ({
+        ...prev,
+        [selectedChartId.id]: [
+          {
+            id: Date.now(),
+            easing: "Connecter 1",
+            children: [
+              { id: Date.now(), easing: "Linear" },
+              { id: Date.now() + 1, easing: "Ease Out" },
+              { id: Date.now() + 2, easing: "Linear" },
+            ],
+          },
+        ],
+      }));
+    }
+  }, [selectedChartId]);
+
+  // Handle adding a new child to the group
+  const handleAddClick = (groupId: number) => {
+    setChartDataGroups((prevGroups) => {
+      const currentGroups = prevGroups[selectedChartId.id] || [];
+      const group = currentGroups.find((g) => g.id === groupId);
+
+      if (group && group.children.length < 7) {
+        const newChild = { id: Date.now(), easing: "Linear" };
+        return {
+          ...prevGroups,
+          [selectedChartId.id]: currentGroups.map((g) =>
+            g.id === groupId ? { ...g, children: [...g.children, newChild] } : g
+          ),
+        };
+      }
+      return prevGroups;
+    });
+  };
+
+  // Remove a child from a group
+  const removeChild = (groupId: number, childId: number) => {
+    setChartDataGroups((currentGroups) => {
+      const currentChartData = currentGroups[selectedChartId.id] || [];
+
+      return {
+        ...currentGroups,
+        [selectedChartId.id]: currentChartData.map((group) =>
+          group.id === groupId
+            ? {
+                ...group,
+                children: group.children.filter(
+                  (child) => child.id !== childId
+                ),
+              }
+            : group
+        ),
+      };
+    });
+  };
+
+  return (
+    <div className="dataSideBar">
+      {selectedChartId?.title && (
+        <div className="sideBarHeader">{selectedChartId?.title}</div>
+      )}
+      {/* <MultiLevelDropDown data={DATA_STRUCTURE} /> */}
+      <div className="infoBox">
+        <span className="infoIcon">i</span>
+        <p>
+          <em>
+            By adding templates and widgets, you create a customizable and
+            dynamic environment.
+          </em>
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default Data;