Add toggle button. And stats

benchmarking/public/results.html

@@ -42,6 +42,11 @@
       }
       canvas {
         max-width: 730px;
+        margin: 10px 0;
+      }
+      #toggle {
+        width: 100%;
+        margin-bottom: 10px;
       }
     </style>
   </head>
@@ -123,6 +128,7 @@
       </table>
 
       <h2>Charts</h2>
+      <button id="toggle">Toggle performance measure (ms &lt;-&gt; hz)</button>
       <div id="chartRoot">Select a Case to show the charts.</div>
     </main>
     <script src="./results.js"></script>

benchmarking/results/index.js

@@ -27,8 +27,8 @@ export default {
   set2: [win_edge_simplify_stack_false, win_edge_simplify_stack_true],
   set3: [
     mac_safa_bavaria_vs_false,
-    mac_ffox_bavaria_vs_false,
     mac_safa_bavaria_vs_true,
+    mac_ffox_bavaria_vs_false,
     mac_ffox_bavaria_vs_true
   ],
   set4: [

benchmarking/src/results.js

@@ -13,6 +13,7 @@ function processHash() {
 
     setCharts(set)
     setDimensions(set)
+    printStats()
   }
 }
 
@@ -41,6 +42,8 @@ function setDimensions(set) {
 
 // Chart rendering
 
+const charts = []
+
 function killChildren(node) {
   while (node.hasChildNodes()) node.removeChild(node.lastChild)
 }
@@ -48,19 +51,75 @@ function killChildren(node) {
 function createChart(config) {
   let canvas = document.createElement('canvas')
   let ctx = canvas.getContext('2d')
-  new Chart(ctx, config)
+  charts.push(new Chart(ctx, config))
   return canvas
 }
 
+function destroyCharts() {
+  while (charts.length) {
+    let chart = charts.pop()
+    chart.destroy()
+  }
+}
+
 function setCharts(set) {
   let resultsRoot = document.getElementById('chartRoot')
+  destroyCharts()
   killChildren(resultsRoot)
   for (let config of results[set]) {
     resultsRoot.appendChild(createChart(config))
   }
 }
 
+// toggle button
+
+function togglePerformanceMeasure() {
+  const toggleLabel = label =>
+    label === 'Performance - Milliseconds per operation (ms)'
+      ? 'Performance - Operations per second (hz)'
+      : 'Performance - Milliseconds per operation (ms)'
+
+  for (let chart of charts) {
+    let datasets = chart.config.data.datasets
+    for (let dataset of datasets) {
+      if (dataset.id !== 'numberOfNodes') {
+        dataset.data = dataset.data.map(val => 1000 / val)
+      }
+    }
+    let scaleLabel = chart.config.options.scales.yAxes[0].scaleLabel
+    scaleLabel.labelString = toggleLabel(scaleLabel.labelString)
+    chart.update()
+  }
+  printStats()
+}
+
+// stats
+
+function printStats() {
+  const sum = arr => arr.reduce((a, b) => a + b, 0)
+  const mean = arr => sum(arr) / arr.length
+  const median = arr => [...arr].sort()[Math.floor(arr.length / 2)]
+  let i = 0
+  for (let chart of charts) {
+    console.log(`=== Stats for chart #${i} ===`)
+    let datasets = chart.config.data.datasets
+    for (let dataset of datasets) {
+      if (dataset.data.length === 0 || dataset.id === 'numberOfNodes') continue
+      let data = dataset.data
+      console.log(
+        `Dataset: ${dataset.label}, mean: ${mean(data)}, median: ${median(
+          data
+        )}`
+      )
+    }
+    i++
+  }
+}
+
 // init
 
 processHash()
 window.onhashchange = processHash
+document
+  .getElementById('toggle')
+  .addEventListener('click', togglePerformanceMeasure)