plot co2e and energy in one plot with two axis

Author: mirpedrol

plugins/nf-co2footprint/src/resources/CO2FootprintReportTemplate.html

@@ -235,40 +235,18 @@ <h3 class="mt-5">Total CO<sub>2</sub>e footprint measures</h3>
   <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
+          Raw values
         </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>
 
 
   <div class="container">

plugins/nf-co2footprint/src/resources/assets/CO2FootprintReportTemplate.js

@@ -66,44 +66,48 @@ $(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});
+    data.push({x:pname, y: norm_units(smry.energy), name: pname, legendgroup: pname, yaxis: 'y2', type:'box', boxmean: true, boxpoints: false});
   }
-
-  // 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');
 
-
-  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: 'CO2 emission & energy consumption',
+    xaxis: {domain: [0.2, 1]},
+    yaxis: {title: 'CO2e emission (g)',
+            rangemode: 'tozero',
+            tickformatstops: [{
+              "dtickrange": [null, 4],
+              "value": ".2f"
+            },
+            {
+              "dtickrange": [4, null],
+              "value": ".3s"
+            }]
+    },
+    yaxis2: {title: 'Energy consumption (Wh)',
+            rangemode: 'tozero',
+            gridcolor: 'rgba(0, 0, 0, 0)', // transparent grid lines
+            overlaying: 'y',
+            side: 'left',
+            anchor: 'free',
+            position: 0.1,
+            tickformatstops: [{
+              "dtickrange": [null, 4],
+              "value": ".2f"
+            },
+            {
+              "dtickrange": [4, null],
+              "value": ".3s"
+            }]
+          },
+  };
+  
+  Plotly.newPlot('co2eplot', data, layout);
 
   // Convert to readable units
   function readable_units(value, unit_index) {