Skip to content

Commit e235e5f

Browse files
Mark-SimulacrumMark-Simulacrum
authored
Merge pull request #744 from leeoniya/uPlot-json-graphs
initial uPlot & JSON-based graph page prototype. (#742)
2 parents 5dce0f1 + c0c424a commit e235e5f

File tree

4 files changed

+570
-185
lines changed

4 files changed

+570
-185
lines changed

‎site/static/index-old.html

Lines changed: 233 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,233 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>rustc performance data</title>
6+
<link rel="alternate icon" type="image/png" href="/favicon-32x32.png">
7+
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
8+
<link rel="stylesheet" type="text/css" href="perf.css">
9+
<style>
10+
#charts {
11+
width: 100%;
12+
max-width: 100%;
13+
}
14+
</style>
15+
</head>
16+
<body class="container">
17+
<div>&gt; <a href="index.html">graphs</a>, <a href="compare.html">compare</a>,
18+
<a href="dashboard.html">dashboard</a>, <a href="status.html">status</a>.</div>
19+
<div id="settings">
20+
start: <input placeholder="yyyy-mm-dd or commit" id="start-bound" />
21+
end: <input placeholder="yyyy-mm-dd or commit" id="end-bound" />
22+
Absolute data: <input id='absolute' name="absolute" type="checkbox">
23+
<select id='stats' name="stat"></select>
24+
<a href="#" onClick="submit_settings(); return false;">Submit</a>
25+
</div>
26+
<div>
27+
See <a href="/compare.html">compare page</a> for descriptions of what
28+
the names mean.
29+
</div>
30+
<div id="loading"><h2>Loading &amp; rendering data..</h2><h3>This may take a while!</h3></div>
31+
<div id="charts"></div>
32+
<div id="as-of"></div>
33+
<a href="https://github.com/rust-lang-nursery/rustc-perf">
34+
<img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png">
35+
</a>
36+
<script src="https://cdnjs.cloudflare.com/ajax/libs/msgpack-lite/0.1.26/msgpack.min.js"></script>
37+
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/6.0.7/highcharts.js"></script>
38+
<script src="shared.js"></script>
39+
40+
<script>
41+
let summaryYAxis = "Multiplier of `full` builds";
42+
function init_graph(response, stat, absolute) {
43+
let sorted_names = Object.keys(response.benchmarks);
44+
sorted_names.sort();
45+
document.getElementById("charts").style.display = "none";
46+
let title = "";
47+
let yAxis = "Value";
48+
if (stat == "instructions:u") {
49+
title = "Number of CPU instructions";
50+
yAxis = "Instructions";
51+
} else if (stat == "cycles:u") {
52+
title = "Number of CPU cycles";
53+
yAxis = "Cycles";
54+
} else if (stat == "cpu-clock") {
55+
title = "Wall time execution";
56+
yAxis = "Seconds";
57+
} else if (stat == "wall-time") {
58+
title = "Wall time execution";
59+
yAxis = "Seconds";
60+
} else if (stat == "max-rss") {
61+
title = "Maximum resident set size";
62+
yAxis = "Kilobytes";
63+
} else if (stat == "faults") {
64+
title = "Faults";
65+
}
66+
67+
function clickHandler(event) {
68+
if (this.options.prev_commit !== false) {
69+
const prev_commit = this.options.commit
70+
window.open("/compare.html?start=" + this.options.prev_commit +
71+
"&end=" + this.options.commit +
72+
"&stat=" + stat, "_blank");
73+
}
74+
return false;
75+
}
76+
77+
for (let crate_name of sorted_names) {
78+
let wrapper = document.createElement("table");
79+
let row = document.createElement("tr");
80+
wrapper.appendChild(row);
81+
for (let profile of ["check", "debug", "opt"]) {
82+
let crate_name_with_profile = `${crate_name}-${profile}`;
83+
let element = document.createElement("td");
84+
let element_1 = document.createElement("div");
85+
let element_2 = document.createElement("div");
86+
element_1.style.position = "absolute";
87+
element_1.style.width = "100%";
88+
element_1.id = "chart-container-" + crate_name_with_profile;
89+
element_2.style.position = "relative";
90+
element_2.style.width = "100%";
91+
element_2.style.height = "450px";
92+
element_2.appendChild(element_1);
93+
element.id = "chart-top-outer-container-" + crate_name_with_profile;
94+
element.style.width = "33%";
95+
element.appendChild(element_2);
96+
row.appendChild(element);
97+
}
98+
row.style.width = "100%";
99+
wrapper.style.width = "100%";
100+
document.getElementById("charts").appendChild(wrapper);
101+
}
102+
let graphs = [];
103+
for (let crate_name of sorted_names) {
104+
for (let profile of ["check", "debug", "opt"]) {
105+
graphs.push(() => {
106+
let cache_states =
107+
response.benchmarks[crate_name][profile];
108+
let datasets = [];
109+
let max = response.max[crate_name.replace("-check", "").replace("-debug", "").replace("-opt", "")];
110+
for (let state of cache_states) {
111+
let cache_name = state[0];
112+
let data = state[1];
113+
datasets.push({
114+
name: cache_name,
115+
animation: false,
116+
allowPointSelect: true,
117+
data: data.map(({commit, absolute, percent, y, x, is_interpolated}) => ({
118+
commit: response.commits[commit],
119+
prev_commit: commit == 0 ? null : response.commits[commit - 1],
120+
absolute, percent, y, x, color: response.colors[is_interpolated ? 1 : 0],
121+
})),
122+
marker: {
123+
enabled: true
124+
},
125+
});
126+
}
127+
128+
let id = "chart-container-" + crate_name + "-" + profile;
129+
let element = document.getElementById(id);
130+
let chart = new Highcharts.chart(element, {
131+
chart: {
132+
zoomType: "xy",
133+
renderTo: element,
134+
type: "line",
135+
},
136+
title: {
137+
text: crate_name + "-" + profile + "<br>" + title,
138+
},
139+
rangeSelector: {
140+
selected: 1,
141+
},
142+
series: datasets,
143+
tooltip: {
144+
crosshairs: [true],
145+
formatter: function formatter() {
146+
let date = new Date(this.x);
147+
let commit = this.point.commit.substr(0, 10);
148+
let y_axis = crate_name.startsWith("Summary") ? summaryYAxis : yAxis;
149+
return "<b>" + date.toLocaleString() + " - " + commit + "</b>" +
150+
"<br>" + this.series.name + ": " +
151+
this.point.absolute.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2}) +
152+
" " + y_axis.toLowerCase() + " (" +
153+
this.point.percent.toFixed(2) + "% from start)";
154+
},
155+
},
156+
xAxis: {
157+
type: "datetime",
158+
},
159+
yAxis: absolute ? {
160+
// Only the leftmost one ("-check") has its y-axis titled.
161+
title: profile == "check" ?
162+
{ text: crate_name.startsWith("Summary") ?
163+
summaryYAxis : yAxis } :
164+
{ text: "" },
165+
min: 0,
166+
ceiling: max * 1.05,
167+
floor: 0,
168+
} : {
169+
max: max * 1.05,
170+
softMin: -5,
171+
minRange: 0.1,
172+
title: {
173+
text: "% change",
174+
}
175+
},
176+
plotOptions: {
177+
line: {
178+
point: {
179+
events: {
180+
click: clickHandler,
181+
}
182+
}
183+
}
184+
}
185+
});
186+
});
187+
}
188+
}
189+
processGraphs(graphs);
190+
document.getElementById("charts").style.display = "block";
191+
}
192+
193+
function processGraphs(graphs) {
194+
requestAnimationFrame(() => {
195+
graphs.shift()();
196+
if (graphs.length > 0) {
197+
processGraphs(graphs);
198+
}
199+
});
200+
}
201+
202+
function make_graph(state) {
203+
// it's already visible, but if we would allow calling this more than once this makes it repeatable
204+
document.getElementById("loading").style.display = "block";
205+
let values = Object.assign({}, {
206+
start: "",
207+
end: "",
208+
stat: "instructions:u",
209+
absolute: true,
210+
}, state);
211+
make_request("/graph", values).then(function(response) {
212+
init_graph(response, values.stat, values.absolute);
213+
document.getElementById("loading").style.display = "none";
214+
});
215+
}
216+
217+
function submit_settings() {
218+
let start = document.getElementById("start-bound").value;
219+
let end = document.getElementById("end-bound").value;
220+
let absolute = document.getElementById("absolute").checked;
221+
let stat = getSelected("stats");
222+
let params = new URLSearchParams();
223+
params.append("start", start);
224+
params.append("end", end);
225+
params.append("absolute", absolute);
226+
params.append("stat", stat);
227+
window.location.search = params.toString();
228+
}
229+
230+
load_state(make_graph);
231+
</script>
232+
</body>
233+
</html>

0 commit comments

Comments
 (0)