提交 842a087d 编写于 作者: R Ryan Dahl

Add style to benchmark page

上级 b5d7e38f
......@@ -124,6 +124,30 @@ export function formatBytes(a, b) {
return parseFloat((a / Math.pow(c, f)).toFixed(d)) + " " + e[f];
}
function gen2(id, categories, columns, onclick) {
c3.generate({
bindto: id,
size: {
height: 300,
width: 375
},
data: {
columns,
onclick
},
axis: {
x: {
type: "category",
show: false,
categories
},
y: {
label: "seconds"
}
}
});
}
export function formatSeconds(t) {
const a = t % 60;
const min = Math.floor(t / 60);
......@@ -156,109 +180,26 @@ export async function drawChartsFromBenchmarkData() {
);
};
c3.generate({
bindto: "#exec-time-chart",
data: {
columns: execTimeColumns,
onclick: viewCommitOnClick(sha1List)
},
axis: {
x: {
type: "category",
show: false,
categories: sha1List
},
y: {
label: "seconds"
}
}
});
function gen(id, columns) {
gen2(id, sha1ShortList, columns, viewCommitOnClick(sha1List));
}
c3.generate({
bindto: "#throughput-chart",
data: {
columns: throughputColumns,
onclick: viewCommitOnClick(sha1List)
},
axis: {
x: {
type: "category",
show: false,
categories: sha1ShortList
},
y: {
label: "seconds"
}
}
});
gen("#exec-time-chart", execTimeColumns);
gen("#throughput-chart", throughputColumns);
gen("#req-per-sec-chart", reqPerSecColumns);
c3.generate({
bindto: "#req-per-sec-chart",
data: {
columns: reqPerSecColumns,
onclick: viewCommitOnClick(sha1List)
},
/* TODO
axis: {
x: {
type: "category",
show: false,
categories: sha1ShortList
},
y: {
label: "seconds"
}
}
});
c3.generate({
bindto: "#binary-size-chart",
data: {
columns: binarySizeColumns,
onclick: viewCommitOnClick(sha1List)
},
axis: {
x: {
type: "category",
show: false,
categories: sha1ShortList
},
y: {
tick: {
format: d => formatBytes(d)
}
}
}
});
c3.generate({
bindto: "#thread-count-chart",
data: {
columns: threadCountColumns,
onclick: viewCommitOnClick(sha1List)
},
axis: {
x: {
type: "category",
show: false,
categories: sha1ShortList
}
}
});
c3.generate({
bindto: "#syscall-count-chart",
data: {
columns: syscallCountColumns,
onclick: viewCommitOnClick(sha1List)
},
axis: {
x: {
type: "category",
show: false,
categories: sha1ShortList
}
}
});
*/
gen("#binary-size-chart", binarySizeColumns);
gen("#thread-count-chart", threadCountColumns);
gen("#syscall-count-chart", syscallCountColumns);
}
/**
......@@ -275,22 +216,10 @@ export async function drawChartsFromTravisData() {
const travisCompileTimeColumns = createTravisCompileTimeColumns(travisData);
const prNumberList = travisData.map(d => d.pull_request_number);
c3.generate({
bindto: "#travis-compile-time-chart",
data: {
columns: travisCompileTimeColumns,
onclick: viewPullRequestOnClick(prNumberList)
},
axis: {
x: {
type: "category",
categories: prNumberList
},
y: {
tick: {
format: d => formatSeconds(d)
}
}
}
});
gen2(
"#travis-compile-time-chart",
prNumberList,
travisCompileTimeColumns,
viewPullRequestOnClick(prNumberList)
);
}
......@@ -4,51 +4,51 @@
<head>
<title>deno</title>
<link rel="stylesheet" href="https://unpkg.com/c3@0.6.7/c3.min.css">
<link rel="stylesheet" href="style.css">
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
</head>
<body>
<h1>deno</h1>
<p> <a href="https://github.com/denoland/deno">github.com/denoland/deno</a>
<p> <a href="https://github.com/denoland/deno/blob/master/Docs.md">Documentation</a>
<p> <a href="https://github.com/denoland/deno/blob/master/Roadmap.md">Roadmap</a>
<p> <a href="https://github.com/denoland/deno_install">Install!</a>
<h2>Execution time</h2>
This shows how much time total it takes to run a few simple deno programs:
<a href="https://github.com/denoland/deno/blob/master/tests/002_hello.ts">tests/002_hello.ts</a>
and
<a href="https://github.com/denoland/deno/blob/master/tests/003_relative_import.ts">tests/003_relative_import.ts</a>.
For deno to execute typescript, it must first compile it to JS.
A warm startup is when deno has a cached JS output already, so
it should be fast because it bypasses the TS compiler.
A cold startup is when deno must compile from scratch.
<div id="exec-time-chart"></div>
<h2>Throughput</h2>
<div id="throughput-chart"></div>
<h2>Req/Sec</h2>
Tests HTTP server performance against Node.
<div id="req-per-sec-chart"></div>
<h2>Executable size</h2>
deno ships only a single binary. We track its size here.
<div id="binary-size-chart"></div>
<h2>Thread count</h2>
How many threads various programs use.
<div id="thread-count-chart"></div>
<h2>Syscall count</h2>
How many total syscalls are performed when executing a given script.
<div id="syscall-count-chart"></div>
<h2>Travis</h2>
How long for Travis CI to return a green status for pull requests.
<div id="travis-compile-time-chart"></div>
<main>
<h1>deno</h1>
<p> <a href="https://github.com/denoland/deno">github.com/denoland/deno</a>
<p> <a href="https://github.com/denoland/deno/blob/master/Docs.md">Docs</a>
<h2>Execution time</h2>
This shows how much time total it takes to run a few simple deno programs:
<a href="https://github.com/denoland/deno/blob/master/tests/002_hello.ts">tests/002_hello.ts</a>
and
<a href="https://github.com/denoland/deno/blob/master/tests/003_relative_import.ts">tests/003_relative_import.ts</a>.
For deno to execute typescript, it must first compile it to JS.
A warm startup is when deno has a cached JS output already, so
it should be fast because it bypasses the TS compiler.
A cold startup is when deno must compile from scratch.
<div id="exec-time-chart"></div>
<h2>Throughput</h2>
<div id="throughput-chart"></div>
<h2>Req/Sec</h2>
Tests HTTP server performance against Node.
<div id="req-per-sec-chart"></div>
<h2>Executable size</h2>
deno ships only a single binary. We track its size here.
<div id="binary-size-chart"></div>
<h2>Thread count</h2>
How many threads various programs use.
<div id="thread-count-chart"></div>
<h2>Syscall count</h2>
How many total syscalls are performed when executing a given script.
<div id="syscall-count-chart"></div>
<h2>Travis</h2>
How long for Travis CI to return a green status for pull requests.
<div id="travis-compile-time-chart"></div>
</main>
<script src="https://unpkg.com/d3@5.7.0/dist/d3.min.js"></script>
<script src="https://unpkg.com/c3@0.6.7/c3.min.js"></script>
......
body {
color: #111;
background: #f0f0f0;
margin: 80px 0;
font-family: Arial;
font-size: 20px;
}
main {
max-width: 800px;
margin: 0px auto;
}
svg {
margin: 0px auto;
}
a {
color: #333;
}
a:hover {
background: #aee;
}
@media only screen and (max-device-width: 480px) {
main {
margin: 15px;
}
body {
margin: 0;
}
svg {
max-width: 375px;
margin: 25px -15px;
}
}
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册