Merge branch 'master' into report_params

nextflow-io · Mar 18, 2024 · cfc4421 · cfc4421
2 parents 34842c5 + 172c7bf
commit cfc4421
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 67 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,7 @@
 ### `Added`
 
 - [#86](https://github.com/nextflow-io/nf-co2footprint/pull/86) Report nf-co2footprint version in `co2footprint_report_*.html` and `co2footprint_summary_*.txt` reports.
+- [#87](https://github.com/nextflow-io/nf-co2footprint/pull/87) Plot co2e and energy in one plot with two axis.
 
 ## Version 1.0.0-beta
 

diff --git a/plugins/nf-co2footprint/src/resources/CO2FootprintReportTemplate.html b/plugins/nf-co2footprint/src/resources/CO2FootprintReportTemplate.html
@@ -233,43 +233,10 @@ <h3 class="mt-5">Total CO<sub>2</sub>e footprint measures</h3>
   </div>
 
   <div class="container">
-    <h2 id="resources" style="padding-top: 80px;">CO2e Footprint Measures</h2>
-
-    <h4>CO2e</h4>
-    <ul class="nav nav-tabs" id="co2eplot_tabs" role="tablist">
-      <li class="nav-item">
-        <a class="nav-link active" id="co2eplot_tablink" data-toggle="tab" href="#co2eplot_tabpanel" role="tab" aria-controls="co2eplot_tabpanel" aria-expanded="false">
-          Raw Emissions
-        </a>
-      </li>
-    </ul>
-    <div class="tab-content" id="co2eplot_tabcontent">
-      <div class="tab-pane fade show active" id="co2eplot_tabpanel" role="tabpanel">
-        <div id="co2eplot"></div>
-      </div>
-      <div class="tab-pane fade" id="pctco2eplot_tabpanel" role="tabpanel">
-        <div id="pctco2eplot"></div>
-      </div>
-    </div>
-
-    <h4>Energy consumption</h4>
-    <ul class="nav nav-tabs" id="energyplot_tabs" role="tablist">
-      <li class="nav-item">
-        <a class="nav-link active" id="energyplot_tablink" data-toggle="tab" href="#energyplot_tabpanel" role="tab" aria-controls="energyplot_tabpanel" aria-expanded="false">
-          Raw Consumption
-        </a>
-      </li>
-    </ul>
-    <div class="tab-content" id="energyplot_tabcontent">
-      <div class="tab-pane fade show active" id="energyplot_tabpanel" role="tabpanel">
-        <div id="energyplot"></div>
-      </div>
-      <div class="tab-pane fade" id="pctenergyplot_tabpanel" role="tabpanel">
-        <div id="pctenergyplot"></div>
-      </div>
-    </div>
-  </div>
+    <h2 id="resources" style="padding-top: 80px;">CO<sub>2</sub>e Footprint Measures</h2>
 
+    <div id="co2eplot"></div>
+    <p>The plot shows the distribution of CO<sub>2</sub>e emissions and corresponding energy consumptions for each workflow process. The values that are displayed when hovering over the plot refer to the CO<sub>2</sub>e emissions.</p>
 
   <div class="container">
     <div id="table-container">

diff --git a/plugins/nf-co2footprint/src/resources/assets/CO2FootprintReportTemplate.js b/plugins/nf-co2footprint/src/resources/assets/CO2FootprintReportTemplate.js
@@ -66,44 +66,43 @@ $(function() {
   }
 
   // Plot histograms of resource usage
-  var co2e_data = [];
-  var energy_data = [];
+  var data = [];
   for(var pname in window.data_byprocess){
     if( !window.data_byprocess.hasOwnProperty(pname) )
         continue;
     var smry = window.data_byprocess[pname];
-    co2e_data.push({y: norm_units(smry.co2e), name: pname, type:'box', boxmean: true, boxpoints: false});
-    energy_data.push({y: norm_units(smry.energy), name: pname, type:'box', boxmean: true, boxpoints: false});
+    data.push({x:pname, y: norm_units(smry.co2e), name: pname, legendgroup: pname, type:'box', boxmean: true, boxpoints: false});
+    // energy will be plotted with transparent color, hiding hover info and legend, but linked to tye right y-axis
+    data.push({x:pname, y: norm_units(smry.energy), name: pname, legendgroup: pname, type:'box', boxmean: true, boxpoints: false, yaxis: 'y2', showlegend:false, hoverinfo: 'skip', marker: {color: 'rgba(0,0,0,0)'}, fillcolor: 'rgba(0,0,0,0)'});
   }
-
-  // Decide yaxis tickformat
-  co2e_data.forEach(function (p) {
-    max = 0;
-    if (p != null) {
-      if (Array.isArray(p.y)) {
-        max = Math.max(max, ...p.y);
-      } else {
-        max = Math.max(max, p.y);
-      }
-
-    }
-  });
-  var co2e_tickformat = (max <= 4) ? ('.2f') : ('.3s');
-  energy_data.forEach(function (p) {
-    max = 0;
-    if (p != null) {
-      if (Array.isArray(p.y)) {
-        max = Math.max(max, ...p.y);
-      } else {
-        max = Math.max(max, p.y);
-      }
-    }
-  });
-  var energy_tickformat = (max <= 4) ? ('.2f') : ('.3s');
 
+  var tickformat = [{
+    "dtickrange": [null, 4],
+    "value": ".2f"
+  },
+  {
+    "dtickrange": [4, null],
+    "value": ".3s"
+  }];
 
-  Plotly.newPlot('co2eplot', co2e_data, { title: 'CO2e emission', yaxis: {title: 'CO2e emission (g)', tickformat: co2e_tickformat, rangemode: 'tozero'} });
-  Plotly.newPlot('energyplot', energy_data, { title: 'Energy consumption', yaxis: {title: 'Energy consumption (Wh)', tickformat: energy_tickformat, rangemode: 'tozero'} });
+  var layout = {
+    title: 'CO<sub>2</sub> emission & energy consumption',
+    legend: {x: 1.1},
+    xaxis: {domain: [0.2, 1]},
+    yaxis: {title: 'CO2e emission (g)',
+            rangemode: 'tozero',
+            tickformatstops: tickformat
+    },
+    yaxis2: {title: 'Energy consumption (Wh)',
+            rangemode: 'tozero',
+            gridcolor: 'rgba(0, 0, 0, 0)', // transparent grid lines
+            overlaying: 'y',
+            side: 'right',
+            tickformatstops: tickformat
+    },
+  };
+
+  Plotly.newPlot('co2eplot', data, layout);
 
   // Convert to readable units
   function readable_units(value, unit_index) {