diff --git a/dashboard/templates/base_dashboard.html b/dashboard/templates/base_dashboard.html index f7c9a5f265..a3fc9e8640 100644 --- a/dashboard/templates/base_dashboard.html +++ b/dashboard/templates/base_dashboard.html @@ -1,5 +1,6 @@ {% extends "base.html" %} {% load i18n %} +{% load static %} {% block sectionid %}dashboard{% endblock %} @@ -8,3 +9,11 @@ {% block header %}

Development dashboard

{% endblock %} + +{% block javascript %} + + + + + {% block dashboard_javascript %}{% endblock %} +{% endblock %} diff --git a/dashboard/templates/dashboard/detail.html b/dashboard/templates/dashboard/detail.html index 858c94f9f2..ba80ed18eb 100644 --- a/dashboard/templates/dashboard/detail.html +++ b/dashboard/templates/dashboard/detail.html @@ -1,10 +1,11 @@ {% extends "base_dashboard.html" %} {% load i18n %} +{% load static %} {% block title %}{{ metric }} | {{ block.super }}{% endblock %} {% block content %} -
+

{{ metric }}

{% endblock %} + +{% block dashboard_javascript %} + +{% endblock %} diff --git a/dashboard/templates/dashboard/index.html b/dashboard/templates/dashboard/index.html index e20ccb1d38..97cf892a88 100644 --- a/dashboard/templates/dashboard/index.html +++ b/dashboard/templates/dashboard/index.html @@ -1,8 +1,9 @@ {% extends "base_dashboard.html" %} {% load i18n %} +{% load static %} {% block content %} -
+
{% for report in data %} {% ifchanged report.metric.category %} {% if report.metric.category %}

{{ report.metric.category }}

{% endif %} @@ -23,3 +24,7 @@

{{ report.metric.name }}

