From 694f82ec6582ed12047d66f2a90620bdc2689b47 Mon Sep 17 00:00:00 2001 From: Adrian Kuhn Date: Fri, 2 Oct 2015 17:08:01 -0700 Subject: [PATCH] Boostrapping widgets from javascript initializer (RFC). --- panoramix/static/panoramix.js | 39 ++++++++++++++++++- panoramix/static/widgets/viz_bignumber.js | 20 +++++++--- panoramix/static/widgets/viz_nvd3.js | 26 +++++++++++-- panoramix/static/widgets/viz_wordcloud.js | 19 ++++++--- panoramix/templates/panoramix/dashboard.html | 12 +++++- panoramix/templates/panoramix/datasource.html | 13 ++++++- .../templates/panoramix/viz_bignumber.html | 8 ---- panoramix/templates/panoramix/viz_nvd3.html | 8 ---- .../templates/panoramix/viz_word_cloud.html | 8 ---- panoramix/viz.py | 8 ++++ 10 files changed, 116 insertions(+), 45 deletions(-) diff --git a/panoramix/static/panoramix.js b/panoramix/static/panoramix.js index 0eeedc539de9b..cadcc31abcbab 100644 --- a/panoramix/static/panoramix.js +++ b/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, + } + +})(); + diff --git a/panoramix/static/widgets/viz_bignumber.js b/panoramix/static/widgets/viz_bignumber.js index f405ca9f7a412..b59a1cd19eb20 100644 --- a/panoramix/static/widgets/viz_bignumber.js +++ b/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, + } + +}); diff --git a/panoramix/static/widgets/viz_nvd3.js b/panoramix/static/widgets/viz_nvd3.js index b5b2556c71b30..52bed8c674e0f 100644 --- a/panoramix/static/widgets/viz_nvd3.js +++ b/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); +}); diff --git a/panoramix/static/widgets/viz_wordcloud.js b/panoramix/static/widgets/viz_wordcloud.js index 1464816ac730c..3e7c07e81b94e 100644 --- a/panoramix/static/widgets/viz_wordcloud.js +++ b/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, + }; + +}); diff --git a/panoramix/templates/panoramix/dashboard.html b/panoramix/templates/panoramix/dashboard.html index 050bdac69c20e..d0164859a604b 100644 --- a/panoramix/templates/panoramix/dashboard.html +++ b/panoramix/templates/panoramix/dashboard.html @@ -76,6 +76,8 @@

  • {% endfor %} {% for slice in dashboard.slices %} diff --git a/panoramix/templates/panoramix/datasource.html b/panoramix/templates/panoramix/datasource.html index a37964b459536..517c93e5fcb2f 100644 --- a/panoramix/templates/panoramix/datasource.html +++ b/panoramix/templates/panoramix/datasource.html @@ -106,7 +106,10 @@

    {{ viz.verbose_name }} {% block messages %} {% endblock %} {% include 'appbuilder/flash.html' %} -
    +
    {% block viz_html %} {% if viz.error_msg %}
    {{ viz.error_msg }}
    @@ -145,6 +148,12 @@ {% block tail_js %} {{ super() }} {% endblock %} diff --git a/panoramix/templates/panoramix/viz_bignumber.html b/panoramix/templates/panoramix/viz_bignumber.html index 19becaffc335c..b3227bff2d822 100644 --- a/panoramix/templates/panoramix/viz_bignumber.html +++ b/panoramix/templates/panoramix/viz_bignumber.html @@ -5,14 +5,6 @@ {% endmacro %} {% macro viz_js(viz) %} - {% endmacro %} {% macro viz_css(viz) %} diff --git a/panoramix/templates/panoramix/viz_nvd3.html b/panoramix/templates/panoramix/viz_nvd3.html index b86231218cb56..2f61e1a31bb33 100644 --- a/panoramix/templates/panoramix/viz_nvd3.html +++ b/panoramix/templates/panoramix/viz_nvd3.html @@ -6,14 +6,6 @@ {% endmacro %} {% macro viz_js(viz) %} - {% endmacro %} {% macro viz_css(viz) %} diff --git a/panoramix/templates/panoramix/viz_word_cloud.html b/panoramix/templates/panoramix/viz_word_cloud.html index f833ba97fb6ee..48766b29e8dfc 100644 --- a/panoramix/templates/panoramix/viz_word_cloud.html +++ b/panoramix/templates/panoramix/viz_word_cloud.html @@ -5,14 +5,6 @@ {% endmacro %} {% macro viz_js(viz) %} - {% endmacro %} {% macro viz_css(viz) %} diff --git a/panoramix/viz.py b/panoramix/viz.py index b69c4111212c7..3081b906147e8 100644 --- a/panoramix/viz.py +++ b/panoramix/viz.py @@ -180,6 +180,14 @@ def get_json(self): 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"