Periodically update the slices in the dashboard

caravel/assets/javascripts/dashboard.js

@@ -31,7 +31,15 @@ var Dashboard = function (dashboardData) {
             slice.render(true);
           });
           sliceObjects.push(slice);
-          slice.render();
+
+          var fetchAndRender = function (slice) {
+            slice.render(undefined, function () {
+              setTimeout(function () {
+                fetchAndRender(slice);
+              }, 60 * 1000);
+            });
+          };
+          fetchAndRender(slice);
         }
       });
       this.slices = sliceObjects;

caravel/assets/javascripts/modules/caravel.js

@@ -308,26 +308,22 @@ var px = (function () {
           }, 500);
         });
       },
-      render: function (force) {
+      render: function (force, callback) {
         if (force === undefined) {
           force = false;
         }
         this.force = force;
         token.find("img.loading").show();
-        container.hide();
-        container.html('');
         container.css('height', slice.height());
         dttm = 0;
         timer = setInterval(stopwatch, 10);
         $('#timer').removeClass('btn-danger btn-success');
         $('#timer').addClass('btn-warning');
-        this.viz.render();
+        this.viz.render(callback);
       },
       resize: function () {
         token.find("img.loading").show();
-        container.hide();
         container.css('height', slice.height());
-        container.html('');
         this.viz.render();
         this.viz.resize();
       },

caravel/assets/visualizations/big_number.js

@@ -9,13 +9,15 @@ var px = require('../javascripts/modules/caravel.js');
 function bigNumberVis(slice) {
   var div = d3.select(slice.selector);
 
-  function render() {
+  function render(callback) {
     d3.json(slice.jsonEndpoint(), function (error, payload) {
       //Define the percentage bounds that define color from red to green
       if (error !== null) {
         slice.error(error.responseText);
         return '';
       }
+      div.html(''); //reset
+
       var fd = payload.form_data;
       var json = payload.data;
       var color_range = [-1, 1];
@@ -171,6 +173,9 @@ function bigNumberVis(slice) {
         });
       }
       slice.done(payload);
+      if (callback) {
+        return callback();
+      }
     });
   }
 

caravel/assets/visualizations/directed_force.js

@@ -10,13 +10,19 @@ function directedForceVis(slice) {
   var link_length = slice.data.form_data.link_length || 200;
   var charge = slice.data.form_data.charge || -500;
 
-  var render = function () {
+  var render = function (callback) {
     var width = slice.width();
     var height = slice.height() - 25;
     d3.json(slice.jsonEndpoint(), function (error, json) {
+      var doCallback = function () {
+        if (callback) {
+          return callback();
+        }
+      };
 
       if (error !== null) {
         slice.error(error.responseText);
+        doCallback();
         return '';
       }
       var links = json.data;
@@ -164,6 +170,7 @@ function directedForceVis(slice) {
       }
 
       slice.done(json);
+      doCallback();
     });
   };
   return {

caravel/assets/visualizations/filter_box.js

@@ -20,7 +20,7 @@ function filterBox(slice) {
     slice.setFilter($(this).attr('name'), vals);
   };
 
-  var refresh = function () {
+  var refresh = function (callback) {
     d3token.selectAll("*").remove();
     var container = d3token
       .append('div')
@@ -69,6 +69,11 @@ function filterBox(slice) {
           return '<div style="' + style + '"><span>' + result.text + '</span></div>';
         }
       })
+      .always(function () {
+        if (callback) {
+            return callback();
+        }
+      })
       .fail(function (xhr) {
         slice.error(xhr.responseText);
       });

caravel/assets/visualizations/heatmap.js

@@ -12,18 +12,24 @@ require('./heatmap.css');
 // https://jsfiddle.net/cyril123/h0reyumq/
 function heatmapVis(slice) {
 
-  function refresh() {
+  function refresh(callback) {
     var margin = {
       top: 10,
       right: 10,
       bottom: 35,
       left: 35
     };
+    var doCallback = function () {
+      if (callback) {
+        return callback();
+      }
+    };
 
     d3.json(slice.jsonEndpoint(), function (error, payload) {
       var matrix = {};
       if (error) {
         slice.error(error.responseText);
+        doCallback();
         return '';
       }
       var fd = payload.form_data;
@@ -222,7 +228,7 @@ function heatmapVis(slice) {
       }
 
       slice.done();
-
+      doCallback();
     });
   }
   return {

caravel/assets/visualizations/iframe.js

@@ -2,7 +2,7 @@ var $ = window.$ || require('jquery');
 
 function iframeWidget(slice) {
 
-  function refresh() {
+  function refresh(callback) {
     $('#code').attr('rows', '15');
     $.getJSON(slice.jsonEndpoint(), function (payload) {
         slice.container.html('<iframe style="width:100%;"></iframe>');
@@ -11,6 +11,11 @@ function iframeWidget(slice) {
         iframe.attr('src', payload.form_data.url);
         slice.done();
       })
+      .always(function () {
+        if (callback) {
+          return callback();
+        }
+      })
       .fail(function (xhr) {
         slice.error(xhr.responseText);
       });

caravel/assets/visualizations/markup.js

@@ -2,13 +2,18 @@ var $ = window.$ || require('jquery');
 
 function markupWidget(slice) {
 
-  function refresh() {
+  function refresh(callback) {
     $('#code').attr('rows', '15');
 
     $.getJSON(slice.jsonEndpoint(), function (payload) {
         slice.container.html(payload.data.html);
         slice.done();
       })
+      .always(function () {
+        if (callback) {
+          return callback();
+        }
+      })
       .fail(function (xhr) {
         slice.error(xhr.responseText);
       });