From fc248a33b6f388a837856fa53ae58ba284e4813d Mon Sep 17 00:00:00 2001 From: Aysam Guerler Date: Wed, 11 Jun 2014 13:57:13 -0400 Subject: [PATCH] Charts: Unify multi-panel viewing --- .../static/charts/jqplot/common/config.js | 16 +++++++++++ .../static/charts/jqplot/common/wrapper.js | 27 ++++++++++--------- .../static/charts/nvd3/common/wrapper.js | 14 ++++++---- .../charts/static/charts/nvd3/pie/wrapper.js | 20 ++++++++------ .../charts/static/charts/tools.js | 20 +++++++------- .../charts/static/views/types.js | 2 +- .../charts/static/views/viewport.js | 18 +++++-------- static/scripts/packed/utils/utils.js | 2 +- static/scripts/utils/utils.js | 2 +- 9 files changed, 72 insertions(+), 49 deletions(-) diff --git a/config/plugins/visualizations/charts/static/charts/jqplot/common/config.js b/config/plugins/visualizations/charts/static/charts/jqplot/common/config.js index d83414df059..37313a1caf9 100644 --- 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 @@ 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' + } + ] } } }; diff --git a/config/plugins/visualizations/charts/static/charts/jqplot/common/wrapper.js b/config/plugins/visualizations/charts/static/charts/jqplot/common/wrapper.js index 8dd1a2d8fc6..39615cc4cf0 100644 --- 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 @@ 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(); }); diff --git a/config/plugins/visualizations/charts/static/charts/nvd3/common/wrapper.js b/config/plugins/visualizations/charts/static/charts/nvd3/common/wrapper.js index 60e3440196a..b1ae30e64eb 100644 --- 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 @@ 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 diff --git a/config/plugins/visualizations/charts/static/charts/nvd3/pie/wrapper.js b/config/plugins/visualizations/charts/static/charts/nvd3/pie/wrapper.js index 35c0e248459..8896c3e0f85 100644 --- 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 @@ 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'); diff --git a/config/plugins/visualizations/charts/static/charts/tools.js b/config/plugins/visualizations/charts/static/charts/tools.js index 3095feacf7a..a0b688b67ba 100644 --- a/config/plugins/visualizations/charts/static/charts/tools.js +++ b/config/plugins/visualizations/charts/static/charts/tools.js @@ -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 diff --git a/config/plugins/visualizations/charts/static/views/types.js b/config/plugins/visualizations/charts/static/views/types.js index 1309f6e2e94..cad07defd55 100644 --- a/config/plugins/visualizations/charts/static/views/types.js +++ b/config/plugins/visualizations/charts/static/views/types.js @@ -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) { diff --git a/config/plugins/visualizations/charts/static/views/viewport.js b/config/plugins/visualizations/charts/static/views/viewport.js index 28af2a7c922..082ef36adf5 100644 --- a/config/plugins/visualizations/charts/static/views/viewport.js +++ b/config/plugins/visualizations/charts/static/views/viewport.js @@ -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 '
' + ''; } diff --git a/static/scripts/packed/utils/utils.js b/static/scripts/packed/utils/utils.js index fef752be582..3fac4a5b9de 100644 --- a/static/scripts/packed/utils/utils.js +++ b/static/scripts/packed/utils/utils.js @@ -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=$('
');l.appendTo(":eq(0)");var m=l.css(k);l.remove();return m}function f(k){if(!$('link[href^="'+k+'"]').length){$('').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"-"}}}}}var k=(Math.round(l)/10);if(n){return k+" "+m}else{return""+k+" "+m}}function a(){return(new Date().getTime()).toString(36)}function c(k){var l=$("

");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=$('
');l.appendTo(":eq(0)");var m=l.css(k);l.remove();return m}function f(k){if(!$('link[href^="'+k+'"]').length){$('').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"-"}}}}}var k=(Math.round(l)/10);if(n){return k+" "+m}else{return""+k+" "+m}}function a(){return"x"+Math.random().toString(36).substring(2,9)}function c(k){var l=$("

");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 --git a/static/scripts/utils/utils.js b/static/scripts/utils/utils.js index 3c46b1a83f4..a400f3418b8 100644 --- a/static/scripts/utils/utils.js +++ b/static/scripts/utils/utils.js @@ -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