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

Charts: Show/hide optional settings, switch to auto-axis by default

Browse Source
This commit is contained in:
Aysam Guerler
2014-03-31 17:35:49 -04:00
parent 8614373698
commit 82a9a3dc7a
10 changed files with 145 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
config/plugins/visualizations/charts/static/build-app.js
+1 -1
View File
File diff suppressed because one or more lines are too long
config/plugins/visualizations/charts/static/charts/_nvd3/config.js
+40 -16
View File
@@ -23,35 +23,47 @@ return {
title : 'Axis value type',
info : 'Select the value type of the axis.',
type : 'select',
init : 'f',
init : 'auto',
data : [
{
label : '-- Do not show values --',
value : 'hide'
value : 'hide',
hide : 'x_axis_tick'
},
{
label : 'Auto',
value : 'auto',
hide : 'x_axis_tick'
},
{
label : 'Float',
value : 'f'
value : 'f',
show : 'x_axis_tick'
},
{
label : 'Exponent',
value : 'e'
value : 'e',
show : 'x_axis_tick'
},
{
label : 'Integer',
value : 'd'
value : 'd',
hide : 'x_axis_tick'
},
{
label : 'Percentage',
value : 'p'
value : 'p',
show : 'x_axis_tick'
},
{
label : 'Rounded',
value : 'r'
value : 'r',
show : 'x_axis_tick'
},
{
label : 'SI-prefix',
value : 's'
value : 's',
show : 'x_axis_tick'
}
]
},
@@ -103,35 +115,47 @@ return {
title : 'Axis value type',
info : 'Select the value type of the axis.',
type : 'select',
init : 'f',
init : 'auto',
data : [
{
label : '-- Do not show values --',
value : 'hide'
value : 'hide',
hide : 'y_axis_tick'
},
{
label : 'Auto',
value : 'auto',
hide : 'y_axis_tick'
},
{
label : 'Float',
value : 'f'
value : 'f',
show : 'y_axis_tick'
},
{
label : 'Exponent',
value : 'e'
value : 'e',
show : 'y_axis_tick'
},
{
label : 'Integer',
value : 'd'
value : 'd',
hide : 'y_axis_tick'
},
{
label : 'Percentage',
value : 'p'
value : 'p',
show : 'y_axis_tick'
},
{
label : 'Rounded',
value : 'r'
value : 'r',
show : 'y_axis_tick'
},
{
label : 'SI-prefix',
value : 's'
value : 's',
show : 'y_axis_tick'
}
]
},
config/plugins/visualizations/charts/static/charts/_nvd3/nvd3.js
+15 -12
View File
@@ -18,23 +18,13 @@ return Backbone.View.extend(
this.app.datasets.request(request_dictionary, function(data) {
nv.addGraph(function() {
// x axis
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));
}
self._axis(nvd3_model.xAxis, chart.settings.get('x_axis_type'), chart.settings.get('x_axis_tick'));
// x axis label
nvd3_model.xAxis.axisLabel(chart.settings.get('x_axis_label'));
// y axis
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));
}
self._axis(nvd3_model.yAxis, chart.settings.get('y_axis_type'), chart.settings.get('y_axis_tick'));
// y axis label
nvd3_model.yAxis.axisLabel(chart.settings.get('y_axis_label'))
@@ -71,6 +61,19 @@ return Backbone.View.extend(
chart.deferred.done(process_id);
});
});
},
// make axis
_axis: function(axis, type, tick) {
switch (type) {
case 'hide':
axis.tickFormat(function() { return '' });
break;
case 'auto':
break;
default:
axis.tickFormat(d3.format(tick + type));
}
}
});
config/plugins/visualizations/charts/static/charts/histogram/config.js
-3
View File
@@ -14,9 +14,6 @@ return $.extend(true, {}, nvd3_config, {
},
y_axis_label : {
init : 'Density'
},
y_axis_tick : {
init : '.3'
}
}
});
config/plugins/visualizations/charts/static/charts/piechart/piechart.js
+1 -1
View File
@@ -44,7 +44,7 @@ return Backbone.View.extend(
nv.utils.windowResize(self.chart_3d.update);
// set chart state
chart.set('state', 'ok');
chart.state('ok', 'Pie chart drawn.');
// unregister process
chart.deferred.done(process_id);
config/plugins/visualizations/charts/static/library/jobs.js
+5 -2
View File
@@ -43,7 +43,7 @@ return Backbone.Model.extend(
// configure tool
data = {
'tool_id' : 'rkit',
'tool_id' : 'chartskit',
'inputs' : {
'input' : {
'id' : chart.get('dataset_id'),
@@ -80,6 +80,9 @@ return Backbone.Model.extend(
// backup resulting dataset id
chart.set('dataset_id_job', job.id);
// save
this.app.storage.save();
// wait for job completion
self._loop(job.id, function(job) {
switch (job.state) {
@@ -118,7 +121,7 @@ return Backbone.Model.extend(
message = response.message.data.input + '.';
}
// update state
chart.state('failed', 'This visualization requires the R-kit. Please make sure it is installed. ' + message);
chart.state('failed', 'This visualization requires the Charts-Kit. Please make sure it is installed. ' + message);
// call error
error && error();
config/plugins/visualizations/charts/static/library/ui-table-form.js
+40 -14
View File
@@ -5,6 +5,9 @@ define(['plugin/library/ui-table', 'plugin/library/ui', 'utils/utils'],
// widget
var View = Backbone.View.extend(
{
// elements
list: [],
// initialize
initialize: function(options) {
// ui elements
@@ -30,14 +33,28 @@ var View = Backbone.View.extend(
// reset table
this.table.removeAll();
// reset list
this.list = [];
// load settings elements into table
for (var id in settings) {
this._add(id, settings[id], model);
}
// trigger change
for (var id in this.list) {
var onchange = this.list[id].options.onchange;
if (onchange) {
onchange();
}
}
},
// add table row
_add: function(id, settings_def, model) {
// link this
var self = this;
// field wrapper
var field = null;
@@ -47,8 +64,9 @@ var View = Backbone.View.extend(
// text input field
case 'text' :
field = new Ui.Input({
placeholder: settings_def.placeholder,
onchange: function() {
id : id,
placeholder : settings_def.placeholder,
onchange : function() {
model.set(id, field.value());
}
});
@@ -56,18 +74,23 @@ var View = Backbone.View.extend(
// 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({
placeholder: settings_def.placeholder,
onchange: function() {
model.set(id, field.value());
id : id,
data : settings_def.data,
onchange : function() {
// set new value
var selected = field.value();
model.set(id, selected);
// find selected dictionary
var dict = _.findWhere(settings_def.data, {value: selected});
if (dict) {
if (dict.show) {
self.$el.find('#' + dict.show).fadeIn('fast');
}
if (dict.hide) {
self.$el.find('#' + dict.hide).fadeOut('fast');
}
}
}
});
break;
@@ -89,6 +112,9 @@ var View = Backbone.View.extend(
}
field.value(model.get(id));
// add list
this.list[id] = field;
// combine field and info
var $input = $('<div/>');
$input.append(field.$el);
config/plugins/visualizations/charts/static/views/viewer.js
+36 -4
View File
@@ -27,8 +27,8 @@ return Backbone.View.extend(
title: 'Viewport',
operations: {
edit_button: new Ui.ButtonIcon({
icon : 'fa-gear',
tooltip : 'Customize Chart',
icon : 'fa-edit',
tooltip : 'Customize this chart',
title : 'Customize',
onclick : function() {
// attempt to load chart editor
@@ -36,8 +36,29 @@ return Backbone.View.extend(
self.app.go('editor');
});
}
})
}),
/*picture_button: new Ui.ButtonIcon({
icon : 'fa-camera',
tooltip : 'Download SVG-file',
title : 'Screenshot',
onclick : function() {
// attempt to load chart editor
self._wait (self.chart, function() {
self._screenshot();
});
}
}),
settings_button: new Ui.ButtonIcon({
icon : 'fa-gear',
tooltip : 'Configure this application',
title : 'Application',
onclick : function() {
// attempt to load chart editor
self._wait (self.chart, function() {
self.app.go('editor');
});
}
})*/
}
});
@@ -74,6 +95,17 @@ return Backbone.View.extend(
this.portlet.title(title);
},
// download svg file
_screenshot: function() {
// Encode the SVG
var serializer = new XMLSerializer();
var xmlString = serializer.serializeToString(this.viewport_view.svg.node());
var imgData = 'data:image/svg+xml;base64,' + btoa(xmlString);
//Use the download attribute (or a shim) to provide a link
//this.portlet.append('<a href="' + imgData + '" download>Download</a>');
window.location.href = 'data:application/x-download/;charset=utf-8,' + encodeURIComponent(xmlString);
},
// wait for chart to be ready
_wait: function(chart, callback) {
// get chart
config/plugins/visualizations/charts/static/views/viewport.js
+2 -5
View File
@@ -80,7 +80,8 @@ return Backbone.View.extend(
this.$el.append($(this._template_svg()));
// find svg element
this.svg = d3.select(this.$el.find('svg')[0]);
this.svg_el = this.$el.find('svg');
this.svg = d3.select(this.svg_el[0]);
},
// add
@@ -123,10 +124,6 @@ return Backbone.View.extend(
// submit job
self.app.jobs.submit(chart, self._defaultSettingsString(chart), self._defaultRequestString(chart),
function() {
// save
this.app.storage.save();
// draw
view.draw(process_id, chart, self._defaultRequestDictionary(chart));
},
function() {
config/plugins/visualizations/charts/templates/charts.mako
+5 -4
View File
@@ -10,6 +10,7 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>${hda.name} | ${visualization_name}</title>
## install shared libraries
${h.js( 'libs/jquery/jquery',
'libs/bootstrap',
'libs/require',
@@ -17,16 +18,16 @@
'libs/backbone/backbone',
'libs/d3')}
## css
## shared css
${h.css( 'base' )}
## install nv.d3 module
${h.javascript_link( app_root + "plugins/nv.d3.js" )}
${h.stylesheet_link( app_root + "plugins/nv.d3.css" )}
## install boxplot module
##${h.javascript_link( app_root + "plugins/box.js" )}
## load merged/minified code
${h.javascript_link( app_root + "build-app.js" )}
</head>