From 48cae518fc01eed99993457c5579ebbcff3ae97d Mon Sep 17 00:00:00 2001 From: Johannes Schindelin Date: Sat, 28 Sep 2024 13:58:20 +0200 Subject: [PATCH] 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 b6d341c0a (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 https://github.com/git/git-scm.com/issues/1862. Signed-off-by: Johannes Schindelin --- assets/js/application.js | 49 +++++++++++++++++++++++++++++++ assets/sass/typography.scss | 9 ++++++ content/about/small-and-fast.html | 25 ++++++++-------- layouts/partials/footer.html | 1 + 4 files changed, 72 insertions(+), 12 deletions(-) diff --git a/assets/js/application.js b/assets/js/application.js index 0610b18cb5..458eb3fa69 100644 --- 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 index 5e8a840906..11c810760a 100644 --- 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; +} \ No newline at end of file diff --git a/content/about/small-and-fast.html b/content/about/small-and-fast.html index 7de37e6de0..028f821976 100644 --- 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 ---
@@ -31,42 +32,42 @@

Benchmarks

- init benchmarks + - init benchmarks + - init benchmarks + - init benchmarks + - init benchmarks + - init benchmarks + - init benchmarks + - init benchmarks + - init benchmarks + - init benchmarks + - init benchmarks + - init benchmarks + diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 25b3f88191..e0fd9379e4 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -16,5 +16,6 @@ {{ if eq (.Scratch.Get "section") "search" }}{{ end }} +{{ if eq .Page.Params.needs_chartjs true }}{{ end }} {{ $js := resources.Get "js/application.js" | resources.ExecuteAsTemplate "js/application.js" . | resources.Minify }}