diff --git a/benchmarking/public/index.html b/benchmarking/public/index.html index 85dddcd..63c38c7 100644 --- a/benchmarking/public/index.html +++ b/benchmarking/public/index.html @@ -5,16 +5,64 @@ Document +

Benchmarking

+ Load previously saved chart | + See prepared results
diff --git a/benchmarking/public/loadChart.html b/benchmarking/public/loadChart.html index 89dae7a..43d5787 100644 --- a/benchmarking/public/loadChart.html +++ b/benchmarking/public/loadChart.html @@ -4,6 +4,7 @@ Document + -
Header Back
+
+

Load chart

+ Back to benchmark +
+

File-drop

Drop config here +

Chart

diff --git a/benchmarking/public/results.html b/benchmarking/public/results.html index e69de29..ce2950f 100644 --- a/benchmarking/public/results.html +++ b/benchmarking/public/results.html @@ -0,0 +1,111 @@ + + + + + + Document + + + + +
+

Results

+ Back to benchmark +
+
+

Select Case

+ +

Dimensions

+ + + + + + + + + + + + + + + + + + + + + +
Device +
+ DesktopMobile +
+
Browser +
+ Firefox + Chrome + Edge + Safari +
+
Dataset +
+ Simplify.js exampleBavaria outline +
+
High Quality +
On Off
+
Charts +
+ Simplify.js vs. Simplify.wasm + Simplify.wasm runtime analysis + Turf.js runtime analysis +
+
+ +

Charts

+
Select a Case to show the charts.
+
+ + + diff --git a/benchmarking/public/style.css b/benchmarking/public/style.css index 17501fe..366f275 100644 --- a/benchmarking/public/style.css +++ b/benchmarking/public/style.css @@ -4,56 +4,26 @@ body { margin: 0; padding: 0; } +body { + min-width: 340px; + overflow: scroll; +} main { width: 80%; margin: 0 auto; } -#status { - background-color: bisque; -} -.form { - display: grid; - grid-template-columns: auto auto; - grid-gap: 10px; - align-items: center; - margin-top: 20px; -} -input[type='submit'] { - grid-column: 1 / -1; -} -input, -select { - min-width: 150px; - width: 100%; -} - -#root { - display: flex; - flex-wrap: wrap; - justify-content: space-around; -} - -#root > div { - margin: 10px 6px; -} - -.component { - min-width: 300px; - flex: 1; - padding: 10px; -} - -.chartComponent { - min-width: 500px; +header, +footer { + padding: 0 10%; } @media screen and (max-width: 800px) { main { width: 100%; } - - .chartComponent { - min-width: 300px; + header, + footer { + padding: 0 0; } } diff --git a/benchmarking/results/generate-imports.sh b/benchmarking/results/generate-imports.sh new file mode 100755 index 0000000..f84df29 --- /dev/null +++ b/benchmarking/results/generate-imports.sh @@ -0,0 +1 @@ +for i in *.json; do printf "import %s from './%s'\n" ${i%.*} $i; done \ No newline at end of file diff --git a/benchmarking/results/index.js b/benchmarking/results/index.js new file mode 100644 index 0000000..b89c87f --- /dev/null +++ b/benchmarking/results/index.js @@ -0,0 +1,40 @@ +import mac_ffox_bavaria_vs_false from './mac_ffox_bavaria_vs_false.json' +import mac_ffox_bavaria_vs_true from './mac_ffox_bavaria_vs_true.json' +import mac_safa_bavaria_vs_false from './mac_safa_bavaria_vs_false.json' +import mac_safa_bavaria_vs_true from './mac_safa_bavaria_vs_true.json' +import ubu_ffox_bavaria_jsstack_false from './ubu_ffox_bavaria_jsstack_false.json' +import ubu_ffox_bavaria_jsstack_true from './ubu_ffox_bavaria_jsstack_true.json' +import ubu_ffox_bavaria_vs_false from './ubu_ffox_bavaria_vs_false.json' +import ubu_ffox_bavaria_vs_true from './ubu_ffox_bavaria_vs_true.json' +import win_chro_simplify_vs_false from './win_chro_simplify_vs_false.json' +import win_chro_simplify_vs_true from './win_chro_simplify_vs_true.json' +import win_edge_simplify_stack_false from './win_edge_simplify_stack_false.json' +import win_edge_simplify_stack_true from './win_edge_simplify_stack_true.json' +import win_edge_simplify_vs_false from './win_edge_simplify_vs_false.json' +import win_edge_simplify_vs_true from './win_edge_simplify_vs_true.json' +import win_ffox_simplify_vs_false from './win_ffox_simplify_vs_false.json' +import win_ffox_simplify_vs_true from './win_ffox_simplify_vs_true.json' + +export default { + set1: [ + win_chro_simplify_vs_false, + win_ffox_simplify_vs_false, + win_edge_simplify_vs_false, + win_chro_simplify_vs_true, + win_ffox_simplify_vs_true, + win_edge_simplify_vs_true + ], + 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_true + ], + set4: [ + ubu_ffox_bavaria_vs_false, + ubu_ffox_bavaria_jsstack_false, + ubu_ffox_bavaria_vs_true, + ubu_ffox_bavaria_jsstack_true + ] +} diff --git a/benchmarking/src/results.js b/benchmarking/src/results.js new file mode 100644 index 0000000..70aa284 --- /dev/null +++ b/benchmarking/src/results.js @@ -0,0 +1,65 @@ +import Chart from 'chart.js' + +import results from '../results/index.js' + +function processHash() { + if (window.location.hash) { + let set = window.location.hash.substring(1) + + if (!results.hasOwnProperty(set)) { + console.error(`No result set "${set}" defined`) + return + } + + setCharts(set) + setDimensions(set) + } +} + +// Dimension rendering + +const dimensionMap = { + set1: [[0], [0, 1, 2], [0], [0, 1], [0]], + set2: [[0], [2], [0], [0, 1], [1]], + set3: [[0], [0, 3], [1], [0, 1], [0]], + set4: [[0], [0], [1], [0, 1], [2]] +} +function setDimensions(set) { + let map = dimensionMap[set] + let dimensions = document.getElementsByClassName('characteristics') + + for (let i = 0; i < dimensions.length; i++) { + let dim = dimensions[i] + for (let j = 0; j < dim.children.length; j++) { + let child = dim.children[j] + if (map[i].indexOf(j) !== -1) child.setAttribute('active', 'active') + else child.removeAttribute('active') + } + } +} + +// Chart rendering + +function killChildren(node) { + while (node.hasChildNodes()) node.removeChild(node.lastChild) +} + +function createChart(config) { + let canvas = document.createElement('canvas') + let ctx = canvas.getContext('2d') + new Chart(ctx, config) + return canvas +} + +function setCharts(set) { + let resultsRoot = document.getElementById('chartRoot') + killChildren(resultsRoot) + for (let config of results[set]) { + resultsRoot.appendChild(createChart(config)) + } +} + +// init + +processHash() +window.onhashchange = processHash diff --git a/benchmarking/webpack.config.js b/benchmarking/webpack.config.js index d19e0ec..8e40088 100644 --- a/benchmarking/webpack.config.js +++ b/benchmarking/webpack.config.js @@ -5,7 +5,8 @@ const path = require('path') module.exports = { entry: { bundle: './src/index.js', - loadChart: './src/loadChart.js' + loadChart: './src/loadChart.js', + results: './src/results.js' }, output: { path: path.resolve(__dirname, 'dist'),