mirror of
https://github.com/galaxyproject/galaxy.git
synced 2026-10-24 02:04:04 +08:00
Charts: Finalize box plots, add axes labels, series labels, grid options
This commit is contained in:
Aysam Guerler
@@ -17,7 +17,7 @@ return Backbone.View.extend(
|
||||
process_id : process_id,
|
||||
chart : chart,
|
||||
request_dictionary : request_dictionary,
|
||||
makeConfig : function(plot_config){
|
||||
makeConfig : function(groups, plot_config){
|
||||
$.extend(true, plot_config, {
|
||||
seriesDefaults: {
|
||||
renderer : $.jqplot.BarRenderer
|
||||
|
||||
@@ -6,7 +6,7 @@ return $.extend(true, {}, plot_config, {
|
||||
library : 'jqPlot',
|
||||
tag : 'div',
|
||||
execute : 'boxplot',
|
||||
keywords : 'default large',
|
||||
keywords : 'small medium large',
|
||||
columns : {
|
||||
y : {
|
||||
title : 'Observations',
|
||||
@@ -14,123 +14,8 @@ return $.extend(true, {}, plot_config, {
|
||||
}
|
||||
},
|
||||
settings : {
|
||||
separator_label : {
|
||||
title : 'X axis',
|
||||
type : 'separator'
|
||||
},
|
||||
x_axis_label : {
|
||||
title : 'Axis label',
|
||||
info : 'Provide a label for the axis.',
|
||||
type : 'text',
|
||||
init : 'X-axis',
|
||||
placeholder : 'Axis label'
|
||||
},
|
||||
separator_tick : {
|
||||
title : 'Y axis',
|
||||
type : 'separator'
|
||||
},
|
||||
y_axis_label : {
|
||||
title : 'Axis label',
|
||||
info : 'Provide a label for the axis.',
|
||||
type : 'text',
|
||||
init : 'Y-axis',
|
||||
placeholder : 'Axis label'
|
||||
},
|
||||
y_axis_type : {
|
||||
title : 'Axis value type',
|
||||
info : 'Select the value type of the axis.',
|
||||
type : 'select',
|
||||
init : 'auto',
|
||||
data : [
|
||||
{
|
||||
label : '-- Do not show values --',
|
||||
value : 'hide',
|
||||
hide : ['y_axis_tick']
|
||||
},
|
||||
{
|
||||
label : 'Auto',
|
||||
value : 'auto',
|
||||
hide : ['y_axis_tick']
|
||||
},
|
||||
{
|
||||
label : 'Float',
|
||||
value : 'f',
|
||||
show : ['y_axis_tick']
|
||||
},
|
||||
{
|
||||
label : 'Exponent',
|
||||
value : 'e',
|
||||
show : ['y_axis_tick']
|
||||
},
|
||||
{
|
||||
label : 'Integer',
|
||||
value : 'd',
|
||||
hide : ['y_axis_tick']
|
||||
},
|
||||
{
|
||||
label : 'Percentage',
|
||||
value : 'p',
|
||||
show : ['y_axis_tick']
|
||||
},
|
||||
{
|
||||
label : 'Rounded',
|
||||
value : 'r',
|
||||
show : ['y_axis_tick']
|
||||
},
|
||||
{
|
||||
label : 'SI-prefix',
|
||||
value : 's',
|
||||
show : ['y_axis_tick']
|
||||
}
|
||||
]
|
||||
},
|
||||
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'
|
||||
}
|
||||
]
|
||||
},
|
||||
y_axis_grid : {
|
||||
title : 'Axis grid',
|
||||
info : 'Would you like to show grid lines for this axis?',
|
||||
type : 'radiobutton',
|
||||
init : '1',
|
||||
data : [
|
||||
{
|
||||
label : 'On',
|
||||
value : '1'
|
||||
},
|
||||
{
|
||||
label : 'Off',
|
||||
value : '0'
|
||||
}
|
||||
]
|
||||
show_legend : {
|
||||
init : 'false'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@@ -19,17 +19,16 @@ return Backbone.View.extend(
|
||||
group.columns = null;
|
||||
group.columns = {
|
||||
x: {
|
||||
index : index++
|
||||
index: index++
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var plot = new Plot(this.app, this.options);
|
||||
plot.draw({
|
||||
process_id : process_id,
|
||||
chart : chart,
|
||||
request_dictionary : request_dictionary,
|
||||
makeConfig : function(plot_config, groups){
|
||||
makeConfig : function(groups, plot_config){
|
||||
var boundary = Tools.getDomains(groups, 'x');
|
||||
$.extend(true, plot_config, {
|
||||
seriesDefaults: {
|
||||
@@ -42,7 +41,8 @@ return Backbone.View.extend(
|
||||
},
|
||||
axes : {
|
||||
xaxis: {
|
||||
pad: 1.2
|
||||
min: -1,
|
||||
max: groups.length + 0.01
|
||||
},
|
||||
yaxis: {
|
||||
min: boundary.x.min,
|
||||
@@ -51,7 +51,29 @@ return Backbone.View.extend(
|
||||
}
|
||||
});
|
||||
},
|
||||
makeSeries : function (groups) {
|
||||
makeCategories: function(groups) {
|
||||
// define custom category labels
|
||||
var x_labels = [];
|
||||
for (var group_index in groups) {
|
||||
x_labels.push(groups[group_index].key);
|
||||
}
|
||||
|
||||
// use default mapping
|
||||
Tools.mapCategories (groups, x_labels);
|
||||
|
||||
// return labels array for x axis
|
||||
return {
|
||||
array: {
|
||||
x : x_labels
|
||||
}
|
||||
}
|
||||
},
|
||||
makeSeriesLabels : function (groups, plot_config) {
|
||||
return [{
|
||||
label: 'Boxplot values'
|
||||
}];
|
||||
},
|
||||
makeSeries: function (groups) {
|
||||
/* example data
|
||||
var catOHLC = [
|
||||
[0, 138.7, 139.68, 135.18, 135.4],
|
||||
@@ -72,14 +94,14 @@ return Backbone.View.extend(
|
||||
}
|
||||
|
||||
// loop through data groups
|
||||
for (var group_index in request_dictionary.groups) {
|
||||
var indeces = [2, 4, 0, 1];
|
||||
for (var group_index in groups) {
|
||||
// get group
|
||||
var group = request_dictionary.groups[group_index];
|
||||
var group = groups[group_index];
|
||||
|
||||
// format chart data
|
||||
var point = [];
|
||||
point.push(parseInt(group_index));
|
||||
var indeces = [2, 4, 0, 1];
|
||||
for (var key in indeces) {
|
||||
point.push(group.values[indeces[key]].x);
|
||||
}
|
||||
@@ -88,6 +110,14 @@ return Backbone.View.extend(
|
||||
plot_data.push (point);
|
||||
}
|
||||
|
||||
// HACK: the boxplot renderer has an issue with single elements
|
||||
var point = [];
|
||||
point[0] = plot_data.length;
|
||||
for (var key in indeces) {
|
||||
point.push(0);
|
||||
}
|
||||
plot_data.push (point);
|
||||
|
||||
// return
|
||||
return [plot_data];
|
||||
}
|
||||
|
||||
@@ -100,6 +100,22 @@ return {
|
||||
]
|
||||
|
||||
},
|
||||
x_axis_grid : {
|
||||
title : 'Axis grid',
|
||||
info : 'Would you like to show grid lines for this axis?',
|
||||
type : 'radiobutton',
|
||||
init : 'false',
|
||||
data : [
|
||||
{
|
||||
label : 'On',
|
||||
value : 'true'
|
||||
},
|
||||
{
|
||||
label : 'Off',
|
||||
value : 'false'
|
||||
}
|
||||
]
|
||||
},
|
||||
separator_tick : {
|
||||
title : 'Y axis',
|
||||
type : 'separator'
|
||||
@@ -192,6 +208,22 @@ return {
|
||||
]
|
||||
|
||||
},
|
||||
y_axis_grid : {
|
||||
title : 'Axis grid',
|
||||
info : 'Would you like to show grid lines for this axis?',
|
||||
type : 'radiobutton',
|
||||
init : 'true',
|
||||
data : [
|
||||
{
|
||||
label : 'On',
|
||||
value : 'true'
|
||||
},
|
||||
{
|
||||
label : 'Off',
|
||||
value : 'false'
|
||||
}
|
||||
]
|
||||
},
|
||||
separator_legend : {
|
||||
title : 'Others',
|
||||
type : 'separator'
|
||||
|
||||
@@ -57,11 +57,6 @@ return function(chart) {
|
||||
}
|
||||
},
|
||||
|
||||
// Custom labels for the series are specified with the "label"
|
||||
// option on the series option. Here a series option object
|
||||
// is specified for each series.
|
||||
series: [],
|
||||
|
||||
axesDefaults: {
|
||||
labelRenderer : $.jqplot.CanvasAxisLabelRenderer,
|
||||
labelOptions: {
|
||||
@@ -76,25 +71,22 @@ return function(chart) {
|
||||
},
|
||||
|
||||
axes: {
|
||||
// Use a category axis on the x axis and use our custom ticks.
|
||||
xaxis: {
|
||||
label : chart.settings.get('x_axis_label'),
|
||||
tickRenderer : $.jqplot.CanvasAxisTickRenderer,
|
||||
tickOptions: {
|
||||
angle : -30
|
||||
angle : chart.settings.get('use_panels') === 'true' ? 0 : -30,
|
||||
showGridline : chart.settings.get('x_axis_grid') === 'true'
|
||||
},
|
||||
tickInterval : 1,
|
||||
pad : 0
|
||||
},
|
||||
// Pad the y axis just a little so bars can get close to, but
|
||||
// not touch, the grid boundaries. 1.2 is the default padding.
|
||||
yaxis: {
|
||||
label : chart.settings.get('y_axis_label'),
|
||||
tickOptions : {},
|
||||
tickOptions : {
|
||||
showGridline : chart.settings.get('y_axis_grid') === 'true'
|
||||
},
|
||||
pad : 0
|
||||
//tickOptions : {formatString: '$%d'},
|
||||
//padding : 1.2,
|
||||
//autoscale:true
|
||||
}
|
||||
},
|
||||
|
||||
@@ -110,17 +102,17 @@ return function(chart) {
|
||||
showTooltip : false,
|
||||
style : 'pointer'
|
||||
},
|
||||
|
||||
highlighter: {
|
||||
show : true,
|
||||
showMarker : false,
|
||||
tooltipAxes : 'xy'
|
||||
}
|
||||
},
|
||||
|
||||
series: []
|
||||
};
|
||||
|
||||
// Show the legend and put it outside the grid, but inside the
|
||||
// plot container, shrinking the grid to accomodate the legend.
|
||||
// A value of "outside" would not shrink the grid and allow
|
||||
// the legend to overflow the container.
|
||||
// Show the legend and put it outside the grid
|
||||
if (chart.settings.get('show_legend') == 'true') {
|
||||
plot_config.legend = {
|
||||
renderer : $.jqplot.EnhancedLegendRenderer,
|
||||
|
||||
@@ -38,10 +38,11 @@ return Backbone.View.extend(
|
||||
// draw all data into a single canvas
|
||||
render: function(canvas_id, groups) {
|
||||
// get parameters
|
||||
var chart = this.options.chart;
|
||||
var makeCategories = this.options.makeCategories;
|
||||
var makeSeries = this.options.makeSeries;
|
||||
var makeConfig = this.options.makeConfig;
|
||||
var chart = this.options.chart;
|
||||
var makeCategories = this.options.makeCategories;
|
||||
var makeSeries = this.options.makeSeries;
|
||||
var makeSeriesLabels = this.options.makeSeriesLabels;
|
||||
var makeConfig = this.options.makeConfig;
|
||||
|
||||
// create configuration
|
||||
var plot_config = configmaker(chart);
|
||||
@@ -50,18 +51,25 @@ return Backbone.View.extend(
|
||||
// draw plot
|
||||
try {
|
||||
// make custom categories call
|
||||
this._makeAxes(plot_config, groups, chart.settings);
|
||||
this._makeAxes(groups, plot_config, chart.settings);
|
||||
|
||||
// make custom series call
|
||||
if (makeSeries) {
|
||||
plot_data = makeSeries(groups);
|
||||
plot_config.series = makeSeriesLabels(groups, plot_config);
|
||||
} else {
|
||||
plot_config.series = this._makeSeriesLabels(groups);
|
||||
}
|
||||
|
||||
// make custom series call
|
||||
if (makeSeries) {
|
||||
plot_data = makeSeries(groups, plot_config);
|
||||
} else {
|
||||
plot_data = Tools.makeSeries(groups);
|
||||
}
|
||||
|
||||
// make custom config call
|
||||
if (makeConfig) {
|
||||
makeConfig(plot_config, groups);
|
||||
makeConfig(groups, plot_config);
|
||||
}
|
||||
|
||||
// check chart state
|
||||
@@ -96,8 +104,19 @@ return Backbone.View.extend(
|
||||
}
|
||||
},
|
||||
|
||||
// make series labels
|
||||
_makeSeriesLabels: function(groups, plot_config) {
|
||||
var series = [];
|
||||
for (var group_index in groups) {
|
||||
series.push({
|
||||
label: groups[group_index].key
|
||||
});
|
||||
}
|
||||
return series;
|
||||
},
|
||||
|
||||
// create axes formatting
|
||||
_makeAxes: function(plot_config, groups, settings) {
|
||||
_makeAxes: function(groups, plot_config, settings) {
|
||||
// result
|
||||
var makeCategories = this.options.makeCategories;
|
||||
var categories;
|
||||
|
||||
@@ -12,6 +12,11 @@ return $.extend(true, {}, plot_config, {
|
||||
title : 'Values for y-axis',
|
||||
is_numeric : true
|
||||
}
|
||||
},
|
||||
settings : {
|
||||
x_axis_grid : {
|
||||
init : 'true'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@@ -17,7 +17,7 @@ return Backbone.View.extend(
|
||||
process_id : process_id,
|
||||
chart : chart,
|
||||
request_dictionary : request_dictionary,
|
||||
makeConfig : function(plot_config){
|
||||
makeConfig : function(groups, plot_config){
|
||||
$.extend(true, plot_config, {
|
||||
seriesDefaults: {
|
||||
renderer: $.jqplot.LineRenderer,
|
||||
|
||||
@@ -62,6 +62,11 @@ return Backbone.View.extend(
|
||||
makeConfig(d3chart);
|
||||
}
|
||||
|
||||
// hide controls if in multi-viewer mode
|
||||
if (chart.settings.get('use_panels') === 'true') {
|
||||
d3chart.options({showControls: false});
|
||||
}
|
||||
|
||||
// hide min/max values
|
||||
d3chart.xAxis.showMaxMin(false);
|
||||
d3chart.yAxis.showMaxMin(chart.definition.showmaxmin);
|
||||
|
||||
@@ -22,7 +22,7 @@ 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') {
|
||||
if (chart.settings.get('use_panels') === 'true') {
|
||||
// draw groups in separate panels
|
||||
var valid = true;
|
||||
for (var group_index in request_dictionary.groups) {
|
||||
@@ -131,7 +131,6 @@ function makeSeries(groups, keys) {
|
||||
// append series
|
||||
plot_data.push(data);
|
||||
}
|
||||
|
||||
|
||||
// return
|
||||
return plot_data;
|
||||
@@ -163,6 +162,17 @@ function makeCategories(groups, with_index) {
|
||||
}
|
||||
|
||||
// index all values contained in label columns (for all groups)
|
||||
mapCategories(array, groups);
|
||||
|
||||
// return dictionary
|
||||
return {
|
||||
array : array
|
||||
}
|
||||
};
|
||||
|
||||
// apply default mapping
|
||||
// index all values contained in label columns (for all groups)
|
||||
function mapCategories(array, groups) {
|
||||
for (var i in groups) {
|
||||
var group = groups[i];
|
||||
for (var j in group.values) {
|
||||
@@ -172,15 +182,10 @@ function makeCategories(groups, with_index) {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// return dictionary
|
||||
return {
|
||||
array : array
|
||||
}
|
||||
};
|
||||
|
||||
// category make for unique category labels
|
||||
function makeCategoriesUnique(groups, with_index) {
|
||||
function makeUniqueCategories(groups, with_index) {
|
||||
// hashkeys, arrays and counter for labeled columns
|
||||
var categories = {};
|
||||
var array = {};
|
||||
@@ -247,7 +252,8 @@ return {
|
||||
panelHelper : panelHelper,
|
||||
makeCategories : makeCategories,
|
||||
makeSeries : makeSeries,
|
||||
getDomains : getDomains
|
||||
getDomains : getDomains,
|
||||
mapCategories : mapCategories
|
||||
}
|
||||
|
||||
});
|
||||
@@ -16,7 +16,7 @@ define(["libs/underscore"], function(_) {
|
||||
|
||||
// from jqplot
|
||||
function _fromCanvas ($el) {
|
||||
$el.find('#canvas').jqplotSaveImage({});
|
||||
$el.find('.charts-viewport-canvas').jqplotSaveImage({});
|
||||
};
|
||||
|
||||
// from svg
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
// dependencies
|
||||
define(['mvc/ui/ui-portlet', 'plugin/library/ui', 'plugin/library/screenshot', 'utils/utils'],
|
||||
function(Portlet, Ui, Screenshot, Utils) {
|
||||
define(['mvc/ui/ui-portlet', 'plugin/library/ui', 'utils/utils'],
|
||||
function(Portlet, Ui, Utils) {
|
||||
|
||||
// widget
|
||||
return Backbone.View.extend({
|
||||
@@ -134,12 +134,9 @@ return Backbone.View.extend({
|
||||
// load chart settings
|
||||
this.chart_definition = chart.definition;
|
||||
|
||||
// read settings
|
||||
var use_panels = this.chart_definition.use_panels || (chart.settings.get('use_panels') === 'true');
|
||||
|
||||
// determine number of svg/div-elements to create
|
||||
var n_panels = 1;
|
||||
if (use_panels) {
|
||||
if (chart.settings.get('use_panels') === 'true') {
|
||||
n_panels = chart.groups.length;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user