perf: UI tweaks for per-unit dashboard page
This change adds a vertical line at 0% that spans the page (meticulously
removing sources of padding and borders from the table to achieve it)
and also makes the center line thinner.
Change-Id: I79b1bbf77be7a8fc2e2d7cc8e368efedaddcecca
Reviewed-on: https://go-review.googlesource.com/c/build/+/464355
Reviewed-by: Michael Pratt <mpratt@google.com>
Reviewed-by: David Chase <drchase@google.com>
TryBot-Result: Gopher Robot <gobot@golang.org>
Run-TryBot: Michael Knyszek <mknyszek@google.com>
Auto-Submit: Michael Knyszek <mknyszek@google.com>
diff --git a/perf/app/dashboard/index.html b/perf/app/dashboard/index.html
index 793018d..f0a20f9 100644
--- a/perf/app/dashboard/index.html
+++ b/perf/app/dashboard/index.html
@@ -296,7 +296,7 @@
// Range visualization.
const range = createCell("", false);
- range.appendChild(Range(v.Low, v.Center, v.High, min, max, 640, 32, bench.Unit, bench.HigherIsBetter));
+ range.appendChild(Range(v.Low, v.Center, v.High, min, max, 640, 48, bench.Unit, bench.HigherIsBetter));
range.classList.add("Dashboard-table-range")
row.appendChild(range);
diff --git a/perf/app/dashboard/static/range.js b/perf/app/dashboard/static/range.js
index 3312042..d1ce166 100644
--- a/perf/app/dashboard/static/range.js
+++ b/perf/app/dashboard/static/range.js
@@ -28,6 +28,17 @@
const xScale = d3.scaleLinear([min, max], [margin, width-margin]);
const yBaseline = 3*height/4;
+ // Draw zero line.
+ const tick = d3.line()
+ .x(d => xScale(d[0]))
+ .y(d => d[1])
+
+ svg.append("path")
+ .attr("fill", "none")
+ .attr("stroke", "#cccccc")
+ .attr("stroke-width", 1)
+ .attr("d", tick([[0, 0], [0, height]]))
+
// Draw line.
const line = d3.line()
.x(d => xScale(d))
@@ -36,7 +47,7 @@
const partialStroke = function() {
return svg.append("path")
.attr("fill", "none")
- .attr("stroke-width", 6);
+ .attr("stroke-width", 3.5);
}
if (high < 0) {
partialStroke().attr("stroke", pickColor(high))
@@ -51,10 +62,6 @@
.attr("d", line([low, high]));
}
- const tick = d3.line()
- .x(d => xScale(d[0]))
- .y(d => d[1])
-
const xTicks = [low, center, high];
for (const i in xTicks) {
svg.append("path")
diff --git a/perf/app/dashboard/static/style.css b/perf/app/dashboard/static/style.css
index eb14846..6cd3727 100644
--- a/perf/app/dashboard/static/style.css
+++ b/perf/app/dashboard/static/style.css
@@ -169,6 +169,12 @@
.Dashboard-table {
padding: 16px;
width: 100%;
+ border: none;
+ border-collapse: collapse;
+ border-spacing: 0;
+}
+.Dashboard-table tr {
+ border: none;
}
.Dashboard-table tr:nth-child(2n+1) {
background: #f4f4f4;
@@ -185,13 +191,16 @@
text-align: center;
}
.Dashboard-table td {
- padding: 8px;
+ padding: 0;
text-align: center;
+ border: none;
}
.Dashboard-table-commit {
font-family: monospace;
}
-.Dashboard-table-range {
+.Dashboard-table-range svg {
+ display: block;
+ margin: 0 auto;
}
.Dashboard-regression-description {
display: inline-block;
