small-and-fast: recreate the diagrams using chart.js

The diagrams showing just how much faster Git performs than Subversion
were originally created using the Google Charts API, in
b6d341c (first graphs and new services, 2012-04-30).

In the meantime, the Google Charts API joined so many other things in
the Google Graveyard (see https://killedbygoogle.com/ for more details).

This means that the diagrams 404ed, and users were left wondering what
should have been demonstrated on this page.

But when a door closes, another door opens, and there are wonderful
contenders in this time and age, and we do not even have to display
static images, we can switch to proper, Javascript-backed charts where
you can even hover over the chart and see the exact number!

So let's do that. Based on https://www.chartjs.org/, reimplement those
charts. That also offers a wildly improved readability of the entire
thing, compared to the somewhat cryptic Google Chart URLs.

This fixes #1862.

Signed-off-by: Johannes Schindelin <[email protected]>

Author: dscho

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');

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;
+}

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>

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>