2015-10-02 20:08:01 -04:00
|
|
|
var px = (function() {
|
|
|
|
|
2015-12-22 11:12:47 -05:00
|
|
|
var visualizations = {};
|
2015-12-21 10:58:20 -05:00
|
|
|
var dashboard = undefined;
|
2015-10-02 20:08:01 -04:00
|
|
|
|
2015-12-20 11:33:08 -05:00
|
|
|
var Slice = function(data, dashboard){
|
|
|
|
var timer;
|
2015-12-14 19:38:54 -05:00
|
|
|
var token = $('#' + data.token);
|
2015-12-20 16:54:40 -05:00
|
|
|
var container_id = data.token + '_con';
|
|
|
|
var selector = '#' + container_id;
|
2015-12-20 11:33:08 -05:00
|
|
|
var container = $(selector);
|
2015-12-20 18:04:16 -05:00
|
|
|
var slice_id = data.slice_id;
|
2015-10-02 20:08:01 -04:00
|
|
|
var name = data['viz_name'];
|
2015-12-14 19:38:54 -05:00
|
|
|
var dttm = 0;
|
|
|
|
var timer;
|
|
|
|
var stopwatch = function () {
|
|
|
|
dttm += 10;
|
|
|
|
$('#timer').text(Math.round(dttm/10)/100 + " sec");
|
|
|
|
}
|
2015-12-20 11:33:08 -05:00
|
|
|
slice = {
|
2015-12-21 00:49:59 -05:00
|
|
|
jsonEndpoint: function() {
|
|
|
|
// Shallow copy
|
|
|
|
var form_data = jQuery.extend({}, data.form_data);
|
|
|
|
for (var k in form_data){
|
|
|
|
if (form_data[k]==null){
|
|
|
|
delete form_data[k];
|
|
|
|
}
|
|
|
|
}
|
|
|
|
form_data['json'] = true;
|
|
|
|
if (dashboard !== undefined){
|
|
|
|
for (var f in dashboard.filters) {
|
|
|
|
if (slice_id !== f){
|
2015-12-22 18:52:15 -05:00
|
|
|
form_data['extra_filters'] = JSON.stringify(dashboard.filters)
|
2015-12-21 00:49:59 -05:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
form_data['flt_op_0'] = '';
|
|
|
|
form_data['flt_eq_0'] = '';
|
|
|
|
form_data['flt_col_0'] = '';
|
|
|
|
var parser = document.createElement('a');
|
|
|
|
parser.href = data.json_endpoint;
|
|
|
|
var endpoint = parser.pathname + '?' + $.param(form_data, true);
|
|
|
|
return endpoint;
|
|
|
|
},
|
2015-12-18 18:08:09 -05:00
|
|
|
done: function (data) {
|
2015-12-14 19:38:54 -05:00
|
|
|
clearInterval(timer);
|
2015-12-20 11:33:08 -05:00
|
|
|
token.find("img.loading").hide()
|
|
|
|
container.show();
|
2015-12-14 19:38:54 -05:00
|
|
|
if(data !== undefined)
|
|
|
|
$("#query_container").html(data.query);
|
|
|
|
$('#timer').removeClass('btn-warning');
|
|
|
|
$('span.query').removeClass('disabled');
|
|
|
|
$('#timer').addClass('btn-success');
|
2015-12-18 18:08:09 -05:00
|
|
|
},
|
2015-12-18 18:21:10 -05:00
|
|
|
error: function (msg) {
|
2015-12-18 18:08:09 -05:00
|
|
|
clearInterval(timer);
|
|
|
|
token.find("img.loading").hide();
|
2015-12-18 18:21:10 -05:00
|
|
|
var err = '<div class="alert alert-danger">' + msg + '</div>';
|
2015-12-20 11:33:08 -05:00
|
|
|
container.html(err);
|
2015-12-20 16:54:40 -05:00
|
|
|
container.show();
|
2015-12-18 18:08:09 -05:00
|
|
|
$('#timer').removeClass('btn-warning');
|
|
|
|
$('span.query').removeClass('disabled');
|
2015-12-18 18:21:10 -05:00
|
|
|
$('#timer').addClass('btn-danger');
|
2015-12-20 11:33:08 -05:00
|
|
|
},
|
|
|
|
data: data,
|
|
|
|
container: container,
|
2015-12-20 16:54:40 -05:00
|
|
|
container_id: container_id,
|
2015-12-20 11:33:08 -05:00
|
|
|
selector: selector,
|
2015-12-14 19:38:54 -05:00
|
|
|
render: function() {
|
2015-12-20 11:33:08 -05:00
|
|
|
token.find("img.loading").show();
|
|
|
|
container.hide();
|
2015-12-21 00:49:59 -05:00
|
|
|
container.html('');
|
2015-12-14 19:38:54 -05:00
|
|
|
timer = setInterval(stopwatch, 10);
|
2015-12-21 10:58:20 -05:00
|
|
|
viz.render();
|
2015-12-14 19:38:54 -05:00
|
|
|
},
|
|
|
|
resize: function() {
|
2015-12-21 10:58:20 -05:00
|
|
|
token.find("img.loading").show();
|
|
|
|
container.hide();
|
|
|
|
container.html('');
|
|
|
|
viz.render();
|
|
|
|
viz.resize();
|
2015-12-20 11:33:08 -05:00
|
|
|
},
|
|
|
|
addFilter: function(col, vals) {
|
|
|
|
if(dashboard !== undefined)
|
|
|
|
dashboard.addFilter(slice_id, col, vals);
|
2015-12-14 19:38:54 -05:00
|
|
|
},
|
2015-12-21 00:49:59 -05:00
|
|
|
clearFilter: function() {
|
|
|
|
if(dashboard !== undefined)
|
|
|
|
delete dashboard.clearFilter(slice_id);
|
|
|
|
},
|
2015-12-14 19:38:54 -05:00
|
|
|
};
|
2015-12-22 11:12:47 -05:00
|
|
|
var viz = visualizations[data.form_data.viz_type](slice);
|
2015-12-20 11:33:08 -05:00
|
|
|
slice['viz'] = viz;
|
|
|
|
return slice;
|
|
|
|
}
|
|
|
|
|
2015-12-21 10:58:20 -05:00
|
|
|
var Dashboard = function(id){
|
2015-12-20 11:33:08 -05:00
|
|
|
var dash = {
|
|
|
|
slices: [],
|
|
|
|
filters: {},
|
2015-12-21 10:58:20 -05:00
|
|
|
id: id,
|
2015-12-20 11:33:08 -05:00
|
|
|
addFilter: function(slice_id, field, values) {
|
|
|
|
this.filters[slice_id] = [field, values];
|
2015-12-21 00:49:59 -05:00
|
|
|
this.refreshExcept(slice_id);
|
|
|
|
},
|
|
|
|
refreshExcept: function(slice_id) {
|
2015-12-20 11:33:08 -05:00
|
|
|
this.slices.forEach(function(slice){
|
|
|
|
if(slice.data.slice_id != slice_id){
|
2015-12-20 18:04:16 -05:00
|
|
|
slice.render();
|
2015-12-20 11:33:08 -05:00
|
|
|
}
|
|
|
|
});
|
2015-12-21 00:49:59 -05:00
|
|
|
},
|
|
|
|
clearFilter: function(slice_id) {
|
|
|
|
delete this.filters[slice_id];
|
|
|
|
this.refreshExcept(slice_id);
|
2015-12-20 11:33:08 -05:00
|
|
|
},
|
2015-12-21 10:58:20 -05:00
|
|
|
getSlice: function(slice_id) {
|
|
|
|
for(var i=0; i<this.slices.length; i++){
|
|
|
|
if (this.slices[i].data.slice_id == slice_id)
|
|
|
|
return this.slices[i];
|
|
|
|
}
|
|
|
|
}
|
2015-12-20 11:33:08 -05:00
|
|
|
}
|
|
|
|
$('.dashboard li.widget').each(function() {
|
|
|
|
var data = $(this).data('slice');
|
|
|
|
var slice = Slice(data, dash);
|
|
|
|
$(this).find('a.refresh').click(function(){
|
|
|
|
slice.render();
|
|
|
|
});
|
|
|
|
dash.slices.push(slice);
|
|
|
|
slice.render();
|
|
|
|
});
|
2015-12-21 10:58:20 -05:00
|
|
|
dashboard = dash;
|
2015-12-20 11:33:08 -05:00
|
|
|
return dash;
|
|
|
|
}
|
|
|
|
|
|
|
|
function registerViz(name, initViz) {
|
2015-12-22 11:12:47 -05:00
|
|
|
|
2015-12-20 11:33:08 -05:00
|
|
|
visualizations[name] = initViz;
|
2015-10-02 20:08:01 -04:00
|
|
|
}
|
|
|
|
|
2015-12-20 11:33:08 -05:00
|
|
|
function initExploreView() {
|
2015-12-14 19:38:54 -05:00
|
|
|
function getParam(name) {
|
|
|
|
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
|
|
|
|
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
|
|
|
|
results = regex.exec(location.search);
|
|
|
|
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
|
2015-12-21 10:58:20 -05:00
|
|
|
}
|
2015-10-01 20:51:52 -04:00
|
|
|
|
2015-12-21 10:58:20 -05:00
|
|
|
$(".select2").select2({dropdownAutoWidth : true});
|
|
|
|
$(".select2Sortable").select2();
|
|
|
|
$(".select2Sortable").select2Sortable();
|
|
|
|
$("form").show();
|
|
|
|
$('[data-toggle="tooltip"]').tooltip({container: 'body'});
|
2015-10-01 20:51:52 -04:00
|
|
|
|
2015-12-21 10:58:20 -05:00
|
|
|
function set_filters(){
|
|
|
|
for (var i = 1; i < 10; i++){
|
|
|
|
var eq = getParam("flt_eq_" + i);
|
|
|
|
if (eq != ''){
|
|
|
|
add_filter(i);
|
|
|
|
}
|
2015-10-01 20:51:52 -04:00
|
|
|
}
|
|
|
|
}
|
2015-12-21 10:58:20 -05:00
|
|
|
set_filters();
|
2015-10-01 20:51:52 -04:00
|
|
|
|
2015-12-21 10:58:20 -05:00
|
|
|
function add_filter(i) {
|
|
|
|
cp = $("#flt0").clone();
|
|
|
|
$(cp).appendTo("#filters");
|
|
|
|
$(cp).show();
|
|
|
|
if (i != undefined){
|
|
|
|
$(cp).find("#flt_eq_0").val(getParam("flt_eq_" + i));
|
|
|
|
$(cp).find("#flt_op_0").val(getParam("flt_op_" + i));
|
|
|
|
$(cp).find("#flt_col_0").val(getParam("flt_col_" + i));
|
|
|
|
}
|
|
|
|
$(cp).find('select').select2();
|
|
|
|
$(cp).find('.remove').click(function() {
|
|
|
|
$(this).parent().parent().remove();
|
|
|
|
});
|
2015-10-01 20:51:52 -04:00
|
|
|
}
|
|
|
|
|
2015-12-21 10:58:20 -05:00
|
|
|
function druidify(){
|
|
|
|
var i = 1;
|
|
|
|
// Assigning the right id to form elements in filters
|
|
|
|
$("#filters > div").each(function() {
|
|
|
|
$(this).attr("id", function() {return "flt_" + i;})
|
|
|
|
$(this).find("#flt_col_0")
|
|
|
|
.attr("id", function() {return "flt_col_" + i;})
|
|
|
|
.attr("name", function() {return "flt_col_" + i;});
|
|
|
|
$(this).find("#flt_op_0")
|
|
|
|
.attr("id", function() {return "flt_op_" + i;})
|
|
|
|
.attr("name", function() {return "flt_op_" + i;});
|
|
|
|
$(this).find("#flt_eq_0")
|
|
|
|
.attr("id", function() {return "flt_eq_" + i;})
|
|
|
|
.attr("name", function() {return "flt_eq_" + i;});
|
|
|
|
i++;
|
|
|
|
});
|
|
|
|
$("#query").submit();
|
2015-12-04 12:30:43 -05:00
|
|
|
}
|
2015-10-01 20:51:52 -04:00
|
|
|
|
2015-12-21 10:58:20 -05:00
|
|
|
$("#plus").click(add_filter);
|
|
|
|
$("#btn_save").click(function () {
|
|
|
|
var slice_name = prompt("Name your slice!");
|
|
|
|
if (slice_name != "" && slice_name != null) {
|
|
|
|
$("#slice_name").val(slice_name);
|
|
|
|
$("#action").val("save");
|
|
|
|
druidify();
|
|
|
|
}
|
2015-10-01 20:51:52 -04:00
|
|
|
});
|
2015-12-21 10:58:20 -05:00
|
|
|
$("#btn_overwrite").click(function () {
|
|
|
|
var flag = confirm("Overwrite slice [" + $("#slice_name").val() + "] !?");
|
|
|
|
if (flag) {
|
|
|
|
$("#action").val("overwrite");
|
|
|
|
druidify();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
add_filter();
|
|
|
|
$(".druidify").click(druidify);
|
|
|
|
|
|
|
|
function create_choices(term, data) {
|
|
|
|
var filtered = $(data).filter(function() {
|
|
|
|
return this.text.localeCompare(term) === 0;
|
|
|
|
});
|
|
|
|
if (filtered.length === 0) {
|
|
|
|
return {id: term, text: term};
|
|
|
|
}
|
2015-10-01 20:51:52 -04:00
|
|
|
}
|
2015-12-21 10:58:20 -05:00
|
|
|
function initSelectionToValue(element, callback) {
|
|
|
|
callback({id: element.val(), text: element.val()});
|
2015-11-03 12:52:19 -05:00
|
|
|
}
|
2015-12-21 10:58:20 -05:00
|
|
|
function list_data(arr) {
|
|
|
|
var obj = [];
|
|
|
|
for (var i=0; i<arr.length; i++){
|
|
|
|
obj.push({id: arr[i], text: arr[i]});
|
|
|
|
}
|
|
|
|
return obj;
|
2015-12-12 21:55:56 -05:00
|
|
|
}
|
2015-12-21 10:58:20 -05:00
|
|
|
$(".select2_freeform").each(function(){
|
|
|
|
parent = $(this).parent();
|
|
|
|
var name = $(this).attr('name');
|
|
|
|
var l = [];
|
|
|
|
var selected = '';
|
|
|
|
for(var i=0; i<this.options.length; i++) {
|
|
|
|
l.push({id: this.options[i].value, text: this.options[i].text});
|
|
|
|
if(this.options[i].selected){
|
|
|
|
selected = this.options[i].value;
|
|
|
|
}
|
2015-10-01 20:51:52 -04:00
|
|
|
}
|
2015-12-21 10:58:20 -05:00
|
|
|
obj = parent.append(
|
|
|
|
'<input class="' + $(this).attr('class') + '" name="'+ name +'" type="text" value="' + selected + '">');
|
|
|
|
$("input[name='" + name +"']")
|
|
|
|
.select2({
|
|
|
|
createSearchChoice: create_choices,
|
|
|
|
initSelection: initSelectionToValue,
|
|
|
|
multiple: false,
|
|
|
|
data: l,
|
|
|
|
});
|
|
|
|
$(this).remove();
|
2015-10-01 20:51:52 -04:00
|
|
|
});
|
2015-12-21 10:58:20 -05:00
|
|
|
}
|
2015-12-20 11:33:08 -05:00
|
|
|
|
2015-12-21 10:58:20 -05:00
|
|
|
function initDashboardView() {
|
|
|
|
var gridster = $(".gridster ul").gridster({
|
|
|
|
widget_margins: [5, 5],
|
|
|
|
widget_base_dimensions: [100, 100],
|
|
|
|
draggable: {
|
|
|
|
handle: '.drag',
|
|
|
|
},
|
|
|
|
resize: {
|
|
|
|
enabled: true,
|
|
|
|
stop: function(e, ui, element) {
|
|
|
|
var slice_data = $(element).data('slice');
|
|
|
|
dashboard.getSlice(slice_data.slice_id).resize();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
serialize_params: function(_w, wgd) {
|
|
|
|
return {
|
|
|
|
slice_id: $(_w).attr('slice_id'),
|
|
|
|
col: wgd.col,
|
|
|
|
row: wgd.row,
|
|
|
|
size_x: wgd.size_x,
|
|
|
|
size_y: wgd.size_y
|
|
|
|
};
|
|
|
|
},
|
|
|
|
}).data('gridster');
|
|
|
|
$("div.gridster").css('visibility', 'visible');
|
|
|
|
$("#savedash").click(function() {
|
|
|
|
var data = {
|
|
|
|
positions: gridster.serialize(),
|
|
|
|
css: $("#dash_css").val()
|
|
|
|
};
|
|
|
|
$.ajax({
|
|
|
|
type: "POST",
|
|
|
|
url: '/panoramix/save_dash/' + dashboard.id + '/',
|
|
|
|
data: {'data': JSON.stringify(data)},
|
|
|
|
success: function() {alert("Saved!")},
|
|
|
|
error: function() {alert("Error :(")},
|
|
|
|
});
|
|
|
|
});
|
|
|
|
$("a.closeslice").click(function() {
|
|
|
|
var li = $(this).parents("li");
|
|
|
|
gridster.remove_widget(li);
|
|
|
|
});
|
|
|
|
$("table.slice_header").mouseover(function() {
|
|
|
|
$(this).find("td.icons nobr").show();
|
|
|
|
});
|
|
|
|
$("table.slice_header").mouseout(function() {
|
|
|
|
$(this).find("td.icons nobr").hide();
|
|
|
|
});
|
|
|
|
$("#dash_css").on("keyup", function(){
|
|
|
|
css = $(this).val();
|
|
|
|
$("#user_style").html(css);
|
|
|
|
});
|
2015-12-20 11:33:08 -05:00
|
|
|
|
2015-12-21 10:58:20 -05:00
|
|
|
// this sets the z-index for left side boxes higher
|
|
|
|
$('li.slice').each(function() {
|
|
|
|
current_row = $(this).attr('data-col');
|
|
|
|
$( this ).css('z-index', 100 - current_row);
|
|
|
|
});
|
2015-12-20 11:33:08 -05:00
|
|
|
|
2015-12-21 10:58:20 -05:00
|
|
|
// this makes the whole chart fit within the dashboard div
|
|
|
|
$("div.chart").each(function() {
|
|
|
|
$(this).css('height', '95%');
|
|
|
|
});
|
|
|
|
}
|
2015-10-02 20:08:01 -04:00
|
|
|
|
|
|
|
// Export public functions
|
|
|
|
return {
|
2015-12-20 11:33:08 -05:00
|
|
|
registerViz: registerViz,
|
|
|
|
Slice: Slice,
|
|
|
|
Dashboard: Dashboard,
|
|
|
|
initExploreView: initExploreView,
|
|
|
|
initDashboardView: initDashboardView,
|
2015-10-02 20:08:01 -04:00
|
|
|
}
|
|
|
|
})();
|