feat: Add dropdown item retrieval for asset-specific and common values in ElementEditor
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user