Enable multiple graphs to be created

app/assets/javascripts/statistics_graphs.js

@@ -1,104 +1,110 @@
 $(document).ready(function () {
   if ($.isController('statistics') && $('.graph#user-activity').isPresent()) {
-    var CHART_START = window.vis ? vis.moment().add(-1, 'minute') : undefined;
-    var DEFAULT_REFRESH_INTERVAL = 10000;
 
-    var refreshInterval;
+    function manageGraph(containerId, url, refreshAfter) {
+      var CHART_START = window.vis ? vis.moment().add(-1, 'minute') : undefined;
+      var DEFAULT_REFRESH_INTERVAL = refreshAfter * 1000 || 10000;
 
-    var initialData;
+      var refreshInterval;
-    var dataset;
-    var graph;
-    var groups;
 
-    var buildChartGroups = function() {
+      var initialData;
-      initialData = initialData.sort(function (a, b) {return a.data - b.data});
+      var dataset;
-      return _.map(initialData, function(element, index) {
+      var graph;
-        return {
+      var groups;
-          content: element.name + (element.unit ? ' [' + element.unit + ']' : ''),
-          id: element.key,
-          visible: false,
-          options: {
-            yAxisOrientation: index >= initialData.length / 2 ? 'right' : 'left'
-          }
-        };
-      });
-    };
 
-    var initializeChart = function() {
+      var buildChartGroups = function() {
-      dataset = new vis.DataSet();
+        initialData = initialData.sort(function (a, b) {return a.data - b.data});
-      groups = new vis.DataSet(buildChartGroups());
+        return _.map(initialData, function(element, index) {
-      graph = new vis.Graph2d(document.getElementById('user-activity'), dataset, groups, {
+          return {
-        dataAxis: {
+            content: element.name + (element.unit ? ' [' + element.unit + ']' : ''),
-          customRange: {
+            id: element.key,
-            left: {
+            visible: false,
-              min: 0
+            options: {
-            },
+              yAxisOrientation: index >= initialData.length / 2 ? 'right' : 'left'
-            right: {
-              min: 0
             }
+          };
+        });
+      };
+
+      var initializeChart = function() {
+        dataset = new vis.DataSet();
+        groups = new vis.DataSet(buildChartGroups());
+        graph = new vis.Graph2d(document.getElementById(containerId), dataset, groups, {
+          dataAxis: {
+            customRange: {
+              left: {
+                min: 0
+              },
+              right: {
+                min: 0
+              }
+            },
+            showMinorLabels: true
           },
-          showMinorLabels: true
+          drawPoints: {
-        },
+            style: 'circle'
-        drawPoints: {
+          },
-          style: 'circle'
+          end: vis.moment(),
-        },
+          legend: true,
-        end: vis.moment(),
+          shaded: true,
-        legend: true,
+          start: CHART_START
-        shaded: true,
+        });
-        start: CHART_START
+      };
+
+      var refreshChart = function() {
+        var now = vis.moment();
+        var window = graph.getWindow();
+        var interval = window.end - window.start;
+        graph.setWindow(now - interval, now);
+      };
+
+      var refreshData = function(callback) {
+        if (! ($.isController('statistics') && $('#' + containerId).isPresent())) {
+          clearInterval(refreshInterval);
+        } else {
+          var jqxhr = $.ajax(url, {
+            dataType: 'json',
+            method: 'GET'
+          });
+          jqxhr.done(function(response) {
+            (callback || _.noop)(response);
+            setGroupVisibility(response);
+            updateChartData(response);
+            requestAnimationFrame(refreshChart);
+          });
+        }
+      };
+
+      var setGroupVisibility = function(response) {
+        _.each(response, function(data) {
+          groups.update({
+            id: data.key,
+            visible: true
+          });
+        });
+      };
+
+      var updateChartData = function(response) {
+        _.each(response, function(data) {
+          dataset.add({
+            group: data.key,
+            x: vis.moment(),
+            y: data.data
+          });
+        });
+      };
+
+      refreshData(function (data) {
+        initialData = data;
+        $('#' + containerId).parent().find('.spinner').hide();
+        initializeChart();
+
+        var refresh_interval = location.search.match(/interval=(\d+)/) ? parseInt(RegExp.$1) : DEFAULT_REFRESH_INTERVAL;
+        refreshInterval = setInterval(refreshData, refresh_interval);
       });
-    };
+    }
 
-    var refreshChart = function() {
+    manageGraph('user-activity', 'graphs/user-activity', 10);
-      var now = vis.moment();
+    manageGraph('rfc-activity', 'graphs/rfc-activity', 30);
-      var window = graph.getWindow();
-      var interval = window.end - window.start;
-      graph.setWindow(now - interval, now);
-    };
-
-    var refreshData = function(callback) {
-      if (! ($.isController('statistics') && $('#user-activity').isPresent())) {
-        clearInterval(refreshInterval);
-      } else {
-        var jqxhr = $.ajax('graphs/user-activity', {
-          dataType: 'json',
-          method: 'GET'
-        });
-        jqxhr.done(function(response) {
-          (callback || _.noop)(response);
-          setGroupVisibility(response);
-          updateChartData(response);
-          requestAnimationFrame(refreshChart);
-        });
-      }
-    };
-
-    var setGroupVisibility = function(response) {
-      _.each(response, function(data) {
-        groups.update({
-          id: data.key,
-          visible: true
-        });
-      });
-    };
-
-    var updateChartData = function(response) {
-      _.each(response, function(data) {
-        dataset.add({
-          group: data.key,
-          x: vis.moment(),
-          y: data.data
-        });
-      });
-    };
-
-    refreshData(function (data) {
-      initialData = data;
-      $('#user-activity').parent().find('.spinner').hide();
-      initializeChart();
-
-      var refresh_interval = location.search.match(/interval=(\d+)/) ? parseInt(RegExp.$1) : DEFAULT_REFRESH_INTERVAL;
-      refreshInterval = setInterval(refreshData, refresh_interval);
-    });
   }
 });