Merge pull request #1894 from To1ne/toon-css-graphs

small-and-fast: show bar graphs with <progress> and CSS
git · Oct 7, 2024 · 6740ecc · 6740ecc
2 parents b4a9f8b + 235bc71
commit 6740ecc
Show file tree

Hide file tree

Showing 3 changed files with 199 additions and 14 deletions.
diff --git a/assets/sass/application.scss b/assets/sass/application.scss
@@ -49,3 +49,64 @@ pre {
 .d-flex{
   display: flex;
 }
+
+.bar-chart {
+  display: inline-grid;
+
+  /* Got the idea of using <dl>, <dt>, and <dd> 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 {
+    /* Chrome (and derivatives) are stubborn to attach the bar to 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;
+  }
+}
diff --git a/assets/sass/book.scss b/assets/sass/book.scss
@@ -106,7 +106,8 @@ ol.book-toc {
   padding: 5px;
 }
 
-.book table.ref th:nth-child(1), td:nth-child(1) {
+.book table.ref th:nth-child(1),
+.book td:nth-child(1) {
   width: 25%;
   padding: 5px;
 }
@@ -170,4 +171,4 @@ ol.book-toc {
   .book-wrapper {
     margin-right: 0;
   }
-}
+}
diff --git a/content/about/small-and-fast.html b/content/about/small-and-fast.html
@@ -31,42 +31,165 @@ <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">
+            <dl class="bar-chart">
+              <dt>Commit A</dt>
+              <dd>
+                <progress value="0.649" max="3" class="git"></progress>
+                <span>git</span>
+              </dd>
+              <dd>
+                <progress value="2.6" max="3" class="svn"></progress>
+                <span>svn</span>
+              </dd>
+            </dl>
           </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">
+            <dl class="bar-chart">
+              <dt>Commit B</dt>
+              <dd>
+                <progress value="1.53" max="25" class="git"></progress>
+                <span>git</span>
+              </dd>
+              <dd>
+                <progress value="24.7" max="25" class="svn"></progress>
+                <span>svn</span>
+              </dd>
+            </dl>
           </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">
+            <dl class="bar-chart">
+              <dt>Diff Curr</dt>
+              <dd>
+                <progress value="0.257" max="1.2" class="git"></progress>
+                <span>git</span>
+              </dd>
+              <dd>
+                <progress value="1.09" max="1.2" class="svn"></progress>
+                <span>svn</span>
+              </dd>
+            </dl>
           </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">
+            <dl class="bar-chart">
+              <dt>Diff Rec</dt>
+              <dd>
+                <progress value="0.248" max="4" class="git"></progress>
+                <span>git</span>
+              </dd>
+              <dd>
+                <progress value="3.99" max="4" class="svn"></progress>
+                <span>svn</span>
+              </dd>
+            </dl>
           </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">
+            <dl class="bar-chart">
+              <dt>Diff Tags</dt>
+              <dd>
+                <progress value="1.17" max="85" class="git"></progress>
+                <span>git</span>
+              </dd>
+              <dd>
+                <progress value="83.57" max="85" class="svn"></progress>
+                <span>svn</span>
+              </dd>
+            </dl>
           </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">
+            <dl class="bar-chart">
+              <dt>Clone</dt>
+              <dd>
+                <progress value="21.0" max="110" class="git"></progress>
+                <span>git*</span>
+              </dd>
+              <dd>
+                <progress value="107.5" max="110" class="git"></progress>
+                <span>git</span>
+              </dd>
+              <dd>
+                <progress value="14.0" max="110" class="svn"></progress>
+              </dd>
+            </dl>
           </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">
+            <dl class="bar-chart">
+              <dt>Log (50)</dt>
+              <dd>
+                <progress value="0.012" max="0.4" class="git"></progress>
+                <span>git</span>
+              </dd>
+              <dd>
+                <progress value="0.381" max="0.4" class="svn"></progress>
+                <span>svn</span>
+              </dd>
+            </dl>
           </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">
+            <dl class="bar-chart">
+              <dt>Log (All)</dt>
+              <dd>
+                <progress value="0.519" max="170" class="git"></progress>
+                <span>git</span>
+              </dd>
+              <dd>
+                <progress value="169.197" max="170" class="svn"></progress>
+                <span>svn</span>
+              </dd>
+            </dl>
           </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">
+            <dl class="bar-chart">
+              <dt>Log (File)</dt>
+              <dd>
+                <progress value="0.601" max="83" class="git"></progress>
+                <span>git</span>
+              </dd>
+              <dd>
+                <progress value="82.843" max="83" class="svn"></progress>
+                <span>svn</span>
+              </dd>
+            </dl>
           </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">
+            <dl class="bar-chart">
+              <dt>Update</dt>
+              <dd>
+                <progress value="0.896" max="2.9" class="git"></progress>
+                <span>git</span>
+              </dd>
+              <dd>
+                <progress value="2.816" max="2.9" class="svn"></progress>
+                <span>svn</span>
+              </dd>
+            </dl>
           </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">
+            <dl class="bar-chart">
+              <dt>Blame</dt>
+              <dd>
+                <progress value="1.91" max="3.1" class="git"></progress>
+                <span>git</span>
+              </dd>
+              <dd>
+                <progress value="3.04" max="3.1" class="svn"></progress>
+                <span>svn</span>
+              </dd>
+            </dl>
           </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">
+            <dl class="bar-chart">
+              <dt>Size</dt>
+              <dd>
+                <progress value="181" max="182" class="git"></progress>
+                <span>git</span>
+              </dd>
+              <dd>
+                <progress value="132" max="182" class="svn"></progress>
+                <span>svn</span>
+              </dd>
+            </dl>
           </td>
         </tr>
       </tbody>