Merge pull request #83 from mistercrunch/js

Big JS refactor

TODO.md

@@ -2,18 +2,23 @@
 List of TODO items for Panoramix
 
 ## Improvments
-* [druid] Allow for post aggregations (ratios!)
-* [sql] define column based grouping
 * [sql] make "Test Connection" test further
-* csv export out of table view
+* csv export
+* json export (options)
 * in/notin filters autocomplete
+* [druid] Allow for post aggregations (ratios!)
 
 ## Better Javascript enables
 * Async on Druidify! in exploration page
-* Async form reload onchange of viz_type dropdown
-* Reintroduce query and stopwatch
-* Fix resize / refresh
 * Configurable widget auto refresh in Dashboard view
 
 ## New Features
 * Annotations layers
+
+## Low value
+* [sql] define column based grouping
+
+## Community
+* Creat a proper doc
+* Usage vid
+*

panoramix/static/panoramix.css

@@ -11,6 +11,15 @@ form div {
   color: white;
 }
 
+.header span{
+    margin-left: 3px;
+}
+
+#timer {
+    width: 80px;
+    text-align: right;
+}
+
 .notbtn {
     cursor: default;
 }

panoramix/static/panoramix.js

@@ -1,3 +1,4 @@
+var timer;
 var px = (function() {
 
   var visualizations = [];
@@ -14,18 +15,43 @@ var px = (function() {
   }
 
   function initializeWidget(data) {
+    var token = $('#' + data.token);
     var name = data['viz_name'];
     var initializer = visualizations[name];
-    var widget = initializer ? initializer(data) : makeNullWidget();
+    var user_defined_widget = initializer ? initializer(data) : makeNullWidget();
+    var dttm = 0;
+    var timer;
+    var stopwatch = function () {
+        dttm += 10;
+        $('#timer').text(Math.round(dttm/10)/100 + " sec");
+    }
+    var done = function (data) {
+        clearInterval(timer);
+        token.find("img.loading").hide();
+        if(data !== undefined)
+            $("#query_container").html(data.query);
+        $('#timer').removeClass('btn-warning');
+        $('span.query').removeClass('disabled');
+        $('#timer').addClass('btn-success');
+    }
+    widget = {
+      render: function() {
+        timer = setInterval(stopwatch, 10);
+        user_defined_widget.render(done);
+      },
+      resize: function() {
+        user_defined_widget.resize();
+      },
+    };
     return widget;
   }
 
-function initializeDatasourceView() {
-  function getParam(name) {
-    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
-    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
-    results = regex.exec(location.search);
-    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
+  function initializeDatasourceView() {
+    function getParam(name) {
+      name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
+      var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
+      results = regex.exec(location.search);
+      return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
   }
 
   $(".select2").select2({dropdownAutoWidth : true});

panoramix/static/widgets/viz_bignumber.css

@@ -1,4 +1,4 @@
-.viz_bignumber g.axis text {
+.big_number g.axis text {
   font-size: 10px;
   font-weight: normal;
   color: gray;
@@ -8,18 +8,18 @@
   font-weight: none;
 }
 
-.viz_bignumber text.big {
+.big_number text.big {
   stroke: black;
   text-anchor: middle;
   fill: black;
 }
 
-.viz_bignumber g.tick line {
+.big_number g.tick line {
   stroke-width: 1px;
   stroke: grey;
 }
 
-.viz_bignumber .domain {
+.big_number .domain {
   fill: none;
   stroke: black;
   stroke-width: 1;

panoramix/static/widgets/viz_bignumber.js

@@ -4,14 +4,15 @@ px.registerWidget('big_number', function(data_attribute) {
   var json_callback = data_attribute['json_endpoint'];
   var div = d3.select('#' + token_name);
 
-  function render() {
+  function render(done) {
     d3.json(json_callback, function(error, payload){
       json = payload.data;
       div.html("");
       //Define the percentage bounds that define color from red to green
       if (error != null){
         var err = '<div class="alert alert-danger">' + error.responseText  + '</div>';
         div.html(err);
+        done(payload);
         return '';
       }
       var color_range = [-1, 1];
@@ -136,6 +137,7 @@ px.registerWidget('big_number', function(data_attribute) {
         div.select('g.digits').transition().duration(500).attr('opacity', 1);
         div.select('g.axis').transition().duration(500).attr('opacity', 0);
       });
+      done(payload);
     });
   };
 

panoramix/static/widgets/viz_markup.js

@@ -0,0 +1,11 @@
+px.registerWidget('markup', function(data_attribute) {
+
+  function refresh(done) {
+      $('#code').attr('rows', '15')
+      done();
+  }
+  return {
+    render: refresh,
+    resize: refresh,
+  };
+});

panoramix/static/widgets/viz_nvd3.js

@@ -3,6 +3,7 @@ function viz_nvd3(data_attribute) {
   var token = d3.select('#' + token_name);
   var json_callback = data_attribute['json_endpoint'];
   var chart = undefined;
+  var data = {};
 
   function UTC(dttm){
     return v = new Date(dttm.getUTCFullYear(), dttm.getUTCMonth(), dttm.getUTCDate(),  dttm.getUTCHours(), dttm.getUTCMinutes(), dttm.getUTCSeconds());
@@ -27,17 +28,14 @@ function viz_nvd3(data_attribute) {
     "#FFAA91", "#B4A76C", "#9CA299", "#565A5C"
   ];
   var jtoken = $('#' + token_name);
-  var loading = $('#' + token_name).find("img.loading");
   var chart_div = $('#' + token_name).find("div.chart");
 
-  var refresh = function() {
+  var refresh = function(done) {
     chart_div.hide();
-    loading.show();
     $.getJSON(json_callback, function(payload) {
       var data = payload.data;
       var viz = payload;
       var viz_type = viz.form_data.viz_type;
-      $("#query_container").html(data.query);
       nv.addGraph(function() {
         if (viz_type === 'line') {
           if (viz.form_data.show_brush) {
@@ -157,10 +155,11 @@ function viz_nvd3(data_attribute) {
         return chart;
       });
       chart_div.show();
-      loading.hide();
-  }).fail(function(xhr) {
+      done(data);
+  })
+  .fail(function(xhr) {
       var err = '<div class="alert alert-danger">' + xhr.responseText  + '</div>';
-      loading.hide();
+      done(data);
       chart_div.show();
       chart_div.html(err);
     });

panoramix/static/widgets/viz_pivot_table.css

@@ -0,0 +1,3 @@
+li.widget.pivot_table div.token {
+    overflow: auto;
+}

panoramix/static/widgets/viz_pivot_table.js

@@ -0,0 +1,32 @@
+px.registerWidget('pivot_table', function(data_attribute) {
+  var token_name = data_attribute['token'];
+  var token = $('#' + token_name);
+  var form_data = data_attribute.form_data;
+
+  function refresh(done) {
+    token.load(data_attribute.json_endpoint, function(response, status, xhr){
+      if(status=="error"){
+        var err = '<div class="alert alert-danger">' + xhr.responseText  + '</div>';
+        token.html(err);
+        token.show();
+      }
+      else{
+        if (form_data.groupby.length == 1){
+          var table = token.find('table').DataTable({
+            paging: false,
+            searching: false,
+          });
+          table.column('-1').order( 'desc' ).draw();
+        }
+      }
+      token.show();
+      done();
+    });
+  }
+
+  return {
+    render: refresh,
+    resize: refresh,
+  };
+
+});

panoramix/static/widgets/viz_sunburst.js

@@ -4,7 +4,7 @@ Modified from http://bl.ocks.org/kerryrodden/7090426
 
 function viz_sunburst(data_attribute) {
   var token = d3.select('#' + data_attribute.token);
-  var render = function() {
+  var render = function(done) {
     // Breadcrumb dimensions: width, height, spacing, width of tip/tail.
     var b = {
       w: 100, h: 30, s: 3, t: 10
@@ -48,7 +48,7 @@ function viz_sunburst(data_attribute) {
       }
       var tree = buildHierarchy(json.data);
       createVisualization(tree);
-      token.select("img.loading").remove();
+      done(json);
     });
 
     // Main function to draw and set up the visualization, once we have the data.

panoramix/static/widgets/viz_table.css

@@ -0,0 +1,3 @@
+li.widget.table div.token {
+    overflow: auto;
+}

panoramix/static/widgets/viz_table.js

@@ -0,0 +1,31 @@
+px.registerWidget('table', function(data_attribute) {
+
+  var token_name = data_attribute['token'];
+  var token = $('#' + token_name);
+
+  function refresh(done) {
+    token.load(data_attribute.json_endpoint, function(response, status, xhr){
+      if(status=="error"){
+        var err = '<div class="alert alert-danger">' + xhr.responseText  + '</div>';
+        token.html(err);
+        token.show();
+        done();
+      }
+      else{
+        var table = token.find('table').DataTable({
+          paging: false,
+          searching: false,
+        });
+        table.column('-1').order( 'desc' ).draw();
+      }
+      token.show();
+      done();
+    });
+  }
+
+  return {
+    render: refresh,
+    resize: refresh,
+  };
+
+});

panoramix/static/widgets/viz_wordcloud.js

@@ -4,11 +4,12 @@ px.registerWidget('word_cloud', function(data_attribute) {
   var json_callback = data_attribute['json_endpoint'];
   var token = d3.select('#' + token_name);
 
-  function refresh() {
+  function refresh(done) {
     d3.json(json_callback, function(error, json) {
       if (error != null){
         var err = '<div class="alert alert-danger">' + error.responseText  + '</div>';
         token.html(err);
+        done();
         return '';
       }
       var data = json.data;
@@ -62,6 +63,7 @@ px.registerWidget('word_cloud', function(data_attribute) {
             })
             .text(function(d) { return d.text; });
       }
+      done(data);
     });
   }
 

panoramix/templates/panoramix/dashboard.html

@@ -109,7 +109,10 @@ <h2>
                   </tr>
                 </tbody>
               </table>
-              {{ viz_macros.viz_html(viz) }}
+              <div id="{{ viz.token }}" class="token" style="height: 100%;">
+                <img src="{{ url_for("static", filename="img/loading.gif") }}" class="loading" alt="loading">
+                {{ viz_macros.viz_html(viz) }}
+              </div>
           </li>
         {% endfor %}
     </ul>

panoramix/templates/panoramix/explore.html

@@ -33,8 +33,9 @@
             </a>
         </span>
         <span>{{ form.get_field("viz_type")(class_="select2") }}</span>
-        <span class="btn btn-info pull-right"
+        <span class="btn btn-info pull-right disabled query"
           data-toggle="modal" data-target="#query_modal">query</span>
+        <span class="btn btn-warning pull-right notbtn" id="timer">0 sec</span>
         <hr/>
     </div>
     <div class="row">
@@ -129,16 +130,18 @@
             {% endblock %}
               {% include 'appbuilder/flash.html' %}
         <div
+          id="{{ viz.token }}"
           class="viz widget {{ viz.viz_type }}"
           data-widget="{{ viz.get_data_attribute() }}"
           style="height: 700px;">
+          <img src="{{ url_for("static", filename="img/loading.gif") }}" class="loading" alt="loading">
           {% block viz_html %}
-          {% if viz.error_msg %}
-            <div class="alert alert-danger">{{ viz.error_msg }}</div>
-          {% endif %}
-          {% if viz.warning_msg %}
-            <div class="alert alert-warning">{{ viz.warning_msg }}</div>
-          {% endif %}
+            {% if viz.error_msg %}
+              <div class="alert alert-danger">{{ viz.error_msg }}</div>
+            {% endif %}
+            {% if viz.warning_msg %}
+              <div class="alert alert-warning">{{ viz.warning_msg }}</div>
+            {% endif %}
           {% endblock %}
         </div>
       </div>

panoramix/templates/panoramix/viz_bignumber.html

@@ -1,7 +1,5 @@
 {% macro viz_html(viz) %}
-<div id="{{ viz.token }}" class="viz_bignumber" style="height: 100%;">
-  <img src="{{ url_for("static", filename="img/loading.gif") }}" class="loading">
-</div>
+<div id="{{ viz.token }}" class="viz_bignumber" style="height: 100%;"></div>
 {% endmacro %}
 
 {% macro viz_js(viz) %}

panoramix/templates/panoramix/viz_nvd3.html

@@ -1,8 +1,5 @@
 {% macro viz_html(viz) %}
-<div id="{{ viz.token }}" style="height:100%; width: 100%">
-  <img src="{{ url_for("static", filename="img/loading.gif") }}" class="loading">
   <div class="chart with-3d-shadow with-transitions" style="height:100%; width: 100%"></div>
-</div>
 {% endmacro %}
 
 {% macro viz_js(viz) %}