git · dscho · Sep 28, 2024
diff --git a/assets/js/application.js b/assets/js/application.js
@@ -34,6 +34,7 @@ $(document).ready(function() {
   Forms.init();
   Downloads.init();
   DownloadBox.init();
+  BarCharts.init();
 });
 
 function onPopState(fn) {
@@ -540,6 +541,54 @@ var Downloads = {
     $('#relative-release-date').html(Downloads.postProcessReleaseDate);
   },
 }
+var BarCharts = {
+  init: function() {
+    BarCharts.render();
+  },
+
+  render: function() {
+    $('barchart').each(function() {
+      const label = $(this).attr('x-data-title');
+      const pairs = $(this).attr('x-data').split(',');
+      const data = pairs.reduce((data, pair) => {
+        const [label, amount] = pair.split(':');
+        data[label] = parseFloat(amount);
+        return data;
+      }, {});
+      const backgroundColor = pairs.map(pair => pair.startsWith('git') ? '#E09FA0' : '#E05F49');
+
+      const canvas = document.createElement('canvas');
+      new Chart(canvas, {
+        type: 'bar',
+        data: {
+          datasets: [{
+            data,
+            backgroundColor,
+          }]
+        },
+        options: {
+          maintainAspectRatio: false,
+          scales: {
+            y: {
+              display: false,
+              beginAtZero: true,
+            }
+          },
+          plugins: {
+            legend: {
+              display: false
+            },
+            title: {
+              display: true,
+              text: label,
+            }
+          }
+        }
+      });
+      $(this).append(canvas);
+    });
+  }
+}
 
 // Scroll to Top
 $('#scrollToTop').removeClass('no-js');

