From bc7dae36108a049a733180a14bacfaae290e6332 Mon Sep 17 00:00:00 2001 From: Luis Aleixo Date: Fri, 17 Feb 2023 15:05:39 +0100 Subject: [PATCH] changed CO2 label and added hlines with legends --- caimira/apps/calculator/report_generator.py | 2 +- caimira/apps/calculator/static/js/report.js | 62 +++++++++++++++++-- .../templates/base/calculator.report.html.j2 | 12 ++++ 3 files changed, 70 insertions(+), 6 deletions(-) diff --git a/caimira/apps/calculator/report_generator.py b/caimira/apps/calculator/report_generator.py index 144a50e1..a086310a 100644 --- a/caimira/apps/calculator/report_generator.py +++ b/caimira/apps/calculator/report_generator.py @@ -134,7 +134,7 @@ def calculate_report_data(form: FormData, model: models.ExposureModel) -> typing ]) CO2_model: models.CO2ConcentrationModel = form.build_CO2_model() - CO2_concentrations = {'CO₂ concentrations': {'concentrations': [ + CO2_concentrations = {'CO₂': {'concentrations': [ np.array(CO2_model.concentration(float(time))).mean() for time in times ]}} diff --git a/caimira/apps/calculator/static/js/report.js b/caimira/apps/calculator/static/js/report.js index eedd8112..66358aba 100644 --- a/caimira/apps/calculator/static/js/report.js +++ b/caimira/apps/calculator/static/js/report.js @@ -548,6 +548,7 @@ function draw_plot(svg_id) { function draw_generic_concentration_plot( plot_svg_id, y_axis_label, + h_lines, ) { list_of_scenarios = (plot_svg_id === 'CO2_concentration_graph') ? CO2_concentrations : alternative_scenarios @@ -609,11 +610,13 @@ function draw_generic_concentration_plot( .text(y_axis_label); // Legend bounding box. - max_key_length = Math.max(...(Object.keys(data_for_scenarios).map(el => el.length))); + let h_lines_lenght = h_lines ? h_lines.length : 0 + let h_line_max_key = h_lines ? Math.max(...(h_lines.map(el => el.label.length))) : 0 + max_key_length = Math.max(Math.max(...(Object.keys(data_for_scenarios).map(el => el.length))), h_line_max_key); var legendBBox = vis.append('rect') - .attr('width', 10 * max_key_length ) - .attr('height', 30 * (Object.keys(data_for_scenarios).length)) + .attr('width', 9 * max_key_length ) + .attr('height', 25 * ((Object.keys(data_for_scenarios).length) + h_lines_lenght)) .attr('stroke', 'lightgrey') .attr('stroke-width', '2') .attr('rx', '5px') @@ -650,7 +653,25 @@ function draw_generic_concentration_plot( label_text[scenario_name] = vis.append('text') .text(scenario_name) .style('font-size', '15px'); + } + if (h_lines) { + var h_lines_draw = {}, h_line_label_icon = {}, h_line_label_text = {}; + h_lines.map((line) => { + h_lines_draw[line.label] = draw_area.append('svg:line') + .attr('stroke', line.color) + .attr('stroke-width', 2) + .attr('stroke-dasharray', line.style == 'dashed' ? (5, 5) : 0) + // Legend for each of the horizontal lines + + h_line_label_icon[line.label] = vis.append('line') + .style("stroke-dasharray", line.style == 'dashed' ? (5, 5) : 0) + .attr('stroke-width', '2') + .style("stroke", line.color); + h_line_label_text[line.label] = vis.append('text') + .text(line.label) + .style('font-size', '15px'); + }) } // Tooltip. @@ -707,6 +728,16 @@ function draw_generic_concentration_plot( .y(d => yRange(d.concentration)); draw_lines[scenario_name].transition().duration(1000).attr("d", lineFuncs[scenario_name](data)); } + + if (h_lines) { + h_lines.map((line) => { + h_lines_draw[line.label] + .attr("x1", xTimeRange(times[0])) + .attr("y1", yRange(line.y)) + .attr("x2", xTimeRange(times[times.length - 1])) + .attr("y2", yRange(line.y)); + }) + } } var graph_width; @@ -767,13 +798,34 @@ function draw_generic_concentration_plot( // Legend on the bottom. else { legend_x_start = 10; - label_icons[scenario_name].attr('x', legend_x_start) .attr('y', graph_height + size); label_text[scenario_name].attr('x', legend_x_start + space_between_text_icon) .attr('y', graph_height + size + text_height); } - + } + if (h_lines) { + h_lines.map((line, index) => { + size = 20 * (scenario_index + index + 2); // account for previous legend elements + if (div_width >= 900) { + h_line_label_icon[line.label].attr("x1", graph_width + legend_x_start) + .attr("x2", graph_width + legend_x_start + 20) + .attr("y1", margins.top + size) + .attr("y2", margins.top + size); + h_line_label_text[line.label].attr('x', graph_width + legend_x_start + space_between_text_icon) + .attr('y', margins.top + size + text_height); + } + // Legend on the bottom. + else { + legend_x_start = 10; + h_line_label_icon[line.label].attr("x1", legend_x_start) + .attr("x2", legend_x_start + 20) + .attr("y1", graph_height + size) + .attr("y2", graph_height + size); + h_line_label_text[line.label].attr('x', legend_x_start + space_between_text_icon) + .attr('y', graph_height + size + text_height); + } + }) } // Axis. diff --git a/caimira/apps/templates/base/calculator.report.html.j2 b/caimira/apps/templates/base/calculator.report.html.j2 index 5baab2a9..08a4596f 100644 --- a/caimira/apps/templates/base/calculator.report.html.j2 +++ b/caimira/apps/templates/base/calculator.report.html.j2 @@ -241,6 +241,18 @@ draw_generic_concentration_plot( "CO2_concentration_graph", "Mean concentration (ppm)", + h_lines = [ + {'label': 'Acceptable level', + 'y': 800, + 'color': 'forestgreen', + 'style': 'dashed' + }, + {'label': 'Insufficient level', + 'y': 1500, + 'color': 'firebrick', + 'style': 'dashed' + }, + ] );