feat: Add dropdown item retrieval for asset-specific and common values in ElementEditor

This commit is contained in:
2025-12-17 14:21:31 +05:30
parent d64ff881de
commit 98cfc033c1

View File

@@ -272,6 +272,40 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
[product]
);
// Get value dropdown items for a specific asset
const getValueDropdownItems = useCallback(
(assetId: string | undefined) => {
if (!product || !assetId || assetId === "global") return [];
const assetAnalysis = product?.eventDatas.find((e) => e.modelUuid === assetId);
if (!assetAnalysis) return [];
// Return all available metrics for the asset
return getLableValueDropdownItems(assetId).flatMap((section) =>
section.items.map((item) => ({
id: item.id,
label: item.label,
icon: item.icon,
}))
);
},
[product, getLableValueDropdownItems]
);
// Get common value dropdown items (available across all assets)
const getCommonValueDropdownItems = useCallback(() => {
const commonItems = [
{ id: "timeMetrics.uptime", label: "Uptime", icon: <ParametersIcon /> },
{ id: "timeMetrics.utilizationRate", label: "Utilization Rate", icon: <ParametersIcon /> },
{ id: "efficiency.overallEffectiveness", label: "Overall Effectiveness", icon: <ParametersIcon /> },
{ id: "quality.successRate", label: "Success Rate", icon: <ParametersIcon /> },
{ id: "throughput.itemsPerHour", label: "Items Per Hour", icon: <ParametersIcon /> },
{ id: "costMetrics.operatingCost", label: "Operating Cost", icon: <ParametersIcon /> },
{ id: "energyMetrics.energyConsumed", label: "Energy Consumed", icon: <ParametersIcon /> },
];
return commonItems;
}, []);
const addField = () => {
if (selectDataMapping === "singleMachine") {
setSingleFields((prev) => [
@@ -321,31 +355,33 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
{selectType === "design" && (
<>
<div className="design-section">
<DataSourceSelector
label={"Chart Type"}
options={["Line Chart", "Bar Chart", "Pie Chart", "Area Chart", "Radar Chart"]}
onSelect={(newValue) => {
if (newValue === "Line Chart") {
updateGraphType(selectedBlock, selectedElement, "line");
return;
} else if (newValue === "Bar Chart") {
updateGraphType(selectedBlock, selectedElement, "bar");
return;
} else if (newValue === "Pie Chart") {
updateGraphType(selectedBlock, selectedElement, "pie");
return;
} else if (newValue === "Area Chart") {
updateGraphType(selectedBlock, selectedElement, "area");
return;
} else if (newValue === "Radar Chart") {
updateGraphType(selectedBlock, selectedElement, "radar");
return;
}
}}
showEyeDropper={false}
/>
</div>
{element?.type === "graph" && (
<div className="design-section">
<DataSourceSelector
label={"Chart Type"}
options={["Line Chart", "Bar Chart", "Pie Chart", "Area Chart", "Radar Chart"]}
onSelect={(newValue) => {
if (newValue === "Line Chart") {
updateGraphType(selectedBlock, selectedElement, "line");
return;
} else if (newValue === "Bar Chart") {
updateGraphType(selectedBlock, selectedElement, "bar");
return;
} else if (newValue === "Pie Chart") {
updateGraphType(selectedBlock, selectedElement, "pie");
return;
} else if (newValue === "Area Chart") {
updateGraphType(selectedBlock, selectedElement, "area");
return;
} else if (newValue === "Radar Chart") {
updateGraphType(selectedBlock, selectedElement, "radar");
return;
}
}}
showEyeDropper={false}
/>
</div>
)}
<div className="design-section">
<div className="section-header">Position</div>