Add results page
This commit is contained in:
parent
dd92125086
commit
ce8ac194dc
@ -5,16 +5,64 @@
|
|||||||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||||
<title>Document</title>
|
<title>Document</title>
|
||||||
<link rel="stylesheet" href="./style.css" />
|
<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>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<h1>Benchmarking</h1>
|
<h1>Benchmarking</h1>
|
||||||
|
<a href="./loadChart.html">Load previously saved chart</a> |
|
||||||
|
<a href="./results.html">See prepared results</a>
|
||||||
</header>
|
</header>
|
||||||
<main id="root"></main>
|
<main id="root"></main>
|
||||||
<footer>
|
<footer>
|
||||||
Footer
|
Footer
|
||||||
<a href="./loadChart.html">Load previously saved chart</a>
|
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
<script src="./bundle.js"></script>
|
<script src="./bundle.js"></script>
|
||||||
|
|||||||
@ -4,6 +4,7 @@
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||||
<title>Document</title>
|
<title>Document</title>
|
||||||
|
<link rel="stylesheet" href="./style.css" />
|
||||||
<style>
|
<style>
|
||||||
file-drop {
|
file-drop {
|
||||||
position: relative;
|
position: relative;
|
||||||
@ -46,14 +47,22 @@
|
|||||||
transform: scale(1);
|
transform: scale(1);
|
||||||
transition-timing-function: ease-out;
|
transition-timing-function: ease-out;
|
||||||
}
|
}
|
||||||
|
#download {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>Header <a href="../">Back</a></header>
|
<header>
|
||||||
|
<h1>Load chart</h1>
|
||||||
|
<a href="../">Back to benchmark</a>
|
||||||
|
</header>
|
||||||
<main>
|
<main>
|
||||||
|
<h2>File-drop</h2>
|
||||||
<file-drop id="file-drop" accept="application/json"
|
<file-drop id="file-drop" accept="application/json"
|
||||||
>Drop config here</file-drop
|
>Drop config here</file-drop
|
||||||
>
|
>
|
||||||
|
<h2>Chart</h2>
|
||||||
<button id="download" style="display: none">Download image</button>
|
<button id="download" style="display: none">Download image</button>
|
||||||
<div><canvas id="myChart" width="600" height="400"></canvas></div>
|
<div><canvas id="myChart" width="600" height="400"></canvas></div>
|
||||||
</main>
|
</main>
|
||||||
|
|||||||
@ -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>
|
||||||
@ -4,56 +4,26 @@ body {
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
body {
|
||||||
|
min-width: 340px;
|
||||||
|
overflow: scroll;
|
||||||
|
}
|
||||||
main {
|
main {
|
||||||
width: 80%;
|
width: 80%;
|
||||||
margin: 0 auto;
|
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,
|
header,
|
||||||
select {
|
footer {
|
||||||
min-width: 150px;
|
padding: 0 10%;
|
||||||
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) {
|
@media screen and (max-width: 800px) {
|
||||||
main {
|
main {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
header,
|
||||||
.chartComponent {
|
footer {
|
||||||
min-width: 300px;
|
padding: 0 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
1
benchmarking/results/generate-imports.sh
Executable file
1
benchmarking/results/generate-imports.sh
Executable 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
40
benchmarking/results/index.js
Normal 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
65
benchmarking/src/results.js
Normal 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
|
||||||
@ -5,7 +5,8 @@ const path = require('path')
|
|||||||
module.exports = {
|
module.exports = {
|
||||||
entry: {
|
entry: {
|
||||||
bundle: './src/index.js',
|
bundle: './src/index.js',
|
||||||
loadChart: './src/loadChart.js'
|
loadChart: './src/loadChart.js',
|
||||||
|
results: './src/results.js'
|
||||||
},
|
},
|
||||||
output: {
|
output: {
|
||||||
path: path.resolve(__dirname, 'dist'),
|
path: path.resolve(__dirname, 'dist'),
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user