Skip to content

Commit

Permalink
formatting
Browse files Browse the repository at this point in the history
  • Loading branch information
@leongmichael
leongmichael committed Oct 16, 2024
1 parent a504afc commit c5a3425
Show file tree
Hide file tree
Showing 2 changed files with 91 additions and 45 deletions.
52 changes: 28 additions & 24 deletions client/src/components/Benchmarking.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,11 @@ import { Map } from "react-map-gl";
import { IconLayer } from "@deck.gl/layers";
import axios from "axios";
import mapbox_token from "./mapbox_token.js";
import BenchmarkingData from './BenchmarkingData.js';
import BenchmarkingData from "./BenchmarkingData.js";

const MAPBOX_ACCESS_TOKEN = mapbox_token;
const MAP_STYLE = "https://basemaps.cartocdn.com/gl/positron-gl-style/style.json";
const MAP_STYLE =
"https://basemaps.cartocdn.com/gl/positron-gl-style/style.json";

const INITIAL_VIEW_STATE = {
longitude: -111,
Expand All @@ -20,7 +21,9 @@ const INITIAL_VIEW_STATE = {

const getBenchmarkingCollection = async () => {
try {
const response = await axios.get("http://localhost:8080/benchmarking/getAll");
const response = await axios.get(
"http://localhost:8080/benchmarking/getAll"
);
if (response.data) {
console.log("Data received:", response.data);
return response.data;
Expand Down Expand Up @@ -65,7 +68,8 @@ export default function Benchmarking() {
id: "icon-layer",
data: benchmarkingData,
pickable: true,
iconAtlas: "https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/icon-atlas.png",
iconAtlas:
"https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/icon-atlas.png",
iconMapping: ICON_MAPPING,
getIcon: (d) => "marker",
sizeScale: 6,
Expand All @@ -75,7 +79,7 @@ export default function Benchmarking() {
});

return (
<div style={{ position: 'relative', height: '100vh', width: '100%' }}>
<div style={{ position: "relative", height: "100vh", width: "100%" }}>
<DeckGL
initialViewState={INITIAL_VIEW_STATE}
controller={true}
Expand All @@ -93,36 +97,36 @@ export default function Benchmarking() {
</DeckGL>

{isPanelOpen && selectedSite && (
<div
<div
style={{
position: 'absolute',
position: "absolute",
bottom: 0,
left: 0,
right: 0,
height: '60%', // popup window height
backgroundColor: 'white',
padding: '20px',
boxShadow: '0 -2px 10px rgba(0, 0, 0, 0.1)',
overflowY: 'auto',
transition: 'transform 0.3s ease-out',
transform: isPanelOpen ? 'translateY(0)' : 'translateY(100%)',
height: "60%", // popup window height
backgroundColor: "white",
padding: "20px",
boxShadow: "0 -2px 10px rgba(0, 0, 0, 0.1)",
overflowY: "auto",
transition: "transform 0.3s ease-out",
transform: isPanelOpen ? "translateY(0)" : "translateY(100%)",
}}
>
<button
<button
onClick={() => setIsPanelOpen(false)}
style={{
position: 'absolute',
top: '10px',
right: '10px',
background: 'none',
border: 'none',
fontSize: '1.5em',
cursor: 'pointer',
position: "absolute",
top: "10px",
right: "10px",
background: "none",
border: "none",
fontSize: "1.5em",
cursor: "pointer",
}}
>
&times;
</button>

<BenchmarkingData
selectedSite={selectedSite}
model={model}
Expand All @@ -132,4 +136,4 @@ export default function Benchmarking() {
)}
</div>
);
}
}
84 changes: 63 additions & 21 deletions client/src/components/BenchmarkingData.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from 'react';
import React from "react";
import {
Box,
Typography,
Expand Down Expand Up @@ -61,17 +61,33 @@ export default function BenchmarkingData({ selectedSite, model, chooseModel }) {
<TableBody>
<TableRow>
<TableCell>{selectedSite.siteID}</TableCell>
<TableCell align="right">{selectedSite.siteInfo.doe_climate_zone}</TableCell>
<TableCell align="right">
{selectedSite.siteInfo.doe_climate_zone}
</TableCell>
<TableCell align="right">{selectedSite.siteInfo.city}</TableCell>
<TableCell align="right">{selectedSite.siteInfo.state}</TableCell>
<TableCell align="right">{selectedSite.siteInfo.zip}</TableCell>
<TableCell align="right">{selectedSite.siteInfo.number_of_floor}</TableCell>
<TableCell align="right">{selectedSite.siteInfo.total_building_area_ft2}</TableCell>
<TableCell align="right">{selectedSite.siteInfo.net_selling_area_ft2}</TableCell>
<TableCell align="right">{selectedSite.siteInfo.total_stock_area_ft2}</TableCell>
<TableCell align="right">{selectedSite.siteInfo.number_of_HVAC}</TableCell>
<TableCell align="right">{selectedSite.siteInfo.program}</TableCell>
<TableCell align="right">{selectedSite.siteInfo.utility}</TableCell>
<TableCell align="right">
{selectedSite.siteInfo.number_of_floor}
</TableCell>
<TableCell align="right">
{selectedSite.siteInfo.total_building_area_ft2}
</TableCell>
<TableCell align="right">
{selectedSite.siteInfo.net_selling_area_ft2}
</TableCell>
<TableCell align="right">
{selectedSite.siteInfo.total_stock_area_ft2}
</TableCell>
<TableCell align="right">
{selectedSite.siteInfo.number_of_HVAC}
</TableCell>
<TableCell align="right">
{selectedSite.siteInfo.program}
</TableCell>
<TableCell align="right">
{selectedSite.siteInfo.utility}
</TableCell>
</TableRow>
</TableBody>
</Table>
Expand All @@ -90,11 +106,19 @@ export default function BenchmarkingData({ selectedSite, model, chooseModel }) {
value={model}
onChange={chooseModel}
>
<MenuItem value={"regressionBaseline"}>Regression Baseline</MenuItem>
<MenuItem value={"regressionBaseline"}>
Regression Baseline
</MenuItem>
<MenuItem value={"10/10Average"}>10/10 Average</MenuItem>
<MenuItem value={"adjusted10/10Average"}>Adjusted 10/10 Average</MenuItem>
<MenuItem value={"weatherRegression"}>Weather Regression</MenuItem>
<MenuItem value={"adjustedWeatherRegression"}>Adjusted Weather Regression</MenuItem>
<MenuItem value={"adjusted10/10Average"}>
Adjusted 10/10 Average
</MenuItem>
<MenuItem value={"weatherRegression"}>
Weather Regression
</MenuItem>
<MenuItem value={"adjustedWeatherRegression"}>
Adjusted Weather Regression
</MenuItem>
</Select>
</FormControl>
</Grid>
Expand All @@ -111,29 +135,47 @@ export default function BenchmarkingData({ selectedSite, model, chooseModel }) {
<TableCell align="right">Peak OAT (°F)</TableCell>
<TableCell align="right">Event Average OAT (°F)</TableCell>
<TableCell align="right">Peak Demand Intensity (W/ft²)</TableCell>
<TableCell align="right">Avg. Demand Decrease Intensity (W/ft²)</TableCell>
<TableCell align="right">
Avg. Demand Decrease Intensity (W/ft²)
</TableCell>
</TableRow>
</TableHead>
<TableBody>
{createFieldMetricBaselineRegressionRows().map((row) => (
<TableRow key={row.event_id}>
<TableCell>{row.event_id}</TableCell>
<TableCell align="right">{moment.utc(row.event_date).format("MM/DD/YY")}</TableCell>
<TableCell align="right">
{moment.utc(row.shed_start_time_date).tz("America/Los_Angeles").hour(moment(row.shed_start_time_date).hours() - 1).format("MM/DD/YYYY HH:mm:ss")}
{moment.utc(row.event_date).format("MM/DD/YY")}
</TableCell>
<TableCell align="right">
{moment.utc(row.shed_end_time_date).tz("America/Los_Angeles").hour(moment(row.shed_end_time_date).hours() - 1).format("MM/DD/YYYY HH:mm:ss")}
{moment
.utc(row.shed_start_time_date)
.tz("America/Los_Angeles")
.hour(moment(row.shed_start_time_date).hours() - 1)
.format("MM/DD/YYYY HH:mm:ss")}
</TableCell>
<TableCell align="right">
{moment
.utc(row.shed_end_time_date)
.tz("America/Los_Angeles")
.hour(moment(row.shed_end_time_date).hours() - 1)
.format("MM/DD/YYYY HH:mm:ss")}
</TableCell>
<TableCell align="right">{parseInt(row.peak_oat)}</TableCell>
<TableCell align="right">{parseInt(row.event_avg_oat)}</TableCell>
<TableCell align="right">{Math.round(row.peak_demand_intensity_wft2 * 100) / 100}</TableCell>
<TableCell align="right">{Math.round(row.shed_avg_wft2 * 100) / 100}</TableCell>
<TableCell align="right">
{parseInt(row.event_avg_oat)}
</TableCell>
<TableCell align="right">
{Math.round(row.peak_demand_intensity_wft2 * 100) / 100}
</TableCell>
<TableCell align="right">
{Math.round(row.shed_avg_wft2 * 100) / 100}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</Box>
);
}
}

0 comments on commit c5a3425

Please sign in to comment.