223 heatload graph #288

derekvmcintire · 2024-12-18T15:07:47Z

Questions to answer:

The data from lastResult has an average_heat_load that is higher than the maximum_heat_load, which causes the average point and line to be above the maximum. Is there a better data set that I should be using, or am I misunderstanding the data? In general, am I using the correct data here? And are my calculations correct? They are based off of the document in the issue comments, but the console.log listed in the issue was logging the balance_point_graph records, which I am not using.
Question Mark Icon - should this be a tool tip? What should the tool tip display?
Do we need more points along the lines? Right now I have drawn the lines based on only three points (start, design temp, design set point)

Work Done

Using the JSON data in lastResult, I did the following:

parse JSON data using the Reviver function
pass the parsed data to the HeatLoadAnalysis component (routes/_heat+/heatloadanalysis.tsx)
use the existing SummaryOutputSchema type for the parsed summary data
pass data to the Graphs component (components/ui.../HeatLoadAnalysis.tsx)
pass data from the Graphs component to the HeatLoad component for display
Calculate max heat load and avg heat load for the start (design temp - 10f), design temp and design set point
Set min and max values
Create the legend, and axis labels
Display lines and points
Create custom tool tip
Create ChartGrid component to display important values below the chart
Style accordingly

Testing

manually checked the UI to see the data points populated in the scatter chart
ran tests script (7 failing, but looks like they are also failing on the main branch so I am assuming this is unrelated)

Notes

I broke the component up into multiple files, but I was a bit unsure on the placement of those files, let me know if I should change anything about the file structure.
I am just prop drilling the data through the Graphs component for now. We could create a context to share this data or at least avoid prop drilling here.

Observations

the naming of the files/components is a little confusing, I am not sure if the pattern is intentional where routes.../heatloadanalysis.tsx and components.../HeatLoadAnalysis.tsx are meant to compliment each other.
There are many typescript errors and the tsconfig file seems to need some attention, but I didn't make any changes there.

Screenshots:

Desktop View:

Tool tip:

Mobile View:

heat-stack/app/components/ui/heat/CaseSummaryComponents/Graphs/HeatLoad.tsx

derekvmcintire · 2025-01-08T00:56:15Z

heat-stack/app/components/ui/heat/CaseSummaryComponents/Graphs/HeatLoad.tsx

+			maxValue = Math.max(maxValue, maxLine, avgLine)
+		}
+
+		const minY = Math.max(0, Math.floor((minValue * 0.8) / 10000) * 10000) // 20% buffer


might want to put some of these hardcoded files into a configuration file

heat-stack/app/components/ui/heat/CaseSummaryComponents/Graphs/HeatLoad.tsx

derekvmcintire · 2025-01-08T01:08:56Z

heat-stack/app/components/ui/heat/CaseSummaryComponents/Graphs/HeatLoad.tsx

+						<Label
+							value="Heat Load (BTU/h)"
+							position="left"
+							angle={-90}


can we move the label more to the center easily?

Was not able to get to this

heat-stack/app/components/ui/heat/CaseSummaryComponents/utility/heat-load-calculations.ts

derekvmcintire · 2025-01-10T01:09:36Z

Screen shot after addressing PR comments:

derekvmcintire · 2025-01-14T23:47:13Z

heat-stack/app/components/ui/heat/CaseSummaryComponents/Graphs/HeatLoad.tsx

+
+const X_AXIS_BUFFER_PERCENTAGE_MAX = 1.3; // 30% buffer
+const Y_AXIS_ROUNDING_UNIT = 10000; // Rounding unit for minY and maxY
+const Y_AXIS_MIN_VALUE = 0; // Always start the Y axis at 0


Added constants for these numbers

derekvmcintire · 2025-01-14T23:47:26Z

heat-stack/app/components/ui/heat/CaseSummaryComponents/Graphs/HeatLoad.tsx

+const Y_AXIS_ROUNDING_UNIT = 10000; // Rounding unit for minY and maxY
+const Y_AXIS_MIN_VALUE = 0; // Always start the Y axis at 0
+
+const roundDownToNearestTen = (n: number) => Math.floor(n / 10) * 10; // Used for determining the start temperature on the X axis


