diff --git a/client/src/components/Advanced.js b/client/src/components/Advanced.js index cb59dec..230ca81 100644 --- a/client/src/components/Advanced.js +++ b/client/src/components/Advanced.js @@ -5,7 +5,7 @@ import { Paper, TextField, Typography, - styled, + styled, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from "@mui/material"; import axios from "axios"; import { useState } from "react"; @@ -25,6 +25,10 @@ const Item = styled(Paper)(({ theme }) => ({ let RTU_key = 0; +const createTableData = (number, name, value) => { + return {number, name, value}; +} + export default function Advanced() { let navigate = useNavigate(); // navigate to diff pages // dropdown forms @@ -59,6 +63,7 @@ export default function Advanced() { const [calculationOutput, setCalculationOutput] = useState({}); const [graphs, setGraphs] = useState([]); + const [tableRows, setTableRows] = useState([]); const RTU_inputs = [ "Supply Air Flow (CFM)", @@ -140,6 +145,14 @@ export default function Advanced() { ["#f5ca0a", "#f5ca0a", "#f5ca0a", "#f5ca0a", "#05a129"] ), ]); + + setTableRows([ + createTableData("1", "Enthalpy Coast", graphData[0]), + createTableData("2", "Chiller Direct Reduction", graphData[1]), + createTableData("3", "Reduced kW from CFM Reduction", graphData[2]), + createTableData("4", "Reduced kW from Static Pressure Reset", graphData[3]), + createTableData("5", "Total Load Reduction", graphData[4]), + ]); }; const tableCellStyle = { @@ -465,7 +478,34 @@ export default function Advanced() { > Reduction Results - + + + + + + + Shed Category + Shed Result (kW) + + + + {tableRows.map((row) => ( + + + {row.number} + + {row.name} + {(row.value).toFixed(2)} + + ))} + +
+
+ + {/* {Object.keys(calculationOutput).map((keyName, i) => (
))} - + */} Demand Flexibility Assessment Tool @@ -45,6 +45,7 @@ export default function Home() { m: 1, marginTop: 1, textAlign: "center", + textShadow: "1px 1px #000", }} > Welcome to the Demand Flexibility Assessment Tool, made by the Grid