0
0
Fork 0
mirror of https://github.com/denoland/deno.git synced 2024-10-29 08:58:01 -04:00
denoland-deno/website/app.js
Kevin (Kun) "Kassimo" Qian c0f70ea868 y label fix
2018-10-20 12:55:42 -04:00

250 lines
6.5 KiB
JavaScript

// Copyright 2018 the Deno authors. All rights reserved. MIT license.
export async function getJson(path) {
return (await fetch(path)).json();
}
export async function getTravisData(
url = "https://api.travis-ci.com/repos/denoland/deno/builds?event_type=pull_request"
) {
const res = await fetch(url, {
headers: {
Accept: "application/vnd.travis-ci.2.1+json"
}
});
const data = await res.json();
return data.builds.reverse();
}
function getBenchmarkVarieties(data, benchmarkName) {
// Look at last sha hash.
const last = data[data.length - 1];
return Object.keys(last[benchmarkName]);
}
export function createColumns(data, benchmarkName) {
const varieties = getBenchmarkVarieties(data, benchmarkName);
return varieties.map(variety => [
variety,
...data.map(d => {
if (d[benchmarkName] != null) {
if (d[benchmarkName][variety] != null) {
const v = d[benchmarkName][variety];
if (benchmarkName == "benchmark") {
const meanValue = v ? v.mean : 0;
return meanValue || null;
} else {
return v;
}
}
}
return null;
})
]);
}
export function createExecTimeColumns(data) {
return createColumns(data, "benchmark");
}
export function createThroughputColumns(data) {
return createColumns(data, "throughput");
}
export function createReqPerSecColumns(data) {
return createColumns(data, "req_per_sec");
}
export function createBinarySizeColumns(data) {
const propName = "binary_size";
const binarySizeNames = Object.keys(data[data.length - 1][propName]);
return binarySizeNames.map(name => [
name,
...data.map(d => {
const binarySizeData = d["binary_size"];
switch (typeof binarySizeData) {
case "number": // legacy implementation
return name === "deno" ? binarySizeData : 0;
default:
if (!binarySizeData) {
return null;
}
return binarySizeData[name] || null;
}
})
]);
}
export function createThreadCountColumns(data) {
const propName = "thread_count";
const threadCountNames = Object.keys(data[data.length - 1][propName]);
return threadCountNames.map(name => [
name,
...data.map(d => {
const threadCountData = d[propName];
if (!threadCountData) {
return null;
}
return threadCountData[name] || null;
})
]);
}
export function createSyscallCountColumns(data) {
const propName = "syscall_count";
const syscallCountNames = Object.keys(data[data.length - 1][propName]);
return syscallCountNames.map(name => [
name,
...data.map(d => {
const syscallCountData = d[propName];
if (!syscallCountData) {
return null;
}
return syscallCountData[name] || null;
})
]);
}
function createTravisCompileTimeColumns(data) {
return [["duration_time", ...data.map(d => d.duration)]];
}
export function createSha1List(data) {
return data.map(d => d.sha1);
}
// Formats the byte sizes e.g. 19000 -> 18.55 KB
// Copied from https://stackoverflow.com/a/18650828
export function formatBytes(a, b) {
if (0 == a) return "0 Bytes";
var c = 1024,
d = b || 2,
e = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"],
f = Math.floor(Math.log(a) / Math.log(c));
return parseFloat((a / Math.pow(c, f)).toFixed(d)) + " " + e[f];
}
/**
* @param {string} id The id of dom element
* @param {string[]} categories categories for x-axis values
* @param {any[][]} columns The columns data
* @param {function} onclick action on clicking nodes of chart
* @param {string} yLabel label of y axis
* @param {function} yTickFormat formatter of y axis ticks
*/
function gen2(
id,
categories,
columns,
onclick,
yLabel = "",
yTickFormat = null
) {
const xFormat = {
type: "category",
show: false,
categories
};
const yFormat = {
label: yLabel
};
if (yTickFormat) {
yFormat.tick = {
format: yTickFormat
};
}
c3.generate({
bindto: id,
size: {
height: 300,
width: window.chartWidth || 375 // TODO: do not use global variable
},
data: {
columns,
onclick
},
axis: {
x: xFormat,
y: yFormat
}
});
}
export function formatSeconds(t) {
const a = t % 60;
const min = Math.floor(t / 60);
return a < 30 ? `${min} min` : `${min + 1} min`;
}
/**
* @param dataUrl The url of benchramk data json.
*/
export function drawCharts(dataUrl) {
drawChartsFromBenchmarkData(dataUrl);
drawChartsFromTravisData();
}
/**
* Draws the charts from the benchmark data stored in gh-pages branch.
*/
export async function drawChartsFromBenchmarkData(dataUrl) {
const data = await getJson(dataUrl);
const execTimeColumns = createExecTimeColumns(data);
const throughputColumns = createThroughputColumns(data);
const reqPerSecColumns = createReqPerSecColumns(data);
const binarySizeColumns = createBinarySizeColumns(data);
const threadCountColumns = createThreadCountColumns(data);
const syscallCountColumns = createSyscallCountColumns(data);
const sha1List = createSha1List(data);
const sha1ShortList = sha1List.map(sha1 => sha1.substring(0, 6));
const viewCommitOnClick = _sha1List => d => {
window.open(
`https://github.com/denoland/deno/commit/${_sha1List[d["index"]]}`
);
};
function gen(id, columns, yLabel = "", yTickFormat = null) {
gen2(
id,
sha1ShortList,
columns,
viewCommitOnClick(sha1List),
yLabel,
yTickFormat
);
}
gen("#exec-time-chart", execTimeColumns, "seconds");
gen("#throughput-chart", throughputColumns, "seconds");
gen("#req-per-sec-chart", reqPerSecColumns, "# req/sec");
gen("#binary-size-chart", binarySizeColumns, "size", formatBytes);
gen("#thread-count-chart", threadCountColumns, "# threads");
gen("#syscall-count-chart", syscallCountColumns, "# syscalls");
}
/**
* Draws the charts from travis' API data.
*/
export async function drawChartsFromTravisData() {
const viewPullRequestOnClick = _prNumberList => d => {
window.open(
`https://github.com/denoland/deno/pull/${_prNumberList[d["index"]]}`
);
};
const travisData = (await getTravisData()).filter(d => d.duration > 0);
const travisCompileTimeColumns = createTravisCompileTimeColumns(travisData);
const prNumberList = travisData.map(d => d.pull_request_number);
gen2(
"#travis-compile-time-chart",
prNumberList,
travisCompileTimeColumns,
viewPullRequestOnClick(prNumberList),
"time",
formatSeconds
);
}