Skip to content
This repository was archived by the owner on Jan 31, 2018. It is now read-only.

Commit 023bda6

Browse files
willkgwillkg
committed
[bug 999089] Firefox desktop product dashboard
* add infrastructure for product dashboards * add prototype generic product dashboard for products that don't have their own dashboard * add prototype Firefox desktop dashboard This is all prototype-quality code! The purpose here is to get a feel for how we're visualizing the information and not for good programming or maintainability--that'll come later. There are also no tests since we're still prototyping things and getting a feel for what we want to do.
1 parent 61f1a98 commit 023bda6

File tree

8 files changed

+737
-1
lines changed

8 files changed

+737
-1
lines changed

‎fjord/analytics/static/js/product_dashboard.js‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
$(function() {
2+
// Datepickers.
3+
$('input[type=date]').datepicker({
4+
dateFormat: 'yy-mm-dd'
5+
});
6+
7+
// Set up the when selector.
8+
var $date_start = $('#whensubmit').siblings('input[name=date_start]');
9+
var $date_end = $('#whensubmit').siblings('input[name=date_end]');
10+
$('#whensubmit').bind('click', function() {
11+
setQuerystring(getQuerystring(), {
12+
date_start: $date_start.val(),
13+
date_end: $date_end.val()
14+
});
15+
});
16+
17+
function weekends(axes) {
18+
var markings = [];
19+
20+
// Start with the minimum xaxis tick
21+
var d = new Date(axes.xaxis.min);
22+
23+
// Move to the first weekend day
24+
d.setUTCDate(d.getUTCDate() - ((d.getUTCDay() + 1) % 7));
25+
d.setUTCSeconds(0);
26+
d.setUTCMinutes(0);
27+
d.setUTCHours(0);
28+
29+
var stamp = d.getTime();
30+
var day = 24 * 60 * 60 * 1000;
31+
32+
// Iterate to the maximum xaxis figuring out each weekend
33+
// block and adding a thing to the xaxis markings.
34+
while (stamp < axes.xaxis.max) {
35+
markings.push({
36+
xaxis: {
37+
from: stamp,
38+
to: stamp + (2 * day)
39+
}
40+
});
41+
stamp += 7 * day;
42+
}
43+
44+
return markings;
45+
}
46+
47+
var $histogram = $('.graph .histogram');
48+
var data = $histogram.data('histogram');
49+
var options = {
50+
series: {
51+
hover: true
52+
},
53+
grid: {
54+
hoverable: true,
55+
markings: weekends
56+
},
57+
xaxis: {
58+
mode: 'time',
59+
timeformat: ('%b %d')
60+
},
61+
yaxes: [
62+
{
63+
min: 0,
64+
position: 'left'
65+
},
66+
{
67+
max: 30,
68+
min: -30,
69+
position: 'right'
70+
}
71+
],
72+
legend: {
73+
container: $('.graph .legend'),
74+
noColumns: 3
75+
}
76+
};
77+
var plot = $.plot($histogram, data, options);
78+
79+
function showTooltip(x, y, contents) {
80+
$('<div id="tooltip">' + contents + '</div>').css( {
81+
position: 'absolute',
82+
display: 'none',
83+
top: y + 5,
84+
left: x + 12,
85+
border: '1px solid #bfb',
86+
padding: '4px',
87+
'background-color': '#efe',
88+
opacity: 0.80
89+
}).appendTo("body").fadeIn(200);
90+
}
91+
92+
var previousPoint = null;
93+
$histogram.bind("plothover", function(event, pos, item) {
94+
if (item) {
95+
if (previousPoint != item.dataIndex) {
96+
previousPoint = item.dataIndex;
97+
98+
$("#tooltip").remove();
99+
var x = item.datapoint[0].toFixed(0);
100+
var y = item.datapoint[1].toFixed(0);
101+
var xDate = new Date(Math.floor(x));
102+
var text = (xDate.getFullYear() + '-'
103+
+ (xDate.getMonth() + 1) + '-'
104+
+ (xDate.getDate() + 1));
105+
106+
showTooltip(item.pageX, item.pageY, text + ' = ' + y);
107+
}
108+
} else {
109+
$("#tooltip").remove();
110+
previousPoint = null;
111+
}
112+
});
113+
});

‎fjord/analytics/static/js/product_dashboard_firefox.js‎

Lines changed: 224 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,224 @@
1+
$(function() {
2+
var $vhistogram = $('.graph .versionhistogram');
3+
4+
// Datepickers.
5+
$('input[type=date]').datepicker({
6+
dateFormat: 'yy-mm-dd'
7+
});
8+
9+
// Set up the when selector.
10+
var $date_start = $('#whensubmit').siblings('input[name=date_start]');
11+
var $date_end = $('#whensubmit').siblings('input[name=date_end]');
12+
$('#whensubmit').bind('click', function() {
13+
setQuerystring(getQuerystring(), {
14+
date_start: $date_start.val(),
15+
date_end: $date_end.val()
16+
});
17+
});
18+
19+
function weekends(axes) {
20+
var markings = [];
21+
22+
// Start with the minimum xaxis tick
23+
var d = new Date(axes.xaxis.min);
24+
25+
// Move to the first weekend day
26+
d.setUTCDate(d.getUTCDate() - ((d.getUTCDay() + 1) % 7));
27+
d.setUTCSeconds(0);
28+
d.setUTCMinutes(0);
29+
d.setUTCHours(0);
30+
31+
var stamp = d.getTime();
32+
var day = 24 * 60 * 60 * 1000;
33+
34+
// Iterate to the maximum xaxis figuring out each weekend
35+
// block and adding a thing to the xaxis markings.
36+
while (stamp < axes.xaxis.max) {
37+
markings.push({
38+
xaxis: {
39+
from: stamp,
40+
to: stamp + (2 * day)
41+
}
42+
});
43+
stamp += 7 * day;
44+
}
45+
46+
return markings;
47+
}
48+
49+
function showTooltip(x, y, contents) {
50+
$('<div id="tooltip">' + contents + '</div>').css( {
51+
position: 'absolute',
52+
display: 'none',
53+
top: y + 5,
54+
left: x + 12,
55+
border: '1px solid #bbb',
56+
padding: '4px',
57+
'background-color': '#eeeeee',
58+
opacity: 0.80
59+
}).appendTo("body").fadeIn(200);
60+
}
61+
62+
function drawTotals() {
63+
var $histogram = $('.graph .histogram');
64+
var data = $histogram.data('histogram');
65+
var options = {
66+
series: {
67+
hover: true
68+
},
69+
grid: {
70+
hoverable: true,
71+
markings: weekends
72+
},
73+
xaxis: {
74+
mode: 'time',
75+
timeformat: ('%b %d')
76+
},
77+
yaxes: [
78+
{
79+
min: 0,
80+
position: 'left'
81+
},
82+
{
83+
max: 30,
84+
min: -30,
85+
position: 'right'
86+
}
87+
],
88+
legend: {
89+
container: $('#totalslegend'),
90+
noColumns: 3
91+
}
92+
};
93+
94+
var plot = $.plot($histogram, data, options);
95+
96+
var previousPoint = null;
97+
$histogram.bind("plothover", function(event, pos, item) {
98+
if (item) {
99+
if (previousPoint != item.dataIndex) {
100+
previousPoint = item.dataIndex;
101+
102+
$("#tooltip").remove();
103+
var x = item.datapoint[0].toFixed(0);
104+
var y = item.datapoint[1].toFixed(0);
105+
var xDate = new Date(Math.floor(x));
106+
var text = (xDate.getFullYear() + '-'
107+
+ (xDate.getMonth() + 1) + '-'
108+
+ (xDate.getDate() + 1));
109+
110+
showTooltip(item.pageX, item.pageY, text + ' = ' + y);
111+
}
112+
} else {
113+
$("#tooltip").remove();
114+
previousPoint = null;
115+
}
116+
});
117+
}
118+
119+
function drawVersions() {
120+
var $histogram = $('.graph .versionshistogram');
121+
var data = $histogram.data('histogram');
122+
var options = {
123+
series: {
124+
hover: true
125+
},
126+
grid: {
127+
hoverable: true,
128+
markings: weekends
129+
},
130+
xaxis: {
131+
mode: 'time',
132+
timeformat: ('%b %d')
133+
},
134+
yaxis: {
135+
min: 0,
136+
position: 'left'
137+
},
138+
legend: {
139+
sorted: true,
140+
container: $('#versionslegend'),
141+
noColumns: 4
142+
}
143+
};
144+
145+
var plot = $.plot($histogram, data, options);
146+
147+
var previousPoint = null;
148+
$histogram.bind("plothover", function(event, pos, item) {
149+
if (item) {
150+
if (previousPoint != item.dataIndex) {
151+
previousPoint = item.dataIndex;
152+
153+
$("#tooltip").remove();
154+
var x = item.datapoint[0].toFixed(0);
155+
var y = item.datapoint[1].toFixed(0);
156+
var xDate = new Date(Math.floor(x));
157+
var text = (xDate.getFullYear() + '-'
158+
+ (xDate.getMonth() + 1) + '-'
159+
+ (xDate.getDate() + 1));
160+
161+
showTooltip(item.pageX, item.pageY, text + ' = ' + y);
162+
}
163+
} else {
164+
$("#tooltip").remove();
165+
previousPoint = null;
166+
}
167+
});
168+
}
169+
170+
function drawPlatforms() {
171+
var $histogram = $('.graph .platformshistogram');
172+
var data = $histogram.data('histogram');
173+
var options = {
174+
series: {
175+
hover: true
176+
},
177+
grid: {
178+
hoverable: true,
179+
markings: weekends
180+
},
181+
xaxis: {
182+
mode: 'time',
183+
timeformat: ('%b %d')
184+
},
185+
yaxis: {
186+
min: 0,
187+
position: 'left'
188+
},
189+
legend: {
190+
sorted: true,
191+
container: $('#platformslegend'),
192+
noColumns: 4
193+
}
194+
};
195+
196+
var plot = $.plot($histogram, data, options);
197+
198+
var previousPoint = null;
199+
$histogram.bind("plothover", function(event, pos, item) {
200+
if (item) {
201+
if (previousPoint != item.dataIndex) {
202+
previousPoint = item.dataIndex;
203+
204+
$("#tooltip").remove();
205+
var x = item.datapoint[0].toFixed(0);
206+
var y = item.datapoint[1].toFixed(0);
207+
var xDate = new Date(Math.floor(x));
208+
var text = (xDate.getFullYear() + '-'
209+
+ (xDate.getMonth() + 1) + '-'
210+
+ (xDate.getDate() + 1));
211+
212+
showTooltip(item.pageX, item.pageY, text + ' = ' + y);
213+
}
214+
} else {
215+
$("#tooltip").remove();
216+
previousPoint = null;
217+
}
218+
});
219+
}
220+
221+
drawTotals();
222+
drawVersions();
223+
drawPlatforms();
224+
});

‎fjord/analytics/templates/analytics/product_dashboard.html‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
{% extends "analytics/dashboard_base.html" %}
2+
3+
{% block body_id %}dashboard{% endblock %}
4+
5+
{% block content %}
6+
<div class="col">
7+
<div class="block">
8+
<div class="expando">
9+
<label for="date_start">Start date</label>
10+
<input id="date_start" type="date" name="date_start" value="{{ start_date }}" placeholder="{{ _('Start') }}">
11+
<label for="date_end">End date</label>
12+
<input id="date_end" type="date" name="date_end" value="{{ end_date }}" placeholder="{{ _('End') }}">
13+
<a href="#" class="button" id="whensubmit">{{ _('Set') }}</a>
14+
</div>
15+
</div>
16+
</div>
17+
18+
<div class="col doublewide">
19+
<div class="info">
20+
<p>
21+
<b>Warning: Very alpha version!</b>
22+
</p>
23+
<p>
24+
{% trans product=product.display_name %}
25+
This is an alpha version of the {{ product }} product
26+
dashboard I threw together in a couple of days on a lark
27+
before Australis.
28+
{% endtrans %}
29+
</p>
30+
<p>
31+
{% trans survey_url="http://www.surveygizmo.com/s3/1629097/Firefox-Input-Dashboard" %}
32+
Want to help? <a href="{{ survey_url }}">Fill out this quick survey</a>
33+
about how you use Input.
34+
{% endtrans %}
35+
</p>
36+
</div>
37+
38+
<div class="block">
39+
<h1>{{ product.display_name }}</h1>
40+
41+
<h2>Totals</h2>
42+
<div class="graph">
43+
{# A graph will be dynamically inserted in these divs by Flot. #}
44+
<div class="histogram" data-histogram="{{ histogram|to_json }}"></div>
45+
<div class="legend"></div>
46+
<div class="note">{{ _('Note: All dates and times are in Pacific Time.') }}</div>
47+
</div>
48+
</div>
49+
</div>
50+
{% endblock %}
51+
52+
{% block site_js %}
53+
{{ js('productdashboard') }}
54+
<script type="text/javascript" src="https://login.persona.org/include.js"></script>
55+
{% endblock %}

0 commit comments

Comments
 (0)