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

Charts: Improve chart customization

Browse Source
This commit is contained in:
Aysam Guerler
2014-03-08 01:53:04 -05:00
parent 8c66d77b03
commit 7d90d4c1a0
12 changed files with 220 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
config/plugins/visualizations/charts/static/charts/_nvd3/config.js
+151 -5
View File
@@ -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'
}
]
},
}
};
config/plugins/visualizations/charts/static/charts/_nvd3/nvd3.js
+17 -5
View File
@@ -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);
config/plugins/visualizations/charts/static/charts/histogram/config.js
+5 -1
View File
@@ -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,
config/plugins/visualizations/charts/static/charts/histogram/histogram.js
+1 -4
View File
@@ -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);
}
});
config/plugins/visualizations/charts/static/charts/horizontal/config.js
+5
View File
@@ -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'
}
}
});
});
config/plugins/visualizations/charts/static/charts/horizontal/horizontal.js
+1 -3
View File
@@ -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);
}
});
config/plugins/visualizations/charts/static/charts/scatterplot/scatterplot.js
-3
View File
@@ -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'));
});
}
});
config/plugins/visualizations/charts/static/charts/stackedarea/config.js
+1 -1
View File
@@ -1,7 +1,7 @@
define(['plugin/charts/_nvd3/config'], function(nvd3_config) {
return $.extend(true, {}, nvd3_config, {
title : 'Stacked area',
title : 'Stacked area'
});
});
config/plugins/visualizations/charts/static/charts/stackedarea/stackedarea.js
-1
View File
@@ -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 ''; });
});
}
});
config/plugins/visualizations/charts/static/library/ui-table-form.js
+33 -12
View File
@@ -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 = $('<div/>');
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 = $('<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);
}
});
config/plugins/visualizations/charts/static/library/ui.select.js
+5 -1
View File
@@ -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
}
});
config/plugins/visualizations/charts/static/views/group.js
+1 -1
View File
@@ -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) {