{% endblock %} + +{% block dashboard_javascript %} + +{% endblock %} diff --git a/djangoproject/static/js/dashboard/detail.js b/djangoproject/static/js/dashboard/detail.js index 2cad2687f2..5bd1be1bcc 100644 --- a/djangoproject/static/js/dashboard/detail.js +++ b/djangoproject/static/js/dashboard/detail.js @@ -1,89 +1,83 @@ -define('dashboard/detail', [ - 'jquery', - 'jquery.flot', - 'dashboard/utils', -], function ($, plot, utils) { - $(function () { - var element = $('#graph'); - var url = element.data('path') + element.data('metric') + '.json?days=365'; - var hover = { - show: function (x, y, message) { - $('
') - .html(message) - .css({ top: y, left: x }) - .appendTo('body') - .show(); - }, - hide: function () { - $('#hover').remove(); +$(function () { + var element = $('#graph'); + var url = element.data('path') + element.data('metric') + '.json?days=365'; + var hover = { + show: function (x, y, message) { + $('
') + .html(message) + .css({ top: y, left: x }) + .appendTo('body') + .show(); + }, + hide: function () { + $('#hover').remove(); + }, + }; + + $.getJSON(url, function (response) { + for (var i = 0; i < response.data.length; i++) { + response.data[i][0] = response.data[i][0] * 1000; + } + var options = { + xaxis: { + mode: 'time', + tickColor: 'rgba(0,0,0,0)', + minTickSize: [1, 'day'], }, + yaxis: { min: 0, ticks: 4 }, + grid: { borderWidth: 0, hoverable: true, color: '#0C3C26' }, + colors: ['#0C4B33'], }; - - $.getJSON(url, function (response) { - for (var i = 0; i < response.data.length; i++) { - response.data[i][0] = response.data[i][0] * 1000; - } - var options = { - xaxis: { - mode: 'time', - tickColor: 'rgba(0,0,0,0)', - minTickSize: [1, 'day'], - }, - yaxis: { min: 0, ticks: 4 }, - grid: { borderWidth: 0, hoverable: true, color: '#0C3C26' }, - colors: ['#0C4B33'], + if (response.period == 'daily') { + options.bars = { + show: true, + barWidth: 22 * 60 * 60 * 1000, + align: 'center', }; - if (response.period == 'daily') { - options.bars = { - show: true, - barWidth: 22 * 60 * 60 * 1000, - align: 'center', - }; - } else if (response.period == 'weekly') { - options.bars = { - show: true, - barWidth: 22 * 60 * 60 * 7 * 1000, - align: 'center', - }; - } - var plot = $.plot(element, [response.data], options); - - var format_message = function (timestamp, measurement) { - var unit = measurement == 1 ? response.unit : response.unit_plural; - return ( - utils.formatTimestamp(timestamp, response.period) + - '
' + - measurement + - ' ' + - unit - ); + } else if (response.period == 'weekly') { + options.bars = { + show: true, + barWidth: 22 * 60 * 60 * 7 * 1000, + align: 'center', }; + } + var plot = $.plot(element, [response.data], options); - var previousPoint = null; - element.bind('plothover', function (event, pos, item) { - if (item) { - if (previousPoint != item.dataIndex) { - previousPoint = item.dataIndex; - hover.hide(); - var x, y; - var message = format_message.apply(null, item.datapoint); - if (response.period == 'instant') { - x = item.pageX + 10; - y = item.pageY + 10; - } else { - // I'd like this hover to be centered over the bar. This - // simple math sorta works, but it assumes a *lot* about - // the plot and basically won't scale. Grr. - x = item.pageX - 40; - y = item.pageY - 50; - } - hover.show(x, y, message); - } - } else { + var format_message = function (timestamp, measurement) { + var unit = measurement == 1 ? response.unit : response.unit_plural; + return ( + formatTimestamp(timestamp, response.period) + + '
' + + measurement + + ' ' + + unit + ); + }; + + var previousPoint = null; + element.bind('plothover', function (event, pos, item) { + if (item) { + if (previousPoint != item.dataIndex) { + previousPoint = item.dataIndex; hover.hide(); - previousPoint = null; + var x, y; + var message = format_message.apply(null, item.datapoint); + if (response.period == 'instant') { + x = item.pageX + 10; + y = item.pageY + 10; + } else { + // I'd like this hover to be centered over the bar. This + // simple math sorta works, but it assumes a *lot* about + // the plot and basically won't scale. Grr. + x = item.pageX - 40; + y = item.pageY - 50; + } + hover.show(x, y, message); } - }); + } else { + hover.hide(); + previousPoint = null; + } }); }); }); diff --git a/djangoproject/static/js/dashboard/index.js b/djangoproject/static/js/dashboard/index.js index de12250727..1b5e255e3f 100644 --- a/djangoproject/static/js/dashboard/index.js +++ b/djangoproject/static/js/dashboard/index.js @@ -1,47 +1,41 @@ -define('dashboard/index', [ - 'jquery', - 'jquery.flot', - 'dashboard/utils', -], function ($, flot, utils) { - $(function () { - $('.metric .sparkline').each(function (index, elem) { - var element = $(elem); - var valueElement = element.parent().find('.value a'); - var timestampElement = element.parent().find('.timestamp'); - var originalValue = valueElement.html(); - var green = '#93D7B7'; +$(function () { + $('.metric .sparkline').each(function (index, elem) { + var element = $(elem); + var valueElement = element.parent().find('.value a'); + var timestampElement = element.parent().find('.timestamp'); + var originalValue = valueElement.html(); + var green = '#93D7B7'; - var url = element.data('path') + element.data('metric') + '.json'; - $.getJSON(url, function (response) { - response.data = utils.convertSecondsToMilliseconds(response.data); - $.plot(element, [response.data], { - xaxis: { show: false, mode: 'time' }, - yaxis: { show: false, min: 0 }, - grid: { borderWidth: 0, hoverable: true }, - colors: [green], - bars: { - show: true, - barWidth: - response.period == 'daily' - ? 24 * 60 * 60 * 1000 - : 24 * 60 * 60 * 7 * 1000, - fillColor: green, - lineWidth: 1, - align: 'center', - }, - }); + var url = element.data('path') + element.data('metric') + '.json'; + $.getJSON(url, function (response) { + response.data = convertSecondsToMilliseconds(response.data); + $.plot(element, [response.data], { + xaxis: { show: false, mode: 'time' }, + yaxis: { show: false, min: 0 }, + grid: { borderWidth: 0, hoverable: true }, + colors: [green], + bars: { + show: true, + barWidth: + response.period == 'daily' + ? 24 * 60 * 60 * 1000 + : 24 * 60 * 60 * 7 * 1000, + fillColor: green, + lineWidth: 1, + align: 'center', + }, + }); - element.bind('plothover', function (event, pos, item) { - if (item) { - valueElement.html(item.datapoint[1]); - timestampElement.html( - utils.formatTimestamp(item.datapoint[0], response.period), - ); - } else { - valueElement.html(originalValue); - timestampElement.html(' '); - } - }); + element.bind('plothover', function (event, pos, item) { + if (item) { + valueElement.html(item.datapoint[1]); + timestampElement.html( + formatTimestamp(item.datapoint[0], response.period), + ); + } else { + valueElement.html(originalValue); + timestampElement.html(' '); + } }); }); }); diff --git a/djangoproject/static/js/dashboard/utils.js b/djangoproject/static/js/dashboard/utils.js index 75d6c15953..5cb2d24cac 100644 --- a/djangoproject/static/js/dashboard/utils.js +++ b/djangoproject/static/js/dashboard/utils.js @@ -1,29 +1,26 @@ -define('dashboard/utils', ['jquery'], function ($) { - return { - formatTimestamp: function formatTimestamp(timestamp, period) { - var d = new Date(timestamp); - if (period == 'instant') { - return $.plot.formatDate(d, '%b %d, %h:%M %p'); - } else if (period == 'daily') { - return $.plot.formatDate(d, '%b %d'); - } else if (period == 'weekly') { - // A bit more complicated than the above: the timestamp is in the - // middle of the week, so we have to bracket the date. This is - // something of a fudge here, but it works well enough. - var start = new Date(d.getTime() - 3 * 24 * 60 * 60 * 1000); - var end = new Date(d.getTime() + 3 * 24 * 60 * 60 * 1000); - return ( - $.plot.formatDate(start, '%b %d') + - ' - ' + - $.plot.formatDate(end, '%b %d') - ); - } - }, - convertSecondsToMilliseconds: function convertSecondsToMilliseconds(data) { - for (var i = 0; i < data.length; i++) { - data[i][0] = data[i][0] * 1000; - } - return data; - }, - }; -}); +function formatTimestamp(timestamp, period) { + var d = new Date(timestamp); + if (period == 'instant') { + return $.plot.formatDate(d, '%b %d, %h:%M %p'); + } else if (period == 'daily') { + return $.plot.formatDate(d, '%b %d'); + } else if (period == 'weekly') { + // A bit more complicated than the above: the timestamp is in the + // middle of the week, so we have to bracket the date. This is + // something of a fudge here, but it works well enough. + var start = new Date(d.getTime() - 3 * 24 * 60 * 60 * 1000); + var end = new Date(d.getTime() + 3 * 24 * 60 * 60 * 1000); + return ( + $.plot.formatDate(start, '%b %d') + + ' - ' + + $.plot.formatDate(end, '%b %d') + ); + } +} + +function convertSecondsToMilliseconds(data) { + for (var i = 0; i < data.length; i++) { + data[i][0] = data[i][0] * 1000; + } + return data; +} diff --git a/djangoproject/static/js/main.js b/djangoproject/static/js/main.js index 16f0b6e765..7c4d129624 100644 --- a/djangoproject/static/js/main.js +++ b/djangoproject/static/js/main.js @@ -12,14 +12,6 @@ define(function () { mods.push('mod/list-collapsing'); } - if (hasClass('dashboard-index')) { - mods.push('dashboard/index'); - } - - if (hasClass('dashboard-detail')) { - mods.push('dashboard/detail'); - } - if (hasClass('stripe-donation')) { mods.push('mod/stripe-donation'); } diff --git a/djangoproject/templates/base.html b/djangoproject/templates/base.html index 1cdb8f8f66..b7e0b448bd 100644 --- a/djangoproject/templates/base.html +++ b/djangoproject/templates/base.html @@ -117,32 +117,33 @@ {% include "includes/footer.html" %} {% endblock %} - {# Require JS #} - - {% block body_extra %}{% endblock body_extra %} - + + {% block javascript %} + {# Require JS #} + + + + {% endblock %}