Draw HeatLoad graph from static Rules Engine output

[thadk]

• Un-stringify using "Reviver" below to use the rules engine output below in details to populate https://github.com/codeforboston/home-energy-analysis-tool/blob/main/heat-stack/app/components/ui/heat/CaseSummaryComponents/Graphs/HeatLoad.tsx component from the design
• Modify the existing old HeatLoad to match the new design (check columns, headers, etc).
• Use existing graph components in HeatLoad as possible
• Add basic interactivity
• Try to implement interactivity in design as closely as possible--click the one checkbox to see next step. (here's the very initial clickable page).

Goal:

Usage:

const originalValue = new Map([['a', 1]]);
const str = JSON.stringify(originalValue, replacer);
const newValue = JSON.parse(str, reviver);
console.log(originalValue, newValue);

https://stackoverflow.com/a/56150320

    function reviver(key: any, value: any) {
    if(typeof value === 'object' && value !== null) {
         if (value.dataType === 'Map') {
         return new Map(value.value);
         }
     }
     return value;
     }

Output from Rules Engine when it runs in pyodide.test.ts for passing into React component prop/parameter (use reviver to convert back to Map()) :

{"dataType":"Map","value":[["summary_output",{"dataType":"Map","value":[["estimated_balance_point",59.5],["other_fuel_usage",8.666666666666666],["average_indoor_temperature",68],["difference_between_ti_and_tbp",8.5],["design_temperature",9.5],["whole_home_heat_loss_rate",47972.03453453454],["standard_deviation_of_heat_loss_rate",0.07742772585617895],["average_heat_load",2494545.795795796],["maximum_heat_load",2902308.0893393396]]}],["balance_point_graph",{"dataType":"Map","value":[["records",[{"dataType":"Map","value":[["balance_point",60],["heat_loss_rate",41034.85407876231],["change_in_heat_loss_rate",0],["percent_change_in_heat_loss_rate",0],["standard_deviation",0.3967358807600794]]},{"dataType":"Map","value":[["balance_point",60.5],["heat_loss_rate",38592.303240740745],["change_in_heat_loss_rate",-2442.550838021569],["percent_change_in_heat_loss_rate",-6.32911392405064],["standard_deviation",0.39673588076007943]]},{"dataType":"Map","value":[["balance_point",59.5],["heat_loss_rate",43807.47935435436],["change_in_heat_loss_rate",2772.625275592043],["percent_change_in_heat_loss_rate",6.329113924050622],["standard_deviation",0.3967358807600795]]},{"dataType":"Map","value":[["balance_point",60.5],["heat_loss_rate",42226.71012849585],["change_in_heat_loss_rate",-2672.576590411132],["percent_change_in_heat_loss_rate",-6.329113924050639],["standard_deviation",0.30164495413734566]]},{"dataType":"Map","value":[["balance_point",59.5],["heat_loss_rate",47933.022308022315],["change_in_heat_loss_rate",3033.7355891153347],["percent_change_in_heat_loss_rate",6.3291139240506284],["standard_deviation",0.3016449541373457]]},{"dataType":"Map","value":[["balance_point",60.5],["heat_loss_rate",46671.62698412699],["change_in_heat_loss_rate",-2953.9004420333513],["percent_change_in_heat_loss_rate",-6.329113924050628],["standard_deviation",0.15298851745396608]]},{"dataType":"Map","value":[["balance_point",59.5],["heat_loss_rate",52978.60360360361],["change_in_heat_loss_rate",3353.0761774432685],["percent_change_in_heat_loss_rate",6.329113924050636],["standard_deviation",0.1529885174539661]]},{"dataType":"Map","value":[["balance_point",60.5],["heat_loss_rate",44137.56613756614],["change_in_heat_loss_rate",-2793.516844149759],["percent_change_in_heat_loss_rate",-6.329113924050642],["standard_deviation",0.10782787516463575]]},{"dataType":"Map","value":[["balance_point",59.5],["heat_loss_rate",50102.10210210211],["change_in_heat_loss_rate",3171.0191203862123],["percent_change_in_heat_loss_rate",6.329113924050639],["standard_deviation",0.10782787516463574]]},{"dataType":"Map","value":[["balance_point",59.5],["heat_loss_rate",50102.10210210211],["change_in_heat_loss_rate",3171.0191203862123],["percent_change_in_heat_loss_rate",6.329113924050639],["standard_deviation",0.10782787516463574]]},{"dataType":"Map","value":[["balance_point",59],["heat_loss_rate",53732.689210950084],["change_in_heat_loss_rate",3630.587108847976],["percent_change_in_heat_loss_rate",6.756756756756753],["standard_deviation",0.10782787516463577]]},{"dataType":"Map","value":[["balance_point",60],["heat_loss_rate",44935.829817158934],["change_in_heat_loss_rate",-3036.2047173756073],["percent_change_in_heat_loss_rate",-6.756756756756764],["standard_deviation",0.07742772585617896]]},{"dataType":"Map","value":[["balance_point",59],["heat_loss_rate",51448.26892109501],["change_in_heat_loss_rate",3476.2343865604707],["percent_change_in_heat_loss_rate",6.756756756756752],["standard_deviation",0.07742772585617896]]}]]]}],["billing_records",[{"dataType":"Map","value":[["period_start_date","2020-10-02"],["period_end_date","2020-11-04"],["usage",29],["analysis_type_override",null],["inclusion_override",false],["analysis_type",0],["default_inclusion_by_calculation",false],["eliminated_as_outlier",false],["whole_home_heat_loss_rate",null]]},{"dataType":"Map","value":[["period_start_date","2020-11-05"],["period_end_date","2020-12-03"],["usage",36],["analysis_type_override",null],["inclusion_override",false],["analysis_type",1],["default_inclusion_by_calculation",true],["eliminated_as_outlier",true],["whole_home_heat_loss_rate",13983.825597749652]]},{"dataType":"Map","value":[["period_start_date","2020-12-04"],["period_end_date","2021-01-07"],["usage",97],["analysis_type_override",null],["inclusion_override",false],["analysis_type",1],["default_inclusion_by_calculation",true],["eliminated_as_outlier",false],["whole_home_heat_loss_rate",48245.12012012012]]},{"dataType":"Map","value":[["period_start_date","2021-01-08"],["period_end_date","2021-02-05"],["usage",105],["analysis_type_override",null],["inclusion_override",false],["analysis_type",1],["default_inclusion_by_calculation",true],["eliminated_as_outlier",false],["whole_home_heat_loss_rate",52614.4894894895]]},{"dataType":"Map","value":[["period_start_date","2021-02-06"],["period_end_date","2021-03-05"],["usage",98],["analysis_type_override",null],["inclusion_override",false],["analysis_type",1],["default_inclusion_by_calculation",true],["eliminated_as_outlier",false],["whole_home_heat_loss_rate",48791.291291291294]]},{"dataType":"Map","value":[["period_start_date","2021-03-06"],["period_end_date","2021-04-06"],["usage",66],["analysis_type_override",null],["inclusion_override",false],["analysis_type",0],["default_inclusion_by_calculation",false],["eliminated_as_outlier",false],["whole_home_heat_loss_rate",null]]},{"dataType":"Map","value":[["period_start_date","2021-04-07"],["period_end_date","2021-05-05"],["usage",22],["analysis_type_override",null],["inclusion_override",false],["analysis_type",0],["default_inclusion_by_calculation",false],["eliminated_as_outlier",false],["whole_home_heat_loss_rate",null]]},{"dataType":"Map","value":[["period_start_date","2021-05-06"],["period_end_date","2021-06-07"],["usage",19],["analysis_type_override",null],["inclusion_override",false],["analysis_type",0],["default_inclusion_by_calculation",false],["eliminated_as_outlier",false],["whole_home_heat_loss_rate",null]]},{"dataType":"Map","value":[["period_start_date","2021-06-08"],["period_end_date","2021-07-06"],["usage",7],["analysis_type_override",null],["inclusion_override",false],["analysis_type",-1],["default_inclusion_by_calculation",true],["eliminated_as_outlier",false],["whole_home_heat_loss_rate",null]]},{"dataType":"Map","value":[["period_start_date","2021-07-07"],["period_end_date","2021-08-04"],["usage",10],["analysis_type_override",null],["inclusion_override",false],["analysis_type",-1],["default_inclusion_by_calculation",true],["eliminated_as_outlier",false],["whole_home_heat_loss_rate",null]]},{"dataType":"Map","value":[["period_start_date","2021-08-05"],["period_end_date","2021-09-08"],["usage",11],["analysis_type_override",null],["inclusion_override",false],["analysis_type",-1],["default_inclusion_by_calculation",true],["eliminated_as_outlier",false],["whole_home_heat_loss_rate",null]]},{"dataType":"Map","value":[["period_start_date","2021-09-09"],["period_end_date","2021-10-05"],["usage",8],["analysis_type_override",null],["inclusion_override",false],["analysis_type",0],["default_inclusion_by_calculation",false],["eliminated_as_outlier",false],["whole_home_heat_loss_rate",null]]},{"dataType":"Map","value":[["period_start_date","2021-10-06"],["period_end_date","2021-11-03"],["usage",13],["analysis_type_override",null],["inclusion_override",false],["analysis_type",0],["default_inclusion_by_calculation",false],["eliminated_as_outlier",false],["whole_home_heat_loss_rate",null]]},{"dataType":"Map","value":[["period_start_date","2021-11-04"],["period_end_date","2021-12-06"],["usage",41],["analysis_type_override",null],["inclusion_override",false],["analysis_type",1],["default_inclusion_by_calculation",true],["eliminated_as_outlier",true],["whole_home_heat_loss_rate",16541.842475386784]]},{"dataType":"Map","value":[["period_start_date","2021-12-07"],["period_end_date","2022-01-05"],["usage",86],["analysis_type_override",null],["inclusion_override",false],["analysis_type",1],["default_inclusion_by_calculation",true],["eliminated_as_outlier",false],["whole_home_heat_loss_rate",42237.23723723725]]},{"dataType":"Map","value":[["period_start_date","2022-01-06"],["period_end_date","2022-02-03"],["usage",132],["analysis_type_override",null],["inclusion_override",false],["analysis_type",1],["default_inclusion_by_calculation",true],["eliminated_as_outlier",true],["whole_home_heat_loss_rate",63097.74964838257]]},{"dataType":"Map","value":[["period_start_date","2022-02-04"],["period_end_date","2022-03-07"],["usage",116],["analysis_type_override",null],["inclusion_override",false],["analysis_type",1],["default_inclusion_by_calculation",true],["eliminated_as_outlier",true],["whole_home_heat_loss_rate",58622.372372372374]]},{"dataType":"Map","value":[["period_start_date","2022-03-08"],["period_end_date","2022-04-04"],["usage",49],["analysis_type_override",null],["inclusion_override",false],["analysis_type",0],["default_inclusion_by_calculation",false],["eliminated_as_outlier",false],["whole_home_heat_loss_rate",null]]},{"dataType":"Map","value":[["period_start_date","2022-04-05"],["period_end_date","2022-05-05"],["usage",39],["analysis_type_override",null],["inclusion_override",false],["analysis_type",0],["default_inclusion_by_calculation",false],["eliminated_as_outlier",false],["whole_home_heat_loss_rate",null]]},{"dataType":"Map","value":[["period_start_date","2022-05-06"],["period_end_date","2022-06-06"],["usage",20],["analysis_type_override",null],["inclusion_override",false],["analysis_type",0],["default_inclusion_by_calculation",false],["eliminated_as_outlier",false],["whole_home_heat_loss_rate",null]]},{"dataType":"Map","value":[["period_start_date","2022-06-07"],["period_end_date","2022-07-05"],["usage",9],["analysis_type_override",null],["inclusion_override",false],["analysis_type",-1],["default_inclusion_by_calculation",true],["eliminated_as_outlier",false],["whole_home_heat_loss_rate",null]]},{"dataType":"Map","value":[["period_start_date","2022-07-06"],["period_end_date","2022-08-03"],["usage",7],["analysis_type_override",null],["inclusion_override",false],["analysis_type",-1],["default_inclusion_by_calculation",true],["eliminated_as_outlier",false],["whole_home_heat_loss_rate",null]]},{"dataType":"Map","value":[["period_start_date","2022-08-04"],["period_end_date","2022-09-03"],["usage",8],["analysis_type_override",null],["inclusion_override",false],["analysis_type",-1],["default_inclusion_by_calculation",true],["eliminated_as_outlier",false],["whole_home_heat_loss_rate",null]]},{"dataType":"Map","value":[["period_start_date","2022-09-04"],["period_end_date","2022-10-03"],["usage",8],["analysis_type_override",null],["inclusion_override",false],["analysis_type",0],["default_inclusion_by_calculation",false],["eliminated_as_outlier",false],["whole_home_heat_loss_rate",null]]},{"dataType":"Map","value":[["period_start_date","2022-10-04"],["period_end_date","2022-11-03"],["usage",19],["analysis_type_override",null],["inclusion_override",false],["analysis_type",0],["default_inclusion_by_calculation",false],["eliminated_as_outlier",false],["whole_home_heat_loss_rate",null]]}]]]}

Pretty excerpts:

Existing HeatLoad graph:

See also #221.

[thadk]

In #238, I've added console.log's in the default component of single.tsx for how to access each of the data structures with extra comments as well.

For this ticket, please especially reference this part:

home-energy-analysis-tool/heat-stack/app/routes/_heat+/single.tsx

Lines 483 to 491 in 23ef2bb

	/**
	* Where temp1 is a temporary variable with the main Map of Maps (or undefined if page not yet submitted).
	* temp1.get('balance_point_graph').get('records')
	Array(23) [ Map(5), Map(5), Map(5), Map(5), Map(5), Map(5), Map(5), Map(5), Map(5), Map(5), … ]
	temp1.get('balance_point_graph').get('records')[0]
	Map(5) { balance_point → 60, heat_loss_rate → 51056.8007761249, change_in_heat_loss_rate → 0, percent_change_in_heat_loss_rate → 0, standard_deviation → 0.17628334816871494 }
	temp1.get('balance_point_graph').get('records')[0].get('heat_loss_rate')
	*//* @ts-ignore */
	console.log("HeatLoad chart", lastResult !== undefined ? JSON.parse(lastResult.data, reviver)?.get('balance_point_graph')?.get('records'): undefined)

[thadk]

@stevebreit is going to write up how to use the variables in summary input to draw the line and plot the x-y coordinates.

@thiagobardini might want to implement.

[stevebreit]

@stevebreit is going to write up how to use the variables in summary input to draw the line and plot the x-y coordinates.

@thadk @thiagobardini
I've written up an explanation about how to calculate the two lines in the Heating System Demand (aka Heat Load graph) in this Google Doc on the HeatSmart Alliance Drive (link gives anyone permission to view) and also attached a PDF of the document.
Heating System Demand Graph.pdf