139 lines
3.7 KiB
TypeScript
139 lines
3.7 KiB
TypeScript
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;
|