From c5a3425fd474bb1adeaf11a6ba4d37483efc373f Mon Sep 17 00:00:00 2001 From: Michael Leong Date: Tue, 15 Oct 2024 22:24:48 -0700 Subject: [PATCH] formatting --- client/src/components/Benchmarking.js | 52 +++++++------- client/src/components/BenchmarkingData.js | 84 +++++++++++++++++------ 2 files changed, 91 insertions(+), 45 deletions(-) diff --git a/client/src/components/Benchmarking.js b/client/src/components/Benchmarking.js index de9d28b..644a088 100644 --- a/client/src/components/Benchmarking.js +++ b/client/src/components/Benchmarking.js @@ -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, @@ -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; @@ -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, @@ -75,7 +79,7 @@ export default function Benchmarking() { }); return ( -
+
{isPanelOpen && selectedSite && ( -
- - + ); -} \ No newline at end of file +} diff --git a/client/src/components/BenchmarkingData.js b/client/src/components/BenchmarkingData.js index 8d16ea8..537f888 100644 --- a/client/src/components/BenchmarkingData.js +++ b/client/src/components/BenchmarkingData.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React from "react"; import { Box, Typography, @@ -61,17 +61,33 @@ export default function BenchmarkingData({ selectedSite, model, chooseModel }) { {selectedSite.siteID} - {selectedSite.siteInfo.doe_climate_zone} + + {selectedSite.siteInfo.doe_climate_zone} + {selectedSite.siteInfo.city} {selectedSite.siteInfo.state} {selectedSite.siteInfo.zip} - {selectedSite.siteInfo.number_of_floor} - {selectedSite.siteInfo.total_building_area_ft2} - {selectedSite.siteInfo.net_selling_area_ft2} - {selectedSite.siteInfo.total_stock_area_ft2} - {selectedSite.siteInfo.number_of_HVAC} - {selectedSite.siteInfo.program} - {selectedSite.siteInfo.utility} + + {selectedSite.siteInfo.number_of_floor} + + + {selectedSite.siteInfo.total_building_area_ft2} + + + {selectedSite.siteInfo.net_selling_area_ft2} + + + {selectedSite.siteInfo.total_stock_area_ft2} + + + {selectedSite.siteInfo.number_of_HVAC} + + + {selectedSite.siteInfo.program} + + + {selectedSite.siteInfo.utility} + @@ -90,11 +106,19 @@ export default function BenchmarkingData({ selectedSite, model, chooseModel }) { value={model} onChange={chooseModel} > - Regression Baseline + + Regression Baseline + 10/10 Average - Adjusted 10/10 Average - Weather Regression - Adjusted Weather Regression + + Adjusted 10/10 Average + + + Weather Regression + + + Adjusted Weather Regression + @@ -111,24 +135,42 @@ export default function BenchmarkingData({ selectedSite, model, chooseModel }) { Peak OAT (°F) Event Average OAT (°F) Peak Demand Intensity (W/ft²) - Avg. Demand Decrease Intensity (W/ft²) + + Avg. Demand Decrease Intensity (W/ft²) + {createFieldMetricBaselineRegressionRows().map((row) => ( {row.event_id} - {moment.utc(row.event_date).format("MM/DD/YY")} - {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")} - {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")} + + + {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")} {parseInt(row.peak_oat)} - {parseInt(row.event_avg_oat)} - {Math.round(row.peak_demand_intensity_wft2 * 100) / 100} - {Math.round(row.shed_avg_wft2 * 100) / 100} + + {parseInt(row.event_avg_oat)} + + + {Math.round(row.peak_demand_intensity_wft2 * 100) / 100} + + + {Math.round(row.shed_avg_wft2 * 100) / 100} + ))} @@ -136,4 +178,4 @@ export default function BenchmarkingData({ selectedSite, model, chooseModel }) { ); -} \ No newline at end of file +}