Skip to content

Commit 883a657

Browse files
To1neTo1ne
committed
small-and-fast: show bar graphs with <progress> and CSS
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
1 parent 99d1c9c commit 883a657

File tree

2 files changed

+205
-12
lines changed

2 files changed

+205
-12
lines changed

‎assets/sass/application.scss‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,3 +49,73 @@ pre {
4949
.d-flex{
5050
display: flex;
5151
}
52+
53+
.bar-chart {
54+
display: inline-grid;
55+
56+
dt {
57+
grid-column: 1 / 4;
58+
text-align: center;
59+
}
60+
61+
dd {
62+
padding: 5px;
63+
margin: 0;
64+
text-align: center;
65+
display: flex;
66+
flex-direction: column;
67+
}
68+
69+
dd ~ dd {
70+
border-left: 1px solid #ccc;
71+
}
72+
73+
progress {
74+
writing-mode: vertical-lr;
75+
appearance: none;
76+
77+
width: 2em;
78+
height: 5em;
79+
background: none;
80+
border: none;
81+
position: relative;
82+
}
83+
84+
progress:hover:after {
85+
writing-mode: initial;
86+
content: attr(value);
87+
display: block;
88+
border: 1px solid black;
89+
background: #eee;
90+
padding: .25em;
91+
position: absolute;
92+
}
93+
94+
progress::-webkit-progress-bar {
95+
background: none;
96+
}
97+
98+
progress::-webkit-progress-value {
99+
/* For some reason Chrome and friends show the value at the top */
100+
bottom: 0;
101+
position: absolute;
102+
}
103+
104+
progress.git::-moz-progress-bar {
105+
background-color: #E09FA0;
106+
}
107+
progress.git::-webkit-progress-value {
108+
background-color: #E09FA0;
109+
}
110+
progress.svn::-moz-progress-bar {
111+
background-color: #E05F49;
112+
}
113+
progress.svn::-webkit-progress-value {
114+
background-color: #E05F49;
115+
}
116+
117+
progress.git::-webkit-progress-value {
118+
background-color: #E09FA0;
119+
}
120+
121+
}

‎content/about/small-and-fast.html‎

Lines changed: 135 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -31,42 +31,165 @@ <h3>Benchmarks</h3>
3131
<tbody>
3232
<tr>
3333
<td>
34-
<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">
34+
<dl class="bar-chart">
35+
<dt>Commit A</dt>
36+
<dd>
37+
<progress value="0.649" max="3" class="git"></progress>
38+
<span>git</span>
39+
</dd>
40+
<dd>
41+
<progress value="2.6" max="3" class="svn"></progress>
42+
<span>svn</span>
43+
</dd>
44+
</dl>
3545
</td>
3646
<td>
37-
<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">
47+
<dl class="bar-chart">
48+
<dt>Commit B</dt>
49+
<dd>
50+
<progress value="1.53" max="25" class="git"></progress>
51+
<span>git</span>
52+
</dd>
53+
<dd>
54+
<progress value="24.7" max="25" class="svn"></progress>
55+
<span>svn</span>
56+
</dd>
57+
</dl>
3858
</td>
3959
<td>
40-
<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">
60+
<dl class="bar-chart">
61+
<dt>Diff Curr</dt>
62+
<dd>
63+
<progress value="0.257" max="1.2" class="git"></progress>
64+
<span>git</span>
65+
</dd>
66+
<dd>
67+
<progress value="1.09" max="1.2" class="svn"></progress>
68+
<span>svn</span>
69+
</dd>
70+
</dl>
4171
</td>
4272
<td>
43-
<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">
73+
<dl class="bar-chart">
74+
<dt>Diff Rec</dt>
75+
<dd>
76+
<progress value="0.248" max="4" class="git"></progress>
77+
<span>git</span>
78+
</dd>
79+
<dd>
80+
<progress value="3.99" max="4" class="svn"></progress>
81+
<span>svn</span>
82+
</dd>
83+
</dl>
4484
</td>
4585
<td>
46-
<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">
86+
<dl class="bar-chart">
87+
<dt>Diff Tags</dt>
88+
<dd>
89+
<progress value="1.17" max="85" class="git"></progress>
90+
<span>git</span>
91+
</dd>
92+
<dd>
93+
<progress value="83.57" max="85" class="svn"></progress>
94+
<span>svn</span>
95+
</dd>
96+
</dl>
4797
</td>
4898
<td>
49-
<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">
99+
<dl class="bar-chart">
100+
<dt>Clone</dt>
101+
<dd>
102+
<progress value="21.0" max="110" class="git"></progress>
103+
<span>git*</span>
104+
</dd>
105+
<dd>
106+
<progress value="107.5" max="110" class="git"></progress>
107+
<span>git</span>
108+
</dd>
109+
<dd>
110+
<progress value="14.0" max="110" class="svn"></progress>
111+
</dd>
112+
</dl>
50113
</td>
51114
</tr>
52115
<tr>
53116
<td>
54-
<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">
117+
<dl class="bar-chart">
118+
<dt>Log (50)</dt>
119+
<dd>
120+
<progress value="0.012" max="0.4" class="git"></progress>
121+
<span>git</span>
122+
</dd>
123+
<dd>
124+
<progress value="0.381" max="0.4" class="svn"></progress>
125+
<span>svn</span>
126+
</dd>
127+
</dl>
55128
</td>
56129
<td>
57-
<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">
130+
<dl class="bar-chart">
131+
<dt>Log (All)</dt>
132+
<dd>
133+
<progress value="0.519" max="170" class="git"></progress>
134+
<span>git</span>
135+
</dd>
136+
<dd>
137+
<progress value="169.197" max="170" class="svn"></progress>
138+
<span>svn</span>
139+
</dd>
140+
</dl>
58141
</td>
59142
<td>
60-
<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">
143+
<dl class="bar-chart">
144+
<dt>Log (File)</dt>
145+
<dd>
146+
<progress value="0.601" max="83" class="git"></progress>
147+
<span>git</span>
148+
</dd>
149+
<dd>
150+
<progress value="82.843" max="83" class="svn"></progress>
151+
<span>svn</span>
152+
</dd>
153+
</dl>
61154
</td>
62155
<td>
63-
<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">
156+
<dl class="bar-chart">
157+
<dt>Update</dt>
158+
<dd>
159+
<progress value="0.896" max="2.9" class="git"></progress>
160+
<span>git</span>
161+
</dd>
162+
<dd>
163+
<progress value="2.816" max="2.9" class="svn"></progress>
164+
<span>svn</span>
165+
</dd>
166+
</dl>
64167
</td>
65168
<td>
66-
<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">
169+
<dl class="bar-chart">
170+
<dt>Blame</dt>
171+
<dd>
172+
<progress value="1.91" max="3.1" class="git"></progress>
173+
<span>git</span>
174+
</dd>
175+
<dd>
176+
<progress value="3.04" max="3.1" class="svn"></progress>
177+
<span>svn</span>
178+
</dd>
179+
</dl>
67180
</td>
68181
<td>
69-
<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">
182+
<dl class="bar-chart">
183+
<dt>Size</dt>
184+
<dd>
185+
<progress value="181" max="182" class="git"></progress>
186+
<span>git</span>
187+
</dd>
188+
<dd>
189+
<progress value="132" max="182" class="svn"></progress>
190+
<span>svn</span>
191+
</dd>
192+
</dl>
70193
</td>
71194
</tr>
72195
</tbody>

0 commit comments

Comments
 (0)