Style results table

This commit is contained in:
Alfred Melch 2019-08-10 09:34:57 +02:00
parent ce8ac194dc
commit 28f8fd2192
3 changed files with 11 additions and 9 deletions

View File

@ -55,7 +55,7 @@
<body> <body>
<header> <header>
<h1>Load chart</h1> <h1>Load chart</h1>
<a href="../">Back to benchmark</a> <a href="./index.html">Back to benchmark</a>
</header> </header>
<main> <main>
<h2>File-drop</h2> <h2>File-drop</h2>

View File

@ -18,6 +18,7 @@
} }
td:first-child { td:first-child {
white-space: nowrap; white-space: nowrap;
padding: 4px 8px;
} }
.characteristics { .characteristics {
display: flex; display: flex;
@ -25,12 +26,13 @@
.characteristics > span { .characteristics > span {
flex: 1; flex: 1;
display: block; display: block;
padding: 4px 8px;
text-align: center; text-align: center;
border-left: 1px solid black; border-left: 1px solid black;
border-right: 1px solid black; border-right: 1px solid black;
} }
.characteristics > span[active] { .characteristics > span[active] {
background-color: greenyellow; background-color: #87d241;
} }
/* Charts */ /* Charts */
#chartRoot { #chartRoot {
@ -46,7 +48,7 @@
<body> <body>
<header> <header>
<h1>Results</h1> <h1>Results</h1>
<a href="../">Back to benchmark</a> <a href="./index.html">Back to benchmark</a>
</header> </header>
<main> <main>
<h2>Select Case</h2> <h2>Select Case</h2>
@ -59,7 +61,7 @@
<h2>Dimensions</h2> <h2>Dimensions</h2>
<table> <table>
<tr> <tr>
<td>Device</td> <td>Device:</td>
<td> <td>
<div class="characteristics"> <div class="characteristics">
<span>Desktop</span><span>Mobile</span> <span>Desktop</span><span>Mobile</span>
@ -67,7 +69,7 @@
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Browser</td> <td>Browser:</td>
<td> <td>
<div class="characteristics"> <div class="characteristics">
<span>Firefox</span> <span>Firefox</span>
@ -78,7 +80,7 @@
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Dataset</td> <td>Dataset:</td>
<td> <td>
<div class="characteristics"> <div class="characteristics">
<span>Simplify.js example</span><span>Bavaria outline</span> <span>Simplify.js example</span><span>Bavaria outline</span>
@ -86,13 +88,13 @@
</td> </td>
</tr> </tr>
<tr> <tr>
<td>High Quality</td> <td>High Quality:</td>
<td> <td>
<div class="characteristics"><span>On</span> <span>Off</span></div> <div class="characteristics"><span>On</span> <span>Off</span></div>
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Charts</td> <td>Charts:</td>
<td> <td>
<div class="characteristics"> <div class="characteristics">
<span>Simplify.js vs. Simplify.wasm</span> <span>Simplify.js vs. Simplify.wasm</span>

View File

@ -22,7 +22,7 @@ const dimensionMap = {
set1: [[0], [0, 1, 2], [0], [0, 1], [0]], set1: [[0], [0, 1, 2], [0], [0, 1], [0]],
set2: [[0], [2], [0], [0, 1], [1]], set2: [[0], [2], [0], [0, 1], [1]],
set3: [[0], [0, 3], [1], [0, 1], [0]], set3: [[0], [0, 3], [1], [0, 1], [0]],
set4: [[0], [0], [1], [0, 1], [2]] set4: [[0], [0], [1], [0, 1], [0, 2]]
} }
function setDimensions(set) { function setDimensions(set) {
let map = dimensionMap[set] let map = dimensionMap[set]