[galaxy-commits] commit/galaxy-central: guerler: Charts: Unify multi-panel viewing

1 new commit in galaxy-central: https://bitbucket.org/galaxy/galaxy-central/commits/ecc4feed8db4/ Changeset: ecc4feed8db4 User: guerler Date: 2014-06-11 19:57:13 Summary: Charts: Unify multi-panel viewing Affected #: 9 files diff -r 26dd63d984585f13369bf04c503eca01f874ece7 -r ecc4feed8db4fa8bf880904406ac59bba75950e4 config/plugins/visualizations/charts/static/charts/jqplot/common/config.js --- a/config/plugins/visualizations/charts/static/charts/jqplot/common/config.js +++ b/config/plugins/visualizations/charts/static/charts/jqplot/common/config.js @@ -211,6 +211,22 @@ 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' + } + ] } } }; diff -r 26dd63d984585f13369bf04c503eca01f874ece7 -r ecc4feed8db4fa8bf880904406ac59bba75950e4 config/plugins/visualizations/charts/static/charts/jqplot/common/wrapper.js --- a/config/plugins/visualizations/charts/static/charts/jqplot/common/wrapper.js +++ b/config/plugins/visualizations/charts/static/charts/jqplot/common/wrapper.js @@ -26,17 +26,17 @@ 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 @@ // 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 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 @@ // catch window resize event var self = this; - $(window).resize(function () { + $(window).on('resize', function () { drawGraph(); }); diff -r 26dd63d984585f13369bf04c503eca01f874ece7 -r ecc4feed8db4fa8bf880904406ac59bba75950e4 config/plugins/visualizations/charts/static/charts/nvd3/common/wrapper.js --- a/config/plugins/visualizations/charts/static/charts/nvd3/common/wrapper.js +++ b/config/plugins/visualizations/charts/static/charts/nvd3/common/wrapper.js @@ -17,17 +17,17 @@ 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 @@ 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 diff -r 26dd63d984585f13369bf04c503eca01f874ece7 -r ecc4feed8db4fa8bf880904406ac59bba75950e4 config/plugins/visualizations/charts/static/charts/nvd3/pie/wrapper.js --- a/config/plugins/visualizations/charts/static/charts/nvd3/pie/wrapper.js +++ b/config/plugins/visualizations/charts/static/charts/nvd3/pie/wrapper.js @@ -11,19 +11,17 @@ }, // 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 @@ // 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'); diff -r 26dd63d984585f13369bf04c503eca01f874ece7 -r ecc4feed8db4fa8bf880904406ac59bba75950e4 config/plugins/visualizations/charts/static/charts/tools.js --- a/config/plugins/visualizations/charts/static/charts/tools.js +++ b/config/plugins/visualizations/charts/static/charts/tools.js @@ -12,7 +12,7 @@ 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 @@ 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 @@ 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 @@ // 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 diff -r 26dd63d984585f13369bf04c503eca01f874ece7 -r ecc4feed8db4fa8bf880904406ac59bba75950e4 config/plugins/visualizations/charts/static/views/types.js --- a/config/plugins/visualizations/charts/static/views/types.js +++ b/config/plugins/visualizations/charts/static/views/types.js @@ -34,7 +34,7 @@ // 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) { diff -r 26dd63d984585f13369bf04c503eca01f874ece7 -r ecc4feed8db4fa8bf880904406ac59bba75950e4 config/plugins/visualizations/charts/static/views/viewport.js --- a/config/plugins/visualizations/charts/static/views/viewport.js +++ b/config/plugins/visualizations/charts/static/views/viewport.js @@ -107,20 +107,16 @@ // 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 @@ // 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 @@ _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>'; } diff -r 26dd63d984585f13369bf04c503eca01f874ece7 -r ecc4feed8db4fa8bf880904406ac59bba75950e4 static/scripts/packed/utils/utils.js --- a/static/scripts/packed/utils/utils.js +++ b/static/scripts/packed/utils/utils.js @@ -1,1 +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}}); \ No newline at end of file +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}}); \ No newline at end of file diff -r 26dd63d984585f13369bf04c503eca01f874ece7 -r ecc4feed8db4fa8bf880904406ac59bba75950e4 static/scripts/utils/utils.js --- a/static/scripts/utils/utils.js +++ b/static/scripts/utils/utils.js @@ -113,7 +113,7 @@ // unique ide function uuid(){ - return (new Date().getTime()).toString(36); + return 'x' + Math.random().toString(36).substring(2, 9); }; // wrap Repository URL: https://bitbucket.org/galaxy/galaxy-central/ -- This is a commit notification from bitbucket.org. You are receiving this because you have the service enabled, addressing the recipient of this email.