Skip to content
This repository has been archived by the owner on Feb 8, 2018. It is now read-only.

Commit

Permalink
Rough in the retention chart
Browse files Browse the repository at this point in the history 
Basically what we have in the spreadsheet.
  • Loading branch information
@chadwhitacre
chadwhitacre committed Oct 21, 2014
1 parent d0a17a3 commit 7d8c85d
Show file tree
Hide file tree
Showing 3 changed files with 126 additions and 61 deletions.
35 changes: 35 additions & 0 deletions js/gratipay/charts.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,4 +106,39 @@ Gratipay.charts.make = function(series) {
$('.week').mouseout(function() {
$(this).removeClass('hover');
});

};


Gratipay.charts.retention = {};


Gratipay.charts.retention.make = function(series) {

function get_color(p) {
return 'hsl(149,50%,' + (100 - (p*60)).toFixed() + '%)';
}

var ncohorts = series.length;

var table = $(document.createElement('table'));
for (var i=0; i < ncohorts; i++) {
var cohort = series[i]
, nweeks = cohort.length
, row = $(document.createElement('tr')).addClass('cohort')
;
for (var j=0; j < nweeks; j++) {
var week = cohort[j]
, cell = $(document.createElement('td')).addClass('week')
, p = parseFloat(week[0], 10)
;
cell.css('background', get_color(p));
row.append(cell);
}
while (j++ < nweeks)
row.append($(document.createElement('td')).addClass('empty'));

table.append(row);
}
$('#chart_retention').append(table);
};
132 changes: 77 additions & 55 deletions scss/lib/_chart.scss
View file
Original file line number Diff line number Diff line change
@@ -1,71 +1,93 @@
.chart-wrapper {

$small-mono: normal 7pt/7pt "Lucida Mono", Monaco, monospace;

h2 {
padding-top: 12pt;
}
.chart {
height: 100px;
}
.week {
height: 100%;
float: left;
position: relative;
cursor: pointer;
}
.shaded {
position: absolute;
background: #396;
bottom: 0;
width: 100%;
}
.week span, .x-axis {
font: normal 7pt/7pt "Lucida Mono", Monaco, monospace;
}
.week span.x-tick {
position: absolute;
bottom: -12pt;
right: 0;
padding: 5pt 0.5pt 0 0;
border: 1pt solid #630;
border-style: none solid none none;
display: none;
color: #630;
background: white;
}
.week span.y-label { // This is the flag.
display: none;
position: absolute;
top: -17pt;
right: 0;
z-index: 1; // Wants to be over the bars.
text-align: center;
background: white;
color: #630;
border: 2pt solid #630;
border-radius: 3pt 0 0 3pt;
padding: 2pt 3pt;
}
.week.max span.y-label {
display: block;
}
.week.flagged span.y-label,
.week.flagged span.x-tick,
.week.hover span.y-label,
.week.hover span.x-tick {
display: block;
}
.week.hover span.y-label,
.week.hover span.x-tick {
z-index: 2
}
.x-axis {
text-align: center;
padding-top: 14pt;
font: $small-mono;
}
.note {
font-style: italic;
font-size: 8pt;
line-height: 10pt;
padding-bottom: 12pt;
}

&.bar {

.chart {
height: 100px;
}
.week {
height: 100%;
float: left;
position: relative;
cursor: pointer;
}
.shaded {
position: absolute;
background: #396;
bottom: 0;
width: 100%;
}
.week span {
font: $small-mono;
}
.week span.x-tick {
position: absolute;
bottom: -12pt;
right: 0;
padding: 5pt 0.5pt 0 0;
border: 1pt solid #630;
border-style: none solid none none;
display: none;
color: #630;
background: white;
}
.week span.y-label { // This is the flag.
display: none;
position: absolute;
top: -17pt;
right: 0;
z-index: 1; // Wants to be over the bars.
text-align: center;
background: white;
color: #630;
border: 2pt solid #630;
border-radius: 3pt 0 0 3pt;
padding: 2pt 3pt;
}
.week.max span.y-label {
display: block;
}
.week.flagged span.y-label,
.week.flagged span.x-tick,
.week.hover span.y-label,
.week.hover span.x-tick {
display: block;
}
.week.hover span.y-label,
.week.hover span.x-tick {
z-index: 2
}
}

&.retention {
table {
width: 100%;
margin: 0;
padding: 0;
border-spacing: 0;
border-collapse: collapse;
}
td {
height: 4px;
margin: 0;
padding: 0;
}
}
}
20 changes: 14 additions & 6 deletions www/about/charts.spt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ title = "Charts"
<script>
$(document).ready(function() {
jQuery.get('/about/charts.json', Gratipay.charts.make);
jQuery.get('/about/retention.json', Gratipay.charts.retention.make);
});
</script>

Expand All @@ -15,48 +16,55 @@ $(document).ready(function() {

{% block page %}
<div class="col1">
<div class="chart-wrapper">
<div class="chart-wrapper bar">
<a name="users"></a>
<h2>Total Users</h2>
<p class="note">Anyone who's ever created an account on Gratipay</p>
<div class="chart" id="chart_total_users"></div>
<div class="x-axis">weeks</div>
</div>

<div class="chart-wrapper">
<div class="chart-wrapper bar">
<a name="active"></a>
<h2>Active Users</h2>
<p class="note">Users that gave and/or received money within Gratipay (per week)</p>
<div class="chart" id="chart_active_users"></div>
<div class="x-axis">weeks</div>
</div>

<div class="chart-wrapper retention">
<a name="retention"></a>
<h2>Retention</h2>
<p class="note"></p>
<div class="chart" id="chart_retention"></div>
</div>
</div>
<div class="col1">
<div class="chart-wrapper">
<div class="chart-wrapper bar">
<a name="cumulative-gifts"></a>
<h2>Total Gifts ($)</h2>
<p class="note">Money transferred within Gratipay (cumulative)</p>
<div class="chart" id="chart_total_gifts"></div>
<div class="x-axis">weeks</div>
</div>

<div class="chart-wrapper">
<div class="chart-wrapper bar">
<a name="gifts"></a>
<h2>Weekly Gifts ($)</h2>
<p class="note">Money transferred within Gratipay (per week)</p>
<div class="chart" id="chart_weekly_gifts"></div>
<div class="x-axis">weeks</div>
</div>

<div class="chart-wrapper newline">
<div class="chart-wrapper bar newline">
<a name="charges"></a>
<h2>Charges ($)</h2>
<p class="note">Money moved into Gratipay via credit card</p>
<div class="chart" id="chart_charges"></div>
<div class="x-axis">weeks</div>
</div>

<div class="chart-wrapper">
<div class="chart-wrapper bar">
<a name="withdrawals"></a>
<h2>Withdrawals ($)</h2>

Expand Down

0 comments on commit 7d8c85d

Please sign in to comment.