mirror of https://github.com/apache/superset.git
Adding volume indicators on filter box
This commit is contained in:
parent
07df0f109f
commit
ef14c21281
|
@ -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
|
||||
|
|
|
@ -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();
|
||||
}
|
||||
|
||||
|
|
|
@ -0,0 +1,4 @@
|
|||
.select2-highlighted>.filter_box {
|
||||
background-color: transparent;
|
||||
border: 1px dashed black;
|
||||
}
|
|
@ -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();
|
||||
})
|
||||
|
|
|
@ -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 @@ class FilterBoxViz(BaseViz):
|
|||
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):
|
||||
|
|
Loading…
Reference in New Issue