Made this a function for clarity

derekvmcintire · 2025-01-14T23:48:42Z

heat-stack/app/components/ui/heat/CaseSummaryComponents/Graphs/HeatLoad.tsx

+		// seet min and max Y axis values
+		const minY = Y_AXIS_MIN_VALUE
+		const adjustedMaxYValue = maxValue * X_AXIS_BUFFER_PERCENTAGE_MAX;
+		const maxY = Math.ceil(adjustedMaxYValue / Y_AXIS_ROUNDING_UNIT) * Y_AXIS_ROUNDING_UNIT


min and max values here are now more readable

derekvmcintire · 2025-01-14T23:49:08Z

heat-stack/app/components/ui/heat/CaseSummaryComponents/Graphs/HeatLoad.tsx

-						unit="°F"
+						dataKey="temperature"
+						name="Outdoor Temperature"
+						domain={[minTemperature, maxTemperature]}


updated to min/max instead of start/end

derekvmcintire · 2025-01-14T23:49:50Z

heat-stack/app/components/ui/heat/CaseSummaryComponents/Graphs/HeatLoad.tsx

 			</ResponsiveContainer>
+			<CustomLegend />


Created a custom legend after discovering it was only working by accident

derekvmcintire · 2025-01-14T23:54:29Z

heat-stack/app/components/ui/heat/CaseSummaryComponents/Graphs/HeatLoad.tsx

+import { buildHeatLoadGraphData } from '../utility/build-heat-load-graph-data'
+import { HeatLoadGraphToolTip } from './HeatLoadGraphToolTip'
+import { CustomLegend } from './HeatLoadGraphLegend'
+import { DESIGN_SET_POINT } from '../../../../../global_constants'


moved design set point to a constant

derekvmcintire · 2025-01-14T23:55:09Z

heat-stack/app/global_constants.ts

@@ -0,0 +1 @@
+export const DESIGN_SET_POINT = 70 // Design set point (70°F), defined in external documentation - https://docs.google.com/document/d/16WlqY3ofq4xpalsfwRuYBWMbeUHfXRvbWU69xxVNCGM/edit?tab=t.0


added link to google doc for reference

derekvmcintire · 2025-01-14T23:56:31Z

heat-stack/app/components/ui/heat/CaseSummaryComponents/Graphs/HeatLoad.tsx

+		<div className="min-w-[625px] rounded-lg shadow-lg">
+			<span className="mb-4 text-lg font-semibold">
+				Heating System Demand
+				<Icon name="question-mark-circled" className="ps-1" size="md" />


Did not implement tool tip yet, should probably be a follow up ticket

derekvmcintire · 2025-01-14T23:57:25Z

heat-stack/app/components/ui/heat/CaseSummaryComponents/utility/heat-load-calculations.ts

+	designSetPoint: number,
+): number {
+	return Math.max(0, (designSetPoint - temperature) * whole_home_heat_loss_rate)
+}


Removed rounding

derekvmcintire added 21 commits December 18, 2024 09:30

Use rules engine output to populate heat load graph

3310626

update graph record type

6abc5ae

run prettier for select files

6753faa

fix dataKeys

f27f962

Use correct data and make chart pretty

bccf96c

Graph working, but needs clean up

1c596d1

Clean up and comments

cb5e6a2

Comments on calculation functions

3b186ea

Add icon, still need to add values underneath chart

25484de

restore ws changes to types

cd2b386

Add columns at bottom of chart

e6b14c4

Fix reversed average and max in grid

413d7d5

Fix responsiveness issues

0b1ebd9

Extract utility and data building functions, tool tip and constants

f57e751

Add comment with link to external calculation docs

35c1b5a

Fix tool tip

0cd25a7

quick refactor

bb63730

clean up

5ee0994

refactor calculating min and max for Y axis

2bc4388

set start and end temps once

31053fc

Add 2f to x axis so tool tip is easier to invoke

4b2d841

derekvmcintire commented Jan 8, 2025

View reviewed changes

heat-stack/app/components/ui/heat/CaseSummaryComponents/Graphs/HeatLoad.tsx Outdated Show resolved Hide resolved