From 6bfebc76d48729b40463b55e28c390a976b035ee Mon Sep 17 00:00:00 2001
From: Luis Aleixo <luis.aleixo@cern.ch>
Date: Wed, 15 Feb 2023 14:53:45 +0100
Subject: [PATCH] added frontend visualisation for CO2 plot

---
 caimira/apps/calculator/static/js/report.js   |  2 +-
 .../templates/base/calculator.report.html.j2  | 22 +++++++++++++++++++
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/caimira/apps/calculator/static/js/report.js b/caimira/apps/calculator/static/js/report.js
index 49286914..5e5a6319 100644
--- a/caimira/apps/calculator/static/js/report.js
+++ b/caimira/apps/calculator/static/js/report.js
@@ -1163,4 +1163,4 @@ function export_csv() {
     link.setAttribute("download", "report_data.csv");
     document.body.appendChild(link);
     link.click();    
-}
\ No newline at end of file
+}
diff --git a/caimira/apps/templates/base/calculator.report.html.j2 b/caimira/apps/templates/base/calculator.report.html.j2
index 020d40b5..8cddac1d 100644
--- a/caimira/apps/templates/base/calculator.report.html.j2
+++ b/caimira/apps/templates/base/calculator.report.html.j2
@@ -224,6 +224,27 @@
 					</div>
 				</div>
 
+				<div class="card bg-light mb-3">
+					<div class="card-header"><strong>Predictive CO₂ Concentration Profile</strong>
+						<button class="icon_button p-0 float-right" data-toggle="collapse" href="#collapseCO₂Profile" role="button" aria-expanded="false" aria-controls="collapseCO₂Profile">
+							<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-expand" viewBox="0 0 16 16">
+								<path fill-rule="evenodd" d="M3.646 9.146a.5.5 0 0 1 .708 0L8 12.793l3.646-3.647a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 0-.708zm0-2.292a.5.5 0 0 0 .708 0L8 3.207l3.646 3.647a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 0 0 0 .708z"/>
+							</svg>
+						</button>
+					</div>	
+					<div class="collapse" id="collapseCO₂Profile">
+						<div class="card-body">
+							<div>
+								<div id="CO2_concentration_graph" style="height: 400px"></div>
+								<script type="application/javascript">
+									let CO2_concentrations = {{ CO2_concentrations | JSONify }}
+									draw_CO2_concentration_plot("CO2_concentration_graph");
+								</script>
+							</div>
+						</div>
+					</div>
+				</div>
+
 				{% if form.short_range_option == "short_range_no" %}
 					<div class="card bg-light mb-3">
 						<div class="card-header"><strong>Alternative scenarios</strong>
@@ -283,6 +304,7 @@
 						</div>
 					</div>
 				{% endif %}
+
 			{% endblock report_results %}
 
 			<!-- Export Data Concentration Modal -->