perf: make the dashboard significantly more compact
This makes the "regressions first" dashboard look kind of bad, but
that's OK; we'll clean that up in follow-up CLs.
Change-Id: I18c83c0e05fc996e50cb9fca33af738e50c58628
Reviewed-on: https://go-review.googlesource.com/c/build/+/459516
Run-TryBot: Michael Knyszek <mknyszek@google.com>
Reviewed-by: Michael Pratt <mpratt@google.com>
TryBot-Result: Gopher Robot <gobot@golang.org>
diff --git a/perf/app/dashboard/index.html b/perf/app/dashboard/index.html
index 3d3a19f..f18111e 100644
--- a/perf/app/dashboard/index.html
+++ b/perf/app/dashboard/index.html
@@ -87,9 +87,9 @@
</p>
</div>
-<div id="dashboard">
+<grid id="dashboard">
<h2 class="Dashboard-title" id="loading">Loading...</h2>
-</div>
+</grid>
<script>
function removeLoadingMessage() {
@@ -110,6 +110,10 @@
if (bench.Name != prevName) {
prevName = bench.Name;
+ let section = document.createElement("grid");
+ section.classList.add("Dashboard-section");
+ dashboard.appendChild(section);
+
let link = document.createElement("a");
link.href = "?benchmark=" + bench.Name;
link.textContent = bench.Name;
@@ -117,11 +121,11 @@
let title = document.createElement("h2");
title.classList.add("Dashboard-title");
title.appendChild(link);
- dashboard.appendChild(title);
+ section.appendChild(title);
grid = document.createElement("grid");
grid.classList.add("Dashboard-grid");
- dashboard.appendChild(grid);
+ section.appendChild(grid);
}
let item = document.createElement("div");
diff --git a/perf/app/dashboard/static/style.css b/perf/app/dashboard/static/style.css
index 5262dcd..b050078 100644
--- a/perf/app/dashboard/static/style.css
+++ b/perf/app/dashboard/static/style.css
@@ -84,6 +84,12 @@
padding-bottom: 10px;
}
+#dashboard {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: left;
+}
.Dashboard {
margin: 0;
padding: 0;
@@ -93,8 +99,8 @@
padding: 0.625rem 0.625rem;
}
.Dashboard-title {
+ text-align: center;
background: #e0ebf5;
- padding: 0.125rem 0.3125rem;
}
.Dashboard-controls {
padding: 0.5rem;
@@ -137,12 +143,16 @@
width: 100%;
}
+.Dashboard-section {
+ display: column;
+ flex-direction: row;
+ margin: 8px;
+}
.Dashboard-grid {
display: flex;
flex-direction: row;
flex-wrap: wrap;
- justify-content: flex-start;
+ justify-content: left;
}
.Dashboard-grid-item {
- padding: 8px;
}
diff --git a/third_party/bandchart/bandchart.js b/third_party/bandchart/bandchart.js
index cf5dcfa..77f2d4f 100644
--- a/third_party/bandchart/bandchart.js
+++ b/third_party/bandchart/bandchart.js
@@ -4,10 +4,10 @@
function BandChart(data, {
defined,
- marginTop = 50, // top margin, in pixels
+ marginTop = 30, // top margin, in pixels
marginRight = 15, // right margin, in pixels
- marginBottom = 50, // bottom margin, in pixels
- marginLeft = 50, // left margin, in pixels
+ marginBottom = 30, // bottom margin, in pixels
+ marginLeft = 40, // left margin, in pixels
width = 480, // outer width, in pixels
height = 240, // outer height, in pixels
unit,
@@ -82,6 +82,15 @@
.attr("viewBox", [0, 0, width, height])
.attr("style", "max-width: 100%; height: auto; height: intrinsic;");
+ // Chart area background color.
+ svg.append("rect")
+ .attr("fill", "white")
+ .attr("x", xRange[0])
+ .attr("y", yRange[1])
+ .attr("width", xRange[1] - xRange[0])
+ .attr("height", yRange[0] - yRange[1]);
+
+ // Title (unit).
svg.append("g")
.attr("transform", `translate(${marginLeft},0)`)
.call(yAxis)
@@ -90,12 +99,11 @@
.attr("x2", width - marginLeft - marginRight)
.attr("stroke-opacity", 0.1))
.call(g => g.append("text")
- .attr("x", (xRange[1]-xRange[0])/2)
- .attr("y", 40)
+ .attr("x", xRange[0]-40)
+ .attr("y", 24)
.attr("fill", "currentColor")
- .attr("text-anchor", "middle")
- .attr("font-size", "20px")
- .attr("font-weight", "bold")
+ .attr("text-anchor", "start")
+ .attr("font-size", "16px")
.text(unit));
const defs = svg.append("defs")
@@ -213,7 +221,7 @@
// Add X axis label.
svg.append("text")
.attr("x", xRange[0] + (xRange[1]-xRange[0])/2)
- .attr("y", yRange[0] + (yRange[0]-yRange[1])*0.12)
+ .attr("y", yRange[0] + (yRange[0]-yRange[1])*0.10)
.attr("fill", "currentColor")
.attr("text-anchor", "middle")
.attr("font-size", "12px")
@@ -273,12 +281,12 @@
)
.call(g => g.append('text')
// Point metadata (commit hash and date).
- // Below the x-axis "Commits" label.
- .attr("x", xRange[0] + (xRange[1]-xRange[0])/2)
- .attr("y", yRange[0] + (yRange[0]-yRange[1])*0.12*2)
+ // Above graph, top-right.
+ .attr("x", xRange[1])
+ .attr("y", yRange[1] - 6)
.attr("pointer-events", "none")
.attr("fill", "currentColor")
- .attr("text-anchor", "middle")
+ .attr("text-anchor", "end")
.attr("font-family", "sans-serif")
.attr("font-size", 12)
.text(C[i].slice(0, 7) + " ("
@@ -292,7 +300,7 @@
// Point center, low, high values.
// Bottom-right corner, next to "Commits".
.attr("x", xRange[1])
- .attr("y", yRange[0] + (yRange[0]-yRange[1])*0.12)
+ .attr("y", yRange[0] + (yRange[0]-yRange[1])*0.10)
.attr("pointer-events", "none")
.attr("fill", "currentColor")
.attr("text-anchor", "end")
