mirror of
https://github.com/apache/superset.git
synced 2024-09-17 11:09:47 -04:00
Preselect filters (#752)
* Preselect filters in filter boxes according to the get parameters * Use the JSX version in dashboard.html * Use default parameters in ES6 and fix the indent
This commit is contained in:
parent
65efe53bfc
commit
8cfe9e96b8
@ -2,6 +2,7 @@ var $ = window.$ = require('jquery');
|
||||
var jQuery = window.jQuery = $;
|
||||
var px = require('../modules/caravel.js');
|
||||
var d3 = require('d3');
|
||||
var urlLib = require('url');
|
||||
var showModal = require('../modules/utils.js').showModal;
|
||||
|
||||
import React from 'react';
|
||||
@ -39,16 +40,26 @@ var Dashboard = function (dashboardData) {
|
||||
});
|
||||
this.slices = sliceObjects;
|
||||
this.refreshTimer = null;
|
||||
this.loadPreSelectFilters();
|
||||
this.startPeriodicRender(0);
|
||||
this.bindResizeToWindowResize();
|
||||
},
|
||||
setFilter: function (slice_id, col, vals) {
|
||||
this.addFilter(slice_id, col, vals, false);
|
||||
},
|
||||
addFilter: function (slice_id, col, vals, merge) {
|
||||
if (merge === undefined) {
|
||||
merge = true;
|
||||
loadPreSelectFilters: function () {
|
||||
try {
|
||||
var filters = JSON.parse(px.getParam("preselect_filters") || "{}");
|
||||
for (var slice_id in filters) {
|
||||
for (var col in filters[slice_id]) {
|
||||
this.setFilter(slice_id, col, filters[slice_id][col], false, false);
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
},
|
||||
setFilter: function (slice_id, col, vals, refresh) {
|
||||
this.addFilter(slice_id, col, vals, false, refresh);
|
||||
},
|
||||
addFilter: function (slice_id, col, vals, merge = true, refresh = true) {
|
||||
if (!(slice_id in this.filters)) {
|
||||
this.filters[slice_id] = {};
|
||||
}
|
||||
@ -57,12 +68,22 @@ var Dashboard = function (dashboardData) {
|
||||
} else {
|
||||
this.filters[slice_id][col] = d3.merge([this.filters[slice_id][col], vals]);
|
||||
}
|
||||
if (refresh) {
|
||||
this.refreshExcept(slice_id);
|
||||
}
|
||||
this.updateFilterParamsInUrl();
|
||||
},
|
||||
readFilters: function () {
|
||||
// Returns a list of human readable active filters
|
||||
return JSON.stringify(this.filters, null, 4);
|
||||
},
|
||||
updateFilterParamsInUrl: function () {
|
||||
var urlObj = urlLib.parse(location.href, true);
|
||||
urlObj.query = urlObj.query || {};
|
||||
urlObj.query.preselect_filters = this.readFilters();
|
||||
urlObj.search = null;
|
||||
history.pushState(urlObj.query, window.title, urlLib.format(urlObj));
|
||||
},
|
||||
bindResizeToWindowResize: function () {
|
||||
var resizeTimer;
|
||||
var dash = this;
|
||||
@ -118,6 +139,7 @@ var Dashboard = function (dashboardData) {
|
||||
clearFilters: function (slice_id) {
|
||||
delete this.filters[slice_id];
|
||||
this.refreshExcept(slice_id);
|
||||
this.updateFilterParamsInUrl();
|
||||
},
|
||||
removeFilter: function (slice_id, col, vals) {
|
||||
if (slice_id in this.filters) {
|
||||
@ -132,6 +154,7 @@ var Dashboard = function (dashboardData) {
|
||||
}
|
||||
}
|
||||
this.refreshExcept(slice_id);
|
||||
this.updateFilterParamsInUrl();
|
||||
},
|
||||
getSlice: function (slice_id) {
|
||||
slice_id = parseInt(slice_id, 10);
|
||||
|
@ -203,11 +203,13 @@ var px = (function () {
|
||||
container: container,
|
||||
container_id: container_id,
|
||||
selector: selector,
|
||||
querystring: function () {
|
||||
querystring: function (params) {
|
||||
params = params || {};
|
||||
var parser = document.createElement('a');
|
||||
parser.href = data.json_endpoint;
|
||||
if (dashboard !== undefined) {
|
||||
var flts = encodeURIComponent(JSON.stringify(dashboard.filters));
|
||||
var flts = params.extraFilters === false ?
|
||||
'' : encodeURIComponent(JSON.stringify(dashboard.filters));
|
||||
qrystr = parser.search + "&extra_filters=" + flts;
|
||||
} else if ($('#query').length === 0) {
|
||||
qrystr = parser.search;
|
||||
@ -226,10 +228,13 @@ var px = (function () {
|
||||
};
|
||||
return Mustache.render(s, context);
|
||||
},
|
||||
jsonEndpoint: function () {
|
||||
jsonEndpoint: function (params) {
|
||||
params = params || {};
|
||||
var parser = document.createElement('a');
|
||||
parser.href = data.json_endpoint;
|
||||
var endpoint = parser.pathname + this.querystring();
|
||||
var endpoint = parser.pathname + this.querystring({
|
||||
extraFilters: params.extraFilters
|
||||
});
|
||||
endpoint += "&json=true";
|
||||
endpoint += "&force=" + this.force;
|
||||
return endpoint;
|
||||
@ -365,6 +370,11 @@ var px = (function () {
|
||||
dashboard.setFilter(slice_id, col, vals);
|
||||
}
|
||||
},
|
||||
getFilters: function (col, vals) {
|
||||
if (dashboard !== undefined) {
|
||||
return dashboard.filters[slice_id];
|
||||
}
|
||||
},
|
||||
clearFilter: function () {
|
||||
if (dashboard !== undefined) {
|
||||
delete dashboard.clearFilter(slice_id);
|
||||
|
@ -26,7 +26,12 @@ function filterBox(slice) {
|
||||
.append('div')
|
||||
.classed('padded', true);
|
||||
|
||||
$.getJSON(slice.jsonEndpoint(), function (payload) {
|
||||
var preSelectDict = slice.getFilters() || {};
|
||||
$.getJSON(slice.jsonEndpoint({
|
||||
// filter box should ignore the filters
|
||||
// otherwise there will be only a few options in the dropdown menu
|
||||
extraFilters: false
|
||||
}), function (payload) {
|
||||
var maxes = {};
|
||||
|
||||
for (var filter in payload.data) {
|
||||
@ -55,6 +60,11 @@ function filterBox(slice) {
|
||||
formatResult: select2Formatter
|
||||
})
|
||||
.on('change', fltChanged);
|
||||
|
||||
var preSelect = preSelectDict[filter];
|
||||
if (preSelect !== undefined) {
|
||||
filtersObj[filter].select2('val', preSelect);
|
||||
}
|
||||
}
|
||||
slice.done(payload);
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user