Getting the dashboard filters to work

panoramix/forms.py

@@ -32,7 +32,8 @@ def iter_choices(self):
             d[value] = (value, label, selected)
         if self.data:
             for value in self.data:
-                yield d.pop(value)
+                if value:
+                    yield d.pop(value)
         while d:
             yield d.pop(d.keys()[0])
 

panoramix/static/panoramix.js

@@ -17,6 +17,33 @@ var px = (function() {
         $('#timer').text(Math.round(dttm/10)/100 + " sec");
     }
     slice = {
+      jsonEndpoint: function() {
+        // Shallow copy
+        var form_data = jQuery.extend({}, data.form_data);
+        for (var k in form_data){
+          if (form_data[k]==null){
+            delete form_data[k];
+          }
+        }
+        form_data['json'] = true;
+        if (dashboard !== undefined){
+          for (var f in dashboard.filters) {
+            if (slice_id !== f){
+              form_data[dashboard.filters[f][0]] = dashboard.filters[f][1];
+              form_data['flt_col_1'] = dashboard.filters[f][0];
+              form_data['flt_op_1'] = 'in';
+              form_data['flt_eq_1'] = dashboard.filters[f][1][0];
+            }
+          }
+        }
+        form_data['flt_op_0'] = '';
+        form_data['flt_eq_0'] = '';
+        form_data['flt_col_0'] = '';
+        var parser = document.createElement('a');
+        parser.href = data.json_endpoint;
+        var endpoint = parser.pathname + '?' + $.param(form_data, true);
+        return endpoint;
+      },
       done: function (data) {
         clearInterval(timer);
         token.find("img.loading").hide()
@@ -44,6 +71,7 @@ var px = (function() {
       render: function() {
         token.find("img.loading").show();
         container.hide();
+        container.html('');
         timer = setInterval(stopwatch, 10);
         viz.render(this);
       },
@@ -54,6 +82,10 @@ var px = (function() {
         if(dashboard !== undefined)
           dashboard.addFilter(slice_id, col, vals);
       },
+      clearFilter: function() {
+        if(dashboard !== undefined)
+          delete dashboard.clearFilter(slice_id);
+      },
     };
     var viz = visualizations[name](slice);
     slice['viz'] = viz;
@@ -66,13 +98,18 @@ var px = (function() {
       filters: {},
       addFilter: function(slice_id, field, values) {
         this.filters[slice_id] = [field, values];
+        this.refreshExcept(slice_id);
+      },
+      refreshExcept: function(slice_id) {
         this.slices.forEach(function(slice){
-          console.log([slice.data.slice_id, slice_id]);
           if(slice.data.slice_id != slice_id){
             slice.render();
           }
         });
-        console.log(this.filters);
+      },
+      clearFilter: function(slice_id) {
+        delete this.filters[slice_id];
+        this.refreshExcept(slice_id);
       },
     }
     $('.dashboard li.widget').each(function() {

panoramix/static/widgets/viz_bignumber.js

@@ -3,7 +3,7 @@ px.registerViz('big_number', function(slice) {
   var div = d3.select(slice.selector);
 
   function render() {
-    d3.json(slice.data.json_endpoint, function(error, payload){
+    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);

panoramix/static/widgets/viz_directed_force.js

@@ -16,7 +16,7 @@ function viz_directed_force(slice) {
     charge = -500;
   }
   var render = function() {
-    d3.json(slice.data.json_endpoint, function(error, json) {
+    d3.json(slice.jsonEndpoint(), function(error, json) {
 
     if (error != null){
       slice.error(error.responseText);

panoramix/static/widgets/viz_markup.js

@@ -2,8 +2,14 @@ px.registerViz('markup', function(slice) {
 
   function refresh() {
       $('#code').attr('rows', '15')
-      slice.done();
-  }
+      $.getJSON(slice.jsonEndpoint(), function(payload) {
+        slice.container.html(payload.data.html);
+        slice.done();
+      })
+      .fail(function(xhr) {
+          slice.error(xhr.responseText);
+        });
+      };
   return {
     render: refresh,
     resize: refresh,

panoramix/static/widgets/viz_nvd3.js

@@ -1,5 +1,4 @@
 function viz_nvd3(slice) {
-  var json_callback = slice.data['json_endpoint'];
   var chart = undefined;
   var data = {};
 
@@ -25,7 +24,7 @@ function viz_nvd3(slice) {
     "#FFAA91", "#B4A76C", "#9CA299", "#565A5C"
   ];
   var refresh = function() {
-    $.getJSON(json_callback, function(payload) {
+    $.getJSON(slice.jsonEndpoint(), function(payload) {
       var data = payload.data;
       var viz = payload;
       var viz_type = viz.form_data.viz_type;

panoramix/static/widgets/viz_pivot_table.js

@@ -3,7 +3,7 @@ px.registerViz('pivot_table', function(slice) {
   var form_data = slice.data.form_data;
 
   function refresh() {
-    $.getJSON(slice.data.json_endpoint, function(json){
+    $.getJSON(slice.jsonEndpoint(), function(json){
       container.html(json.data);
       if (form_data.groupby.length == 1){
         var table = container.find('table').DataTable({

panoramix/static/widgets/viz_table.js

@@ -4,7 +4,7 @@ px.registerViz('table', function(slice) {
 
   function refresh() {
     var f = d3.format('.3s');
-    $.getJSON(data.json_endpoint, function(json){
+    $.getJSON(slice.jsonEndpoint(), function(json){
       var data = json.data;
       var metrics = json.form_data.metrics;
       function col(c){
@@ -47,11 +47,17 @@ px.registerViz('table', function(slice) {
             return d.val;
        })
        .on("click", function(d){
-         if(!d.isMetric){
-          table.selectAll('.filtered').classed('filtered', false);
-          d3.select(this).classed('filtered', true);
-          slice.addFilter(d.col, [d.val]);
-        }
+          if(!d.isMetric){
+            var td = d3.select(this);
+            if (td.classed('filtered')){
+              slice.clearFilter(d.col, [d.val]);
+              table.selectAll('.filtered').classed('filtered', false);
+            } else {
+              table.selectAll('.filtered').classed('filtered', false);
+              d3.select(this).classed('filtered', true);
+              slice.addFilter(d.col, [d.val]);
+            }
+          }
        })
        .style("cursor", function(d){
          if(!d.isMetric){

panoramix/static/widgets/viz_wordcloud.js

@@ -1,9 +1,8 @@
 px.registerViz('word_cloud', function(slice) {
   var slice = slice;
   var chart = d3.select(slice.selector);
-  console.log(slice.data.json_endpoint);
   function refresh() {
-    d3.json(slice.data.json_endpoint, function(error, json) {
+    d3.json(slice.jsonEndpoint(), function(error, json) {
       if (error != null){
         slice.error(error.responseText);
         return '';

panoramix/templates/panoramix/viz_markup.html

@@ -1,5 +1,4 @@
 {% macro viz_html(viz) %}
-{{ viz.rendered()|safe }}
 {% endmacro %}
 
 {% macro viz_js(viz) %}

panoramix/viz.py

@@ -395,6 +395,9 @@ def rendered(self):
         elif markup_type == "html":
             return code
 
+    def get_json_data(self):
+        return dumps(dict(html=self.rendered()))
+
 
 class WordCloudViz(BaseViz):
     """