Commit 64cdbaa5 authored by sajolida's avatar sajolida
Browse files

Merge branch 'web/16923-svg-income-chart'

parents 4bdf7d75 9f6985fb
......@@ -149,7 +149,7 @@ span.title {
/* Other ways */
#other-ways-1, #other-ways-2, #other-ways-3, #meet-partner {
#other-ways-1, #other-ways-2, #other-ways-3, #income {
margin-top: 2em;
background: #f5f5f5;
box-sizing: border-box;
......@@ -188,56 +188,3 @@ span.title {
#currency, #dollars-without-js h2, #euros-without-js {
display: none;
}
/* Expenses chart */
figure {
display: flex;
flex-direction: column;
}
@media (min-width: 640px) {
figure {
flex-direction: row;
}
}
.figure-content,
.figure-key {
flex: 1;
padding-left: 15px;
padding-right: 15px;
align-self: center;
}
.figure-content svg {
height: auto;
}
.figure-key-list {
margin: 0;
padding: 0;
list-style: none;
}
.figure-key-list li {
margin: 0 0 8px;
padding: 0;
font-size: 14px;
font-weight: bold;
}
.figure-key-list li div {
display: inline-block;
}
.key-dot {
display: inline-block;
vertical-align: top;
margin-top: 2px;
width: 18px;
height: 18px;
}
.key-label {
margin: 0 0.5em;
}
#key-releases .key-dot { background-color: #5da5da; }
#key-admin .key-dot { background-color: #faa43a; }
#key-features .key-dot { background-color: #60bd68; }
#key-infrastructure .key-dot { background-color: #f17cb0; }
#key-help .key-dot { background-color: #b2912f; }
#key-meetings .key-dot { background-color: #b276b2; }
#key-ux .key-dot { background-color: #decf3f; }
......@@ -494,9 +494,11 @@ permitted by law.</strong></p>
<h3>How we spend our money</h3>
<figure>
<!-- Spreadsheet in fundraising.git:tools:expenses-chart.ods -->
<figure class="chart">
<!-- Adapted from https://medium.com/@heyoka/scratch-made-svg-donut-pie-charts-in-html5-2c587e935d72 -->
<div class="figure-content">
<div class="chart-content">
<svg width="75%" height="75%" viewBox="0 0 64 64">
<!-- stroke-dashoffset = 100 - sum(lengths of preceding segments) + offset of 1st segment -->
<circle cx="32" cy="32" r="15.91549430918954" fill="transparent" stroke="#5da5da" stroke-width="32" stroke-dasharray="22 78" stroke-dashoffset="25" aria-labelledby=""></circle>
......@@ -509,15 +511,15 @@ permitted by law.</strong></p>
</svg>
</div>
<figcaption class="figure-key">
<ul class="figure-key-list">
<li id="key-releases"><div class="key-dot"></div><div class="key-label">Releases & core code maintenance</div><div class="key-percent">(22%)</div></li>
<li id="key-admin"><div class="key-dot"></div><div class="key-label">Administration & management</div><div class="key-percent">(22%)</div></li>
<li id="key-features"><div class="key-dot"></div><div class="key-label">New features</div><div class="key-percent">(21%)</div></li>
<li id="key-infrastructure"><div class="key-dot"></div><div class="key-label">Infrastructure</div><div class="key-percent">(10%)</div></li>
<li id="key-help"><div class="key-dot"></div><div class="key-label">Help desk</div><div class="key-percent">(10%)</div></li>
<li id="key-meetings"><div class="key-dot"></div><div class="key-label">Meetings</div><div class="key-percent">(10%)</div></li>
<li id="key-ux"><div class="key-dot"></div><div class="key-label">User experience & documentation</div><div class="key-percent">(5%)</div></li>
<figcaption class="chart-key">
<ul class="chart-key-list">
<li class="blue"><div class="key-label">Release management & code maintenance</div><div class="key-percent">(22%)</div></li>
<li class="orange"><div class="key-label">Administration, fundraising & management</div><div class="key-percent">(22%)</div></li>
<li class="green"><div class="key-label">New features</div><div class="key-percent">(21%)</div></li>
<li class="pink"><div class="key-label">Infrastructure & sysadmin</div><div class="key-percent">(10%)</div></li>
<li class="brown"><div class="key-label">Help desk</div><div class="key-percent">(10%)</div></li>
<li class="purple"><div class="key-label">Meetings</div><div class="key-percent">(10%)</div></li>
<li class="yellow"><div class="key-label">User experience & documentation</div><div class="key-percent">(5%)</div></li>
</ul>
</figcaption>
</figure>
......@@ -528,6 +530,39 @@ permitted by law.</strong></p>
</div> <!-- .row -->
<div id="income" class="row">
<div class="col-md-12">
<h3>Where our money comes from</h3>
<!-- Spreadsheet in fundraising.git:tools:income-chart.ods -->
<figure class="chart">
<!-- Adapted from https://medium.com/@heyoka/scratch-made-svg-donut-pie-charts-in-html5-2c587e935d72 -->
<div class="chart-content">
<svg width="75%" height="75%" viewBox="0 0 64 64">
<!-- stroke-dashoffset = 100 - sum(lengths of preceding segments) + offset of 1st segment -->
<circle cx="32" cy="32" r="15.91549430918954" fill="transparent" stroke="#5da5da" stroke-width="32" stroke-dasharray="36 64" stroke-dashoffset="25" aria-labelledby=""></circle>
<circle cx="32" cy="32" r="15.91549430918954" fill="transparent" stroke="#faa43a" stroke-width="32" stroke-dasharray="30 70" stroke-dashoffset="89" aria-labelledby=""></circle>
<circle cx="32" cy="32" r="15.91549430918954" fill="transparent" stroke="#60bd68" stroke-width="32" stroke-dasharray="25 75" stroke-dashoffset="59" aria-labelledby=""></circle>
<circle cx="32" cy="32" r="15.91549430918954" fill="transparent" stroke="#f17cb0" stroke-width="32" stroke-dasharray="9 91" stroke-dashoffset="34" aria-labelledby=""></circle>
</svg>
</div>
<figcaption class="chart-key">
<ul class="chart-key-list">
<li class="blue"><div class="key-label">Passionate people like you</div><div class="key-percent">(36%)</div></li>
<li class="orange"><div class="key-label">Foundations & NGOs</div><div class="key-percent">(30%)</div><br/>like Mozilla or the Handshake Foundation</li>
<li class="green"><div class="key-label">Entities related to the US government</div><div class="key-percent">(25%)</div><br/>like the Open Technology Fund or the ISC Project</li>
<li class="pink"><div class="key-label">Private companies</div><div class="key-percent">(9%)</div><br/>like DuckDuckGo or Lush</li>
</ul>
</figcaption>
</figure>
</div>
</div> <!-- .row -->
<div id="meet-partner" class="row">
<div class="col-md-12">
......
......@@ -32,6 +32,8 @@ Table of Content:
- Trail
- Special Cases
- Partners
- Chart
*/
/* Load RTL stylesheet */
......@@ -1399,3 +1401,62 @@ div#highlight p {
margin-left: 120px;
}
}
/* Chart */
figure.chart {
display: flex !important;
flex-direction: column;
}
@media (min-width: 640px) {
figure.chart {
flex-direction: row;
}
}
.chart-content,
.chart-key {
flex: 1;
padding-left: 15px;
padding-right: 15px;
align-self: center;
}
.chart-content svg {
height: auto;
}
.chart-key-list {
margin: 0;
padding: 0;
list-style: none;
}
.chart-key-list li {
margin: 0 0 8px;
padding: 0;
font-size: 14px;
}
.chart-key-list li div {
display: inline-block;
}
.key-label:before {
content: " ";
display: inline-block;
vertical-align: top;
margin-top: 2px;
width: 18px;
height: 18px;
position: relative;
margin-left: -18px;
left: -12px;
}
.key-label {
margin-right: 8px;
}
.key-label, .key-percent {
font-weight: bold;
}
.blue .key-label:before { background-color: #5da5da; }
.orange .key-label:before { background-color: #faa43a; }
.green .key-label:before { background-color: #60bd68; }
.pink .key-label:before { background-color: #f17cb0; }
.brown .key-label:before { background-color: #b2912f; }
.purple .key-label:before { background-color: #b276b2; }
.yellow .key-label:before { background-color: #decf3f; }
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment