Skip to content

Commit

Permalink
Javascript refactor
Browse files Browse the repository at this point in the history
  • Loading branch information
@mistercrunch
mistercrunch committed Mar 1, 2016
1 parent e434cbe commit a68d742
Show file tree
Hide file tree
Showing 16 changed files with 533 additions and 476 deletions.
2 changes: 1 addition & 1 deletion panoramix/assets/javascripts/dashboard.js
View file
Expand Up @@ -31,7 +31,7 @@ var Dashboard = function (dashboardData) {
},
setFilter: function(slice_id, col, vals) {
console.log([slice_id, col, vals]);
this.addFilter(slice_id, col, vals, false)
this.addFilter(slice_id, col, vals, false);
},
addFilter: function(slice_id, col, vals, merge) {
if (merge === undefined) {
Expand Down
217 changes: 138 additions & 79 deletions panoramix/assets/javascripts/modules/panoramix.js
View file
@@ -1,31 +1,32 @@
var $ = require('jquery'), jQuery = $;
var $ = require('jquery'),
jQuery = $;
var d3 = require('d3');

// vis sources
var sourceMap = {
area: 'nvd3_vis.js',
bar: 'nvd3_vis.js',
bubble: 'nvd3_vis.js',
big_number: 'big_number.js',
compare: 'nvd3_vis.js',
dist_bar: 'nvd3_vis.js',
area: 'nvd3_vis.js',
bar: 'nvd3_vis.js',
bubble: 'nvd3_vis.js',
big_number: 'big_number.js',
compare: 'nvd3_vis.js',
dist_bar: 'nvd3_vis.js',
directed_force: 'directed_force.js',
filter_box: 'filter_box.js',
heatmap: 'heatmap.js',
iframe: 'iframe.js',
line: 'nvd3_vis.js',
markup: 'markup.js',
para: 'parallel_coordinates.js',
pie: 'nvd3_vis.js',
pivot_table: 'pivot_table.js',
sankey: 'sankey.js',
sunburst: 'sunburst.js',
table: 'table.js',
word_cloud: 'word_cloud.js',
world_map: 'world_map.js',
filter_box: 'filter_box.js',
heatmap: 'heatmap.js',
iframe: 'iframe.js',
line: 'nvd3_vis.js',
markup: 'markup.js',
para: 'parallel_coordinates.js',
pie: 'nvd3_vis.js',
pivot_table: 'pivot_table.js',
sankey: 'sankey.js',
sunburst: 'sunburst.js',
table: 'table.js',
word_cloud: 'word_cloud.js',
world_map: 'world_map.js',
};

var color = function(){
var color = function() {
// Color related utility functions go in this object
var bnbColors = [
//rausch hackb kazan babu lima beach barol
Expand All @@ -38,116 +39,131 @@ var color = function(){
'fire': ['white', 'yellow', 'red', 'black'],
'white_black': ['white', 'black'],
'black_white': ['black', 'white'],
}
};
var colorBnb = function() {
// Color factory
var seen = {};
return function(s) {
// next line is for dashed series that should have the same color
s = s.replace('---', '');
if(seen[s] === undefined)
if (seen[s] === undefined)
seen[s] = Object.keys(seen).length;
return this.bnbColors[seen[s] % this.bnbColors.length];
};
};
var colorScalerFactory = function (colors, data, accessor){
var colorScalerFactory = function(colors, data, accessor) {
// Returns a linear scaler our of an array of color
if(!Array.isArray(colors))
if (!Array.isArray(colors)) {
colors = spectrums[colors];
if(data !== undefined)
var ext = d3.extent(data, accessor);
else
var ext = [0,1];
}

var ext = [0, 1];
if (data !== undefined) {
ext = d3.extent(data, accessor);
}

var points = [];
var chunkSize = (ext[1] - ext[0]) / colors.length;
$.each(colors, function(i, c){
points.push(i * chunkSize)
$.each(colors, function(i, c) {
points.push(i * chunkSize);
});
return d3.scale.linear().domain(points).range(colors);
}
};
return {
bnbColors: bnbColors,
category21: colorBnb(),
colorScalerFactory: colorScalerFactory,
}
};
};

var px = (function() {

var visualizations = {};
var dashboard = undefined;
var slice = undefined;
var dashboard;
var slice;

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, " "));
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

function UTC(dttm){
return new Date(dttm.getUTCFullYear(), dttm.getUTCMonth(), dttm.getUTCDate(), dttm.getUTCHours(), dttm.getUTCMinutes(), dttm.getUTCSeconds());
function UTC(dttm) {
return new Date(dttm.getUTCFullYear(), dttm.getUTCMonth(), dttm.getUTCDate(), dttm.getUTCHours(), dttm.getUTCMinutes(), dttm.getUTCSeconds());
}
var tickMultiFormat = d3.time.format.multi([
[".%L", function(d) { return d.getMilliseconds(); }], // If there are millisections, show only them
[":%S", function(d) { return d.getSeconds(); }], // If there are seconds, show only them
["%a %b %d, %I:%M %p", function(d) { return d.getMinutes()!=0; }], // If there are non-zero minutes, show Date, Hour:Minute [AM/PM]
["%a %b %d, %I %p", function(d) { return d.getHours() != 0; }], // If there are hours that are multiples of 3, show date and AM/PM
["%a %b %d, %Y", function(d) { return d.getDate() != 1; }], // If not the first of the month, do "month day, year."
["%B %Y", function(d) { return d.getMonth() != 0 && d.getDate() == 1; }], // If the first of the month, do "month day, year."
["%Y", function(d) { return true; }] // fall back on month, year
[".%L", function(d) {
return d.getMilliseconds();
}], // If there are millisections, show only them
[":%S", function(d) {
return d.getSeconds();
}], // If there are seconds, show only them
["%a %b %d, %I:%M %p", function(d) {
return d.getMinutes() !== 0;
}], // If there are non-zero minutes, show Date, Hour:Minute [AM/PM]
["%a %b %d, %I %p", function(d) {
return d.getHours() !== 0;
}], // If there are hours that are multiples of 3, show date and AM/PM
["%a %b %d, %Y", function(d) {
return d.getDate() !== 1;
}], // If not the first of the month, do "month day, year."
["%B %Y", function(d) {
return d.getMonth() !== 0 && d.getDate() === 1;
}], // If the first of the month, do "month day, year."
["%Y", function(d) {
return true;
}] // fall back on month, year
]);

function formatDate(dttm) {
var d = UTC(new Date(dttm));
//d = new Date(d.getTime() - 1 * 60 * 60 * 1000);
return tickMultiFormat(d);
}

function timeFormatFactory(d3timeFormat) {
var f = d3.time.format(d3timeFormat)
return function(dttm){
var f = d3.time.format(d3timeFormat);
return function(dttm) {
var d = UTC(new Date(dttm));
return f(d);
};
}

var Slice = function(data, dashboard){
var Slice = function(data, dashboard) {
var timer;
var token = $('#' + data.token);
var container_id = data.token + '_con';
var selector = '#' + container_id;
var container = $(selector);
var slice_id = data.slice_id;
var name = data['viz_name'];
var name = data.viz_name;
var dttm = 0;
var timer;
var stopwatch = function () {
var stopwatch = function() {
dttm += 10;
var num = dttm / 1000;
$('#timer').text(num.toFixed(2) + " sec");
}
};
var qrystr = '';
var always = function(data) {
//Private f, runs after done and error
clearInterval(timer);
$('#timer').removeClass('btn-warning');
}
};
slice = {
data: data,
container: container,
container_id: container_id,
selector: selector,
querystring: function(){
querystring: function() {
var parser = document.createElement('a');
parser.href = data.json_endpoint;
if (dashboard !== undefined){
if (dashboard !== undefined) {
var flts = encodeURIComponent(JSON.stringify(dashboard.filters));
qrystr = parser.search + "&extra_filters=" + flts;
}
else if ($('#query').length == 0){
} else if ($('#query').length === 0) {
qrystr = parser.search;
}
else {
} else {
qrystr = '?' + $('#query').serialize();
}
return qrystr;
Expand All @@ -158,34 +174,41 @@ var px = (function() {
var endpoint = parser.pathname + this.querystring() + "&json=true";
return endpoint;
},
done: function (data) {
done: function(data) {
clearInterval(timer);
token.find("img.loading").hide()
token.find("img.loading").hide();
container.show();
if(data !== undefined)
if (data !== undefined) {
$("#query_container").html(data.query);
}
$('#timer').removeClass('btn-warning');
$('#timer').addClass('btn-success');
$('span.query').removeClass('disabled');
$('#json').click(function(){window.location=data.json_endpoint});
$('#standalone').click(function(){window.location=data.standalone_endpoint});
$('#csv').click(function(){window.location=data.csv_endpoint});
$('#json').click(function() {
window.location = data.json_endpoint;
});
$('#standalone').click(function() {
window.location = data.standalone_endpoint;
});
$('#csv').click(function() {
window.location = data.csv_endpoint;
});
$('.btn-group.results span').removeAttr('disabled');
always(data);
},
error: function (msg) {
error: function(msg) {
token.find("img.loading").hide();
var err = '<div class="alert alert-danger">' + msg + '</div>';
var err = '<div class="alert alert-danger">' + msg + '</div>';
container.html(err);
container.show();
$('span.query').removeClass('disabled');
$('#timer').addClass('btn-danger');
always(data);
},
width: function(){
width: function() {
return token.width();
},
height: function(){
height: function() {
var others = 0;
var widget = container.parents('.widget');
var slice_description = widget.find('.slice_description');
Expand All @@ -195,7 +218,7 @@ var px = (function() {
return widget.height() - others;
},
render: function() {
$('.btn-group.results span').attr('disabled','disabled');
$('.btn-group.results span').attr('disabled', 'disabled');
token.find("img.loading").show();
container.hide();
container.html('');
Expand All @@ -213,27 +236,27 @@ var px = (function() {
this.viz.resize();
},
addFilter: function(col, vals) {
if(dashboard !== undefined)
if (dashboard !== undefined)
dashboard.addFilter(slice_id, col, vals);
},
setFilter: function(col, vals) {
if(dashboard !== undefined)
if (dashboard !== undefined)
dashboard.setFilter(slice_id, col, vals);
},
clearFilter: function() {
if(dashboard !== undefined)
if (dashboard !== undefined)
delete dashboard.clearFilter(slice_id);
},
removeFilter: function(col, vals) {
if(dashboard !== undefined)
if (dashboard !== undefined)
delete dashboard.removeFilter(slice_id, col, vals);
},
};
var visType = data.form_data.viz_type;
px.registerViz(visType);
slice['viz'] = visualizations[data.form_data.viz_type](slice);
slice.viz = visualizations[data.form_data.viz_type](slice);
return slice;
}
};

function registerViz(name) {
var visSource = sourceMap[name];
Expand All @@ -243,12 +266,48 @@ var px = (function() {
if (typeof visFactory === 'function') {
visualizations[name] = visFactory;
}
}
else {
} else {
console.error("require(", visType, ") failed.");
}
}

function prepForm() {
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++;
});
}

function renderSlice() {
prepForm();
slice.render();
}

// Export public functions
return {
registerViz: registerViz,
Expand All @@ -257,7 +316,7 @@ var px = (function() {
timeFormatFactory: timeFormatFactory,
color: color(),
getParam: getParam,
}
};
})();

module.exports = px;

0 comments on commit a68d742

Please sign in to comment.