Add commit history bar graph: fix ruffle-rs#89

Author: danielhjacobs

_includes/footer.html

@@ -2,7 +2,81 @@
 <script src="https://code.jquery.com/jquery-3.5.1.min.js"
   integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
 <script type="text/javascript" src="{{ "/assets/bootstrap/js/bootstrap.min.js" | relative_url }}"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
 <script type="text/javascript">
+  function createChart(labels, dat) {
+    const ctx = $("#weeklyCommits");
+    const data = {
+      labels: labels,
+      datasets: [{
+        data: dat,
+        backgroundColor: "#FFAD33",
+        hoverBackgroundColor: "#FFAD33"
+      }]
+    };
+
+    const options = {
+      scales: {
+        y: {
+          ticks: {
+            beginAtZero: true,
+            color: "#FFAD33"
+          },
+          grid: {
+            drawBorder: false,
+            display: false
+          }
+        },
+        x: {
+          ticks: {
+            maxTicksLimit: 18,
+            color: "#FFAD33"
+          },
+          grid: {
+            drawBorder: false,
+            display: false
+          }
+        }
+      },
+      plugins: {
+        title: {
+          display: true,
+          position: "top",
+          text: "Weekly Contributions",
+          color: "#FFAD33",
+          font: {
+            size: 18,
+          }
+        },
+        legend: {
+          display: false
+        },
+        tooltip: {
+          backgroundColor: "#FFAD33",
+          borderWidth: 1,
+          borderColor: "#1a2743",
+          titleColor: "#37528C",
+          titleMarginBottom: 0,
+          callbacks: {
+            title: (t) => {
+              return t[0].formattedValue + " commits the week of " + new Date(t[0].label).toLocaleString(undefined, {
+                month: "short",
+                day: "numeric"
+              });
+            },
+            label: () => ""
+          }
+        }
+      }
+    };
+
+    const chart = new Chart(ctx, {
+      type: "bar",
+      data: data,
+      options: options
+    });
+  }
+
   $(document).ready(function () {
     var $nav = $('.navbar');
     var $headerarrow = $('.header-down-arrow');
@@ -23,6 +97,23 @@
         }
       });
     });
+    const labels = [];
+    const dat = [];
+    fetch("https://api.github.com/repos/ruffle-rs/ruffle/stats/commit_activity")
+      .then(response => response.json())
+      .then(data => {
+        Object.values(data).forEach(val => {
+          if (val.total && val.week) {
+            dat.push(val.total);
+            labels.push(
+              new Date(val.week * 1000).toLocaleDateString(
+                undefined, {timeZone: "UTC"}
+              )
+            );
+          }
+        });
+        createChart(labels, dat);
+      });
   });
 </script>
 {%- endif -%}

assets/title.scss

@@ -357,4 +357,10 @@ a.store-badge {
 @keyframes progressBar {
   0% { width: 0; }
   100% { width: 100%; }
-}
+}
+
+#weeklyCommits {
+  width: 100%;
+  max-width: 1250px;
+  max-height: 300px;
+}

index.html

@@ -339,6 +339,11 @@ <h5>ActionScript 3 API <code>5%</code></h5>
 					</p>
 				</div>
 			</div>
+			<div class="row">
+				<div class="col-base col-lg d-flex justify-content-center">
+					<canvas id="weeklyCommits"></canvas>
+				</div>
+			</div>
 		</section>
 		<section class="section content">
 			<h2 id="get-involved">Get involved</h2>