Skip to content

Commit

Permalink
adjusted mock up to reflect 11/5/23 UA revision
Browse files Browse the repository at this point in the history
  • Loading branch information
@jkoren
jkoren committed Nov 6, 2023
1 parent 6fea683 commit b15ead4
Show file tree
Hide file tree
Showing 2 changed files with 150 additions and 134 deletions.
91 changes: 30 additions & 61 deletions heat-stack/app/App.css
View file
Original file line number Diff line number Diff line change
@@ -1,35 +1,7 @@
body {
margin: 0;
padding: 0;
background-color: #1d2634;
color: #9e9ea4;
font-family: 'Montserrat', sans-serif;
}

.icon {
vertical-align: middle;
line-height: 1px;
font-size: 20px;
}

.icon_header {
vertical-align: middle;
line-height: 1px;
font-size: 26px;
}

.icon,
.icon_header {
margin-right: 5px;
}

.close_icon {
color: red;
margin-left: 30px;
margin-top: 10px;
cursor: pointer;
}

.grid-container {
display: grid;
grid-template-columns: 260px 1fr 1fr 1fr;
Expand All @@ -40,23 +12,6 @@ body {
height: 100vh;
}

/* Header */
.header {
grid-area: header;
height: 60px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 30px 0 30px;
box-shadow: 0 6px 7px -3px rgba(0, 0, 0, 0.35);
}

.menu-icon {
display: none;
}

/* End Header */

/* Main */
.main-container {
grid-area: main;
Expand All @@ -65,19 +20,20 @@ body {
color: #9e9ea4;
}

.main-title {
display: flex;
justify-content: space-between;
}

.header-cards {
.two-cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin: 15px 0;
gap: 10px;
margin: 5px 0;
}
.three-cards {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
margin: 5px 0;
}

.main-cards {
.four-cards {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 20px;
Expand All @@ -99,20 +55,33 @@ body {
font-size: large;
}

.navigation {
font-size: smaller;
.page-title {
font-size: x-large;
text-align: center;
}
.section-title {
font-size: xx-large
}

.item-title {
font: bold;
font-size: x-large
}
.item-title-small {
font: bold;
font-size: medium
}

.item {
font-size: medium
}

.card-inner {
display: flex;
align-items: center;
/* align-items: center; */
justify-content: space-between;
}

.card-inner>.card_icon {
font-size: 25px;
}

.charts {
display: grid;
grid-template-columns: 1fr 1fr;
Expand Down
193 changes: 120 additions & 73 deletions heat-stack/app/components/CaseSummary.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,28 @@
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip } from 'recharts'

export function CaseSummary() {
const name = 'Pietro Schirano'
const street = '567 Pine Avenue Apt 21'
const city = 'Rivertown'
const state = 'MA'
const zip = '02856'
const country = 'United States of America'
const livingArea = '3000'
const designTemperature = '63'
const designTemperatureOverride = '65'
const fuelType = 'Natural Gas'
const heatingSystemEfficiency = '75'
const setPoint = '70'
const setbackTemperature = '65'
const setbackTime = '7'
const fileName = '20200930_Eversource.csv'
const averageIndoorTemperature = '63.5'
const dailyOtherUsage = '1.07'
const balancePoint = '60.5'
const numPeriodsIncluded = '30 / 36'
const standardDevationUA = '5.52'
const wholeHomeUA = '1,112'

const data = [
{
name: '58 F',
Expand Down Expand Up @@ -37,98 +59,123 @@ export function CaseSummary() {
return (
<main className="main-container">
<div>
<div className="navigation">Back to website</div>
<div className="page-title"> Case Summary</div>

<div className="header-cards">
<div className="section-title"> Home Information </div>
<div className="two-cards">
<div className="card-inner">
<h5 className="text-h5">Winnie Carroll’s Case Summary</h5>
<div className="item-title">
Resident / Client
<br />
<div className="item">{name}</div> <br />
Address
<div className="item">{street}</div>
<div className="item">
{city}, {state}, {zip}
</div>
<div className="item">{country}</div> <br />
Living Area (sf)
<div className="item">{livingArea}</div>
</div>
</div>

<div className="card-inner">179 Broadway, Somerville, MA 02145</div>
</div>
<div className="main-title">
<h5 className="text-center text-h5">
Summary of heat load analysis outputs
</h5>
</div>
</div>

<div className="main-cards">
<div className="card-inner">
<div className="card-title">
Avg heat load at design temp
<br />
<br />
<b className="card-statistic">58,582 BTU/h</b>
<div className="card-inner">
<div className="item-title">
Design Temperature (°F) <br />
<div className="item">{designTemperature}</div> <br />
<div className="item">Override: {designTemperatureOverride}</div>
</div>
</div>
</div>

<div className="card-inner">
<div className="card-title">
Average indoor temp
<br />
<br />
<b className="card-statistic">60.0 F</b>
<hr />

<div className="section-title"> Current Heating System </div>
<div className="two-cards">
<div className="card-inner">
<div className="item-title">
Fuel Type
<br />
<div className="item">{fuelType}</div> <br />
Heating System Efficiency (%)
<br />
<div className="item">{heatingSystemEfficiency}</div> <br />
</div>
</div>
</div>

<div className="card-inner">
<div className="card-title">
Standard deviation of UA
<br />
<br />
<b className="card-statistic">5.08%</b>
<div className="card-inner">
<div className="item-title">
Set Point (°F) <br />
<div className="item">{setPoint}</div> <br />
Setback Temperature (°F)
<br />
<div className="item">{setbackTemperature}</div> <br />
Setback Time (h)
<div className="item">{setbackTime}</div>
</div>
</div>
</div>

<div className="card-inner">
<div>
Balance point
<LineChart
width={250}
height={150}
data={data}
margin={{
top: 5,
right: 30,
left: 20,
bottom: 5,
}}
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="name" />
<YAxis />
<Tooltip />
<Line type="monotone" dataKey="uv" stroke="#82ca9d" />
</LineChart>
</div>
<hr />

<div className="section-title">Energy Use History</div>
<div className="item-title">
Data Source
<br />
<div className="item">{fileName}</div> <br />
</div>
<div className="item-title">Analysis</div>
<div className="three-cards">
<div className="card-inner">
<div className="item-title-small">
Average Indoor Temperature (°F) <br />
<div className="item">{averageIndoorTemperature}</div> <br />
Daily Other Usage <br />
<div className="item">{dailyOtherUsage}</div> <br />
</div>
</div>

<div className="card-inner">
<div className="card-title">
Max heat load at design temp
<br />
<br />
<b className="card-statistic">69,793 BTU/h</b>
<div className="card-inner">
<div className="item-title-small">
Balance Point (°F) <br />
<div className="item">{balancePoint}</div> <br />
No. of Periods Included <br />
<div className="item">{numPeriodsIncluded}</div> <br />
</div>
</div>
</div>

<div className="card-inner">
<div className="card-title">
Design temp
<br />
<br />
<b className="card-statistic">8.4 F</b>
<div className="card-inner">
<div className="item-title-small">
Standard Deviation of UA (%) <br />
<div className="item">{standardDevationUA}</div> <br />
Whole-home UA (BTU/h-F) <br />
<div className="item">{wholeHomeUA}</div> <br />
</div>
</div>
</div>

<div className="card-inner">
<div className="card-title">
Whole home UA
<br />
<br />
<b className="card-statistic">1057 BTU/h-F</b>
</div>
<hr />

<div className="section-title">Graphs</div>
<div className="item-title">
Balance point
<LineChart
width={750}
height={450}
data={data}
margin={{
top: 5,
right: 30,
left: 20,
bottom: 5,
}}
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="name" />
<YAxis />
<Tooltip />
<Line type="monotone" dataKey="uv" stroke="#82ca9d" />
</LineChart>
</div>
</div>
</main>
Expand Down

0 comments on commit b15ead4

Please sign in to comment.