223 heatload graph

[derekvmcintire]

Questions to answer:

1. 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.
2. Question Mark Icon - should this be a tool tip? What should the tool tip display?
3. 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: