diff --git a/benchmarking/public/results.html b/benchmarking/public/results.html index d26d8d0..1dceb0e 100644 --- a/benchmarking/public/results.html +++ b/benchmarking/public/results.html @@ -42,6 +42,11 @@ } canvas { max-width: 730px; + margin: 10px 0; + } + #toggle { + width: 100%; + margin-bottom: 10px; } @@ -123,6 +128,7 @@

Charts

+
Select a Case to show the charts.
diff --git a/benchmarking/results/index.js b/benchmarking/results/index.js index d0f4301..1bc6385 100644 --- a/benchmarking/results/index.js +++ b/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: [ diff --git a/benchmarking/src/results.js b/benchmarking/src/results.js index ee7860d..64a7fca 100644 --- a/benchmarking/src/results.js +++ b/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)