diff --git a/caimira/apps/calculator/static/js/report.js b/caimira/apps/calculator/static/js/report.js index 956c0dd6..57b1511e 100644 --- a/caimira/apps/calculator/static/js/report.js +++ b/caimira/apps/calculator/static/js/report.js @@ -82,7 +82,7 @@ function draw_plot(svg_id) { .style('fill', '#1f77b4'); // Concentration line text var legendLineText = vis.append('text') - .text('Mean concentration (Infectious Respiratory Particles)') + .text('Mean concentration') // Cumulative dose line icon var legendCumulativeIcon = vis.append('line') @@ -91,7 +91,7 @@ function draw_plot(svg_id) { .style("stroke", '#1f77b4'); // Cumulative dose line text var legendCumutiveText = vis.append('text') - .text('Cumulative dose (Infectious Respiratory Particles)') + .text('Cumulative dose') // Area line icon var legendAreaIcon = vis.append('rect') @@ -113,7 +113,6 @@ function draw_plot(svg_id) { .attr('opacity', 0); var legendLongCumutiveText = vis.append('text') .text('Long-range cumulative dose') - .style('font-size', '15px') .attr('opacity', 0); // Short-range area icon var legendShortRangeAreaIcon = {}; @@ -130,8 +129,7 @@ function draw_plot(svg_id) { var legendShortRangeText = {}; sr_unique_activities.forEach((b, index) => { legendShortRangeText[index] = vis.append('text') - .text('Short-range - ' + sr_unique_activities[index]) - .style('font-size', '15px'); + .text('Short-range - ' + sr_unique_activities[index]); }); } @@ -139,7 +137,7 @@ function draw_plot(svg_id) { if (show_sr_legend) legendBBox_height = 68 + 20 * sr_unique_activities.length; else legendBBox_height = 68; var legendBBox = vis.append('rect') - .attr('width', 420) + .attr('width', 270) .attr('height', legendBBox_height) .attr('stroke', 'lightgrey') .attr('stroke-width', '2') @@ -307,8 +305,8 @@ function draw_plot(svg_id) { graph_width = div_width; graph_height = div_height var margins = { top: 30, right: 20, bottom: 50, left: 60 }; - if (div_width >= 1100) { // For screens with width > 1100px legend can be on the graph's right side. - div_width = 1100; + if (div_width >= 1000) { // For screens with width > 1000px legend can be on the graph's right side. + div_width = 1000; graph_width = 600; const svg_margins = {'margin-left': '0rem'}; Object.entries(svg_margins).forEach(([prop,val]) => vis.style(prop,val)); @@ -358,7 +356,7 @@ function draw_plot(svg_id) { yAxisCumLabelEl.attr('transform', 'rotate(-90, 0,' + graph_height + ')') .attr('x', (graph_height + margins.bottom) / 2.1); - if (plot_div.clientWidth >= 1100) { + if (plot_div.clientWidth >= 1000) { yAxisCumLabelEl.attr('y', graph_width * 1.7); } else { @@ -370,7 +368,7 @@ function draw_plot(svg_id) { const space_between_text_icon = 30; const text_height = 6; // Legend on right side. - if (plot_div.clientWidth >= 1100) { + if (plot_div.clientWidth >= 1000) { legendLineIcon.attr('x', graph_width + legend_x_start) .attr('y', margins.top + size); legendLineText.attr('x', graph_width + legend_x_start + space_between_text_icon) @@ -607,7 +605,7 @@ function draw_generic_concentration_plot( 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', 9 * max_key_length ) + .attr('width', 10 * max_key_length ) .attr('height', 25 * ((Object.keys(data_for_scenarios).length) + h_lines_lenght)) .attr('stroke', 'lightgrey') .attr('stroke-width', '2') @@ -643,8 +641,7 @@ function draw_generic_concentration_plot( .style('fill', colors[scenario_index]); label_text[scenario_name] = vis.append('text') - .text(scenario_name) - .style('font-size', '15px'); + .text(scenario_name); } if (h_lines) { var h_lines_draw = {}, h_line_label_icon = {}, h_line_label_text = {}; @@ -661,8 +658,7 @@ function draw_generic_concentration_plot( .attr('stroke-width', '2') .style("stroke", line.color); h_line_label_text[line.label] = vis.append('text') - .text(line.label) - .style('font-size', '15px'); + .text(line.label); }) } @@ -743,8 +739,8 @@ function draw_generic_concentration_plot( graph_width = div_width; graph_height = div_height; var margins = { top: 30, right: 20, bottom: 50, left: 60 }; - if (window_width >= 1100) { // For screens with width > 1100px legend can be on the graph's right side. - div_width = 1100; + if (window_width >= 1000) { // For screens with width > 1000px legend can be on the graph's right side. + div_width = 1000; graph_width = 600; const svg_margins = {'margin-left': '0rem'}; Object.entries(svg_margins).forEach(([prop,val]) => vis.style(prop,val)); @@ -796,7 +792,7 @@ function draw_generic_concentration_plot( var scenario_index = Object.keys(data_for_scenarios).indexOf(scenario_name) // Legend on right side. var size = 20 * (scenario_index + 1); - if (window_width >= 1100) { + if (window_width >= 1000) { label_icons[scenario_name].attr('x', graph_width + legend_x_start) .attr('y', margins.top + size); label_text[scenario_name].attr('x', graph_width + legend_x_start + space_between_text_icon) @@ -814,7 +810,7 @@ function draw_generic_concentration_plot( if (h_lines) { h_lines.map((line, index) => { size = 21 * (scenario_index + index + 2); // account for previous legend elements - if (window_width >= 1100) { + if (window_width >= 1000) { 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) @@ -836,7 +832,7 @@ function draw_generic_concentration_plot( } // Legend on right side. - if (window_width >= 1100) { + if (window_width >= 1000) { legendBBox.attr('x', graph_width * 1.02) .attr('y', margins.top * 1.15); @@ -896,8 +892,8 @@ function draw_histogram(svg_id, prob, prob_sd) { var vis = d3.select(plot_div).append('svg'); // set the dimensions and margins of the graph - if (div_width > 1100) { - div_width = 1100; + if (div_width > 1000) { + div_width = 1000; var margins = { top: 30, right: 20, bottom: 50, left: 60 }; var graph_width = 600; const svg_margins = {'margin-left': '0rem'}; @@ -1032,7 +1028,6 @@ function draw_histogram(svg_id, prob, prob_sd) { // CDF line text vis.append('text') .text('CDF') - .style('font-size', '15px') .attr('x', graph_width + legend_x_start + space_between_text_icon) .attr('y', margins.top + size + text_height); // Hist icon @@ -1045,7 +1040,6 @@ function draw_histogram(svg_id, prob, prob_sd) { // Hist text vis.append('text') .text('Histogram') - .style('font-size', '15px') .attr('x', graph_width + legend_x_start + space_between_text_icon) .attr('y', margins.top + 2 * size + text_height*2); // Mean text @@ -1060,7 +1054,6 @@ function draw_histogram(svg_id, prob, prob_sd) { // Mean line text vis.append('text') .text('Mean') - .style('font-size', '15px') .attr('x', graph_width + legend_x_start + space_between_text_icon) .attr('y', margins.top + 3 * size + text_height*3); diff --git a/caimira/apps/expert.py b/caimira/apps/expert.py index 8a14e76a..240e90cb 100644 --- a/caimira/apps/expert.py +++ b/caimira/apps/expert.py @@ -193,8 +193,8 @@ def update_plot(self, model: models.ExposureModel): self.ax.set_xlim(left = min(min(infected_presence.boundaries()[0]), min(exposed_presence.boundaries()[0])), right = max(max(infected_presence.boundaries()[1]), max(exposed_presence.boundaries()[1]))) - figure_legends = [mlines.Line2D([], [], color='#3530fe', markersize=15, label='Mean concentration (Infectious Respiratory Particles)'), - mlines.Line2D([], [], color='#0000c8', markersize=15, ls="dotted", label='Cumulative dose (Infectious Respiratory Particles)'), + figure_legends = [mlines.Line2D([], [], color='#3530fe', markersize=15, label='Mean concentration'), + mlines.Line2D([], [], color='#0000c8', markersize=15, ls="dotted", label='Cumulative dose'), patches.Patch(edgecolor="#96cbff", facecolor='#96cbff', label='Presence of exposed person(s)')] self.ax.legend(handles=figure_legends) diff --git a/caimira/apps/templates/base/calculator.report.html.j2 b/caimira/apps/templates/base/calculator.report.html.j2 index 94343afe..6f37e7e2 100644 --- a/caimira/apps/templates/base/calculator.report.html.j2 +++ b/caimira/apps/templates/base/calculator.report.html.j2 @@ -181,6 +181,7 @@ let short_range_expirations = {{ short_range_expirations | JSONify }}; draw_plot("concentration_plot"); + IRP - Infectious Respiratory Particles.