<!DOCTYPE html>
<html>
<head>
<title>Cohortly</title>
<%= csrf_meta_tag %>
<%= javascript_include_tag 'https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' %>
<%= javascript_include_tag 'http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.1.7/underscore-min.js' %>
<%= javascript_include_tag 'http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.5.3/backbone-min.js' %>
<script type="text/javascript">
var Cohortly = {};
Cohortly.Report = Backbone.Model.extend({
});
Cohortly.ReportQuery = Backbone.Model.extend({});
Cohortly.ReportView = Backbone.View.extend({
initialize: function() {
_.bindAll(this, 'submitQuery', 'render', 'render_rows', 'render_row', 'render_cells');
this.model = new Cohortly.Report();
this.model.bind('change', this.render)
},
events: {
'click input[type=submit]': 'submitQuery'
},
submitQuery: function(e) {
$.get( '/cohortly/reports.js?' + $(this.el).serialize(), _(function(data) {
this.model.set(data);
}).bind(this), 'json')
e.preventDefault();
},
render: function() {
$('.result_table', this.el).html(
['<table class="one-column-emphasis">',
'<colgroup><col class="oce-first"></colgroup>',
this.render_header(),
this.render_rows(),
'</table>'
].join(''));
},
render_header: function() {
return [
'<thead><tr>',
'<th>Month</th>',
'<th>N</th>',
_.range(1,13).map(function(x){ return '<th>M' + x + '</th>'; }).join(''),
'</tr></thead>'
].join('');
},
render_rows: function() {
return _(this.model.get('data')).map(this.render_row).join('');
},
render_row: function(row) {
var row_key = row['_id'];
var base_n = this.model.get('base_n')[row_key];
return [
'<tr>',
'<td>' + row['_id']+ '</td>',
'<td>' + base_n + '</td>',
this.render_cells(row, base_n),
'</tr>'
].join('');
},
render_cells: function(row, base_n) {
return _(_(row.value).keys()).sortBy(function(x){return x}).slice(0,12).map(function(key) {
var num_users = _(row.value[key]).keys().length;
var percent = (base_n > 0) ? (num_users / base_n) : 0;
return [
'<td style="text-align:right;">',
Math.floor(percent * 100),
'</td>'
].join('');
}).join('');
}
});
$(function() {
Cohortly.report_view = new Cohortly.ReportView({ el: $('form') });
});
</script>
<style>
body {
font-family: "Lucida Sans Unicode","Lucida Grande",Sans-Serif;
font-size: 12px;
margin: 0;
color: #666699;
}
form {
}
.field, .tags {
margin-bottom: 1em;
}
.field label {
display:block;
}
.header {
background-color: #E8EDFF;
height: 50px;
}
.header h1 {
padding-top: 12px;
margin: 0;
color: #669;
}
.container {
position: relative;
margin:0 auto;
width: 960px;
}
.hor-zebra {
border-collapse: collapse;
font-family: "Lucida Sans Unicode","Lucida Grande",Sans-Serif;
font-size: 12px;
text-align: left;
width: 960px;
}
.hor-zebra th {
color: #003399;
font-size: 14px;
font-weight: normal;
padding: 10px 8px;
}
.hor-zebra td {
color: #666699;
padding: 8px;
}
.hor-zebra .odd {
background: none repeat scroll 0 0 #E8EDFF;
}
.one-column-emphasis {
border-collapse: collapse;
font-family: "Lucida Sans Unicode","Lucida Grande",Sans-Serif;
font-size: 12px;
text-align: left;
position: relative;
left: -4px;
margin-top: 20px;
}
.one-column-emphasis th {
color: #003399;
font-size: 14px;
font-weight: normal;
padding: 12px 15px;
}
.one-column-emphasis td {
border-top: 1px solid #E8EDFF;
color: #666699;
padding: 10px 15px;
}
.oce-first {
background: none repeat scroll 0 0 #D0DAFD;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.one-column-emphasis tr:hover td {
background: none repeat scroll 0 0 #EFF2FF;
color: #333399;
}
.navigation {
position: absolute;
bottom: -3px;
right: 0;
}
.navigation ul {
list-style: none;
margin: 0;
padding: 0;
}
.navigation ul li {
display: inline;
margin-right: .75em;
background-color: #FFF;
color: #669;
border-radius: 4px;
}
.navigation ul li.last {
margin-right: 0;
}
.navigation li {
padding: 5px 1em;
}
.navigation li a {
color: #669;
text-decoration: none;
}
.paginate {
margin-top: 1em;
margin-bottom: 1em;
text-align: right;
}
.paginate a, span {
text-decoration: none;
padding-left: 5px;
color: #666699;
}
.paginate span {
color: red;
}
</style>
</head>
<body>
<div class="header">
<div class="container">
<h1>Cohortly</h1>
<div class="navigation">
<ul>
<li><span><%= link_to "Metrics", cohortly_metrics_path %></span></li>
<li><%= link_to "Cohort Reports", cohortly_reports_path %></span></li>
</ul>
</div>
</div>
</div>
<div class="content">
<div class="container">
<%= yield %>
</div>
</div>
<div class="footer">
<div class="container">
</div>
</div>
</body>
</html>