feat: Enhance ElementEditor with product and analysis store integration, conditional rendering for element types, and improved data mapping UI
This commit is contained in:
@@ -51,7 +51,10 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
|
||||
setShowSwapUI,
|
||||
dataModelManager,
|
||||
}) => {
|
||||
const { simulationDashBoardStore } = useSceneContext();
|
||||
const { simulationDashBoardStore, productStore, analysisStore } = useSceneContext();
|
||||
const { products, selectedProduct, getProductById } = productStore();
|
||||
const { analysis } = analysisStore();
|
||||
const product = getProductById(selectedProduct.productName);
|
||||
const { getElementById } = simulationDashBoardStore();
|
||||
const element = getElementById(selectedBlock, selectedElement);
|
||||
const [selectType, setSelectType] = useState("design");
|
||||
@@ -105,40 +108,44 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="type-switch">
|
||||
<div className={`type ${selectType === "design" ? "active" : ""}`} onClick={() => setSelectType("design")}>
|
||||
Design
|
||||
{(element?.type === "graph" || element?.type === "label-value") && (
|
||||
<div className="type-switch">
|
||||
<div className={`type ${selectType === "design" ? "active" : ""}`} onClick={() => setSelectType("design")}>
|
||||
Design
|
||||
</div>
|
||||
<div className={`type ${selectType === "data" ? "active" : ""}`} onClick={() => setSelectType("data")}>
|
||||
Data
|
||||
</div>
|
||||
</div>
|
||||
<div className={`type ${selectType === "data" ? "active" : ""}`} onClick={() => setSelectType("data")}>
|
||||
Data
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{selectType === "design" && (
|
||||
<>
|
||||
<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 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>
|
||||
@@ -323,105 +330,109 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
|
||||
)}
|
||||
{selectType === "data" && (
|
||||
<div className="data-details">
|
||||
<div className="data-wrapper">
|
||||
<InputWithDropDown label="Title" value={`title`} placeholder={"Label 1"} min={0.1} step={0.1} max={2} onChange={() => {}} />
|
||||
<div className="data">
|
||||
<DataDetailedDropdown
|
||||
title="Data Source"
|
||||
placeholder="Select assets"
|
||||
sections={[
|
||||
{
|
||||
title: "Global",
|
||||
items: [{ id: "global", label: "Global", icon: <DeviceIcon /> }],
|
||||
},
|
||||
{
|
||||
title: "Assets",
|
||||
items: [
|
||||
{ id: "cmm-001", label: "CMM-001", icon: <DeviceIcon /> },
|
||||
{ id: "cnc-1", label: "CNC-Lathe-0001", icon: <DeviceIcon /> },
|
||||
{ id: "cnc-2", label: "CNC-drilling-tapping-3Axis", icon: <DeviceIcon /> },
|
||||
{ id: "cnc-3", label: "CNC_0001", icon: <DeviceIcon /> },
|
||||
],
|
||||
},
|
||||
]}
|
||||
value={null}
|
||||
onChange={() => {}}
|
||||
dropDownHeader={"RT-Data"}
|
||||
eyedroper={true}
|
||||
/>
|
||||
</div>
|
||||
{element?.type === "label-value" && (
|
||||
<div className="data-wrapper">
|
||||
<InputWithDropDown label="Title" value={`title`} placeholder={"Label 1"} min={0.1} step={0.1} max={2} onChange={() => {}} />
|
||||
<div className="data">
|
||||
<DataDetailedDropdown
|
||||
title="Data Source"
|
||||
placeholder="Select assets"
|
||||
sections={[
|
||||
{
|
||||
title: "Global",
|
||||
items: [{ id: "global", label: "Global", icon: <DeviceIcon /> }],
|
||||
},
|
||||
{
|
||||
title: "Assets",
|
||||
items: [
|
||||
{ id: "cmm-001", label: "CMM-001", icon: <DeviceIcon /> },
|
||||
{ id: "cnc-1", label: "CNC-Lathe-0001", icon: <DeviceIcon /> },
|
||||
{ id: "cnc-2", label: "CNC-drilling-tapping-3Axis", icon: <DeviceIcon /> },
|
||||
{ id: "cnc-3", label: "CNC_0001", icon: <DeviceIcon /> },
|
||||
],
|
||||
},
|
||||
]}
|
||||
value={null}
|
||||
onChange={() => {}}
|
||||
dropDownHeader={"RT-Data"}
|
||||
eyedroper={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="data">
|
||||
<DataDetailedDropdown
|
||||
title="Value"
|
||||
placeholder="Select Value"
|
||||
sections={[
|
||||
{
|
||||
title: "Selected Assets name",
|
||||
items: [
|
||||
{ id: "ambientTemp", label: "ambientTemp", icon: <ParametersIcon /> },
|
||||
{ id: "measurementDeviation", label: "measurementDeviation", icon: <ParametersIcon /> },
|
||||
{ id: "powerConsumption", label: "powerConsumption", icon: <ParametersIcon /> },
|
||||
{ id: "probeX", label: "probePositionX", icon: <ParametersIcon /> },
|
||||
{ id: "probeY", label: "probePositionY", icon: <ParametersIcon /> },
|
||||
{ id: "probeZ", label: "probePositionZ", icon: <ParametersIcon /> },
|
||||
],
|
||||
},
|
||||
]}
|
||||
value={null}
|
||||
onChange={() => {}}
|
||||
dropDownHeader={"RT-Data-Value"}
|
||||
/>
|
||||
<div className="data">
|
||||
<DataDetailedDropdown
|
||||
title="Value"
|
||||
placeholder="Select Value"
|
||||
sections={[
|
||||
{
|
||||
title: "Selected Assets name",
|
||||
items: [
|
||||
{ id: "ambientTemp", label: "ambientTemp", icon: <ParametersIcon /> },
|
||||
{ id: "measurementDeviation", label: "measurementDeviation", icon: <ParametersIcon /> },
|
||||
{ id: "powerConsumption", label: "powerConsumption", icon: <ParametersIcon /> },
|
||||
{ id: "probeX", label: "probePositionX", icon: <ParametersIcon /> },
|
||||
{ id: "probeY", label: "probePositionY", icon: <ParametersIcon /> },
|
||||
{ id: "probeZ", label: "probePositionZ", icon: <ParametersIcon /> },
|
||||
],
|
||||
},
|
||||
]}
|
||||
value={null}
|
||||
onChange={() => {}}
|
||||
dropDownHeader={"RT-Data-Value"}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
)}
|
||||
<>{console.log(element)}</>
|
||||
{/* Data Mapping */}
|
||||
<div className="data-mapping">
|
||||
<div className="heading">Data Mapping</div>
|
||||
{element?.type === "graph" && (
|
||||
<div className="data-mapping">
|
||||
<div className="heading">Data Mapping</div>
|
||||
|
||||
<div className="type-switch">
|
||||
<div className={`type ${selectDataMapping === "singleMachine" ? "active" : ""}`} onClick={() => setSelectDataMapping("singleMachine")}>
|
||||
Single Machine
|
||||
</div>
|
||||
<div className={`type ${selectDataMapping === "multipleeMachine" ? "active" : ""}`} onClick={() => setSelectDataMapping("multipleeMachine")}>
|
||||
Multiple Machine
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{selectDataMapping === "singleMachine" && (
|
||||
<div className="fields-wrapper">
|
||||
{singleFields.map((field) => (
|
||||
<DataSourceSelector key={field.id} label={field.label} options={["1h", "2h", "12h"]} onSelect={() => {}} showEyeDropper={!!field.showEyeDropper} />
|
||||
))}
|
||||
|
||||
<div className="add-field" onClick={addField}>
|
||||
<div className="icon">
|
||||
<AddIcon />
|
||||
</div>
|
||||
<div className="label">Add Field</div>
|
||||
<div className="type-switch">
|
||||
<div className={`type ${selectDataMapping === "singleMachine" ? "active" : ""}`} onClick={() => setSelectDataMapping("singleMachine")}>
|
||||
Single Machine
|
||||
</div>
|
||||
<div className={`type ${selectDataMapping === "multipleeMachine" ? "active" : ""}`} onClick={() => setSelectDataMapping("multipleeMachine")}>
|
||||
Multiple Machine
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{selectDataMapping === "multipleeMachine" && (
|
||||
<div className="fields-wrapper">
|
||||
{multipleFields.map((field) => (
|
||||
<div className="datas" key={field.id}>
|
||||
<div className="datas__class">
|
||||
<DataSourceSelector label={field.label} options={["1h", "2h", "12h"]} onSelect={() => {}} showEyeDropper={field.label !== "Common Value"} />
|
||||
{selectDataMapping === "singleMachine" && (
|
||||
<div className="fields-wrapper">
|
||||
{singleFields.map((field) => (
|
||||
<DataSourceSelector key={field.id} label={field.label} options={["1h", "2h", "12h"]} onSelect={() => {}} showEyeDropper={!!field.showEyeDropper} />
|
||||
))}
|
||||
|
||||
<div className="add-field" onClick={addField}>
|
||||
<div className="icon">
|
||||
<AddIcon />
|
||||
</div>
|
||||
<div className="label">Add Field</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
<div className="add-field" onClick={addField}>
|
||||
<div className="icon">
|
||||
<AddIcon />
|
||||
</div>
|
||||
<div className="label">Add Field</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{selectDataMapping === "multipleeMachine" && (
|
||||
<div className="fields-wrapper">
|
||||
{multipleFields.map((field) => (
|
||||
<div className="datas" key={field.id}>
|
||||
<div className="datas__class">
|
||||
<DataSourceSelector label={field.label} options={["1h", "2h", "12h"]} onSelect={() => {}} showEyeDropper={field.label !== "Common Value"} />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
<div className="add-field" onClick={addField}>
|
||||
<div className="icon">
|
||||
<AddIcon />
|
||||
</div>
|
||||
<div className="label">Add Field</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user