case summary component mock up (#103)

* place holder for case summary component * start of mock up of CaseSummary component with example chart from "rechart" * created cards & styling * adjusted mock up to reflect 11/5/23 UA revis * start creating components for summary Co-authored-by: plocket <[email protected]> * used tailwind flexboxes, simplified CSS, broke CaseSummary into React components * adjusted formatting to match Figma * created WholeHomeUAComparison graph and placeholders for StandardDeviationVsBalanePoint and HeatLoadGraph * added graphs - Standard Deviation of UA & Heat Load * added table to Energy Use History in Case Summary * added lucide-react for check icon and checkbox for usage table * added trend-line to whole-home UA comparison chart * Clean up root.tsx, save original code Co-authored-by: Gavin Kimball <[email protected]> Co-authored-by: Jeff Korenstein <[email protected]> Co-authored-by: Thad Kerosky <[email protected]> Co-authored-by: Leopardfoot <[email protected]> * graphs restored, server graphs not yet working * restored user in loader to fix types * typefix on root_original --------- Co-authored-by: Gavin Kimball <[email protected]> Co-authored-by: plocket <[email protected]> Co-authored-by: plocket <[email protected]> Co-authored-by: Gavin Kimball <[email protected]> Co-authored-by: Jeff Korenstein <[email protected]> Co-authored-by: Thad Kerosky <[email protected]> Co-authored-by: Leopardfoot <[email protected]>
codeforboston · Dec 1, 2023 · 43d1f53 · 43d1f53
1 parent 0b6f2d1
commit 43d1f53
Show file tree

Hide file tree

Showing 17 changed files with 1,558 additions and 404 deletions.
diff --git a/heat-stack/app/App.css b/heat-stack/app/App.css
@@ -0,0 +1,78 @@
+body {
+  font-family: 'Inter', sans-serif;
+}
+
+.main-container {
+  grid-area: main;
+  overflow-y: auto;
+  padding: 20px 20px;
+  margin: 30px 30px;
+}
+
+.page-title {
+  color: #000;
+    font-size: 30px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 36px;
+    letter-spacing: -0.225px;
+    text-align: center;
+    padding-block: 20px;
+      /*vertical padding */
+}
+.section-title {
+color: var(--slate-700, #334155);
+  font-size: 24px;
+  font-style: normal;
+  line-height: 32px;
+  letter-spacing: -0.144px;
+  padding-block: 20px;
+    /*vertical padding */
+}
+
+.item-group-title {
+  color: var(--slate-900, #0F172A);
+    /* h2 */
+    font-size: 30px;
+    font-style: normal;
+    line-height: 36px;
+    /* 120% */
+    letter-spacing: -0.225px;
+      padding-block: 20px;
+        /*vertical padding */
+}
+.item-title {
+color: var(--slate-900, #0F172A);
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 28px;
+  padding-block: 20px;
+    /*vertical padding */
+}
+.item-title-small {
+color: var(--slate-900, #0F172A);
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 28px;
+  padding-block: 20px;
+    /*vertical padding */
+}
+
+.item-big {
+  color: var(--slate-900, #0F172A);
+    font-size: 30px;
+    font-weight: 300;
+    font-style: normal;
+    line-height: 36px;
+    letter-spacing: -0.225px;
+}
+.item {
+  color: var(--slate-900, #0F172A);
+  font-size: 20px;
+  font-weight: 300;
+  font-style: normal;
+  line-height: 28px;
+}
+
diff --git a/heat-stack/app/components/CaseSummary.tsx b/heat-stack/app/components/CaseSummary.tsx
@@ -0,0 +1,18 @@
+import { CurrentHeatingSystem } from './ui/CaseSummaryComponents/CurrentHeatingSystem.tsx'
+import { EnergyUseHistory } from './ui/CaseSummaryComponents/EnergyUseHistory.tsx'
+import { Graphs } from './ui/CaseSummaryComponents/Graphs.tsx'
+import { HomeInformation } from './ui/CaseSummaryComponents/HomeInformation.tsx'
+
+export function CaseSummary() {
+	return (
+		<main className="main-container">
+			<div>
+				<h1 className="page-title">Case Summary</h1>
+				<HomeInformation />
+				<CurrentHeatingSystem />
+				<EnergyUseHistory />
+				<Graphs />
+			</div>
+		</main>
+	)
+}
diff --git a/heat-stack/app/components/ui/CaseSummaryComponents/CurrentHeatingSystem.tsx b/heat-stack/app/components/ui/CaseSummaryComponents/CurrentHeatingSystem.tsx
@@ -0,0 +1,39 @@
+export function CurrentHeatingSystem() {
+	const fuelType = 'Natural Gas'
+	const heatingSystemEfficiency = '75'
+	const setPoint = '70'
+	const setbackTemperature = '65'
+	const setbackTime = '7'
+
+	return (
+		<div className="section-title">
+			Current Heating System
+			<hr />
+			<div className="flex flex-row">
+				<div className="basis-1/2">
+					<div className="item-title">
+						Fuel Type
+						<br />
+						<div className="item-big">{fuelType}</div> <br />
+						Heating System Efficiency (%)
+						<br />
+						<div className="item-big">{heatingSystemEfficiency}</div> <br />
+					</div>
+				</div>
+
+				<div className="basis-1/2">
+					<div className="item-group-title">Thermostat Settings</div>
+					<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>
+	)
+}
diff --git a/heat-stack/app/components/ui/CaseSummaryComponents/EnergyUseHistory.tsx b/heat-stack/app/components/ui/CaseSummaryComponents/EnergyUseHistory.tsx
@@ -0,0 +1,52 @@
+import { EnergyUseHistoryChart } from './EnergyUseHistoryChart.tsx'
+
+export function EnergyUseHistory() {
+	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 fileName = '20200930_Eversource.csv'
+
+	return (
+		<div className="section-title">
+			Energy Use History
+			<hr />
+			<div className="item-group-title">
+				Data Source
+				<br />
+				<div className="item">{fileName}</div> <br />
+			</div>
+			<div className="item-group-title">Analysis</div>
+			<div className="flex flex-row">
+				<div className="basis-1/3">
+					<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="basis-1/3">
+					<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 className="basis-1/3">
+					<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="item-title-small">Usage Details</div>
+			<EnergyUseHistoryChart />
+		</div>
+	)
+}
diff --git a/heat-stack/app/components/ui/CaseSummaryComponents/EnergyUseHistoryChart.tsx b/heat-stack/app/components/ui/CaseSummaryComponents/EnergyUseHistoryChart.tsx
@@ -0,0 +1,62 @@
+import { Checkbox } from '../../../components/ui/checkbox.tsx'
+
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from '../../../components/ui/table.tsx'
+
+const months = [
+	{
+		includeData: true,
+		startDate: '02/02/2018',
+		endDate: '02/28/2018',
+		daysInBill: '27',
+		usage: 'Yes',
+		fUA: '10',
+	},
+	{
+		includeData: true,
+		startDate: '03/01/2018',
+		endDate: '03/31/2018',
+		daysInBill: '31',
+		usage: 'Modest',
+		fUA: '30',
+	},
+]
+
+export function EnergyUseHistoryChart() {
+	return (
+		<Table>
+			<TableHeader>
+				<TableRow>
+					<TableHead className="w-[100px]">#</TableHead>
+					<TableHead>Include Data</TableHead>
+					<TableHead>Start Date</TableHead>
+					<TableHead>End Date</TableHead>
+					<TableHead>Days in Bill</TableHead>
+					<TableHead>Usage (therms)</TableHead>
+					<TableHead>60.5 °F UA (BTU/h-F)</TableHead>
+				</TableRow>
+			</TableHeader>
+			<TableBody>
+				{months.map((month, index) => (
+					<TableRow key={index}>
+						<TableCell className="font-medium">{index + 1}</TableCell>
+						<TableCell>
+							<Checkbox checked={month.includeData} />
+						</TableCell>
+						<TableCell>{month.startDate}</TableCell>
+						<TableCell>{month.endDate}</TableCell>
+						<TableCell>{month.daysInBill}</TableCell>
+						<TableCell>{month.usage}</TableCell>
+						<TableCell>{month.fUA}</TableCell>
+					</TableRow>
+				))}
+			</TableBody>
+		</Table>
+	)
+}
diff --git a/heat-stack/app/components/ui/CaseSummaryComponents/Graphs.tsx b/heat-stack/app/components/ui/CaseSummaryComponents/Graphs.tsx
@@ -0,0 +1,15 @@
+import { HeatLoad } from './Graphs/HeatLoad.tsx'
+import { StandardDeviationOfUA } from './Graphs/StandardDeviationOfUA.tsx'
+import { WholeHomeUAComparison } from './Graphs/WholeHomeUAComparison.tsx'
+
+export function Graphs() {
+	return (
+		<div className="section-title">
+			Graphs
+			<hr />
+			<HeatLoad />
+			<WholeHomeUAComparison />
+			<StandardDeviationOfUA />
+		</div>
+	)
+}
diff --git a/heat-stack/app/components/ui/CaseSummaryComponents/Graphs/HeatLoad.tsx b/heat-stack/app/components/ui/CaseSummaryComponents/Graphs/HeatLoad.tsx
@@ -0,0 +1,48 @@
+import {
+	ScatterChart,
+	Scatter,
+	XAxis,
+	YAxis,
+	CartesianGrid,
+	Tooltip,
+	ResponsiveContainer,
+} from 'recharts'
+
+// data from Karle Heat Load Analysis Beta 7 2023-07-11
+const data = [
+	{ x: 0, y: 74015 },
+	{ x: 60.5, y: 10045 },
+	{ x: 67, y: 3172 },
+	{ x: 70, y: 0 },
+	{ x: 8.4, y: 65133 },
+]
+
+export function HeatLoad() {
+	return (
+		<div>
+			<div className="item-title">Heat Load</div>
+
+			<ResponsiveContainer width="100%" height={400}>
+				<ScatterChart
+					margin={{
+						top: 20,
+						right: 20,
+						bottom: 20,
+						left: 100,
+					}}
+				>
+					<CartesianGrid />
+					<XAxis
+						type="number"
+						dataKey="x"
+						name=" Outdoor Temperature"
+						unit="°F"
+					/>
+					<YAxis type="number" dataKey="y" name=" Heat Load" unit=" BTU/h" />
+					<Tooltip cursor={{ strokeDasharray: '3 3' }} />
+					<Scatter name="Heat Load" data={data} fill="#8884d8" />
+				</ScatterChart>
+			</ResponsiveContainer>
+		</div>
+	)
+}
diff --git a/heat-stack/app/components/ui/CaseSummaryComponents/Graphs/StandardDeviationOfUA.tsx b/heat-stack/app/components/ui/CaseSummaryComponents/Graphs/StandardDeviationOfUA.tsx
@@ -0,0 +1,53 @@
+import {
+	ScatterChart,
+	Scatter,
+	XAxis,
+	YAxis,
+	CartesianGrid,
+	Tooltip,
+	ResponsiveContainer,
+} from 'recharts'
+
+// data from Karle Heat Load Analysis Beta 7 2023-07-11
+const data = [
+	{ x: 58.5, y: 0.0534 },
+	{ x: 60.5, y: 0.0508 },
+	{ x: 62.5, y: 0.0528 },
+]
+
+export function StandardDeviationOfUA() {
+	return (
+		<div>
+			<div className="item-title">Standard Deviation of UA</div>
+
+			<ResponsiveContainer width="100%" height={400}>
+				<ScatterChart
+					margin={{
+						top: 20,
+						right: 20,
+						bottom: 20,
+						left: 100,
+					}}
+				>
+					<CartesianGrid />
+					<XAxis
+						type="number"
+						dataKey="x"
+						name=" Balance Point"
+						unit="°F"
+						domain={[55, 65]}
+					/>
+					<YAxis
+						type="number"
+						dataKey="y"
+						name=" "
+						unit=""
+						domain={[0.04, 0.06]}
+					/>
+					<Tooltip cursor={{ strokeDasharray: '3 3' }} />
+					<Scatter name="Heat Load" data={data} fill="#8884d8" />
+				</ScatterChart>
+			</ResponsiveContainer>
+		</div>
+	)
+}