v1.0.1

benchmark-action · Nov 9, 2019 · 44e7183 · 44e7183
1 parent f4c8b6b
commit 44e7183
Show file tree

Hide file tree

Showing 4 changed files with 246 additions and 3 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+/*.js.map
+/examples
diff --git a/index.html b/index.html
@@ -0,0 +1,239 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes" />
+    <style>
+      html {
+        font-family: BlinkMacSystemFont,-apple-system,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
+        -webkit-font-smoothing: antialiased;
+        background-color: #fff;
+        font-size: 16px;
+      }
+      body {
+        color: #4a4a4a;
+        border: 8px;
+        font-size: 1em;
+        font-weight: 400;
+      }
+      header {
+        margin-bottom: 8px;
+        display: flex;
+        flex-direction: column;
+      }
+      main {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+      }
+      a {
+        color: #3273dc;
+        cursor: pointer;
+        text-decoration: none;
+      }
+      a:hover {
+        color: #000;
+      }
+      button {
+        color: #fff;
+        background-color: #3298dc;
+        border-color: transparent;
+        cursor: pointer;
+        text-align: center;
+      }
+      button:hover {
+        background-color: #2793da;
+      }
+      footer {
+        margin-top: 16px;
+      }
+      .header-label {
+        margin-right: 4px;
+      }
+      .benchmark-set {
+        margin: 8px 0;
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+      }
+      .benchmark-graphs {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-around;
+        align-items: center;
+        flex-wrap: wrap;
+        width: 100%;
+      }
+      .benchmark-chart {
+        max-width: 1000px;
+      }
+    </style>
+    <title>Benchmarks</title>
+  </head>
+
+  <body>
+    <header id="header">
+      <div class="header-item">
+        <strong class="header-label">Last Update:</strong>
+        <span id="last-update"></span>
+      </div>
+      <div class="header-item">
+        <strong class="header-label">Repository:</strong>
+        <a id="repository-link" rel="noopener"></a>
+      </div>
+    </header>
+    <main id="main"></main>
+    <footer id="footer"></footer>
+
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.min.js"></script>
+    <script src="data.js"></script>
+    <script>
+      'use strict';
+      (function() {
+        // Colors from https://github.com/github/linguist/blob/master/lib/linguist/languages.yml
+        const toolColors = {
+          cargo: '#dea584',
+          go: '#00add8',
+          benchmarkjs: '#f1e05a',
+        };
+
+        const data = window.BENCHMARK_DATA;
+        document.getElementById('last-update').textContent = new Date(data.lastUpdate).toString();
+        const repoLink = document.getElementById('repository-link');
+        repoLink.href = data.repoUrl;
+        repoLink.textContent = data.repoUrl;
+
+        function collectBenchesPerTestCase(entries) {
+          const map = new Map();
+          for (const entry of entries) {
+            const {commit, date, tool, benches} = entry;
+            // Reverse array because of descending order by time
+            for (const bench of benches.reverse()) {
+              const result = { commit, date, tool, bench };
+              const arr = map.get(bench.name);
+              if (arr === undefined) {
+                map.set(bench.name, [result]);
+              } else {
+                arr.push(result);
+              }
+            }
+          }
+          return map;
+        }
+
+        function renderGraph(parent, name, dataset) {
+          const canvas = document.createElement('canvas');
+          canvas.className = 'benchmark-chart';
+          parent.appendChild(canvas);
+
+          const color = toolColors[dataset.length > 0 ? dataset[0].tool : ''];
+          const data = {
+            labels: dataset.map(d => d.commit.id.slice(0, 7)),
+            datasets: [
+              {
+                label: name,
+                data: dataset.map(d => d.bench.value),
+                borderColor: color,
+                backgroundColor: color + '60', // Add alpha for #rrggbbaa
+              }
+            ],
+          };
+          const options = {
+            scales: {
+              xAxes: [
+                {
+                  scaleLabel: {
+                    display: true,
+                    labelString: 'commit',
+                  },
+                }
+              ],
+              yAxes: [
+                {
+                  scaleLabel: {
+                    display: true,
+                    labelString: dataset.length > 0 ? dataset[0].bench.unit : '',
+                  },
+                  ticks: {
+                    beginAtZero: true,
+                  }
+                }
+              ],
+            },
+            tooltips: {
+              callbacks: {
+                title: items => {
+                  const {xLabel, index} = items[0];
+                  const data = dataset[index];
+                  return xLabel + '\n\n' + data.commit.message + '\n\n' + data.commit.timestamp + ' commited by @' + data.commit.committer.username + '\n';
+                },
+                label: item => {
+                  let label = item.value;
+                  const { range, unit } = dataset[item.index].bench;
+                  if (unit) {
+                    label += ' ' + unit;
+                  }
+                  if (range) {
+                    label += ' (' + range + ')';
+                  }
+                  return label;
+                }
+              }
+            },
+            onClick: (_mouseEvent, activeElems) => {
+              if (activeElems.length === 0) {
+                return;
+              }
+              // XXX: Undocumented. How can we know the index?
+              const index = activeElems[0]._index;
+              const url = dataset[index].commit.url;
+              window.open(url, '_blank');
+            },
+          };
+
+          new Chart(canvas, {
+            type: 'line',
+            data,
+            options,
+          });
+        }
+
+        function renderBenchSet(name, benchset) {
+          const setElem = document.createElement('div');
+          setElem.className = 'benchmark-set';
+          document.getElementById('main').appendChild(setElem);
+
+          const nameElem = document.createElement('h1');
+          nameElem.className = 'title is-2';
+          nameElem.textContent = name;
+          setElem.appendChild(nameElem);
+
+          const graphsElem = document.createElement('div');
+          graphsElem.className = 'benchmark-graphs';
+          setElem.appendChild(graphsElem);
+
+          for (const [benchName, benches] of benchset.entries()) {
+            renderGraph(graphsElem, benchName, benches)
+          }
+        }
+
+        for (const name of Object.keys(data.entries)) {
+          const commits = data.entries[name];
+          const benchset = collectBenchesPerTestCase(commits);
+          renderBenchSet(name, benchset);
+        }
+
+        const dlButton = document.createElement('button');
+        dlButton.textContent = 'Download data as JSON';
+        dlButton.onclick = () => {
+          const dataUrl = 'data:,' + JSON.stringify(data, null, 2);
+          const a = document.createElement('a');
+          a.href = dataUrl;
+          a.download = 'benchmark_data.json';
+          a.click();
+        };
+        document.getElementById('footer').appendChild(dlButton);
+      })();
+    </script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "github-action-benchmark",
   "version": "0.0.0",
   "private": true,
-  "description": "GitHub action for continuous benchmaking to keep performance",
+  "description": "",
   "main": "index.js",
   "scripts": {
     "build": "tsc -p .",

diff --git a/write.js b/write.js