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 1, 2024
1 parent 99d1c9c commit 883a657
Show file tree
Hide file tree
Showing 2 changed files with 205 additions and 12 deletions.
70 changes: 70 additions & 0 deletions assets/sass/application.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,3 +49,73 @@ pre {
.d-flex{
display: flex;
}

.bar-chart {
display: inline-grid;

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 {
writing-mode: vertical-lr;
appearance: none;

width: 2em;
height: 5em;
background: none;
border: none;
position: relative;
}

progress:hover:after {
writing-mode: initial;
content: attr(value);
display: block;
border: 1px solid black;
background: #eee;
padding: .25em;
position: absolute;
}

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 883a657

Please sign in to comment.