Add style to benchmark page

3 files changed, 125 insertions, 155 deletions

diff --git a/website/app.js b/website/app.js
index 6eb727cd7..8a2640b2f 100644
--- a/website/app.js
+++ b/website/app.js
@@ -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)
+  );
 }
diff --git a/website/index.html b/website/index.html
index 85bc6177c..7b3b2a05b 100644
--- a/website/index.html
+++ b/website/index.html
@@ -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>
 
diff --git a/website/style.css b/website/style.css
new file mode 100644
index 000000000..c84f0bbf6
--- /dev/null
+++ b/website/style.css
@@ -0,0 +1,41 @@
+
+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;
+  }
+}
+