Re writting table viz

apache · Dec 18, 2015 · bd75a58 · bd75a58
1 parent 55c4433
commit bd75a58
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 20 deletions.
diff --git a/panoramix/forms.py b/panoramix/forms.py
@@ -326,6 +326,10 @@ def __init__(self, viz):
                 "Range Filter", default=True,
                 description=(
                     "Whether to display the time range interactive selector")),
+            'include_search': BetterBooleanField(
+                "Search Box", default=False,
+                description=(
+                    "Whether to include a client side search box")),
             'show_bubbles': BetterBooleanField(
                 "Show Bubbles", default=False,
                 description=(

diff --git a/panoramix/static/widgets/viz_table.js b/panoramix/static/widgets/viz_table.js
@@ -4,20 +4,56 @@ px.registerWidget('table', function(data_attribute) {
   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();
+    $.getJSON(data_attribute.json_endpoint, function(json){
+      var data = json.data;
+      var metrics = json.form_data.metrics;
+      function col(c){
+        arr = [];
+        for (var i=0; i<data.records.length; i++){
+          arr.push(json.data.records[i][c]);
+        }
+        return arr;
       }
-      else{
-        var table = token.find('table').DataTable({
-          paging: false,
-          searching: false,
-        });
-        table.column('-1').order( 'desc' ).draw();
+      maxes = {};
+      for (var i=0; i<metrics.length; i++){
+        maxes[metrics[i]] = d3.max(col(metrics[i]));
       }
+
+      var table = d3.select('#' + token_name).append('table')
+        .attr('class', 'dataframe table table-striped table-bordered table-condensed table-hover');
+      table.append('thead').append('tr')
+       .selectAll('th')
+       .data(data.columns).enter()
+       .append('th')
+       .text(function(d){return d});
+      table.append('tbody')
+       .selectAll('tr')
+       .data(data.records).enter()
+       .append('tr')
+       .selectAll('td')
+       .data(function(row, i) {
+          return data.columns.map(function(c) {return [c, row];});
+       }).enter()
+       .append('td')
+       .style('background-image', function(d){
+          var perc = Math.round((d[1][d[0]] / maxes[d[0]]) * 100);
+          if (perc !== NaN)
+            return "linear-gradient(to right, lightgrey, lightgrey " + perc + "%, rgba(0,0,0,0) " + perc + "%"
+       })
+       .html(function(d){return d[1][d[0]]});
+      var datatable = token.find('table').DataTable({
+        paging: false,
+        searching: data_attribute.form_data.include_search,
+      });
+      // Sorting table by main column
+      if (data_attribute.form_data.metrics.length > 0) {
+        var main_metric = data_attribute.form_data.metrics[0];
+        datatable.column(data.columns.indexOf(main_metric)).order( 'desc' ).draw();
+      }
+      done(json);
+    }).fail(function(xhr){
+      var err = '<div class="alert alert-danger">' + xhr.responseText  + '</div>';
+      token.html(err);
       token.show();
       done();
     });
@@ -27,5 +63,4 @@ px.registerWidget('table', function(data_attribute) {
     render: refresh,
     resize: refresh,
   };
-
 });
diff --git a/panoramix/viz.py b/panoramix/viz.py
@@ -242,7 +242,8 @@ class TableViz(BaseViz):
         'fields': (
             'granularity',
             ('since', 'until'),
-            'row_limit'
+            'row_limit',
+            ('include_search', None),
         )
     },
     {
@@ -261,16 +262,13 @@ class TableViz(BaseViz):
     css_files = ['lib/dataTables/dataTables.bootstrap.css']
     is_timeseries = False
     js_files = [
+        'lib/d3.min.js',
         'lib/dataTables/jquery.dataTables.min.js',
         'lib/dataTables/dataTables.bootstrap.js',
         'widgets/viz_table.js',
     ]
     css_files = ['widgets/viz_table.css']
 
-    @property
-    def json_endpoint(self):
-        return self.get_url(async='true', standalone='true', skip_libs='true')
-
     def query_obj(self):
         d = super(TableViz, self).query_obj()
         fd = self.form_data
@@ -291,10 +289,15 @@ def get_df(self):
                 self.form_data.get("granularity") == "all" and
                 'timestamp' in df):
             del df['timestamp']
-        for m in self.metrics:
-            df[m + '__perc'] = np.rint((df[m] / np.max(df[m])) * 100)
         return df
 
+    def get_json_data(self):
+        df = self.get_df()
+        return dumps(dict(
+            records=df.to_dict(orient="records"),
+            columns=df.columns,
+        ))
+
 
 class PivotTableViz(BaseViz):
     viz_type = "pivot_table"