mt-polygon-simplification/benchmarking/public/results.html
2019-08-09 10:45:11 +02:00

112 lines
2.8 KiB
HTML

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