diff --git a/README.md b/README.md index bf2f4434421be..42edbf3757cff 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 f663b501f9030..99a455bd14d9c 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 0000000000000..e8b38904a14c2 --- /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 bbcd6b7caed07..417614095dd37 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 '