Dwinzo-Beta/Dwinzo_Demo
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Enhance ElementEditor with product and analysis store integration, conditional rendering for element types, and improved data mapping UI

Browse Source
This commit is contained in:
Jerald-Golden-B
2025-12-17 11:40:27 +05:30
parent 77c46a273d
commit e64ed91784
1 changed files with 131 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
app/src/components/SimulationDashboard/components/element/ElementEditor.tsx
View File

@@ -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,6 +108,7 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
</div>
</div>
{(element?.type === "graph" || element?.type === "label-value") && (
<div className="type-switch">
<div className={`type ${selectType === "design" ? "active" : ""}`} onClick={() => setSelectType("design")}>
Design
@@ -113,9 +117,11 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
Data
</div>
</div>
)}
{selectType === "design" && (
<>
<div className="design-section">
<DataSourceSelector
label={"Chart Type"}
options={["Line Chart", "Bar Chart", "Pie Chart", "Area Chart", "Radar Chart"]}
@@ -139,6 +145,7 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
}}
showEyeDropper={false}
/>
</div>
<div className="design-section">
<div className="section-header">Position</div>
@@ -323,6 +330,7 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
)}
{selectType === "data" && (
<div className="data-details">
{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">
@@ -374,8 +382,10 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
/>
</div>
</div>
)}
<>{console.log(element)}</>
{/* Data Mapping */}
{element?.type === "graph" && (
<div className="data-mapping">
<div className="heading">Data Mapping</div>
@@ -422,6 +432,7 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
</div>
)}
</div>
)}
</div>
)}
</div>