commit/galaxy-central: guerler: Charts: Improve chart customization
1 new commit in galaxy-central: https://bitbucket.org/galaxy/galaxy-central/commits/a384ace01550/ Changeset: a384ace01550 User: guerler Date: 2014-03-08 07:53:04 Summary: Charts: Improve chart customization Affected #: 12 files diff -r a2f88681c8d9a3bf8d5f124be7ddf365c2e33eab -r a384ace015505cdea2dafa907a04e9689aa4ec20 config/plugins/visualizations/charts/static/charts/_nvd3/config.js --- a/config/plugins/visualizations/charts/static/charts/_nvd3/config.js +++ b/config/plugins/visualizations/charts/static/charts/_nvd3/config.js @@ -8,20 +8,166 @@ } }, settings : { + separator_label : { + title : 'X axis', + type : 'separator' + }, x_axis_label : { - title : 'Axis label (x)', - info : 'Provide a label for the \'x\' axis.', + title : 'Axis label', + info : 'Provide a label for the axis.', type : 'text', init : '', placeholder : 'Axis label' }, + x_axis_type : { + title : 'Axis value type', + info : 'Select the value type of the axis.', + type : 'select', + init : 'f', + data : [ + { + label : '-- Do not show values --', + value : 'hide' + }, + { + label : 'Float', + value : 'f' + }, + { + label : 'Exponent', + value : 'e' + }, + { + label : 'Integer', + value : 'd' + }, + { + label : 'Percentage', + value : 'p' + }, + { + label : 'Rounded', + value : 'r' + }, + { + label : 'SI-prefix', + value : 's' + } + ] + }, + x_axis_tick : { + title : 'Axis tick format', + info : 'Select the tick format for the axis.', + type : 'select', + init : '.1', + data : [ + { + label : '0.00001', + value : '.5' + }, + { + label : '0.0001', + value : '.4' + }, + { + label : '0.001', + value : '.3' + }, + { + label : '0.01', + value : '.2' + }, + { + label : '0.1', + value : '.1' + }, + { + label : '1', + value : '1' + } + ] + + }, + separator_tick : { + title : 'Y axis', + type : 'separator' + }, y_axis_label : { - title : 'Axis label (y)', - info : 'Provide a label for the \'y\' axis.', + title : 'Axis label', + info : 'Provide a label for the axis.', type : 'text', init : '', placeholder : 'Axis label' - } + }, + y_axis_type : { + title : 'Axis value type', + info : 'Select the value type of the axis.', + type : 'select', + init : 'f', + data : [ + { + label : '-- Do not show values --', + value : 'hide' + }, + { + label : 'Float', + value : 'f' + }, + { + label : 'Exponent', + value : 'e' + }, + { + label : 'Integer', + value : 'd' + }, + { + label : 'Percentage', + value : 'p' + }, + { + label : 'Rounded', + value : 'r' + }, + { + label : 'SI-prefix', + value : 's' + } + ] + }, + y_axis_tick : { + title : 'Axis tick format', + info : 'Select the tick format for the axis.', + type : 'select', + init : '.1', + data : [ + { + label : '0.00001', + value : '.5' + }, + { + label : '0.0001', + value : '.4' + }, + { + label : '0.001', + value : '.3' + }, + { + label : '0.01', + value : '.2' + }, + { + label : '0.1', + value : '.1' + }, + { + label : '1', + value : '1' + } + ] + + }, } }; diff -r a2f88681c8d9a3bf8d5f124be7ddf365c2e33eab -r a384ace015505cdea2dafa907a04e9689aa4ec20 config/plugins/visualizations/charts/static/charts/_nvd3/nvd3.js --- a/config/plugins/visualizations/charts/static/charts/_nvd3/nvd3.js +++ b/config/plugins/visualizations/charts/static/charts/_nvd3/nvd3.js @@ -18,12 +18,24 @@ this.app.datasets.request(request_dictionary, function(data) { nv.addGraph(function() { - nvd3_model.yAxis.tickFormat(d3.format('.1f')) - .axisLabel(chart.settings.get('y_axis_label', 'Frequency')) - .axisLabelDistance(30); + if (chart.settings.get('x_axis_type') == 'hide') { + nvd3_model.xAxis.tickFormat(function() { return '' }); + } else { + var tick = chart.settings.get('x_axis_tick') + chart.settings.get('x_axis_type'); + nvd3_model.xAxis.tickFormat(d3.format(tick)); + } - nvd3_model.xAxis.tickFormat(d3.format('.2f')) - .axisLabel(chart.settings.get('x_axis_label', 'Breaks')); + nvd3_model.xAxis.axisLabel(chart.settings.get('x_axis_label')); + + if (chart.settings.get('y_axis_type') == 'hide') { + nvd3_model.yAxis.tickFormat(function() { return '' }); + } else { + var tick = chart.settings.get('y_axis_tick') + chart.settings.get('y_axis_type'); + nvd3_model.yAxis.tickFormat(d3.format(tick)); + } + + nvd3_model.yAxis.axisLabel(chart.settings.get('y_axis_label')) + .axisLabelDistance(30); if (callback) { callback(nvd3_model); diff -r a2f88681c8d9a3bf8d5f124be7ddf365c2e33eab -r a384ace015505cdea2dafa907a04e9689aa4ec20 config/plugins/visualizations/charts/static/charts/histogram/config.js --- a/config/plugins/visualizations/charts/static/charts/histogram/config.js +++ b/config/plugins/visualizations/charts/static/charts/histogram/config.js @@ -9,8 +9,12 @@ } }, settings : { + separator_custom : { + title : 'Histogram settings', + type : 'separator' + }, bin_size : { - title : 'Number of Bins', + title : 'Number of bins', info : 'Provide the number of histogram bins. The parsed data will be evenly distributed into bins according to the minimum and maximum values of the dataset.', type : 'slider', init : 10, diff -r a2f88681c8d9a3bf8d5f124be7ddf365c2e33eab -r a384ace015505cdea2dafa907a04e9689aa4ec20 config/plugins/visualizations/charts/static/charts/histogram/histogram.js --- a/config/plugins/visualizations/charts/static/charts/histogram/histogram.js +++ b/config/plugins/visualizations/charts/static/charts/histogram/histogram.js @@ -27,10 +27,7 @@ } var nvd3 = new NVD3(this.app, this.options); - nvd3.draw(nv.models.multiBarChart(), chart, request_dictionary, function(nvd3_model) { - nvd3_model.xAxis.tickFormat(d3.format('.2f')); - nvd3_model.yAxis.tickFormat(d3.format('.3f')); - }); + nvd3.draw(nv.models.multiBarChart(), chart, request_dictionary); } }); diff -r a2f88681c8d9a3bf8d5f124be7ddf365c2e33eab -r a384ace015505cdea2dafa907a04e9689aa4ec20 config/plugins/visualizations/charts/static/charts/horizontal/config.js --- a/config/plugins/visualizations/charts/static/charts/horizontal/config.js +++ b/config/plugins/visualizations/charts/static/charts/horizontal/config.js @@ -2,6 +2,11 @@ return $.extend(true, {}, nvd3_config, { title : 'Bar diagram (horizontal)', + settings : { + x_axis_type : { + init : 'hide' + } + } }); }); \ No newline at end of file diff -r a2f88681c8d9a3bf8d5f124be7ddf365c2e33eab -r a384ace015505cdea2dafa907a04e9689aa4ec20 config/plugins/visualizations/charts/static/charts/horizontal/horizontal.js --- a/config/plugins/visualizations/charts/static/charts/horizontal/horizontal.js +++ b/config/plugins/visualizations/charts/static/charts/horizontal/horizontal.js @@ -14,9 +14,7 @@ draw : function(chart, request_dictionary) { var nvd3 = new NVD3(this.app, this.options); - nvd3.draw(nv.models.multiBarHorizontalChart(), chart, request_dictionary, function(nvd3_model) { - nvd3_model.xAxis.tickFormat(function() { return ''; }); - }); + nvd3.draw(nv.models.multiBarHorizontalChart(), chart, request_dictionary); } }); diff -r a2f88681c8d9a3bf8d5f124be7ddf365c2e33eab -r a384ace015505cdea2dafa907a04e9689aa4ec20 config/plugins/visualizations/charts/static/charts/scatterplot/scatterplot.js --- a/config/plugins/visualizations/charts/static/charts/scatterplot/scatterplot.js +++ b/config/plugins/visualizations/charts/static/charts/scatterplot/scatterplot.js @@ -18,9 +18,6 @@ nvd3_model.showDistX(true) .showDistY(true) .color(d3.scale.category10().range()); - nvd3_model.xAxis.tickFormat(d3.format('.02f')); - nvd3_model.yAxis.tickFormat(d3.format('.02f')); - }); } }); diff -r a2f88681c8d9a3bf8d5f124be7ddf365c2e33eab -r a384ace015505cdea2dafa907a04e9689aa4ec20 config/plugins/visualizations/charts/static/charts/stackedarea/config.js --- a/config/plugins/visualizations/charts/static/charts/stackedarea/config.js +++ b/config/plugins/visualizations/charts/static/charts/stackedarea/config.js @@ -1,7 +1,7 @@ define(['plugin/charts/_nvd3/config'], function(nvd3_config) { return $.extend(true, {}, nvd3_config, { - title : 'Stacked area', + title : 'Stacked area' }); }); \ No newline at end of file diff -r a2f88681c8d9a3bf8d5f124be7ddf365c2e33eab -r a384ace015505cdea2dafa907a04e9689aa4ec20 config/plugins/visualizations/charts/static/charts/stackedarea/stackedarea.js --- a/config/plugins/visualizations/charts/static/charts/stackedarea/stackedarea.js +++ b/config/plugins/visualizations/charts/static/charts/stackedarea/stackedarea.js @@ -19,7 +19,6 @@ nvd3_model.x(function(d) { return d.x }) .y(function(d) { return d.y }) .clipEdge(true); - nvd3_model.xAxis.tickFormat(function() { return ''; }); }); } }); diff -r a2f88681c8d9a3bf8d5f124be7ddf365c2e33eab -r a384ace015505cdea2dafa907a04e9689aa4ec20 config/plugins/visualizations/charts/static/library/ui-table-form.js --- a/config/plugins/visualizations/charts/static/library/ui-table-form.js +++ b/config/plugins/visualizations/charts/static/library/ui-table-form.js @@ -36,7 +36,8 @@ var field = null; // create select field - switch(settings_def.type) { + var type = settings_def.type; + switch(type) { // text input field case 'text' : field = new Ui.Input({ @@ -46,6 +47,15 @@ } }); break; + // select field + case 'select' : + field = new Ui.Select.View({ + data: settings_def.data, + onchange: function() { + model.set(id, field.value()); + } + }); + break; // slider input field case 'slider' : field = new Ui.Input({ @@ -55,6 +65,10 @@ } }); break; + // slider input field + case 'separator' : + field = $('<div/>'); + break; // skip unkown types default: console.log('ui-table-form:_add', 'Unknown setting type (' + settings_def.type + ')'); @@ -63,19 +77,26 @@ } // set value - if (!model.get(id)) { - model.set(id, settings_def.init); + if (type != 'separator') { + if (!model.get(id)) { + model.set(id, settings_def.init); + } + field.value(model.get(id)); + + // combine field and info + var $input = $('<div/>'); + $input.append(field.$el); + $input.append('<div class="toolParamHelp">' + settings_def.info + '</div>'); + + // add row to table + this.table.add('<span style="white-space: nowrap;">' + settings_def.title + '</span>'); + this.table.add($input); + } else { + this.table.add('<h6 style="white-space: nowrap;">' + settings_def.title + ':<h6/>'); + this.table.add($('<div/>')); } - field.value(model.get(id)); - // combine field and info - var $input = $('<div/>'); - $input.append(field.$el); - $input.append('<div class="toolParamHelp">' + settings_def.info + '</div>'); - - // add row to table - this.table.add('<span style="white-space: nowrap;">' + settings_def.title + ':</span>'); - this.table.add($input); + // add to table this.table.append(id); } }); diff -r a2f88681c8d9a3bf8d5f124be7ddf365c2e33eab -r a384ace015505cdea2dafa907a04e9689aa4ec20 config/plugins/visualizations/charts/static/library/ui.select.js --- a/config/plugins/visualizations/charts/static/library/ui.select.js +++ b/config/plugins/visualizations/charts/static/library/ui.select.js @@ -2,7 +2,7 @@ define(['utils/utils'], function(Utils) { // plugin -return Backbone.View.extend( +var View = Backbone.View.extend( { // options optionsDefault: { @@ -213,4 +213,8 @@ } }); +return { + View: View +} + }); diff -r a2f88681c8d9a3bf8d5f124be7ddf365c2e33eab -r a384ace015505cdea2dafa907a04e9689aa4ec20 config/plugins/visualizations/charts/static/views/group.js --- a/config/plugins/visualizations/charts/static/views/group.js +++ b/config/plugins/visualizations/charts/static/views/group.js @@ -93,7 +93,7 @@ // create select field var data_def = chart_settings.columns[id]; - var select = new Ui.Select({ + var select = new Ui.Select.View({ id : 'select_' + id, gid : id, onchange : function(value) { 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.
participants (1)
-
commits-noreply@bitbucket.org