Add loading icons

2 files changed, 57 insertions, 22 deletions

diff --git a/index.html b/index.html
index ce63313..3d37aa2 100644
--- a/index.html
+++ b/index.html
@@ -13,6 +13,18 @@
             text-align: center;
         }
 
+        h2 {
+            width: 750px;
+            padding: 0 0 0 50px;
+            margin: 10px auto 5px auto;
+        }
+
+        .loading {
+            background-repeat: no-repeat;
+            background-position: 0 50%;
+            background-image: url(/assets/icons/loading.gif);
+        }
+
         .range-preview {
             width: 800px;
             height:50px;
@@ -23,7 +35,7 @@
         .chart {
             width:800px;
             height:200px;
-            margin: 50px auto 50px auto;
+            margin: 0 auto 0 auto;
         }
 
         .chart canvas {
@@ -93,8 +105,9 @@
             }
         }, baseOptions);
 
-        function cpuChartFactory(template) {
-            var c = new jrrd.Chart(template, fillOptions);
+        function cpuChartFactory(title, template) {
+            template.find('.title').text(title);
+            var c = new jrrd.Chart(template.find('.chart'), fillOptions);
             data = 'cpu-user.rrd  cpu-system.rrd  cpu-wait.rrd'.split('  ').reverse();
 
             jQuery.each(data, function(i, el) {
@@ -105,8 +118,9 @@
             return c;
         }
 
-        function memoryChartFactory(template) {
-            var c = new jrrd.Chart(template, fillOptions);
+        function memoryChartFactory(title, template) {
+            template.find('.title').text(title);
+            var c = new jrrd.Chart(template.find('.chart'), fillOptions);
             data = 'memory-free.rrd memory-cached.rrd memory-used.rrd memory-buffered.rrd'.split(' ').reverse();
 
             jQuery.each(data, function(i, el) {
@@ -117,8 +131,9 @@
             return c;
         }
 
-        function dnsChartFactory(template) {
-            var c = new jrrd.Chart(template, baseOptions);
+        function dnsChartFactory(title, template) {
+            template.find('.title').text(title);
+            var c = new jrrd.Chart(template.find('.chart'), baseOptions);
             data = 'dns_opcode-Query.rrd  dns_qtype-A.rrd  dns_qtype-PTR.rrd  dns_rcode-NOERROR.rrd'.split('  ').reverse();
 
             jQuery.each(data, function(i, el) {
@@ -129,8 +144,9 @@
             return c;
         }
 
-        function loadChartFactory(template) {
-            var c = new jrrd.Chart(template, baseOptions);
+        function loadChartFactory(title, template) {
+            template.find('.title').text(title);
+            var c = new jrrd.Chart(template.find('.chart'), baseOptions);
             var data = new jrrd.RrdQueryRemote('data/load/load.rrd');
             var rrdDSs = ['shortterm', 'midterm', 'longterm'];
             jQuery.each(rrdDSs, function(i, rrdDS) {
@@ -139,8 +155,9 @@
             return c;
         }
 
-        function nicChartFactory(template, nicname) {
-            var c = new jrrd.Chart(template, baseOptions);
+        function nicChartFactory(title, template, nicname) {
+            template.find('.title').text(title);
+            var c = new jrrd.Chart(template.find('.chart'), baseOptions);
             var data = new jrrd.RrdQueryRemote('data/interface/if_octets-' + nicname + '.rrd');
             var rrdDSs = ['tx', 'rx'];
             jQuery.each(rrdDSs, function(i, rrdDS) {
@@ -151,30 +168,35 @@
 
         $(function() {
             var cc = new jrrd.ChartCoordinator($('.chartRangeControl'));
-            var chartTemplate = $('.chart').remove();
+            var chartTemplate = $('.chart-container').remove();
             cc.charts = [
-                //dnsChartFactory(
-                //    chartTemplate.clone().appendTo('.charts')),
-
-                loadChartFactory(
+                loadChartFactory('Load Average',
                     chartTemplate.clone().appendTo('.charts')),
 
-                nicChartFactory(
+                nicChartFactory('Wlan0 Throughput',
                     chartTemplate.clone().appendTo('.charts'), 'wlan0'),
 
-                cpuChartFactory(
+                cpuChartFactory('CPU',
                     chartTemplate.clone().appendTo('.charts')),
 
-                memoryChartFactory(
+                memoryChartFactory('Memory',
                     chartTemplate.clone().appendTo('.charts'))
             ];
 
-            cc.reset();
-
             $('.charts').bind("plotselected", function(event, ranges) {
                 cc.setTimeRange(new Date(ranges.xaxis.from),
                                 new Date(ranges.xaxis.to));
             });
+
+            $('.chart-container').live('chart_loading', function(e) {
+                $(this).find('.title').addClass('loading');
+            });
+
+            $('.chart-container').live('chart_loaded', function(e) {
+                $(this).find('.title').removeClass('loading');
+            });
+
+            cc.reset();
         });
         </script>
     </head>
@@ -190,7 +212,10 @@
             <div class="range-preview"></div>
         </form>
         <div class="charts">
-            <div class="chart"></div>
+            <div class="chart-container">
+                <h2 class="title"></h2>
+                <div class="chart"></div>
+            </div>
         </div>
     </body>
 </html>
diff --git a/jrrd.js b/jrrd.js
index a3b2464..95d078d 100644
--- a/jrrd.js
+++ b/jrrd.js
@@ -243,12 +243,17 @@ jrrd.Chart.prototype.setTimeRange = function(startTime, endTime) {
 }
 
 jrrd.Chart.prototype.draw = function() {
+    this.template.trigger('chart_loading');
     var result;
     var results = [];
     for(var i=0; i<this.data.length; i++) {
         if(this.data[i][2]) {
             result = this.data[i][1].getData(this.startTime, this.endTime);
         } else {
+            // If the data source has been marked as disabled return a fake
+            // empty dataset
+            // 0 values so that it can contribute to a stacked chart.
+            // 0 linewidth so that it doesn't cause a line in stacked chart
             result = new MochiKit.Async.Deferred();
             result.callback({
                 data: [
@@ -275,6 +280,11 @@ jrrd.Chart.prototype.draw = function() {
             .addErrback(
                 function(self, failure) {
                     self.template.text('error: ' + failure.message);
+                }, this)
+            .addBoth(
+                function(self, res) {
+                    self.template.trigger('chart_loaded');
+                    return res;
                 }, this);
 };