Add historical graph generation workflow

.github/workflows/generate-graphs.yml

@@ -0,0 +1,46 @@
+name: Generate Graphs
+
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - "data/last.json"
+  workflow_dispatch:
+
+permissions:
+  contents: write
+
+jobs:
+  generate:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Set up Python
+        uses: actions/setup-python@v5
+        with:
+          python-version: "3.10"
+          cache: "pip"
+
+      - name: Install dependencies
+        run: |
+          python -m pip install --upgrade pip
+          pip install pandas matplotlib
+
+      - name: Generate graphs
+        run: python graph-generator/app.py
+
+      - name: Commit and push graphs
+        run: |
+          git config --global user.name "github-actions[bot]"
+          git config --global user.email "github-actions[bot]@users.noreply.github.com"
+          git add graphs/*.svg
+          if git diff --staged --quiet; then
+            echo "No changes to graphs"
+          else
+            git commit -m "docs: update performance graphs"
+            git push
+          fi

README.md

@@ -82,10 +82,14 @@ After all these invocations, all information stored in DynamoDB is aggregated an
 
 ### Step 4
 
-A static website, hosted on GitHub pages here: https://maxday.github.io/lambda-perf/ fetches this JSON file and displays the result in a (nice?) UI.
+Using the data from the last 2 years, SVG charts are generated to show how the performance of each runtime has evolved over time. These files are stored in the /graphs folder.
 
 ### Step 5
 
+A static website, hosted on GitHub pages here: https://maxday.github.io/lambda-perf/ fetches this JSON file and displays the result in a (nice?) UI.
+
+### Step 6
+
 Hack/Fork/Send PR and create your own benchmarks!
 
 ## Disclaimer

docs/css/custom.css

@@ -3,7 +3,7 @@ html {
     min-height: 100%;
 }
 body {
-    margin-bottom: 120px; 
+    margin-bottom: 120px;
 }
 hr {
     margin-bottom: 2px;
@@ -13,7 +13,7 @@ hr {
     position: absolute;
     bottom: 0;
     width: 100%;
-    height: 100px; 
+    height: 100px;
     line-height: 60px;
     background-color: #f5f5f5;
     text-align: center;
@@ -66,6 +66,16 @@ hr {
     text-align: right;
     font-size: 9px;
 }
+.graph-container {
+    cursor: pointer;
+    transition: transform 0.2s;
+}
+.graph-container:hover {
+    transform: scale(1.02);
+}
+.smallGraph {
+    border-radius: 4px;
+}
 .badge:empty {
     display: inline-block;
 }

docs/index.html

@@ -74,6 +74,11 @@ <h1 class="mt-5">Lambda Cold Starts benchmark <br />by <a href="https://maxday.d
     <hr />
     <div id="sampleRuntimeElement" class="runtime">
       <span class="badge bg-success"><span class="runtimeName">runtime name</span></span>
+      <div class="graph-container mt-2 mb-2">
+        <a class="graphLink" target="_blank" title="see 2 year history">
+          <img class="smallGraph img-fluid" alt="Performance history" width="300" height="170">
+        </a>
+      </div>
       <div class="coldstarts" class="fixedHeight"></div>
       ❄ <span class="itemData averageColdStartDuration"></span></span>
       💾 <span class="itemData averageMemoryUsed"></span></span>
@@ -93,4 +98,4 @@ <h1 class="mt-5">Lambda Cold Starts benchmark <br />by <a href="https://maxday.d
   </footer>
 </body>
 
-</html>
+</html>

docs/script.js

@@ -119,6 +119,27 @@ const drawLang = async (idx, data) => {
   const runtimeName = newElement.getElementsByClassName("runtimeName")[0];
   runtimeName.innerHTML = `${data.d}`;
 
+  // Set graph images and links
+  const runtimePath = data.r.replace("lambda-perf-", "").split("-")[0];
+  const arch = data.a;
+  const pkg = data.p;
+  const mem = data.m;
+  const region = "us-east-1";
+
+  const smallGraphImg = newElement.getElementsByClassName("smallGraph")[0];
+  const graphLink = newElement.getElementsByClassName("graphLink")[0];
+
+  const isGitHubPages = window.location.hostname === "maxday.github.io";
+  const basePath = isGitHubPages
+    ? "https://raw.githubusercontent.com/maxday/lambda-perf/main/graphs/"
+    : "../graphs/";
+
+  const smallGraphUrl = `${basePath}last-${runtimePath}-${arch}-${pkg}-${mem}-${region}-180d.svg`;
+  const largeGraphUrl = `${basePath}last-${runtimePath}-${arch}-${pkg}-${mem}-${region}-2y.svg`;
+
+  smallGraphImg.src = smallGraphUrl;
+  graphLink.href = largeGraphUrl;
+
   for (let i = 0; i < data.i.length; ++i) {
     await sleep(data.i[i]);
     addSquare(coldStartElement);