Boostrapping widgets from javascript initializer (RFC).

panoramix/static/panoramix.js

@@ -1,3 +1,25 @@
+var px = (function() {
+
+  var visualizations = [];
+
+  function registerWidget(name, initializer) {
+    visualizations[name] = initializer;
+  }
+
+  function makeNullWidget() {
+    return {
+      render: function() {},
+      resize: function() {},
+    };
+  }
+
+  function initializeWidget(data) {
+    var name = data['viz_name'];
+    var initializer = visualizations[name];
+    var widget = initializer ? initializer(data) : makeNullWidget();
+    return widget;
+  }
+
 function initializeDatasourceView() {
   function getParam(name) {
     name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
@@ -127,8 +149,9 @@ function initializeDashboardView(dashboard_id) {
     },
     resize: {
       enabled: true,
-      stop: function(e, ui, _widget) {
-        _widget.find("a.refresh").click();
+      stop: function(e, ui, element) {
+        var widget = $(element).data('widget');
+        widget.resize();
       }
     },
     serialize_params: function(_w, wgd) {
@@ -171,3 +194,15 @@ function initializeDashboardView(dashboard_id) {
     $("#user_style").html(css);
   });
 }
+
+  // Export public functions
+
+  return {
+    registerWidget: registerWidget,
+    initializeWidget: initializeWidget,
+    initializeDatasourceView: initializeDatasourceView,
+    initializeDashboardView: initializeDashboardView,
+  }
+
+})();
+

panoramix/static/widgets/viz_bignumber.js

@@ -1,6 +1,10 @@
-function viz_bignumber(token, json_callback) {
-  var div = d3.select('#' + token);
-  var render = function() {
+px.registerWidget('big_number', function(data_attribute) {
+
+  var token_name = data_attribute['token'];
+  var json_callback = data_attribute['json_endpoint'];
+  var div = d3.select('#' + token_name);
+
+  function render() {
     d3.json(json_callback, function(error, payload){
       json = payload.data;
       div.html("");
@@ -134,6 +138,10 @@ function viz_bignumber(token, json_callback) {
       });
     });
   };
-  render();
-  $(div).parent().find("a.refresh").click(render);
-}
+
+  return {
+    render: render,
+    resize: render,
+  }
+
+});

panoramix/static/widgets/viz_nvd3.js

@@ -1,4 +1,8 @@
-function viz_nvd3(token_name, json_callback) {
+function viz_nvd3(data_attribute) {
+
+  var token_name = data_attribute['token'];
+  var json_callback = data_attribute['json_endpoint'];
+
   function UTC(dttm){
     return v = new Date(dttm.getUTCFullYear(), dttm.getUTCMonth(), dttm.getUTCDate(),  dttm.getUTCHours(), dttm.getUTCMinutes(), dttm.getUTCSeconds());
   }
@@ -138,6 +142,22 @@ function viz_nvd3(token_name, json_callback) {
       chart.html(err);
     });
   };
-  refresh();
-  jtoken.parent().find("a.refresh").click(refresh);
+
+  return {
+    render: refresh,
+    resize: refresh,
+  };
+
 }
+
+[
+  'area',
+  'bubble',
+  'column',
+  'compare',
+  'dist_bar',
+  'line',
+  'pie',
+].forEach(function(name) {
+  px.registerWidget(name, viz_nvd3);
+});

panoramix/static/widgets/viz_wordcloud.js

@@ -1,5 +1,9 @@
-function viz_wordcloud(token, json_callback) {
-  var token = d3.select('#' + token);
+px.registerWidget('word_cloud', function(data_attribute) {
+
+  var token_name = data_attribute['token'];
+  var json_callback = data_attribute['json_endpoint'];
+  var token = d3.select('#' + token_name);
+
   function refresh() {
     d3.json(json_callback, function(error, json) {
       var data = json.data;
@@ -60,7 +64,10 @@ function viz_wordcloud(token, json_callback) {
       }
     });
   }
-  refresh();
-  jtoken = $(token);
-  jtoken.parent().find("a.refresh").click(refresh);
-}
+
+  return {
+    render: refresh,
+    resize: refresh,
+  };
+
+});

panoramix/templates/panoramix/dashboard.html

@@ -76,6 +76,8 @@ body {
           <li
               id="slice_{{ slice.id }}"
               slice_id="{{ slice.id }}"
+              class="widget"
+              data-widget="{{ slice.viz.get_data_attribute() }}"
               data-row="{{ pos.row or 1 }}"
               data-col="{{ pos.col or loop.index }}"
               data-sizex="{{ pos.size_x or 4 }}"
@@ -117,8 +119,14 @@ body {
     {% endfor %}
     <script src="/static/lib/gridster/jquery.gridster.with-extras.min.js"></script>
     <script>
-      $(document).ready(function(){
-        initializeDashboardView({{ dashboard.id }});
+      $(document).ready(px.initializeDashboardView({{ dashboard.id }}));
+      $(document).ready(function() {
+        $('.dashboard .widget').each(function() {
+          var data = $(this).data('widget');
+          var widget = px.initializeWidget(data);
+          $(this).data('widget', widget);
+          widget.render();
+        });
       });
     </script>
     {% for slice in dashboard.slices %}

panoramix/templates/panoramix/datasource.html

@@ -106,7 +106,10 @@
           {% block messages %}
           {% endblock %}
             {% include 'appbuilder/flash.html' %}
-      <div class="viz" style="height: 700px;">
+      <div
+        class="viz widget"
+        data-widget="{{ viz.get_data_attribute() }}"
+        style="height: 700px;">
         {% block viz_html %}
         {% if viz.error_msg %}
         <div class="alert alert-danger">{{ viz.error_msg }}</div>
@@ -145,6 +148,12 @@
 {% block tail_js %}
 {{ super() }}
 <script>
-  $(document).ready(initializeDatasourceView);
+  $(document).ready(px.initializeDatasourceView);
+  $(document).ready(function() {
+    var data = $('.widget').data('widget');
+    var widget = px.initializeWidget(data);
+    $('.widget').data('widget', widget);
+    widget.render();
+  });
 </script>
 {% endblock %}

panoramix/templates/panoramix/viz_bignumber.html

@@ -5,14 +5,6 @@
 {% endmacro %}
 
 {% macro viz_js(viz) %}
-<script>
-  $(document).ready(function() {
-    viz_bignumber(
-      "{{ viz.token }}",
-      "{{ viz.get_url(json="true")|safe }}"
-    );
-  });
-</script>
 {% endmacro %}
 
 {% macro viz_css(viz) %}

panoramix/templates/panoramix/viz_nvd3.html

@@ -6,14 +6,6 @@
 {% endmacro %}
 
 {% macro viz_js(viz) %}
-<script>
-  $(document).ready(function() {
-    viz_nvd3(
-      "{{ viz.token }}",
-      "{{ viz.get_url(json="true")|safe }}"
-    );
-  });
-</script>
 {% endmacro %}
 
 {% macro viz_css(viz) %}

panoramix/templates/panoramix/viz_word_cloud.html

@@ -5,14 +5,6 @@
 {% endmacro %}
 
 {% macro viz_js(viz) %}
-<script>
-  $(document).ready(function() {
-    viz_wordcloud(
-      "{{ viz.token }}",
-      "{{ viz.get_url(json="true")|safe }}"
-    );
-  });
-</script>
 {% endmacro %}
 
 {% macro viz_css(viz) %}

panoramix/viz.py

@@ -180,6 +180,14 @@ class BaseViz(object):
     def get_json_data(self):
         return json.dumps([])
 
+    def get_data_attribute(self):
+        content = {
+            'viz_name': self.viz_type,
+            'json_endpoint': self.get_url(json="true"),
+            'token': self.token,
+        }
+        return json.dumps(content)
+
 class TableViz(BaseViz):
     viz_type = "table"
     verbose_name = "Table View"