From 7d90d4c1a0a3cc6521dcb0198b4edbb3c075a5ce Mon Sep 17 00:00:00 2001 From: Aysam Guerler Date: Sat, 8 Mar 2014 01:53:04 -0500 Subject: [PATCH] Charts: Improve chart customization --- .../charts/static/charts/_nvd3/config.js | 156 +++++++++++++++++- .../charts/static/charts/_nvd3/nvd3.js | 22 ++- .../charts/static/charts/histogram/config.js | 6 +- .../static/charts/histogram/histogram.js | 5 +- .../charts/static/charts/horizontal/config.js | 5 + .../static/charts/horizontal/horizontal.js | 4 +- .../static/charts/scatterplot/scatterplot.js | 3 - .../static/charts/stackedarea/config.js | 2 +- .../static/charts/stackedarea/stackedarea.js | 1 - .../charts/static/library/ui-table-form.js | 45 +++-- .../charts/static/library/ui.select.js | 6 +- .../charts/static/views/group.js | 2 +- 12 files changed, 220 insertions(+), 37 deletions(-) diff --git a/config/plugins/visualizations/charts/static/charts/_nvd3/config.js b/config/plugins/visualizations/charts/static/charts/_nvd3/config.js index a0b903fdd36..54a62bdf1fa 100644 --- a/config/plugins/visualizations/charts/static/charts/_nvd3/config.js +++ b/config/plugins/visualizations/charts/static/charts/_nvd3/config.js @@ -8,20 +8,166 @@ return { } }, 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 --git a/config/plugins/visualizations/charts/static/charts/_nvd3/nvd3.js b/config/plugins/visualizations/charts/static/charts/_nvd3/nvd3.js index 942592e729b..69d2d55f73d 100644 --- a/config/plugins/visualizations/charts/static/charts/_nvd3/nvd3.js +++ b/config/plugins/visualizations/charts/static/charts/_nvd3/nvd3.js @@ -18,12 +18,24 @@ return Backbone.View.extend( 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 --git a/config/plugins/visualizations/charts/static/charts/histogram/config.js b/config/plugins/visualizations/charts/static/charts/histogram/config.js index b069672d994..8adedc3ad41 100644 --- a/config/plugins/visualizations/charts/static/charts/histogram/config.js +++ b/config/plugins/visualizations/charts/static/charts/histogram/config.js @@ -9,8 +9,12 @@ return $.extend(true, {}, nvd3_config, { } }, 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 --git a/config/plugins/visualizations/charts/static/charts/histogram/histogram.js b/config/plugins/visualizations/charts/static/charts/histogram/histogram.js index c2dd020c68e..dcc11581d91 100644 --- a/config/plugins/visualizations/charts/static/charts/histogram/histogram.js +++ b/config/plugins/visualizations/charts/static/charts/histogram/histogram.js @@ -27,10 +27,7 @@ return Backbone.View.extend( } 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 --git a/config/plugins/visualizations/charts/static/charts/horizontal/config.js b/config/plugins/visualizations/charts/static/charts/horizontal/config.js index 22fd93f0726..4ef2b0c764d 100644 --- a/config/plugins/visualizations/charts/static/charts/horizontal/config.js +++ b/config/plugins/visualizations/charts/static/charts/horizontal/config.js @@ -2,6 +2,11 @@ define(['plugin/charts/_nvd3/config'], function(nvd3_config) { return $.extend(true, {}, nvd3_config, { title : 'Bar diagram (horizontal)', + settings : { + x_axis_type : { + init : 'hide' + } + } }); }); \ No newline at end of file diff --git a/config/plugins/visualizations/charts/static/charts/horizontal/horizontal.js b/config/plugins/visualizations/charts/static/charts/horizontal/horizontal.js index ae65568e1ad..70ca9741e5a 100644 --- a/config/plugins/visualizations/charts/static/charts/horizontal/horizontal.js +++ b/config/plugins/visualizations/charts/static/charts/horizontal/horizontal.js @@ -14,9 +14,7 @@ return Backbone.View.extend( 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 --git a/config/plugins/visualizations/charts/static/charts/scatterplot/scatterplot.js b/config/plugins/visualizations/charts/static/charts/scatterplot/scatterplot.js index c6cfedd34f8..8a3587f2c71 100644 --- a/config/plugins/visualizations/charts/static/charts/scatterplot/scatterplot.js +++ b/config/plugins/visualizations/charts/static/charts/scatterplot/scatterplot.js @@ -18,9 +18,6 @@ return Backbone.View.extend( 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 --git a/config/plugins/visualizations/charts/static/charts/stackedarea/config.js b/config/plugins/visualizations/charts/static/charts/stackedarea/config.js index f84318394e5..7ddef5c7001 100644 --- 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 --git a/config/plugins/visualizations/charts/static/charts/stackedarea/stackedarea.js b/config/plugins/visualizations/charts/static/charts/stackedarea/stackedarea.js index c3dd9caf178..e7aa968f36b 100644 --- a/config/plugins/visualizations/charts/static/charts/stackedarea/stackedarea.js +++ b/config/plugins/visualizations/charts/static/charts/stackedarea/stackedarea.js @@ -19,7 +19,6 @@ return Backbone.View.extend( nvd3_model.x(function(d) { return d.x }) .y(function(d) { return d.y }) .clipEdge(true); - nvd3_model.xAxis.tickFormat(function() { return ''; }); }); } }); diff --git a/config/plugins/visualizations/charts/static/library/ui-table-form.js b/config/plugins/visualizations/charts/static/library/ui-table-form.js index 0c09f2395c7..3d647e91803 100644 --- 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 View = Backbone.View.extend( 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 @@ var View = Backbone.View.extend( } }); 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 @@ var View = Backbone.View.extend( } }); break; + // slider input field + case 'separator' : + field = $('
'); + break; // skip unkown types default: console.log('ui-table-form:_add', 'Unknown setting type (' + settings_def.type + ')'); @@ -63,19 +77,26 @@ var View = Backbone.View.extend( } // 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 = $('
'); + $input.append(field.$el); + $input.append('
' + settings_def.info + '
'); + + // add row to table + this.table.add('' + settings_def.title + ''); + this.table.add($input); + } else { + this.table.add('
' + settings_def.title + ':
'); + this.table.add($('
')); } - field.value(model.get(id)); - // combine field and info - var $input = $('
'); - $input.append(field.$el); - $input.append('
' + settings_def.info + '
'); - - // add row to table - this.table.add('' + settings_def.title + ':'); - this.table.add($input); + // add to table this.table.append(id); } }); diff --git a/config/plugins/visualizations/charts/static/library/ui.select.js b/config/plugins/visualizations/charts/static/library/ui.select.js index 45c592af898..c3e6ac097f3 100644 --- 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 Backbone.View.extend( } }); +return { + View: View +} + }); diff --git a/config/plugins/visualizations/charts/static/views/group.js b/config/plugins/visualizations/charts/static/views/group.js index abde18bcc66..dd5a22f2cf0 100644 --- a/config/plugins/visualizations/charts/static/views/group.js +++ b/config/plugins/visualizations/charts/static/views/group.js @@ -93,7 +93,7 @@ return Backbone.View.extend( // 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) {