melch/mt-polygon-simplification
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add results page

Browse Source
This commit is contained in:
Alfred Melch 2019-08-09 10:45:11 +02:00
parent dd92125086
commit ce8ac194dc
8 changed files with 288 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
benchmarking/public/index.html
View File

@ -5,16 +5,64 @@
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link rel="stylesheet" href="./style.css" />
<style>
#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;
}
@media screen and (max-width: 800px) {
.chartComponent {
min-width: 300px;
}
}
</style>
</head>
<body>
<header>
<h1>Benchmarking</h1>
<a href="./loadChart.html">Load previously saved chart</a> |
<a href="./results.html">See prepared results</a>
</header>
<main id="root"></main>
<footer>
Footer
<a href="./loadChart.html">Load previously saved chart</a>
</footer>
<script src="./bundle.js"></script>

11
benchmarking/public/loadChart.html
View File

@ -4,6 +4,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link rel="stylesheet" href="./style.css" />
<style>
file-drop {
position: relative;
@ -46,14 +47,22 @@
transform: scale(1);
transition-timing-function: ease-out;
}
#download {
width: 100%;
}
</style>
</head>
<body>
<header>Header <a href="../">Back</a></header>
<header>
<h1>Load chart</h1>
<a href="../">Back to benchmark</a>
</header>
<main>
<h2>File-drop</h2>
<file-drop id="file-drop" accept="application/json"
>Drop config here</file-drop
>
<h2>Chart</h2>
<button id="download" style="display: none">Download image</button>
<div><canvas id="myChart" width="600" height="400"></canvas></div>
</main>

111
benchmarking/public/results.html
View File

@ -0,0 +1,111 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link rel="stylesheet" href="./style.css" />
<style>
/* Dimensions */
table {
border-collapse: collapse;
width: 100%;
}
table,
td {
border: 1px solid black;
padding: 0;
}
td:first-child {
white-space: nowrap;
}
.characteristics {
display: flex;
}
.characteristics > span {
flex: 1;
display: block;
text-align: center;
border-left: 1px solid black;
border-right: 1px solid black;
}
.characteristics > span[active] {
background-color: greenyellow;
}
/* Charts */
#chartRoot {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
canvas {
max-width: 750px;
}
</style>
</head>
<body>
<header>
<h1>Results</h1>
<a href="../">Back to benchmark</a>
</header>
<main>
<h2>Select Case</h2>
<ul>
<li><a class="case-anchor" href="#set1">Case1</a></li>
<li><a class="case-anchor" href="#set2">Case2</a></li>
<li><a class="case-anchor" href="#set3">Case3</a></li>
<li><a class="case-anchor" href="#set4">Case4</a></li>
</ul>
<h2>Dimensions</h2>
<table>
<tr>
<td>Device</td>
<td>
<div class="characteristics">
<span>Desktop</span><span>Mobile</span>
</div>
</td>
</tr>
<tr>
<td>Browser</td>
<td>
<div class="characteristics">
<span>Firefox</span>
<span>Chrome</span>
<span>Edge</span>
<span>Safari</span>
</div>
</td>
</tr>
<tr>
<td>Dataset</td>
<td>
<div class="characteristics">
<span>Simplify.js example</span><span>Bavaria outline</span>
</div>
</td>
</tr>
<tr>
<td>High Quality</td>
<td>
<div class="characteristics"><span>On</span> <span>Off</span></div>
</td>
</tr>
<tr>
<td>Charts</td>
<td>
<div class="characteristics">
<span>Simplify.js vs. Simplify.wasm</span>
<span>Simplify.wasm runtime analysis</span>
<span>Turf.js runtime analysis</span>
</div>
</td>
</tr>
</table>
<h2>Charts</h2>
<div id="chartRoot">Select a Case to show the charts.</div>
</main>
<script src="./results.js"></script>
</body>
</html>

50
benchmarking/public/style.css
View File

@ -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;
}
}

1
benchmarking/results/generate-imports.sh Executable file
View File

@ -0,0 +1 @@
for i in *.json; do printf "import %s from './%s'\n" ${i%.*} $i; done

40
benchmarking/results/index.js Normal file
View File

@ -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
]
}

65
benchmarking/src/results.js Normal file
View File

@ -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

3
benchmarking/webpack.config.js
View File

@ -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'),