From ef14c212814179ccc03cea701d14517bcd93f08f Mon Sep 17 00:00:00 2001
From: Maxime Beauchemin <maximebeauchemin@gmail.com>
Date: Sun, 27 Dec 2015 09:46:07 -0800
Subject: [PATCH] Adding volume indicators on filter box

---
 README.md                                   |  2 +-
 panoramix/static/panoramix.js               |  2 +-
 panoramix/static/widgets/viz_filter_box.css |  4 +++
 panoramix/static/widgets/viz_filter_box.js  | 34 ++++++++++++++++-----
 panoramix/viz.py                            | 10 ++++--
 5 files changed, 40 insertions(+), 12 deletions(-)
 create mode 100644 panoramix/static/widgets/viz_filter_box.css

diff --git a/README.md b/README.md
index bf2f4434421b..42edbf3757cf 100644
--- a/README.md
+++ b/README.md
@@ -16,7 +16,7 @@ It empowers its user to perform **analytics at the speed of thought**.
 
 Panoramix provides:
 * A quick way to intuitively visualize datasets
-* Create and share simple dashboards
+* Create and share interactive dashboards
 * A rich set of visualizations to analyze your data, as well as a flexible
     way to extend the capabilities
 * An extensible, high granularity security model allowing intricate rules
diff --git a/panoramix/static/panoramix.js b/panoramix/static/panoramix.js
index f663b501f903..99a455bd14d9 100644
--- a/panoramix/static/panoramix.js
+++ b/panoramix/static/panoramix.js
@@ -101,7 +101,6 @@ var px = (function() {
       addFilter: function(slice_id, filters) {
         this.filters[slice_id] = filters;
         this.refreshExcept(slice_id);
-        console.log(this.filters);
       },
       refreshExcept: function(slice_id) {
         this.slices.forEach(function(slice){
@@ -197,6 +196,7 @@ var px = (function() {
 
     function druidify(){
       prepForm();
+      $('div.alert').remove();
       slice.render();
     }
 
diff --git a/panoramix/static/widgets/viz_filter_box.css b/panoramix/static/widgets/viz_filter_box.css
new file mode 100644
index 000000000000..e8b38904a14c
--- /dev/null
+++ b/panoramix/static/widgets/viz_filter_box.css
@@ -0,0 +1,4 @@
+.select2-highlighted>.filter_box {
+    background-color: transparent;
+    border: 1px dashed black;
+}
diff --git a/panoramix/static/widgets/viz_filter_box.js b/panoramix/static/widgets/viz_filter_box.js
index bbcd6b7caed0..417614095dd3 100644
--- a/panoramix/static/widgets/viz_filter_box.js
+++ b/panoramix/static/widgets/viz_filter_box.js
@@ -22,29 +22,47 @@ px.registerViz('filter_box', function(slice) {
         .append('div')
         .classed('padded', true);
       $.getJSON(slice.jsonEndpoint(), function(payload) {
+        var maxes = {};
         for (filter in payload.data){
-          data = payload.data[filter];
+          var data = payload.data[filter];
+          maxes[filter] = d3.max(data, function(d){return d.metric});
           var id = 'fltbox__' + filter;
 
           var div = container.append('div');
           div.append("label").text(filter);
           var sel = div
-            .append('select')
+            .append('div')
             .attr('name', filter)
+            .classed('form-control', true)
             .attr('multiple', '')
             .attr('id', id);
 
-          sel.classed('select2_box_filter form-control', true);
-          sel.selectAll('option').data(data).enter()
-            .append('option')
-            .attr('value', function(d){return d[0];})
-            .text(function(d){return d[0];});
           $('#' + id).select2({
-            //allowClear: true,
             placeholder: "Select [" + filter + ']',
+            containment: 'parent',
             dropdownAutoWidth : true,
+            data:data,
+            multiple: true,
+            formatResult: function(result, container, query, escapeMarkup) {
+                var perc = Math.round((result.metric / maxes[result.filter]) * 100);
+                var style = 'padding: 2px 5px;';
+                style += "background-image: ";
+                style += "linear-gradient(to right, lightgrey, lightgrey " + perc + "%, rgba(0,0,0,0) " + perc + "%";
+
+                $(container).attr('style', 'padding: 0px; background: white;');
+                $(container).addClass('filter_box');
+                return '<div style="' + style + '"><span>' + result.text + '</span></div>';
+            },
           })
           .on('change', fltChanged);
+          /*
+           .style('background-image', function(d){
+              if (d.isMetric){
+                var perc = Math.round((d.val / maxes[d.col]) * 100);
+                return "linear-gradient(to right, lightgrey, lightgrey " + perc + "%, rgba(0,0,0,0) " + perc + "%";
+              }
+           })
+          */
         }
         slice.done();
       })
diff --git a/panoramix/viz.py b/panoramix/viz.py
index 4fa5fe9e217c..c8747fae2c19 100644
--- a/panoramix/viz.py
+++ b/panoramix/viz.py
@@ -1115,7 +1115,8 @@ class FilterBoxViz(BaseViz):
     js_files = [
         'lib/d3.min.js',
         'widgets/viz_filter_box.js']
-    css_files = []
+    css_files = [
+        'widgets/viz_filter_box.css']
     fieldsets = (
     {
         'label': None,
@@ -1149,7 +1150,12 @@ def get_df(self):
         for flt in filters:
             qry['groupby'] = [flt]
             df = super(FilterBoxViz, self).get_df(qry)
-            d[flt] = [row for row in df.itertuples(index=False)]
+            d[flt] = [
+                {'id': row[0],
+                'text': row[0],
+                'filter': flt,
+                'metric': row[1]}
+                for row in df.itertuples(index=False)]
         return d
 
     def get_json_data(self):