From 788bc1f973e3664fe847f3be0eb99cb507328cbe Mon Sep 17 00:00:00 2001
From: Luis Aleixo <luis.aleixo@cern.ch>
Date: Fri, 27 Aug 2021 17:22:37 +0200
Subject: [PATCH] responsive d3 plot

---
 cara/apps/calculator/static/js/report.js                 | 9 +++------
 .../calculator/templates/base/calculator.report.html.j2  | 4 ++--
 2 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/cara/apps/calculator/static/js/report.js b/cara/apps/calculator/static/js/report.js
index d1105bec..832b38e6 100644
--- a/cara/apps/calculator/static/js/report.js
+++ b/cara/apps/calculator/static/js/report.js
@@ -1,17 +1,14 @@
 /* Generate the concentration plot using d3 library. */
 function draw_concentration_plot(svg_id, times, concentrations, exposed_presence_intervals) {
-    var visBoundingBox = d3.select(svg_id)
-        .node()
-        .getBoundingClientRect();
-
+    
     var time_format = d3.timeFormat('%H:%M');
 
     var data = []
     times.map((time, index) => data.push({ 'time': time, 'hour': new Date().setHours(Math.trunc(time), (time - Math.trunc(time)) * 60), 'concentration': concentrations[index] }))
 
     var vis = d3.select(svg_id),
-        width = visBoundingBox.width - 300,
-        height = visBoundingBox.height,
+        width = 600,
+        height = 400,
         margins = { top: 30, right: 20, bottom: 50, left: 50 },
 
         // H:M time format for x axis.
diff --git a/cara/apps/calculator/templates/base/calculator.report.html.j2 b/cara/apps/calculator/templates/base/calculator.report.html.j2
index e33e6f1d..ad7b7113 100644
--- a/cara/apps/calculator/templates/base/calculator.report.html.j2
+++ b/cara/apps/calculator/templates/base/calculator.report.html.j2
@@ -86,13 +86,13 @@
 									{% endblock report_summary_footnote %}
 								</div>
 								<p id="section1">* The results are based on the parameters and assumptions published in the CERN Open Report <a href="https://cds.cern.ch/record/2756083"> CERN-OPEN-2021-004</a>.</p>
-								<svg id="result_plot" width="900" height="400"></svg>
+								<svg id="result_plot" viewBox="0 0 1000 400"></svg>
 								<script type="application/javascript">
 									var times = {{times}}
 									var concentrations = {{concentrations}}
 									var exposed_presence_intervals = {{exposed_presence_intervals}}
 									draw_concentration_plot("#result_plot", times, concentrations, exposed_presence_intervals);
-									</script>
+								</script>
               				</p>
 						</div>
 					</div>