mirror of
https://github.com/galaxyproject/galaxy.git
synced 2026-10-24 12:13:33 +08:00
Charts: Add new selection panel, improve modularity, activate basic heat map
This commit is contained in:
Aysam Guerler
@@ -0,0 +1,69 @@
|
||||
.charts-grid .item {
|
||||
padding: 5px;
|
||||
margin: 5px;
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
border-radius:5px
|
||||
}
|
||||
|
||||
.charts-grid .current {
|
||||
border-color:#66afe9;
|
||||
background-color:#EEEEFF;
|
||||
outline:0;
|
||||
-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
|
||||
box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
|
||||
}
|
||||
|
||||
.charts-grid .image {
|
||||
padding: 10px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.charts-grid .title {
|
||||
text-align: center;
|
||||
font-size: 0.9em;
|
||||
word-wrap: break-work;
|
||||
font-weight: bold;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.charts-grid .header {
|
||||
font-size: 0.9em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.charts-viewport {
|
||||
height: inherit;
|
||||
min-height: 50px;
|
||||
}
|
||||
|
||||
.charts-viewport .info {
|
||||
position: absolute;
|
||||
margin-left: 10px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.charts-viewport .text {
|
||||
position: relative;
|
||||
margin-left: 5px;
|
||||
top: -1px;
|
||||
font-size: 1.0em;
|
||||
}
|
||||
|
||||
.charts-viewport .icon {
|
||||
font-size: 1.2em;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.charts-viewport .container {
|
||||
float: left;
|
||||
display: block;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.charts-viewport .canvas {
|
||||
display: block;
|
||||
width:100%;
|
||||
height: inherit;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -2,6 +2,7 @@ define([], function() {
|
||||
|
||||
return {
|
||||
title : 'Heatmap',
|
||||
category : 'Data processing (requires \'charts\' tool from Toolshed)',
|
||||
library : '',
|
||||
tag : 'div',
|
||||
use_panels : true,
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
@@ -1,16 +1,17 @@
|
||||
define([], function() {
|
||||
|
||||
return {
|
||||
title : 'Box plot',
|
||||
library : 'highcharts.js',
|
||||
tag : 'div',
|
||||
execute : 'boxplot',
|
||||
columns : {
|
||||
title : 'Box plot',
|
||||
category : 'Data processing (requires \'charts\' tool from Toolshed)',
|
||||
library : 'highcharts.js',
|
||||
tag : 'div',
|
||||
execute : 'boxplot',
|
||||
columns : {
|
||||
y : {
|
||||
title : 'Observations'
|
||||
}
|
||||
},
|
||||
settings : {
|
||||
settings : {
|
||||
separator_label : {
|
||||
title : 'X axis',
|
||||
type : 'separator'
|
||||
|
||||
-122
@@ -1,122 +0,0 @@
|
||||
// dependencies
|
||||
define(['utils/utils'], function(Utils) {
|
||||
|
||||
// widget
|
||||
return Backbone.View.extend(
|
||||
{
|
||||
// highcharts configuration
|
||||
hc_config : {
|
||||
chart: {
|
||||
type: 'boxplot'
|
||||
},
|
||||
|
||||
title: {
|
||||
text: ''
|
||||
},
|
||||
|
||||
legend: {
|
||||
enabled: false
|
||||
},
|
||||
|
||||
credits: {
|
||||
enabled: false
|
||||
},
|
||||
|
||||
plotOptions: {
|
||||
series: {
|
||||
animation: false
|
||||
}
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
categories: [],
|
||||
title: {
|
||||
text: ''
|
||||
}
|
||||
},
|
||||
|
||||
yAxis: {
|
||||
title: {
|
||||
text: ''
|
||||
}
|
||||
},
|
||||
|
||||
series: [{
|
||||
name: 'Details:',
|
||||
data: [],
|
||||
tooltip: {
|
||||
headerFormat: '<em>{point.key}</em><br/>'
|
||||
}
|
||||
}]
|
||||
},
|
||||
|
||||
// initialize
|
||||
initialize: function(app, options) {
|
||||
this.app = app;
|
||||
this.options = options;
|
||||
},
|
||||
|
||||
// render
|
||||
draw : function(process_id, chart, request_dictionary)
|
||||
{
|
||||
// configure request
|
||||
var index = 0;
|
||||
for (var i in request_dictionary.groups) {
|
||||
var group = request_dictionary.groups[i];
|
||||
group.columns = null;
|
||||
group.columns = {
|
||||
x: {
|
||||
index: index++
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// set axis labels
|
||||
this.hc_config.xAxis.title.text = chart.settings.get('x_axis_label');
|
||||
this.hc_config.yAxis.title.text = chart.settings.get('y_axis_label');
|
||||
|
||||
// request data
|
||||
var self = this;
|
||||
this.app.datasets.request(request_dictionary, function() {
|
||||
|
||||
// reset data/categories
|
||||
var data = [];
|
||||
var categories = [];
|
||||
|
||||
// loop through data groups
|
||||
for (var key in request_dictionary.groups) {
|
||||
// get group
|
||||
var group = request_dictionary.groups[key];
|
||||
|
||||
// add category
|
||||
categories.push(group.key);
|
||||
|
||||
// format chart data
|
||||
var point = [];
|
||||
for (var key in group.values) {
|
||||
point.push(group.values[key].x);
|
||||
}
|
||||
|
||||
// add to data
|
||||
data.push (point);
|
||||
}
|
||||
|
||||
// categories
|
||||
self.hc_config.xAxis.categories = categories;
|
||||
|
||||
// update data
|
||||
self.hc_config.series[0].data = data;
|
||||
|
||||
// draw plot
|
||||
self.options.canvas[0].highcharts(self.hc_config);
|
||||
|
||||
// set chart state
|
||||
chart.state('ok', 'Box plot drawn.');
|
||||
|
||||
// unregister process
|
||||
chart.deferred.done(process_id);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
@@ -2,6 +2,7 @@ define([], function() {
|
||||
|
||||
return {
|
||||
title : '',
|
||||
category : '',
|
||||
library : 'nvd3.js',
|
||||
tag : 'svg',
|
||||
columns : {
|
||||
|
||||
@@ -31,9 +31,7 @@ return Backbone.View.extend(
|
||||
.axisLabelDistance(30);
|
||||
|
||||
// controls
|
||||
if (chart.groups.length == 1) {
|
||||
nvd3_model.options({ showControls: false });
|
||||
}
|
||||
nvd3_model.options({showControls: false});
|
||||
|
||||
// legend
|
||||
var legend_visible = true;
|
||||
|
||||
+2
-1
@@ -1,7 +1,8 @@
|
||||
define(['plugin/charts/nvd3/config'], function(nvd3_config) {
|
||||
|
||||
return $.extend(true, {}, nvd3_config, {
|
||||
title : 'Line with focus',
|
||||
title : 'Regular',
|
||||
category : 'Bar diagrams'
|
||||
});
|
||||
|
||||
});
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
+3
-2
@@ -1,8 +1,9 @@
|
||||
define(['plugin/charts/nvd3/config'], function(nvd3_config) {
|
||||
|
||||
return $.extend(true, {}, nvd3_config, {
|
||||
title : 'Bar diagram (horizontal)',
|
||||
settings : {
|
||||
title : 'Horizontal',
|
||||
category : 'Bar diagrams',
|
||||
settings : {
|
||||
x_axis_type : {
|
||||
init : 'hide'
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 5.9 KiB |
+13
@@ -0,0 +1,13 @@
|
||||
define(['plugin/charts/nvd3/config'], function(nvd3_config) {
|
||||
|
||||
return $.extend(true, {}, nvd3_config, {
|
||||
title : 'Stacked horizontal',
|
||||
category : 'Bar diagrams',
|
||||
settings : {
|
||||
x_axis_type : {
|
||||
init : 'hide'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
BIN
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
+23
@@ -0,0 +1,23 @@
|
||||
// dependencies
|
||||
define(['plugin/charts/nvd3/nvd3'], function(NVD3) {
|
||||
|
||||
// widget
|
||||
return Backbone.View.extend(
|
||||
{
|
||||
// initialize
|
||||
initialize: function(app, options) {
|
||||
this.app = app;
|
||||
this.options = options;
|
||||
},
|
||||
|
||||
// render
|
||||
draw : function(process_id, chart, request_dictionary)
|
||||
{
|
||||
var nvd3 = new NVD3(this.app, this.options);
|
||||
nvd3.draw(process_id, nv.models.multiBarHorizontalChart(), chart, request_dictionary, function(nvd3_model) {
|
||||
nvd3_model.stacked(true);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
@@ -1,14 +1,16 @@
|
||||
|
||||
define(['plugin/charts/nvd3/config'], function(nvd3_config) {
|
||||
|
||||
return $.extend(true, {}, nvd3_config, {
|
||||
title : 'Histogram',
|
||||
execute : 'histogram',
|
||||
columns : {
|
||||
title : 'Histogram',
|
||||
category : 'Data processing (requires \'charts\' tool from Toolshed)',
|
||||
execute : 'histogram',
|
||||
columns : {
|
||||
y : {
|
||||
title : 'Observations'
|
||||
}
|
||||
},
|
||||
settings : {
|
||||
settings : {
|
||||
x_axis_label : {
|
||||
init : 'Breaks'
|
||||
},
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
@@ -0,0 +1,41 @@
|
||||
// dependencies
|
||||
define(['plugin/charts/nvd3/nvd3'], function(NVD3) {
|
||||
|
||||
// widget
|
||||
return Backbone.View.extend(
|
||||
{
|
||||
// initialize
|
||||
initialize: function(app, options) {
|
||||
this.app = app;
|
||||
this.options = options;
|
||||
},
|
||||
|
||||
// render
|
||||
draw : function(process_id, chart, request_dictionary)
|
||||
{
|
||||
// configure request
|
||||
var index = 1;
|
||||
for (var i in request_dictionary.groups) {
|
||||
var group = request_dictionary.groups[i];
|
||||
group.columns = {
|
||||
x: {
|
||||
index: 0
|
||||
},
|
||||
y: {
|
||||
index: index++
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
// link this
|
||||
var self = this;
|
||||
|
||||
// load nvd3
|
||||
var nvd3 = new NVD3(this.app, this.options);
|
||||
nvd3.draw(process_id, nv.models.multiBarChart(), chart, request_dictionary, function(nvd3_model) {
|
||||
nvd3_model.options({showControls: true});
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
@@ -0,0 +1,28 @@
|
||||
define(['plugin/charts/nvd3/config'], function(nvd3_config) {
|
||||
|
||||
return $.extend(true, {}, nvd3_config, {
|
||||
title : 'Histogram',
|
||||
category : 'Histograms',
|
||||
execute : 'histogram_discrete',
|
||||
columns : {
|
||||
y : {
|
||||
title : 'Observations'
|
||||
}
|
||||
},
|
||||
settings : {
|
||||
x_axis_label : {
|
||||
init : 'Breaks'
|
||||
},
|
||||
y_axis_label : {
|
||||
init : 'Density'
|
||||
},
|
||||
y_axis_type : {
|
||||
init : 'f'
|
||||
},
|
||||
y_axis_tick : {
|
||||
init : '.2'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
@@ -1,7 +1,8 @@
|
||||
define(['plugin/charts/nvd3/config'], function(nvd3_config) {
|
||||
|
||||
return $.extend(true, {}, nvd3_config, {
|
||||
title : 'Line chart',
|
||||
title : 'Line chart',
|
||||
category : 'Others'
|
||||
});
|
||||
|
||||
});
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 8.2 KiB |
@@ -0,0 +1,8 @@
|
||||
define(['plugin/charts/nvd3/config'], function(nvd3_config) {
|
||||
|
||||
return $.extend(true, {}, nvd3_config, {
|
||||
title : 'Line with focus',
|
||||
category : 'Others'
|
||||
});
|
||||
|
||||
});
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
+1
@@ -3,6 +3,7 @@ define([], function() {
|
||||
return {
|
||||
title : 'Pie chart',
|
||||
library : 'nvd3.js',
|
||||
category : 'Area charts',
|
||||
tag : 'svg',
|
||||
use_panels : true,
|
||||
columns : {
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 9.2 KiB |
+3
-2
@@ -1,8 +1,9 @@
|
||||
define(['plugin/charts/nvd3/config'], function(nvd3_config) {
|
||||
|
||||
return $.extend(true, {}, nvd3_config, {
|
||||
title : 'Scatter plot',
|
||||
columns : {
|
||||
title : 'Scatter plot',
|
||||
category : 'Others',
|
||||
columns : {
|
||||
x : {
|
||||
title : 'Values for x-axis'
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 5.3 KiB |
@@ -1,7 +1,8 @@
|
||||
define(['plugin/charts/nvd3/config'], function(nvd3_config) {
|
||||
|
||||
return $.extend(true, {}, nvd3_config, {
|
||||
title : 'Stacked area'
|
||||
title : 'Regular',
|
||||
category : 'Area charts'
|
||||
});
|
||||
|
||||
});
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 7.7 KiB |
@@ -0,0 +1,8 @@
|
||||
define(['plugin/charts/nvd3/config'], function(nvd3_config) {
|
||||
|
||||
return $.extend(true, {}, nvd3_config, {
|
||||
title : 'Expanded',
|
||||
category : 'Area charts'
|
||||
});
|
||||
|
||||
});
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
@@ -0,0 +1,27 @@
|
||||
// dependencies
|
||||
define(['plugin/charts/nvd3/nvd3'], function(NVD3) {
|
||||
|
||||
// widget
|
||||
return Backbone.View.extend(
|
||||
{
|
||||
// initialize
|
||||
initialize: function(app, options) {
|
||||
this.app = app;
|
||||
this.options = options;
|
||||
},
|
||||
|
||||
// render
|
||||
draw : function(process_id, chart, request_dictionary)
|
||||
{
|
||||
var nvd3 = new NVD3(this.app, this.options);
|
||||
nvd3.draw(process_id, nv.models.stackedAreaChart(), chart, request_dictionary, function(nvd3_model) {
|
||||
// make plot
|
||||
nvd3_model.x(function(d) { return d.x })
|
||||
.y(function(d) { return d.y })
|
||||
.clipEdge(true)
|
||||
.style('expand');
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
+2
-1
@@ -1,7 +1,8 @@
|
||||
define(['plugin/charts/nvd3/config'], function(nvd3_config) {
|
||||
|
||||
return $.extend(true, {}, nvd3_config, {
|
||||
title : 'Bar diagram',
|
||||
title : 'Stream',
|
||||
category : 'Area charts'
|
||||
});
|
||||
|
||||
});
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 9.3 KiB |
@@ -0,0 +1,27 @@
|
||||
// dependencies
|
||||
define(['plugin/charts/nvd3/nvd3'], function(NVD3) {
|
||||
|
||||
// widget
|
||||
return Backbone.View.extend(
|
||||
{
|
||||
// initialize
|
||||
initialize: function(app, options) {
|
||||
this.app = app;
|
||||
this.options = options;
|
||||
},
|
||||
|
||||
// render
|
||||
draw : function(process_id, chart, request_dictionary)
|
||||
{
|
||||
var nvd3 = new NVD3(this.app, this.options);
|
||||
nvd3.draw(process_id, nv.models.stackedAreaChart(), chart, request_dictionary, function(nvd3_model) {
|
||||
// make plot
|
||||
nvd3_model.x(function(d) { return d.x })
|
||||
.y(function(d) { return d.y })
|
||||
.clipEdge(true)
|
||||
.style('stream');
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
@@ -1,22 +1,30 @@
|
||||
// dependencies
|
||||
define(['plugin/charts/nvd3_bardiagram/config',
|
||||
define(['plugin/charts/nvd3_bar/config',
|
||||
'plugin/charts/nvd3_bar_stacked/config',
|
||||
'plugin/charts/nvd3_bar_horizontal/config',
|
||||
'plugin/charts/nvd3_bar_horizontal_stacked/config',
|
||||
'plugin/charts/nvd3_histogram/config',
|
||||
'plugin/charts/nvd3_horizontal/config',
|
||||
'plugin/charts/nvd3_line/config',
|
||||
'plugin/charts/nvd3_linewithfocus/config',
|
||||
'plugin/charts/nvd3_piechart/config',
|
||||
'plugin/charts/nvd3_scatterplot/config',
|
||||
'plugin/charts/nvd3_line_focus/config',
|
||||
'plugin/charts/nvd3_pie/config',
|
||||
'plugin/charts/nvd3_scatter/config',
|
||||
'plugin/charts/nvd3_stackedarea/config',
|
||||
'plugin/charts/nvd3_stackedarea_full/config',
|
||||
'plugin/charts/nvd3_stackedarea_stream/config',
|
||||
'plugin/charts/highcharts_boxplot/config',
|
||||
'plugin/charts/heatmap/config',
|
||||
], function(nvd3_bardiagram,
|
||||
], function(nvd3_bar,
|
||||
nvd3_bar_stacked,
|
||||
nvd3_bar_horizontal,
|
||||
nvd3_bar_horizontal_stacked,
|
||||
nvd3_histogram,
|
||||
nvd3_horizontal,
|
||||
nvd3_line,
|
||||
nvd3_linewithfocus,
|
||||
nvd3_piechart,
|
||||
nvd3_scatterplot,
|
||||
nvd3_line_focus,
|
||||
nvd3_pie,
|
||||
nvd3_scatter,
|
||||
nvd3_stackedarea,
|
||||
nvd3_stackedarea_full,
|
||||
nvd3_stackedarea_stream,
|
||||
highcharts_boxplot,
|
||||
heatmap
|
||||
) {
|
||||
@@ -26,16 +34,20 @@ return Backbone.Model.extend(
|
||||
{
|
||||
// types
|
||||
defaults: {
|
||||
'nvd3_bardiagram' : nvd3_bardiagram,
|
||||
'nvd3_horizontal' : nvd3_horizontal,
|
||||
//'heatmap' : heatmap,
|
||||
'nvd3_histogram' : nvd3_histogram,
|
||||
'nvd3_line' : nvd3_line,
|
||||
'nvd3_linewithfocus' : nvd3_linewithfocus,
|
||||
'nvd3_piechart' : nvd3_piechart,
|
||||
'nvd3_scatterplot' : nvd3_scatterplot,
|
||||
'nvd3_stackedarea' : nvd3_stackedarea,
|
||||
'highcharts_boxplot' : highcharts_boxplot
|
||||
'nvd3_bar' : nvd3_bar,
|
||||
'nvd3_bar_stacked' : nvd3_bar_stacked,
|
||||
'nvd3_bar_horizontal' : nvd3_bar_horizontal,
|
||||
'nvd3_bar_horizontal_stacked' : nvd3_bar_horizontal_stacked,
|
||||
'nvd3_stackedarea' : nvd3_stackedarea,
|
||||
'nvd3_stackedarea_full' : nvd3_stackedarea_full,
|
||||
'nvd3_stackedarea_stream' : nvd3_stackedarea_stream,
|
||||
'nvd3_line' : nvd3_line,
|
||||
'nvd3_line_focus' : nvd3_line_focus,
|
||||
'nvd3_scatter' : nvd3_scatter,
|
||||
'nvd3_pie' : nvd3_pie,
|
||||
'nvd3_histogram' : nvd3_histogram,
|
||||
'highcharts_boxplot' : highcharts_boxplot,
|
||||
'heatmap' : heatmap
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@@ -76,11 +76,7 @@ return Backbone.Model.extend(
|
||||
|
||||
// ready
|
||||
ready: function() {
|
||||
if (this.counter == 0) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
return (this.counter == 0);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@@ -162,13 +162,14 @@ var View = Backbone.View.extend(
|
||||
// get values
|
||||
var old_value = this.value();
|
||||
var new_value = $(e.target).closest('tr').attr('id');
|
||||
|
||||
// check equality
|
||||
if (new_value && old_value != new_value) {
|
||||
if (this.options.onconfirm) {
|
||||
this.options.onconfirm(new_value);
|
||||
} else {
|
||||
this.value(new_value);
|
||||
if (new_value != ''){
|
||||
// check equality
|
||||
if (new_value && old_value != new_value) {
|
||||
if (this.options.onconfirm) {
|
||||
this.options.onconfirm(new_value);
|
||||
} else {
|
||||
this.value(new_value);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@@ -1,12 +1,36 @@
|
||||
// dependencies
|
||||
define(['utils/utils', 'plugin/library/ui-select'], function(Utils, Select) {
|
||||
|
||||
// plugin
|
||||
var Image = Backbone.View.extend(
|
||||
{
|
||||
// options
|
||||
optionsDefault: {
|
||||
url : ''
|
||||
},
|
||||
|
||||
// initialize
|
||||
initialize : function(options) {
|
||||
// get options
|
||||
this.options = Utils.merge(options, this.optionsDefault);
|
||||
|
||||
// create new element
|
||||
this.setElement(this._template(this.options));
|
||||
},
|
||||
|
||||
// template
|
||||
_template: function(options) {
|
||||
return '<img src="' + options.url + '"/>';
|
||||
}
|
||||
});
|
||||
|
||||
// plugin
|
||||
var Label = Backbone.View.extend(
|
||||
{
|
||||
// options
|
||||
optionsDefault: {
|
||||
title : ''
|
||||
title : '',
|
||||
cls : ''
|
||||
},
|
||||
|
||||
// initialize
|
||||
@@ -25,7 +49,7 @@ var Label = Backbone.View.extend(
|
||||
|
||||
// template
|
||||
_template: function(options) {
|
||||
return '<label><b>' + options.title + '</b></label>';
|
||||
return '<label class="' + options.cls + '"><b>' + options.title + '</b></label>';
|
||||
},
|
||||
|
||||
// value
|
||||
@@ -107,39 +131,6 @@ var Button = Backbone.View.extend(
|
||||
}
|
||||
});
|
||||
|
||||
// plugin
|
||||
var Icon = Backbone.View.extend(
|
||||
{
|
||||
// options
|
||||
optionsDefault: {
|
||||
float : 'right',
|
||||
icon : '',
|
||||
tooltip : '',
|
||||
placement : 'bottom',
|
||||
title : ''
|
||||
},
|
||||
|
||||
// initialize
|
||||
initialize : function(options) {
|
||||
// get options
|
||||
this.options = Utils.merge(options, this.optionsDefault);
|
||||
|
||||
// create new element
|
||||
this.setElement(this._template(this.options));
|
||||
|
||||
// add tooltip
|
||||
$(this.el).tooltip({title: options.tooltip, placement: 'bottom'});
|
||||
},
|
||||
|
||||
// element
|
||||
_template: function(options) {
|
||||
return '<div>' +
|
||||
'<span class="fa ' + options.icon + '" style="font-size: 1.2em;"/> ' +
|
||||
options.title +
|
||||
'</div>';
|
||||
}
|
||||
});
|
||||
|
||||
// plugin
|
||||
var ButtonIcon = Backbone.View.extend(
|
||||
{
|
||||
@@ -193,6 +184,39 @@ var ButtonIcon = Backbone.View.extend(
|
||||
}
|
||||
});
|
||||
|
||||
// plugin
|
||||
var Icon = Backbone.View.extend(
|
||||
{
|
||||
// options
|
||||
optionsDefault: {
|
||||
float : 'right',
|
||||
icon : '',
|
||||
tooltip : '',
|
||||
placement : 'bottom',
|
||||
title : ''
|
||||
},
|
||||
|
||||
// initialize
|
||||
initialize : function(options) {
|
||||
// get options
|
||||
this.options = Utils.merge(options, this.optionsDefault);
|
||||
|
||||
// create new element
|
||||
this.setElement(this._template(this.options));
|
||||
|
||||
// add tooltip
|
||||
$(this.el).tooltip({title: options.tooltip, placement: 'bottom'});
|
||||
},
|
||||
|
||||
// element
|
||||
_template: function(options) {
|
||||
return '<div>' +
|
||||
'<span class="fa ' + options.icon + '" style="font-size: 1.2em;"/> ' +
|
||||
options.title +
|
||||
'</div>';
|
||||
}
|
||||
});
|
||||
|
||||
// plugin
|
||||
var Anchor = Backbone.View.extend(
|
||||
{
|
||||
@@ -552,6 +576,7 @@ var Input = Backbone.View.extend(
|
||||
// return
|
||||
return {
|
||||
Label : Label,
|
||||
Image : Image,
|
||||
Button : Button,
|
||||
Icon : Icon,
|
||||
ButtonIcon : ButtonIcon,
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
// dependencies
|
||||
define(['mvc/ui/ui-tabs', 'plugin/library/ui-table', 'plugin/library/ui', 'mvc/ui/ui-portlet', 'utils/utils',
|
||||
define(['mvc/ui/ui-tabs', 'plugin/library/ui', 'mvc/ui/ui-portlet', 'utils/utils',
|
||||
'plugin/models/chart', 'plugin/models/group',
|
||||
'plugin/views/group', 'plugin/views/settings'],
|
||||
function(Tabs, Table, Ui, Portlet, Utils, Chart, Group, GroupView, SettingsView) {
|
||||
'plugin/views/group', 'plugin/views/settings', 'plugin/views/types'],
|
||||
function(Tabs, Ui, Portlet, Utils, Chart, Group, GroupView, SettingsView, TypesView) {
|
||||
|
||||
// widget
|
||||
return Backbone.View.extend(
|
||||
@@ -61,11 +61,10 @@ return Backbone.View.extend(
|
||||
});
|
||||
|
||||
//
|
||||
// table with chart types
|
||||
// grid with chart types
|
||||
//
|
||||
this.table = new Table.View({
|
||||
header : false,
|
||||
onchange : function(type) {
|
||||
this.types = new TypesView(app, {
|
||||
onchange : function(type) {
|
||||
// reset type relevant chart content
|
||||
self.chart.settings.clear();
|
||||
|
||||
@@ -76,31 +75,13 @@ return Backbone.View.extend(
|
||||
self.chart.set('modified', true);
|
||||
},
|
||||
ondblclick : function(chart_id) {
|
||||
self.tabs.show('settings');
|
||||
},
|
||||
content: 'No chart types available'
|
||||
});
|
||||
|
||||
// make table header
|
||||
this.table.addHeader('No.');
|
||||
this.table.addHeader('Type');
|
||||
this.table.addHeader('Processing*');
|
||||
this.table.appendHeader();
|
||||
|
||||
// load chart types into table
|
||||
var types_n = 0;
|
||||
var types = app.types.attributes;
|
||||
for (var id in types){
|
||||
var chart_type = types[id];
|
||||
this.table.add (++types_n + '.');
|
||||
this.table.add(chart_type.title);
|
||||
if (chart_type.execute) {
|
||||
this.table.add(new Ui.Icon({icon: 'fa-check'}).$el, '10%', 'center');
|
||||
} else {
|
||||
this.table.add('');
|
||||
// show viewport
|
||||
self.app.go('viewer');
|
||||
|
||||
// save chart
|
||||
self._saveChart();
|
||||
}
|
||||
this.table.append(id);
|
||||
}
|
||||
});
|
||||
|
||||
//
|
||||
// tabs
|
||||
@@ -130,11 +111,7 @@ return Backbone.View.extend(
|
||||
$main.append(Utils.wrap((new Ui.Label({ title : 'Provide a chart title:'})).$el));
|
||||
$main.append(Utils.wrap(this.title.$el));
|
||||
$main.append(Utils.wrap((new Ui.Label({ title : 'Select a chart type:'})).$el));
|
||||
$main.append(Utils.wrap(this.table.$el));
|
||||
$main.append(new Ui.Text({
|
||||
title: '*Certain chart types pre-process data before rendering the visualization. The pre-processing is done using the charts tool available in the Toolshed.',
|
||||
cls: 'toolParamHelp'
|
||||
}).$el);
|
||||
$main.append(Utils.wrap(this.types.$el));
|
||||
|
||||
// add tab
|
||||
this.tabs.add({
|
||||
@@ -172,7 +149,7 @@ return Backbone.View.extend(
|
||||
self._refreshTitle();
|
||||
});
|
||||
this.chart.on('change:type', function(chart) {
|
||||
self.table.value(chart.get('type'));
|
||||
self.types.value(chart.get('type'));
|
||||
});
|
||||
this.chart.on('reset', function(chart) {
|
||||
self._resetChart();
|
||||
@@ -282,7 +259,7 @@ return Backbone.View.extend(
|
||||
_resetChart: function() {
|
||||
// reset chart details
|
||||
this.chart.set('id', Utils.uuid());
|
||||
this.chart.set('type', 'nvd3_bardiagram');
|
||||
this.chart.set('type', 'nvd3_bar');
|
||||
this.chart.set('dataset_id', this.app.options.config.dataset_id);
|
||||
this.chart.set('title', 'New Chart');
|
||||
|
||||
@@ -294,7 +271,7 @@ return Backbone.View.extend(
|
||||
_saveChart: function() {
|
||||
// update chart data
|
||||
this.chart.set({
|
||||
type : this.table.value(),
|
||||
type : this.types.value(),
|
||||
title : this.title.value(),
|
||||
date : Utils.time()
|
||||
});
|
||||
|
||||
@@ -44,7 +44,7 @@ return Backbone.View.extend(
|
||||
var chart_definition = this.app.types.get(chart_type);
|
||||
|
||||
// set title
|
||||
this.form.title(chart_definition.title + ':');
|
||||
this.form.title(chart_definition.category + ' - ' + chart_definition.title + ':');
|
||||
|
||||
// update table form model
|
||||
this.form.update(chart_definition.settings, this.chart.settings);
|
||||
|
||||
@@ -167,7 +167,7 @@ return Backbone.View.extend({
|
||||
|
||||
// create chart view
|
||||
var self = this;
|
||||
require(['plugin/charts/' + chart_type + '/' + chart_type], function(ChartView) {
|
||||
require(['plugin/charts/' + chart_type + '/wrapper'], function(ChartView) {
|
||||
// create chart
|
||||
var view = new ChartView(self.app, {canvas : self.canvas_list});
|
||||
|
||||
@@ -268,19 +268,19 @@ return Backbone.View.extend({
|
||||
|
||||
// template
|
||||
_template: function() {
|
||||
return '<div style="height: inherit; min-height: 50px;">' +
|
||||
'<div id="info" style="position: absolute; margin-left: 10px; margin-top: 10px; margin-bottom: 50px;">' +
|
||||
'<span id="icon" style="font-size: 1.2em; display: inline-block;"/>' +
|
||||
'<span id="text" style="position: relative; margin-left: 5px; top: -1px; font-size: 1.0em;"/>' +
|
||||
return '<div class="charts-viewport">' +
|
||||
'<div id="info" class="info">' +
|
||||
'<span id="icon" class="icon" />' +
|
||||
'<span id="text" class="text" />' +
|
||||
'</div>' +
|
||||
'</div>';
|
||||
},
|
||||
|
||||
// template svg/div element
|
||||
_templateContainer: function(tag, width) {
|
||||
return '<div class="container" style="float: left; display: block; width:' + width + '%; height: 100%;">' +
|
||||
return '<div class="container" style="width:' + width + '%;">' +
|
||||
'<div id="menu"/>' +
|
||||
'<' + tag + ' id="canvas" class="canvas" style="display: block; width:100%; height: inherit;">' +
|
||||
'<' + tag + ' id="canvas" class="canvas">' +
|
||||
'</div>';
|
||||
}
|
||||
|
||||
|
||||
@@ -37,6 +37,9 @@
|
||||
|
||||
## load merged/minified code
|
||||
${h.javascript_link( app_root + "build-app.js" )}
|
||||
|
||||
## install default css
|
||||
${h.stylesheet_link( app_root + "app.css" )}
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@@ -44,7 +47,8 @@
|
||||
|
||||
// get configuration
|
||||
var config = {
|
||||
root : '${root}'
|
||||
root : '${root}',
|
||||
app_root : '${app_root}'
|
||||
};
|
||||
|
||||
// link galaxy
|
||||
|
||||
Reference in New Issue
Block a user