Isolated dashboard app JavaScript (#2155)

* Isolated `dashboard` app JavaScript

This patch moves the `dashboard` app's JavaScript inclusion from the
project's `require.js` structure to the app itself.

This was achieved with a new block in the base template called
`javascript`. The rest of the site gets the default JavaScript includes,
and the `dashboard` app overrides the block to include the JavaScript
specific to it. The `dashboard` app benefits by not knowing about
JavaScript related to the rest of the site and vice versa.

None of the actual `dashboard` JavaScript code was changed. It was only
adapted to the new structure.

- Added `javascript` block to base template
- Added `dashboard_javascript` block to `dashboard` base template
- Included `dashboard` JavaScript directly in `dashboard` templates
- Removed `dashboard`-related entries in `main.js`
- Remove references to `jquery.flot.min.js` from base template
  - This library is only used by the `dashboard` app
- Removed `dashboard-*` CSS classes only used by `require.js`
- Removed `require.js` structure in `dashboard` JavaScript files
- Simplified structure of `utils.js`

* Update `static` template tag loading

* Simplify JavaScript inclusion

Author: adamzap

dashboard/templates/base_dashboard.html

@@ -1,5 +1,6 @@
 {% extends "base.html" %}
 {% load i18n %}
+{% load static %}
 
 {% block sectionid %}dashboard{% endblock %}
 
@@ -8,3 +9,9 @@
 {% block header %}
   <h1>Development <em>dashboard</em></h1>
 {% endblock %}
+
+{% block javascript %}
+  <script src="{% static "js/lib/jquery.min.js" %}"></script>
+  <script src="{% static "js/lib/jquery.flot.min.js" %}"></script>
+  <script src="{% static "js/dashboard/utils.js" %}"></script>
+{% endblock %}

dashboard/templates/dashboard/detail.html

@@ -1,14 +1,20 @@
 {% extends "base_dashboard.html" %}
-{% load i18n %}
+{% load i18n static %}
 
 {% block title %}{{ metric }} | {{ block.super }}{% endblock %}
 
 {% block content %}
-  <div class="dashboard-detail">
+  <div>
     <h2><a href="{{ metric.link }}">{{ metric }}</a></h2>
     <div class="graph-wrapper">
       <div id="graph" class="graph" data-path="{% url "metric-list" host "dashboard" %}" data-metric="{{ metric.slug }}"></div>
     </div>
     <a class="link-readmore back-link" href="{% url "dashboard-index" host "dashboard" %}">{% translate "All metrics" %}</a>
   </div>
 {% endblock %}
+
+{% block javascript %}
+  {{ block.super }}
+
+  <script src="{% static "js/dashboard/detail.js" %}"></script>
+{% endblock %}

dashboard/templates/dashboard/index.html

@@ -1,8 +1,9 @@
 {% extends "base_dashboard.html" %}
 {% load i18n %}
+{% load static %}
 
 {% block content %}
-  <div class="dashboard-index">
+  <div>
     {% for report in data %}
       {% ifchanged report.metric.category %}
         {% if report.metric.category %}<h2>{{ report.metric.category }}</h2>{% endif %}
@@ -23,3 +24,9 @@ <h3><a href="{{ report.metric.link }}">{{ report.metric.name }}</a></h3>
     </p>
   </div>
 {% endblock %}
+
+{% block javascript %}
+  {{ block.super }}
+
+  <script src="{% static "js/dashboard/index.js" %}"></script>
+{% endblock %}

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) {
-        $('<div id="hover">')
-          .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) {
+      $('<div id="hover">')
+        .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) +
-          '<br>' +
-          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) +
+        '<br>' +
+        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;
+      }
     });
   });
 });

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(' ');
+        }
       });
     });
   });

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;
+}

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');
   }