From 3d89dffbea7a4a9685fd41999294363b7bc6901b Mon Sep 17 00:00:00 2001 From: Toon Claes Date: Tue, 1 Oct 2024 21:27:33 +0200 Subject: [PATCH] small-and-fast: show bar graphs with and CSS Instead of relying on Google Graph or any other service to draw the graphs, draw them with pure HTML and some CSS. # Conflicts: # content/about/small-and-fast.html --- assets/sass/application.scss | 66 ++++++++++++++ content/about/small-and-fast.html | 147 +++++++++++++++++++++++++++--- 2 files changed, 201 insertions(+), 12 deletions(-) diff --git a/assets/sass/application.scss b/assets/sass/application.scss index 7e352c3f30..98e417d886 100644 --- a/assets/sass/application.scss +++ b/assets/sass/application.scss @@ -49,3 +49,69 @@ pre { .d-flex{ display: flex; } + +.bar-chart { + display: inline-grid; + + /* Got the idea of using
,
, and
from: + * https://css-tricks.com/making-charts-with-css/ */ + dt { + grid-column: 1 / 4; + text-align: center; + } + + dd { + padding: 5px; + margin: 0; + text-align: center; + display: flex; + flex-direction: column; + } + + dd + dd { + border-left: 1px solid #ccc; + } + + progress { + /* Reset the default appearance */ + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + + writing-mode: vertical-lr; + + width: 2em; + height: 5em; + background: none; + border: none; + position: relative; + } + + progress::-webkit-progress-bar { + background: none; + } + + progress::-webkit-progress-value { + /* For some reason Chrome and friends show the value at the top */ + bottom: 0; + position: absolute; + } + + progress.git::-moz-progress-bar { + background-color: #E09FA0; + } + progress.git::-webkit-progress-value { + background-color: #E09FA0; + } + progress.svn::-moz-progress-bar { + background-color: #E05F49; + } + progress.svn::-webkit-progress-value { + background-color: #E05F49; + } + + progress.git::-webkit-progress-value { + background-color: #E09FA0; + } + +} diff --git a/content/about/small-and-fast.html b/content/about/small-and-fast.html index 7de37e6de0..f5e3e6204a 100644 --- a/content/about/small-and-fast.html +++ b/content/about/small-and-fast.html @@ -31,42 +31,165 @@

Benchmarks

- init benchmarks +
+
Commit A
+
+ + git +
+
+ + svn +
+
- init benchmarks +
+
Commit B
+
+ + git +
+
+ + svn +
+
- init benchmarks +
+
Diff Curr
+
+ + git +
+
+ + svn +
+
- init benchmarks +
+
Diff Rec
+
+ + git +
+
+ + svn +
+
- init benchmarks +
+
Diff Tags
+
+ + git +
+
+ + svn +
+
- init benchmarks +
+
Clone
+
+ + git* +
+
+ + git +
+
+ +
+
- init benchmarks +
+
Log (50)
+
+ + git +
+
+ + svn +
+
- init benchmarks +
+
Log (All)
+
+ + git +
+
+ + svn +
+
- init benchmarks +
+
Log (File)
+
+ + git +
+
+ + svn +
+
- init benchmarks +
+
Update
+
+ + git +
+
+ + svn +
+
- init benchmarks +
+
Blame
+
+ + git +
+
+ + svn +
+
- init benchmarks +
+
Size
+
+ + git +
+
+ + svn +
+