Skip to content

Commit

Permalink
small-and-fast: show bar graphs with <progress> and CSS
Browse files Browse the repository at this point in the history 
Instead of relying on Google Graph or any other service to draw the
graphs, draw them with pure HTML <progress> and some CSS.

# Conflicts:
#	content/about/small-and-fast.html
  • Loading branch information
@To1ne
To1ne committed Oct 6, 2024
1 parent 99d1c9c commit 3d89dff
Show file tree
Hide file tree
Showing 2 changed files with 201 additions and 12 deletions.
66 changes: 66 additions & 0 deletions assets/sass/application.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,3 +49,69 @@ 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 {
/* 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;
}

}
147 changes: 135 additions & 12 deletions content/about/small-and-fast.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down

0 comments on commit 3d89dff

Please sign in to comment.