opensource/galaxy
3
0
Fork 0
mirror of https://github.com/galaxyproject/galaxy.git synced 2026-09-24 16:30:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

Charts: Unify multi-panel viewing

Browse Source
This commit is contained in:
Aysam Guerler
2014-06-11 13:57:13 -04:00
parent 65e5c8e825
commit fc248a33b6
9 changed files with 72 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
config/plugins/visualizations/charts/static/charts/jqplot/common/config.js
+16
View File
@@ -211,6 +211,22 @@ return {
value : 'false'
}
]
},
use_panels : {
title : 'Use multi-panels',
info : 'Would you like to separate your data into individual panels?',
type : 'radiobutton',
init : 'false',
data : [
{
label : 'Yes',
value : 'true'
},
{
label : 'No',
value : 'false'
}
]
}
}
};
config/plugins/visualizations/charts/static/charts/jqplot/common/wrapper.js
+14 -13
View File
@@ -26,17 +26,17 @@ return Backbone.View.extend(
var plot = new Tools.panelHelper({
app : this.app,
process_id : this.options.process_id,
canvas : this.options.canvas,
canvas_list : this.options.canvas_list,
chart : this.options.chart,
request_dictionary : this.options.request_dictionary,
render : function(groups, canvas) {
return self.render(groups, canvas)
render : function(canvas_id, groups) {
return self.render(canvas_id, groups)
}
});
},
// draw all data into a single canvas
render: function(groups, el_canvas) {
render: function(canvas_id, groups) {
// get parameters
var chart = this.options.chart;
var makeCategories = this.options.makeCategories;
@@ -45,13 +45,10 @@ return Backbone.View.extend(
// create configuration
var plot_config = configmaker(chart);
var plot_data = []
var plot_data = [];
// draw plot
try {
// canvas
var canvas = el_canvas[0];
// make custom categories call
this._makeAxes(plot_config, groups, chart.settings);
@@ -72,11 +69,15 @@ return Backbone.View.extend(
return false;
}
// Draw graph with default options, overwriting with passed options
// draw graph with default options, overwriting with passed options
function drawGraph (opts) {
el_canvas.empty();
var canvas = $('#' + canvas_id);
if(canvas.length == 0) {
return;
}
canvas.empty();
var plot_cnf = _.extend(_.clone(plot_config), opts || {});
return plot = $.jqplot('canvas', plot_data, plot_cnf);
return plot = $.jqplot(canvas_id, plot_data, plot_cnf);
}
// draw plot
@@ -84,7 +85,7 @@ return Backbone.View.extend(
// catch window resize event
var self = this;
$(window).resize(function () {
$(window).on('resize', function () {
drawGraph();
});
config/plugins/visualizations/charts/static/charts/nvd3/common/wrapper.js
+9 -5
View File
@@ -17,17 +17,17 @@ return Backbone.View.extend(
var plot = Tools.panelHelper({
app : this.app,
process_id : this.options.process_id,
canvas : this.options.canvas,
canvas_list : this.options.canvas_list,
chart : this.options.chart,
request_dictionary : this.options.request_dictionary,
render : function(groups, canvas) {
return self.render(groups, canvas)
render : function(canvas_id, groups) {
return self.render(canvas_id, groups)
}
});
},
// render
render : function(groups, canvas) {
render : function(canvas_id, groups) {
var chart = this.options.chart;
var type = this.options.type;
var makeConfig = this.options.makeConfig;
@@ -67,7 +67,11 @@ return Backbone.View.extend(
d3chart.yAxis.showMaxMin(chart.definition.showmaxmin);
// draw chart
canvas.datum(groups)
if ($('#' + canvas_id).length == 0) {
return;
}
var canvas = d3.select('#' + canvas_id);
canvas.datum(groups)
.call(d3chart);
// add zoom/pan handler
config/plugins/visualizations/charts/static/charts/nvd3/pie/wrapper.js
+12 -8
View File
@@ -11,19 +11,17 @@ return Backbone.View.extend(
},
// render
draw : function(process_id, chart, request_dictionary)
{
// request data
draw : function(process_id, chart, request_dictionary) {
// setup handler
var self = this;
this.app.datasets.request(request_dictionary, function() {
request_dictionary.success = function() {
// loop through data groups
for (var group_index in request_dictionary.groups) {
// get group
var group = request_dictionary.groups[group_index];
// draw group
self._draw_group(chart, group, self.options.canvas[group_index]);
self._draw_group(chart, group, self.options.canvas_list[group_index]);
}
// set chart state
@@ -31,12 +29,18 @@ return Backbone.View.extend(
// unregister process
chart.deferred.done(process_id);
});
}
// request data
this.app.datasets.request(request_dictionary);
},
// draw group
_draw_group: function(chart, group, canvas) {
_draw_group: function(chart, group, canvas_id) {
try {
// get canvas
var canvas = d3.select('#' + canvas_id);
// add title
var title = canvas.append('text');
config/plugins/visualizations/charts/static/charts/tools.js
+11 -9
View File
@@ -12,7 +12,7 @@ function panelHelper (options)
var chart = options.chart;
var request_dictionary = options.request_dictionary;
var render = options.render;
var canvas = options.canvas;
var canvas_list = options.canvas_list;
var app = options.app;
// get request size from chart
@@ -22,17 +22,12 @@ function panelHelper (options)
request_dictionary.success = function() {
try {
// check if this chart has multiple panels
if (!chart.definition.use_panels && chart.settings.get('use_panels') !== 'true') {
// draw all groups into a single panel
if (render(request_dictionary.groups, canvas[0])) {
chart.state('ok', 'Chart drawn.');
}
} else {
if (chart.definition.use_panels || chart.settings.get('use_panels') === 'true') {
// draw groups in separate panels
var valid = true;
for (var group_index in request_dictionary.groups) {
var group = request_dictionary.groups[group_index];
if (!render([group], canvas[group_index])) {
if (!render(canvas_list[group_index], [group])) {
valid = false;
break;
}
@@ -40,6 +35,11 @@ function panelHelper (options)
if (valid) {
chart.state('ok', 'Multi-panel chart drawn.');
}
} else {
// draw all groups into a single panel
if (render(canvas_list[0], request_dictionary.groups)) {
chart.state('ok', 'Chart drawn.');
}
}
// unregister process
@@ -58,7 +58,9 @@ function panelHelper (options)
// add progress
request_dictionary.progress = function(percentage) {
chart.state('wait', 'Loading data...' + percentage + '%');
if (chart.get('state') == 'wait') {
chart.state('wait', 'Loading data...' + percentage + '%');
}
};
// request data
config/plugins/visualizations/charts/static/views/types.js
+1 -1
View File
@@ -34,7 +34,7 @@ return Backbone.View.extend(
// construct chart type subset selection buttons
this.library = new Ui.RadioButton({
data : [ { label: 'Few (<1k)', value: 'small' },
data : [ { label: 'Few (<500)', value: 'small' },
{ label: 'Some (<10k)', value: 'medium' },
{ label: 'Many (>10k)', value: 'large' }],
onchange: function(value) {
config/plugins/visualizations/charts/static/views/viewport.js
+7 -11
View File
@@ -107,20 +107,16 @@ return Backbone.View.extend({
// create requested canvas elements
for (var i = 0; i < n; i++) {
// create element
var canvas_el = $(this._templateContainer(tag, parseInt(100 / n)));
var container_el = $(this._templateContainer(tag, parseInt(100 / n)));
// add to view
this.$el.append(canvas_el);
this.$el.append(container_el);
// add to list
this.container_list[i] = canvas_el;
this.container_list[i] = container_el;
// add a separate list for canvas elements
if (tag == 'svg') {
this.canvas_list[i] = d3.select(canvas_el.find('#canvas')[0]);
} else {
this.canvas_list[i] = canvas_el.find('#canvas');
}
this.canvas_list[i] = container_el.find('.charts-viewport-canvas').attr('id');
}
},
@@ -167,8 +163,8 @@ return Backbone.View.extend({
// create chart view
var self = this;
require(['plugin/charts/' + this.app.chartPath(chart_type) + '/wrapper'], function(ChartView) {
// create chart
var view = new ChartView(self.app, {canvas : self.canvas_list});
// create chart and parse list of dom ids
var view = new ChartView(self.app, {canvas_list : self.canvas_list});
// request data
if (self.chart_definition.execute) {
@@ -284,7 +280,7 @@ return Backbone.View.extend({
_templateContainer: function(tag, width) {
return '<div class="charts-viewport-container" style="width:' + width + '%;">' +
'<div id="menu"/>' +
'<' + tag + ' id="canvas" class="charts-viewport-canvas">' +
'<' + tag + ' id="' + Utils.uuid() + '" class="charts-viewport-canvas">' +
'</div>';
}
static/scripts/packed/utils/utils.js
+1 -1
View File
@@ -1 +1 @@
define(["libs/underscore"],function(j){function d(l,m,k){g("GET",l,{},m,k)}function g(p,l,m,o,k){if(p=="GET"||p=="DELETE"){if(l.indexOf("?")==-1){l+="?"}else{l+="&"}l+=$.param(m)}var n=new XMLHttpRequest();n.open(p,l,true);n.setRequestHeader("Accept","application/json");n.setRequestHeader("Cache-Control","no-cache");n.setRequestHeader("X-Requested-With","XMLHttpRequest");n.setRequestHeader("Content-Type","application/json");n.onloadend=function(){var q=n.status;try{response=jQuery.parseJSON(n.responseText)}catch(r){response=n.responseText}if(q==200){o&&o(response)}else{k&&k(response)}};if(p=="GET"||p=="DELETE"){n.send()}else{n.send(JSON.stringify(m))}}function h(n,k){var l=$('<div class="'+n+'"></div>');l.appendTo(":eq(0)");var m=l.css(k);l.remove();return m}function f(k){if(!$('link[href^="'+k+'"]').length){$('<link href="'+galaxy_config.root+k+'" rel="stylesheet">').appendTo("head")}}function i(k,l){if(k){return j.defaults(k,l)}else{return l}}function b(l,n){var m="";if(l>=100000000000){l=l/100000000000;m="TB"}else{if(l>=100000000){l=l/100000000;m="GB"}else{if(l>=100000){l=l/100000;m="MB"}else{if(l>=100){l=l/100;m="KB"}else{if(l>0){l=l*10;m="b"}else{return"<strong>-</strong>"}}}}}var k=(Math.round(l)/10);if(n){return k+" "+m}else{return"<strong>"+k+"</strong> "+m}}function a(){return(new Date().getTime()).toString(36)}function c(k){var l=$("<p></p>");l.append(k);return l}function e(){var m=new Date();var k=(m.getHours()<10?"0":"")+m.getHours();var l=(m.getMinutes()<10?"0":"")+m.getMinutes();var n=m.getDate()+"/"+(m.getMonth()+1)+"/"+m.getFullYear()+", "+k+":"+l;return n}return{cssLoadFile:f,cssGetAttribute:h,get:d,merge:i,bytesToString:b,uuid:a,time:e,wrap:c,request:g}});
define(["libs/underscore"],function(j){function d(l,m,k){g("GET",l,{},m,k)}function g(p,l,m,o,k){if(p=="GET"||p=="DELETE"){if(l.indexOf("?")==-1){l+="?"}else{l+="&"}l+=$.param(m)}var n=new XMLHttpRequest();n.open(p,l,true);n.setRequestHeader("Accept","application/json");n.setRequestHeader("Cache-Control","no-cache");n.setRequestHeader("X-Requested-With","XMLHttpRequest");n.setRequestHeader("Content-Type","application/json");n.onloadend=function(){var q=n.status;try{response=jQuery.parseJSON(n.responseText)}catch(r){response=n.responseText}if(q==200){o&&o(response)}else{k&&k(response)}};if(p=="GET"||p=="DELETE"){n.send()}else{n.send(JSON.stringify(m))}}function h(n,k){var l=$('<div class="'+n+'"></div>');l.appendTo(":eq(0)");var m=l.css(k);l.remove();return m}function f(k){if(!$('link[href^="'+k+'"]').length){$('<link href="'+galaxy_config.root+k+'" rel="stylesheet">').appendTo("head")}}function i(k,l){if(k){return j.defaults(k,l)}else{return l}}function b(l,n){var m="";if(l>=100000000000){l=l/100000000000;m="TB"}else{if(l>=100000000){l=l/100000000;m="GB"}else{if(l>=100000){l=l/100000;m="MB"}else{if(l>=100){l=l/100;m="KB"}else{if(l>0){l=l*10;m="b"}else{return"<strong>-</strong>"}}}}}var k=(Math.round(l)/10);if(n){return k+" "+m}else{return"<strong>"+k+"</strong> "+m}}function a(){return"x"+Math.random().toString(36).substring(2,9)}function c(k){var l=$("<p></p>");l.append(k);return l}function e(){var m=new Date();var k=(m.getHours()<10?"0":"")+m.getHours();var l=(m.getMinutes()<10?"0":"")+m.getMinutes();var n=m.getDate()+"/"+(m.getMonth()+1)+"/"+m.getFullYear()+", "+k+":"+l;return n}return{cssLoadFile:f,cssGetAttribute:h,get:d,merge:i,bytesToString:b,uuid:a,time:e,wrap:c,request:g}});
static/scripts/utils/utils.js
+1 -1
View File
@@ -113,7 +113,7 @@ function bytesToString (size, normal_font) {
// unique ide
function uuid(){
return (new Date().getTime()).toString(36);
return 'x' + Math.random().toString(36).substring(2, 9);
};
// wrap