From 6bde27377f5fb2200d2ee070ac2ab88ef84720a4 Mon Sep 17 00:00:00 2001 From: dwindleduck <119227220+dwindleduck@users.noreply.github.com> Date: Tue, 5 Nov 2024 20:29:27 -0500 Subject: [PATCH] 248 styling (#266) * bold items and add total to denominator of Number of Periods Included * added static help icons to AnalysisHeader and EnergyUseHistoryChart, updated table layout to more closely match design * change icons from png to svg * added gap between rows in AnalysisHeader * replaced NonHeatingUsage icon including black line * Apply suggestions from code review Co-authored-by: plocket <52798256+plocket@users.noreply.github.com> --------- Co-authored-by: Thad Kerosky Co-authored-by: plocket <52798256+plocket@users.noreply.github.com> --- .../CaseSummaryComponents/AnalysisHeader.tsx | 32 ++++++++----- .../EnergyUseHistoryChart.tsx | 45 +++++++++++------- .../assets/HeatingUsage.png | Bin 655 -> 0 bytes .../assets/HeatingUsage.svg | 3 ++ .../assets/NonHeatingUsage.png | Bin 775 -> 0 bytes .../assets/NonHeatingUsage.svg | 4 ++ .../assets/NotAllowedInCalculations.png | Bin 582 -> 0 bytes .../assets/NotAllowedInCalculations.svg | 3 ++ .../assets/help-circle.svg | 3 ++ 9 files changed, 62 insertions(+), 28 deletions(-) delete mode 100644 heat-stack/app/components/ui/heat/CaseSummaryComponents/assets/HeatingUsage.png create mode 100644 heat-stack/app/components/ui/heat/CaseSummaryComponents/assets/HeatingUsage.svg delete mode 100644 heat-stack/app/components/ui/heat/CaseSummaryComponents/assets/NonHeatingUsage.png create mode 100644 heat-stack/app/components/ui/heat/CaseSummaryComponents/assets/NonHeatingUsage.svg delete mode 100644 heat-stack/app/components/ui/heat/CaseSummaryComponents/assets/NotAllowedInCalculations.png create mode 100644 heat-stack/app/components/ui/heat/CaseSummaryComponents/assets/NotAllowedInCalculations.svg create mode 100644 heat-stack/app/components/ui/heat/CaseSummaryComponents/assets/help-circle.svg diff --git a/heat-stack/app/components/ui/heat/CaseSummaryComponents/AnalysisHeader.tsx b/heat-stack/app/components/ui/heat/CaseSummaryComponents/AnalysisHeader.tsx index d6007ab5..2ea31225 100644 --- a/heat-stack/app/components/ui/heat/CaseSummaryComponents/AnalysisHeader.tsx +++ b/heat-stack/app/components/ui/heat/CaseSummaryComponents/AnalysisHeader.tsx @@ -1,5 +1,6 @@ import { type z } from 'zod'; import { type UsageDataSchema } from '#/types/types.ts'; +import HelpCircle from './assets/help-circle.svg' export function AnalysisHeader({ usage_data }: { usage_data: UsageDataSchema}) { // Example usage_data @@ -35,6 +36,8 @@ export function AnalysisHeader({ usage_data }: { usage_data: UsageDataSchema}) { // Extract the summary_output from usage_data const summaryOutputs = usage_data?.summary_output; + const totalRecords = usage_data?.billing_records?.length || "-" + // Calculate the number of billing periods included in Heating calculations const heatingAnalysisTypeRecords = usage_data?.billing_records?.filter( (billingRecord) => billingRecord.analysis_type === 1, @@ -58,40 +61,45 @@ export function AnalysisHeader({ usage_data }: { usage_data: UsageDataSchema}) { return ( -
-
Heat Load Analysis
-
+
+
+
Heat Load Analysis
+ {/* TODO: add help text here */} + {/* help text */} +
+ +
-
+
Average Indoor Temperature
-
+
{summaryOutputs?.average_indoor_temperature} °F

Balance Point Temperature
-
+
{summaryOutputs?.estimated_balance_point} °F

-
+
Number of Periods Included
-
{numRecordsForHeatingCalculations}
+
{numRecordsForHeatingCalculations} / {totalRecords}

Daily non-heating Usage
-
+
{/* Rounding to two decimal places */} {summaryOutputs?.other_fuel_usage?.toFixed(2)} therms
-
+
Standard Deviation of UA
-
+
{/* Rounding to two decimal places */} {( summaryOutputs?.standard_deviation_of_heat_loss_rate * 100 @@ -101,7 +109,7 @@ export function AnalysisHeader({ usage_data }: { usage_data: UsageDataSchema}) {
Whole-home UA
-
+
{/* Rounding to zero decimal places */} {summaryOutputs?.whole_home_heat_loss_rate?.toFixed(0)} BTU/h-°F
diff --git a/heat-stack/app/components/ui/heat/CaseSummaryComponents/EnergyUseHistoryChart.tsx b/heat-stack/app/components/ui/heat/CaseSummaryComponents/EnergyUseHistoryChart.tsx index e8c1da81..1c440be0 100644 --- a/heat-stack/app/components/ui/heat/CaseSummaryComponents/EnergyUseHistoryChart.tsx +++ b/heat-stack/app/components/ui/heat/CaseSummaryComponents/EnergyUseHistoryChart.tsx @@ -12,9 +12,10 @@ import { TableRow, } from '../../../../components/ui/table.tsx' -import HeatingUsage from './assets/HeatingUsage.png' -import NonHeatingUsage from './assets/NonHeatingUsage.png' -import NotAllowedInCalculations from './assets/NotAllowedInCalculations.png' +import HeatingUsage from './assets/HeatingUsage.svg' +import HelpCircle from './assets/help-circle.svg' +import NonHeatingUsage from './assets/NonHeatingUsage.svg' +import NotAllowedInCalculations from './assets/NotAllowedInCalculations.svg' import { tr } from '@faker-js/faker' @@ -82,19 +83,31 @@ export function EnergyUseHistoryChart({ usage_data }: { usage_data: UsageDataSch } return ( - +
- - # - Allowed Usage* - {/* TODO: add help text */} - Start Date - End Date - Days in Period - Gas Usage (therms) - Whole-home UA (BTU/h-°F) - Override Default - {/* TODO: add help text */} + + # + +
+
Allowed Usage
+ {/* TODO: add help text */} + {/* help text */} +
+ + + Start Date + End Date + Days in Period + Gas Usage (therms) + Whole-home UA (BTU/h-°F) + +
+
Override Default
+ {/* TODO: add help text */} + {/* help text */} +
+ + @@ -136,7 +149,7 @@ export function EnergyUseHistoryChart({ usage_data }: { usage_data: UsageDataSch return ( {index + 1} - + Analysis Type {startDate.toLocaleDateString()} diff --git a/heat-stack/app/components/ui/heat/CaseSummaryComponents/assets/HeatingUsage.png b/heat-stack/app/components/ui/heat/CaseSummaryComponents/assets/HeatingUsage.png deleted file mode 100644 index b6c04187ac1a3ab0b3d7a9a5d36b76bb5c548ef4..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 655 zcmV;A0&x9_P)+hFloAwXx#c$ zef$l;AG;uGmvcf&wd(+m)|RyS-#6UuDo7!Iu=k|(9-{3AJ5MZt9Zi`Z3f~F{64|Ndkx$UQmESf+o)JvbbEo`0D}PafjagYR`!uuclz}4d`ePK0l$|=B z4{`R=^p2yR=0%%_Qb_Ka2C#d~vQOO6Fqb30r`+YRNLhr;^K~%DAExK_T*j4TB!RoT z-P}px93^F<1=Ibq1zZyEe{iG;RbIAe6-3drbc1SJMW1Ff + + diff --git a/heat-stack/app/components/ui/heat/CaseSummaryComponents/assets/NonHeatingUsage.png b/heat-stack/app/components/ui/heat/CaseSummaryComponents/assets/NonHeatingUsage.png deleted file mode 100644 index e308bbfddcec87b69a8e5a4c09778d9fe17fba17..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 775 zcmV+i1Ni)jP)P000>X1^@s6#OZ}&00009a7bBm000XU z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP7`qxf*AfdekUP32`8V%)pr7{$Lm#Y}Y`5sV9ub>aJeVnEFyZ`Pt?)1BCS`|quv=xv)94m=KBncz<_w3 zn6(gL%im?)(9MxE2CPO?ht`WaN?R~3O9$E@C)GCB*KKRbITMM(bTUYyL}5=ss`Xu*jKmRQDcoECF(KREO;Hb1|VCP@?KU zxZ;4O&exasD(;U#Mg3SHh3G4+x3-t>j8uZc^=gG7zBxVov=NmI{b+Mu^3(uiqKb8Z zL?SZ-iFGx`WnC}Sg@^Xi73q;AWNdiGn%2z}MKpb3p)!mJ5Waf@V@CfLhZty5c8%w) zy)+0dd;Inls3#zT-aA5oEB+azJ>aW7kL?Ux&rv$R_-HK+kVF>a)y+nU*b5}fCP(U{jH(YR zwsL55KDDy@+it7|@?+CGQi+1#I-S-dFg*evx5ItanJ?XamX0deD8x2ybr({|8u~<` zF*Qm2K!vC7%S+YccR?}?Q8e`LpiZp2!tz2Fc|>MQ#NwCdE9t1FdM1)SvWyOx_Wgh( z5ca8;)kB-Vy0^}9;@43XCILmnr)Qh=qcvcnm^eWU{s8Q + + + diff --git a/heat-stack/app/components/ui/heat/CaseSummaryComponents/assets/NotAllowedInCalculations.png b/heat-stack/app/components/ui/heat/CaseSummaryComponents/assets/NotAllowedInCalculations.png deleted file mode 100644 index 7d679e9bd42038e4cd3ecb8b7cd4803856dfd621..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 582 zcmV-M0=fN(P)@cS8@Yn%hLMdf2#(aFP&^HIDJ5suCF^?4;LI`WK*-bIA2bHEq zQhq*XJv`4!h#&~x35?h<1{18=Z8q!YQhJP@ob$eBnD80d_QjG&955s>fN)79>HX{s zZamLhl~7AYf()l79^3c21%}~M3Pu*kFwIsjnv@?7K-8s9@U_!wwI25jO*LZYqHCB| z#+Fx&M!oC0u3y1)iLpM$UKxgJU?wn6D-*a<(B5pqWi?Z9FxCo!sFwgDZF8f$nGTZf zUqF%Ft3JiIoC3ARz}G-&<=l}o!07*qoM6N<$f~Q{kwEzGB diff --git a/heat-stack/app/components/ui/heat/CaseSummaryComponents/assets/NotAllowedInCalculations.svg b/heat-stack/app/components/ui/heat/CaseSummaryComponents/assets/NotAllowedInCalculations.svg new file mode 100644 index 00000000..35878d87 --- /dev/null +++ b/heat-stack/app/components/ui/heat/CaseSummaryComponents/assets/NotAllowedInCalculations.svg @@ -0,0 +1,3 @@ + + + diff --git a/heat-stack/app/components/ui/heat/CaseSummaryComponents/assets/help-circle.svg b/heat-stack/app/components/ui/heat/CaseSummaryComponents/assets/help-circle.svg new file mode 100644 index 00000000..927ceff2 --- /dev/null +++ b/heat-stack/app/components/ui/heat/CaseSummaryComponents/assets/help-circle.svg @@ -0,0 +1,3 @@ + + +