Draw EnergyUseHistoryChart component accepting Rules Engine data as parameter/prop

[thadk]

• Un-stringify using "Reviver" below to use the rules engine output below in details to populate EnergyUseHistoryChart from the design
• few remaining issues broken out to: Modify the existing old EnergyUseHistoryChart to match the new design (check columns, headers, etc). #248
• Use any new shadcn components if not already used (table, checkbox) in EnergyUseHistoryChart
• Try to represent static elements as closely as possible
• broken out to issue: Create the SVG icons from the figma for use in React (may be possible to export them) #246
• broken out to issue: <EnergyUseHistoryChart/>: Add basic interactivity #247
• 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).

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 EnergyUseHistoryChart:

[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 one, please especially reference this part:

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

Lines 471 to 481 in 23ef2bb

	/**
	* Where temp1 is a temporary variable with the main Map of Maps (or undefined if page not yet submitted).
	* temp1.get('billing_records')
	* Array(25) [ Map(9), Map(9), Map(9), Map(9), Map(9), Map(9), Map(9), Map(9), Map(9), Map(9), … ]
	* temp1.get('billing_records')[0]
	* Map(9) { period_start_date → "2020-10-02", period_end_date → "2020-11-04", usage → 29, analysis_type_override → null, inclusion_override → true, analysis_type → 0, default_inclusion_by_calculation → false, eliminated_as_outlier → false, whole_home_heat_loss_rate → null }
	* temp1.get('billing_records')[0].get('period_start_date')
	* "2020-10-02"
	*/
	/* @ts-ignore */
	console.log("EnergyUseHistoryChart table data", lastResult !== undefined ? JSON.parse(lastResult.data, reviver)?.get('billing_records'): undefined)

[dwindleduck]

Made good headway on this issue this week, see the 221_usage_chart branch.

• Filled the AnaylsisHeader with rules-engine data
• Calculated num days in period
• Filled the EnergyUseHistoryChart with rules-engine data
• Conditionally styled the row background, analysisType image, and checkbox state