diff --git a/assets/sass/typography.scss b/assets/sass/typography.scss
@@ -371,3 +371,12 @@ div.more {
 .text-center {
   text-align: center;
 }
+
+barchart {
+  width: 90px;
+  height: 125px;
+  padding-right: 5px;
+  padding-left: 5px;
+  display: inline-block;
+  background-color: #fcfcfa7f;
+}
diff --git a/content/about/small-and-fast.html b/content/about/small-and-fast.html
@@ -6,6 +6,7 @@
 display_class: "two-line"
 aliases:
 - /about/small-and-fast/index.html
+needs_chartjs: true
 ---
   <section class="about" id="small-and-fast">
 
@@ -31,42 +32,42 @@ <h3>Benchmarks</h3>
       <tbody>
         <tr>
           <td>
-            <img src="https://chart.googleapis.com/chart?chxt=x&amp;cht=bvs&amp;chl=git|svn&amp;chd=t:0.649,2.6&amp;chds=0,2.6&amp;chs=100x125&amp;chco=E09FA0|E05F49&amp;chf=bg,s,fcfcfa&amp;chtt=Commit A" alt="init benchmarks">
+            <barchart x-data="git:0.649,svn:2.6" x-data-title="Commit A" alt="init benchmarks" />
           </td>
           <td>
-            <img src="https://chart.googleapis.com/chart?chxt=x&amp;cht=bvs&amp;chl=git|svn&amp;chd=t:1.53,24.7&amp;chds=0,24.7&amp;chs=100x125&amp;chco=E09FA0|E05F49&amp;chf=bg,s,fcfcfa&amp;chtt=Commit B" alt="init benchmarks">
+            <barchart x-data="git:1.53,svn:24.7" x-data-title="Commit B" alt="init benchmarks" />
           </td>
           <td>
-            <img src="https://chart.googleapis.com/chart?chxt=x&amp;cht=bvs&amp;chl=git|svn&amp;chd=t:0.257,1.09&amp;chds=0,1.09&amp;chs=100x125&amp;chco=E09FA0|E05F49&amp;chf=bg,s,fcfcfa&amp;chtt=Diff Curr" alt="init benchmarks">
+            <barchart x-data="git:0.257,svn:1.09" x-data-title="Diff Curr" alt="init benchmarks" />
           </td>
           <td>
-            <img src="https://chart.googleapis.com/chart?chxt=x&amp;cht=bvs&amp;chl=git|svn&amp;chd=t:0.248,3.99&amp;chds=0,3.99&amp;chs=100x125&amp;chco=E09FA0|E05F49&amp;chf=bg,s,fcfcfa&amp;chtt=Diff Rec" alt="init benchmarks">
+            <barchart x-data="git:0.248,svn:3.99" x-data-title="Diff Rec" alt="init benchmarks" />
           </td>
           <td>
-            <img src="https://chart.googleapis.com/chart?chxt=x&amp;cht=bvs&amp;chl=git|svn&amp;chd=t:1.17,83.57&amp;chds=0,83.57&amp;chs=100x125&amp;chco=E09FA0|E05F49&amp;chf=bg,s,fcfcfa&amp;chtt=Diff Tags" alt="init benchmarks">
+            <barchart x-data="git:1.17,svn:83.57" x-data-title="Diff Tags" alt="init benchmarks" />
           </td>
           <td>
-            <img src="https://chart.googleapis.com/chart?chxt=x&amp;cht=bvs&amp;chl=git*|git|svn&amp;chd=t:21.0,107.5,14.0&amp;chds=0,107.5&amp;chs=100x125&amp;chco=E09FA0|E09FA0|E05F49&amp;chf=bg,s,fcfcfa&amp;chtt=Clone" alt="init benchmarks">
+            <barchart x-data="git*:21.0,git:107.5,svn:14.0" x-data-title="Clone" alt="init benchmarks" />
           </td>
         </tr>
         <tr>
           <td>
-            <img src="https://chart.googleapis.com/chart?chxt=x&amp;cht=bvs&amp;chl=git|svn&amp;chd=t:0.012,0.381&amp;chds=0,0.381&amp;chs=100x125&amp;chco=E09FA0|E05F49&amp;chf=bg,s,fcfcfa&amp;chtt=Log (50)" alt="init benchmarks">
+            <barchart x-data="git:0.012,svn:0.381" x-data-title="Log (50)" alt="init benchmarks" />
           </td>
           <td>
-            <img src="https://chart.googleapis.com/chart?chxt=x&amp;cht=bvs&amp;chl=git|svn&amp;chd=t:0.519,169.197&amp;chds=0,169.197&amp;chs=100x125&amp;chco=E09FA0|E05F49&amp;chf=bg,s,fcfcfa&amp;chtt=Log (All)" alt="init benchmarks">
+            <barchart x-data="git:0.519,svn:169.197" x-data-title="Log (All)" alt="init benchmarks" />
           </td>
           <td>
-            <img src="https://chart.googleapis.com/chart?chxt=x&amp;cht=bvs&amp;chl=git|svn&amp;chd=t:0.601,82.843&amp;chds=0,82.843&amp;chs=100x125&amp;chco=E09FA0|E05F49&amp;chf=bg,s,fcfcfa&amp;chtt=Log (File)" alt="init benchmarks">
+            <barchart x-data="git:0.601,svn:82.843" x-data-title="Log (File)" alt="init benchmarks" />
           </td>
           <td>
-            <img src="https://chart.googleapis.com/chart?chxt=x&amp;cht=bvs&amp;chl=git|svn&amp;chd=t:0.896,2.816&amp;chds=0,2.816&amp;chs=100x125&amp;chco=E09FA0|E05F49&amp;chf=bg,s,fcfcfa&amp;chtt=Update" alt="init benchmarks">
+            <barchart x-data="git:0.896,svn:2.816" x-data-title="Update" alt="init benchmarks" />
           </td>
           <td>
-            <img src="https://chart.googleapis.com/chart?chxt=x&amp;cht=bvs&amp;chl=git|svn&amp;chd=t:1.91,3.04&amp;chds=0,3.04&amp;chs=100x125&amp;chco=E09FA0|E05F49&amp;chf=bg,s,fcfcfa&amp;chtt=Blame" alt="init benchmarks">
+            <barchart x-data="git:1.91,svn:3.04" x-data-title="Blame" alt="init benchmarks" />
           </td>
           <td>
-            <img src="https://chart.googleapis.com/chart?chxt=x&amp;cht=bvs&amp;chl=git|svn&amp;chd=t:181,132&amp;chds=0,181&amp;chs=100x125&amp;chco=E09FA0|E05F49&amp;chf=bg,s,fcfcfa&amp;chtt=Size" alt="init benchmarks">
+            <barchart x-data="git:181,svn:132" x-data-title="Size" alt="init benchmarks" />
           </td>
         </tr>
       </tbody>

diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
@@ -16,5 +16,6 @@
 <script src="{{ relURL "js/jquery.defaultvalue.js" }}"></script>
 <script src="{{ relURL "js/session.min.js" }}"></script>
 {{ if eq (.Scratch.Get "section") "search" }}<script src="{{ relURL "pagefind/pagefind-ui.js" }}"></script>{{ end }}
+{{ if eq .Page.Params.needs_chartjs true }}<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>{{ end }}
 {{ $js := resources.Get "js/application.js" | resources.ExecuteAsTemplate "js/application.js" . | resources.Minify }}
 <script src="{{ $js.RelPermalink }}"></script>