From 57d6da26de4335cfb2b6f6d25f6f6b92e669c67d Mon Sep 17 00:00:00 2001
From: Alfred Melch <dev@melch.pro>
Date: Tue, 6 Aug 2019 16:05:54 +0200
Subject: [PATCH] show total execution time in stacked charts

---
 benchmarking/src/components/chart.js        | 45 ++++++++++++++++-----
 benchmarking/src/components/chartOptions.js | 33 ++++++++++-----
 2 files changed, 57 insertions(+), 21 deletions(-)

diff --git a/benchmarking/src/components/chart.js b/benchmarking/src/components/chart.js
index 3f2e8df..bbabe55 100644
--- a/benchmarking/src/components/chart.js
+++ b/benchmarking/src/components/chart.js
@@ -49,7 +49,8 @@ class WasmVsJsChart extends React.Component {
   }
   convertDataToHz(data) {
     let datasets = data.datasets
-    for (let dataset of datasets.filter(d => d.label !== 'numberOfNodes')) {
+    console.log(datasets)
+    for (let dataset of datasets.filter(d => d.id !== 'numberOfNodes')) {
       dataset.data = dataset.data.map(mean => 1000 / mean)
     }
   }
@@ -100,8 +101,8 @@ class WasmVsJsChart extends React.Component {
 /**
  * Returns the dataset specified by label
  */
-function getDataset(data, label) {
-  return data.datasets.filter(d => d.label === label)[0]
+function getDataset(data, id) {
+  return data.datasets.filter(d => d.id === id)[0]
 }
 
 /**
@@ -116,20 +117,41 @@ function calculateTimeDelta(whole, arr1, arr2) {
   return whole.map((val, i) => val - (safeGet(arr1, i) + safeGet(arr2, i)))
 }
 
-function modifyDataArrays(data, exec, pre, after) {
+function modifyDataArrays(data, exec, pre, after, newDatasetLabel) {
   if (getDataset(data, exec)) {
-    getDataset(data, exec).data = calculateTimeDelta(
-      getDataset(data, exec).data,
-      getDataset(data, pre).data,
-      getDataset(data, after).data
-    )
+    data.datasets.splice(1, 0, {
+      id: 'execution',
+      backgroundColor: 'red',
+      borderColor: 'red',
+      label: newDatasetLabel,
+      data: calculateTimeDelta(
+        getDataset(data, exec).data,
+        getDataset(data, pre).data,
+        getDataset(data, after).data
+      ),
+      stack: 'a'
+    })
+    for (let dataset of data.datasets) {
+      if (dataset.id === exec) {
+        dataset.label = 'Total execution time'
+        dataset.stack = 'b'
+        dataset.backgroundColor = '#ff7a6b'
+        dataset.borderColor = '#ff7a6b'
+      }
+    }
   }
 }
 
 class WasmStackChart extends React.Component {
   render() {
     const data = this.props.data
-    modifyDataArrays(data, 'simplifyWASM', 'storeCoords', 'loadResult')
+    modifyDataArrays(
+      data,
+      'simplifyWASM',
+      'storeCoords',
+      'loadResult',
+      'Simplification'
+    )
     const options = genOptions('Simplify.wasm runtime insights', true)
     return (
       <>
@@ -157,7 +179,8 @@ class JsStackChart extends React.Component {
       data,
       'origSimplifyWithTransformCase',
       'transformToObjectFormCase',
-      'transformToArrayFormCase'
+      'transformToArrayFormCase',
+      'Simplification'
     )
     return (
       <>
diff --git a/benchmarking/src/components/chartOptions.js b/benchmarking/src/components/chartOptions.js
index 24cb0a2..24091d4 100644
--- a/benchmarking/src/components/chartOptions.js
+++ b/benchmarking/src/components/chartOptions.js
@@ -1,33 +1,46 @@
-import ChartJS from 'chart.js'
-
-function genDataset(label, color, yAxisID = 'performance', type) {
+function genDataset(id, label, color, yAxisID = 'performance', type) {
   return {
+    id,
     type,
     label,
     yAxisID,
     fill: false,
     backgroundColor: color,
     borderColor: color,
-    data: []
+    data: [],
+    stack: 'a'
   }
 }
 
 export const datasetTemplates = {
-  numberOfNodes: genDataset('# of positions', 'grey', 'nodes', 'line'),
-  simplifyWASM: genDataset('Simplify.wasm', 'red'),
-  simplifyJS: genDataset('Simplify.js', 'blue'),
-  simplifyJSAlt: genDataset('Simplify.js Alternative', 'green'),
-  storeCoords: genDataset('Store coordinates', 'blue'),
-  loadResult: genDataset('Load result', 'green'),
+  numberOfNodes: genDataset(
+    'numberOfNodes',
+    '# of positions',
+    'grey',
+    'nodes',
+    'line'
+  ),
+  simplifyWASM: genDataset('simplifyWASM', 'Simplify.wasm', 'red'),
+  simplifyJS: genDataset('simplifyJS', 'Simplify.js', 'blue'),
+  simplifyJSAlt: genDataset(
+    'simplifyJSAlt',
+    'Simplify.js Alternative',
+    'green'
+  ),
+  storeCoords: genDataset('storeCoords', 'Store coordinates', 'blue'),
+  loadResult: genDataset('loadResult', 'Load result', 'green'),
   origSimplifyWithTransformCase: genDataset(
+    'origSimplifyWithTransformCase',
     'Simplify.js with data transformation',
     'red'
   ),
   transformToArrayFormCase: genDataset(
+    'transformToArrayFormCase',
     'Transform result to array format',
     'green'
   ),
   transformToObjectFormCase: genDataset(
+    'transformToObjectFormCase',
     'Transform coordinates to object format',
     'blue'
   )