[galaxy-commits] commit/galaxy-central: guerler: Charts: Add basic customization capabilities, modularize chart types

1 new commit in galaxy-central: https://bitbucket.org/galaxy/galaxy-central/commits/8ffa9ee61864/ Changeset: 8ffa9ee61864 User: guerler Date: 2014-03-07 23:01:39 Summary: Charts: Add basic customization capabilities, modularize chart types Affected #: 32 files diff -r feec63e4fc986281fdd3a00478d410bc6280848b -r 8ffa9ee618649b042292610cf8d10cff161c5235 config/plugins/visualizations/charts/static/app.js --- a/config/plugins/visualizations/charts/static/app.js +++ b/config/plugins/visualizations/charts/static/app.js @@ -1,7 +1,7 @@ // dependencies define(['mvc/ui/ui-modal', 'mvc/ui/ui-portlet', 'plugin/library/ui', 'utils/utils', 'plugin/library/jobs', 'plugin/library/datasets', 'plugin/views/charts', 'plugin/views/chart', - 'plugin/models/config', 'plugin/models/chart', 'plugin/models/charts', 'plugin/models/types'], + 'plugin/models/config', 'plugin/models/chart', 'plugin/models/charts', 'plugin/charts/types'], function( Modal, Portlet, Ui, Utils, Jobs, Datasets, ChartsView, ChartView, Config, Chart, Charts, Types diff -r feec63e4fc986281fdd3a00478d410bc6280848b -r 8ffa9ee618649b042292610cf8d10cff161c5235 config/plugins/visualizations/charts/static/charts/bardiagram.js --- a/config/plugins/visualizations/charts/static/charts/bardiagram.js +++ /dev/null @@ -1,37 +0,0 @@ -// dependencies -define([], function() { - -// widget -return Backbone.View.extend( -{ - // initialize - initialize: function(app, options) { - this.app = app; - this.options = options; - }, - - // render - plot : function(chart, request_dictionary) - { - // request data - var self = this; - this.app.datasets.request(request_dictionary, function(data) { - nv.addGraph(function() { - self.d3_chart = nv.models.multiBarChart(); - - self.d3_chart.xAxis.tickFormat(d3.format('.2f')) - self.d3_chart.yAxis.tickFormat(d3.format('.1f')) - - self.options.svg.datum(data) - .call(self.d3_chart); - - nv.utils.windowResize(self.d3_chart.update); - - // set chart state - chart.set('state', 'ok'); - }); - }); - } -}); - -}); \ No newline at end of file diff -r feec63e4fc986281fdd3a00478d410bc6280848b -r 8ffa9ee618649b042292610cf8d10cff161c5235 config/plugins/visualizations/charts/static/charts/bardiagram/bardiagram.js --- /dev/null +++ b/config/plugins/visualizations/charts/static/charts/bardiagram/bardiagram.js @@ -0,0 +1,41 @@ +// dependencies +define([], function() { + +// widget +return Backbone.View.extend( +{ + // initialize + initialize: function(app, options) { + this.app = app; + this.options = options; + }, + + // render + draw : function(chart, request_dictionary) + { + // request data + var self = this; + this.app.datasets.request(request_dictionary, function(data) { + nv.addGraph(function() { + self.d3_chart = nv.models.multiBarChart(); + + self.d3_chart.yAxis.tickFormat(d3.format('.1f')) + .axisLabel(chart.settings.get('y_axis_label', 'Frequency')) + .axisLabelDistance(30); + + self.d3_chart.xAxis.tickFormat(d3.format('.2f')) + .axisLabel(chart.settings.get('x_axis_label', 'Breaks')); + + self.options.svg.datum(data) + .call(self.d3_chart); + + nv.utils.windowResize(self.d3_chart.update); + + // set chart state + chart.set('state', 'ok'); + }); + }); + } +}); + +}); \ No newline at end of file diff -r feec63e4fc986281fdd3a00478d410bc6280848b -r 8ffa9ee618649b042292610cf8d10cff161c5235 config/plugins/visualizations/charts/static/charts/bardiagram/config.js --- /dev/null +++ b/config/plugins/visualizations/charts/static/charts/bardiagram/config.js @@ -0,0 +1,28 @@ +define([], function() { + +return { + title : 'Bar diagram', + columns : { + y : { + title : 'Values for y-axis' + } + }, + settings : { + x_axis_label : { + title : 'Axis label (x)', + info : 'Provide a label for the \'x\' axis.', + type : 'text', + init : '', + placeholder : 'Axis label' + }, + y_axis_label : { + title : 'Axis label (y)', + info : 'Provide a label for the \'y\' axis.', + type : 'text', + init : '', + placeholder : 'Axis label' + } + } +}; + +}); \ No newline at end of file diff -r feec63e4fc986281fdd3a00478d410bc6280848b -r 8ffa9ee618649b042292610cf8d10cff161c5235 config/plugins/visualizations/charts/static/charts/histogram.js --- a/config/plugins/visualizations/charts/static/charts/histogram.js +++ /dev/null @@ -1,52 +0,0 @@ -// dependencies -define([], function() { - -// widget -return Backbone.View.extend( -{ - // initialize - initialize: function(app, options) { - this.app = app; - this.options = options; - }, - - // plot - plot: function(chart, request_dictionary) { - - // update request dataset id - request_dictionary.id = chart.get('dataset_id_job'); - - // configure request - var index = 0; - for (var i in request_dictionary.groups) { - var group = request_dictionary.groups[i]; - group.columns = { - x: index++, - y: index++ - } - } - - // send request - var self = this; - this.app.datasets.request(request_dictionary, function(data) { - chart.set('state', 'ok'); - nv.addGraph(function() { - self.d3_chart = nv.models.multiBarChart(); - - self.d3_chart.xAxis.tickFormat(d3.format('.2f')) - .axisLabel('Breaks'); - - self.d3_chart.yAxis.tickFormat(d3.format('.3f')) - .axisLabel('Frequency') - .axisLabelDistance(30); - - self.options.svg.datum(data) - .call(self.d3_chart); - - nv.utils.windowResize(self.d3_chart.update); - }); - }); - } -}); - -}); \ No newline at end of file diff -r feec63e4fc986281fdd3a00478d410bc6280848b -r 8ffa9ee618649b042292610cf8d10cff161c5235 config/plugins/visualizations/charts/static/charts/histogram/config.js --- /dev/null +++ b/config/plugins/visualizations/charts/static/charts/histogram/config.js @@ -0,0 +1,30 @@ +define([], function() { + +return { + title : 'Histogram', + mode : 'execute', + columns : { + y : { + title : 'Derive frequencies' + } + }, + settings : { + x_axis_label : { + title : 'Axis label (x)', + info : 'Provide a label for the \'x\' axis.', + type : 'text', + init : 'Breaks', + placeholder : 'Axis label' + }, + bin_size : { + 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, + min : 10, + max : 1000, + } + } +}; + +}); \ No newline at end of file diff -r feec63e4fc986281fdd3a00478d410bc6280848b -r 8ffa9ee618649b042292610cf8d10cff161c5235 config/plugins/visualizations/charts/static/charts/histogram/histogram.js --- /dev/null +++ b/config/plugins/visualizations/charts/static/charts/histogram/histogram.js @@ -0,0 +1,55 @@ +// dependencies +define([], function() { + +// widget +return Backbone.View.extend( +{ + // initialize + initialize: function(app, options) { + this.app = app; + this.options = options; + }, + + // draw + draw: function(chart, request_dictionary) { + + // update request dataset id + request_dictionary.id = chart.get('dataset_id_job'); + + // configure request + var index = 0; + for (var i in request_dictionary.groups) { + var group = request_dictionary.groups[i]; + group.columns = { + x: index++, + y: index++ + } + } + + // send request + var self = this; + this.app.datasets.request(request_dictionary, function(data) { + // set chart state + chart.set('state', 'ok'); + + // draw graph + nv.addGraph(function() { + self.d3_chart = nv.models.multiBarChart(); + + self.d3_chart.xAxis.tickFormat(d3.format('.2f')) + .axisLabel('Breaks'); + + self.d3_chart.yAxis.tickFormat(d3.format('.3f')) + .axisLabel('Frequency') + .axisLabelDistance(30); + + self.options.svg.datum(data) + .call(self.d3_chart); + + nv.utils.windowResize(self.d3_chart.update); + }); + }); + } +}); + +}); \ No newline at end of file diff -r feec63e4fc986281fdd3a00478d410bc6280848b -r 8ffa9ee618649b042292610cf8d10cff161c5235 config/plugins/visualizations/charts/static/charts/horizontal.js --- a/config/plugins/visualizations/charts/static/charts/horizontal.js +++ /dev/null @@ -1,37 +0,0 @@ -// dependencies -define(['utils/utils'], function(Utils) { - -// widget -return Backbone.View.extend( -{ - // initialize - initialize: function(app, options) { - this.app = app; - this.options = options; - }, - - // render - plot : function(chart, request_dictionary) - { - // request data - var self = this; - this.app.datasets.request(request_dictionary, function(data) { - // add graph to screen - nv.addGraph(function() { - self.d3_chart = nv.models.multiBarHorizontalChart(); - - self.d3_chart.xAxis.tickFormat(function() { return ''; }); - - self.options.svg.datum(data) - .call(self.d3_chart); - - nv.utils.windowResize(self.d3_chart.update); - - // set chart state - chart.set('state', 'ok'); - }); - }); - } -}); - -}); \ No newline at end of file diff -r feec63e4fc986281fdd3a00478d410bc6280848b -r 8ffa9ee618649b042292610cf8d10cff161c5235 config/plugins/visualizations/charts/static/charts/horizontal/config.js --- /dev/null +++ b/config/plugins/visualizations/charts/static/charts/horizontal/config.js @@ -0,0 +1,12 @@ +define([], function() { + +return { + title : 'Bar diagram (horizontal)', + columns : { + y : { + title : 'Values for y-axis' + } + } +}; + +}); \ No newline at end of file diff -r feec63e4fc986281fdd3a00478d410bc6280848b -r 8ffa9ee618649b042292610cf8d10cff161c5235 config/plugins/visualizations/charts/static/charts/horizontal/horizontal.js --- /dev/null +++ b/config/plugins/visualizations/charts/static/charts/horizontal/horizontal.js @@ -0,0 +1,37 @@ +// dependencies +define(['utils/utils'], function(Utils) { + +// widget +return Backbone.View.extend( +{ + // initialize + initialize: function(app, options) { + this.app = app; + this.options = options; + }, + + // render + draw : function(chart, request_dictionary) + { + // request data + var self = this; + this.app.datasets.request(request_dictionary, function(data) { + // add graph to screen + nv.addGraph(function() { + self.d3_chart = nv.models.multiBarHorizontalChart(); + + self.d3_chart.xAxis.tickFormat(function() { return ''; }); + + self.options.svg.datum(data) + .call(self.d3_chart); + + nv.utils.windowResize(self.d3_chart.update); + + // set chart state + chart.set('state', 'ok'); + }); + }); + } +}); + +}); \ No newline at end of file diff -r feec63e4fc986281fdd3a00478d410bc6280848b -r 8ffa9ee618649b042292610cf8d10cff161c5235 config/plugins/visualizations/charts/static/charts/line.js --- a/config/plugins/visualizations/charts/static/charts/line.js +++ /dev/null @@ -1,40 +0,0 @@ -// dependencies -define(['utils/utils'], function(Utils) { - -// widget -return Backbone.View.extend( -{ - // initialize - initialize: function(app, options) { - this.app = app; - this.options = options; - }, - - // render - plot : function(chart, request_dictionary) - { - // request data - var self = this; - this.app.datasets.request(request_dictionary, function(data) { - nv.addGraph(function() { - self.chart_3d = nv.models.lineChart(); - - self.chart_3d.xAxis - .tickFormat(d3.format(',f')); - - self.chart_3d.yAxis - .tickFormat(d3.format(',.2f')); - - self.options.svg.datum(data) - .call(self.chart_3d); - - nv.utils.windowResize(self.chart_3d.update); - - // set chart state - chart.set('state', 'ok'); - }); - }); - } -}); - -}); \ No newline at end of file diff -r feec63e4fc986281fdd3a00478d410bc6280848b -r 8ffa9ee618649b042292610cf8d10cff161c5235 config/plugins/visualizations/charts/static/charts/line/config.js --- /dev/null +++ b/config/plugins/visualizations/charts/static/charts/line/config.js @@ -0,0 +1,12 @@ +define([], function() { + +return { + title : 'Line chart', + columns : { + y : { + title : 'Values for y-axis' + } + } +}; + +}); \ No newline at end of file diff -r feec63e4fc986281fdd3a00478d410bc6280848b -r 8ffa9ee618649b042292610cf8d10cff161c5235 config/plugins/visualizations/charts/static/charts/line/line.js --- /dev/null +++ b/config/plugins/visualizations/charts/static/charts/line/line.js @@ -0,0 +1,40 @@ +// dependencies +define(['utils/utils'], function(Utils) { + +// widget +return Backbone.View.extend( +{ + // initialize + initialize: function(app, options) { + this.app = app; + this.options = options; + }, + + // render + draw : function(chart, request_dictionary) + { + // request data + var self = this; + this.app.datasets.request(request_dictionary, function(data) { + nv.addGraph(function() { + self.chart_3d = nv.models.lineChart(); + + self.chart_3d.xAxis + .tickFormat(d3.format(',f')); + + self.chart_3d.yAxis + .tickFormat(d3.format(',.2f')); + + self.options.svg.datum(data) + .call(self.chart_3d); + + nv.utils.windowResize(self.chart_3d.update); + + // set chart state + chart.set('state', 'ok'); + }); + }); + } +}); + +}); \ No newline at end of file diff -r feec63e4fc986281fdd3a00478d410bc6280848b -r 8ffa9ee618649b042292610cf8d10cff161c5235 config/plugins/visualizations/charts/static/charts/linewithfocus.js --- a/config/plugins/visualizations/charts/static/charts/linewithfocus.js +++ /dev/null @@ -1,40 +0,0 @@ -// dependencies -define(['utils/utils'], function(Utils) { - -// widget -return Backbone.View.extend( -{ - // initialize - initialize: function(app, options) { - this.app = app; - this.options = options; - }, - - // render - plot : function(chart, request_dictionary) - { - // request data - var self = this; - this.app.datasets.request(request_dictionary, function(data) { - nv.addGraph(function() { - self.chart_3d = nv.models.lineWithFocusChart(); - - self.chart_3d.xAxis - .tickFormat(d3.format(',f')); - - self.chart_3d.yAxis - .tickFormat(d3.format(',.2f')); - - self.options.svg.datum(data) - .call(self.chart_3d); - - nv.utils.windowResize(self.chart_3d.update); - - // set chart state - chart.set('state', 'ok'); - }); - }); - } -}); - -}); \ No newline at end of file diff -r feec63e4fc986281fdd3a00478d410bc6280848b -r 8ffa9ee618649b042292610cf8d10cff161c5235 config/plugins/visualizations/charts/static/charts/linewithfocus/config.js --- /dev/null +++ b/config/plugins/visualizations/charts/static/charts/linewithfocus/config.js @@ -0,0 +1,12 @@ +define([], function() { + +return { + title : 'Line chart (with focus)', + columns : { + y : { + title : 'Values for y-axis' + } + } +}; + +}); \ No newline at end of file diff -r feec63e4fc986281fdd3a00478d410bc6280848b -r 8ffa9ee618649b042292610cf8d10cff161c5235 config/plugins/visualizations/charts/static/charts/linewithfocus/linewithfocus.js --- /dev/null +++ b/config/plugins/visualizations/charts/static/charts/linewithfocus/linewithfocus.js @@ -0,0 +1,40 @@ +// dependencies +define(['utils/utils'], function(Utils) { + +// widget +return Backbone.View.extend( +{ + // initialize + initialize: function(app, options) { + this.app = app; + this.options = options; + }, + + // render + draw : function(chart, request_dictionary) + { + // request data + var self = this; + this.app.datasets.request(request_dictionary, function(data) { + nv.addGraph(function() { + self.chart_3d = nv.models.lineWithFocusChart(); + + self.chart_3d.xAxis + .tickFormat(d3.format(',f')); + + self.chart_3d.yAxis + .tickFormat(d3.format(',.2f')); + + self.options.svg.datum(data) + .call(self.chart_3d); + + nv.utils.windowResize(self.chart_3d.update); + + // set chart state + chart.set('state', 'ok'); + }); + }); + } +}); + +}); \ No newline at end of file diff -r feec63e4fc986281fdd3a00478d410bc6280848b -r 8ffa9ee618649b042292610cf8d10cff161c5235 config/plugins/visualizations/charts/static/charts/piechart.js --- a/config/plugins/visualizations/charts/static/charts/piechart.js +++ /dev/null @@ -1,54 +0,0 @@ -// dependencies -define(['utils/utils'], function(Utils) { - -// widget -return Backbone.View.extend( -{ - // initialize - initialize: function(app, options) { - this.app = app; - this.options = options; - }, - - // render - plot : function(chart, request_dictionary) - { - // request data - var self = this; - this.app.datasets.request(request_dictionary, function(data) { - - // loop through data groups - for (var key in request_dictionary.groups) { - // get group - var group = request_dictionary.groups[key]; - - // format chart data - var pie_data = []; - for (var key in group.values) { - var value = group.values[key]; - pie_data.push ({ - key : value.x, - y : value.y - }); - } - - // add graph to screen - nv.addGraph(function() { - self.chart_3d = nv.models.pieChart() - .donut(true) - .showLegend(false); - - self.options.svg.datum(pie_data) - .call(self.chart_3d); - - nv.utils.windowResize(self.chart_3d.update); - - // set chart state - chart.set('state', 'ok'); - }); - } - }); - } -}); - -}); \ No newline at end of file diff -r feec63e4fc986281fdd3a00478d410bc6280848b -r 8ffa9ee618649b042292610cf8d10cff161c5235 config/plugins/visualizations/charts/static/charts/piechart/config.js --- /dev/null +++ b/config/plugins/visualizations/charts/static/charts/piechart/config.js @@ -0,0 +1,12 @@ +define([], function() { + +return { + title : 'Pie chart', + columns : { + y : { + title : 'Values for y-axis' + } + } +}; + +}); \ No newline at end of file diff -r feec63e4fc986281fdd3a00478d410bc6280848b -r 8ffa9ee618649b042292610cf8d10cff161c5235 config/plugins/visualizations/charts/static/charts/piechart/piechart.js --- /dev/null +++ b/config/plugins/visualizations/charts/static/charts/piechart/piechart.js @@ -0,0 +1,54 @@ +// dependencies +define(['utils/utils'], function(Utils) { + +// widget +return Backbone.View.extend( +{ + // initialize + initialize: function(app, options) { + this.app = app; + this.options = options; + }, + + // render + draw : function(chart, request_dictionary) + { + // request data + var self = this; + this.app.datasets.request(request_dictionary, function(data) { + + // loop through data groups + for (var key in request_dictionary.groups) { + // get group + var group = request_dictionary.groups[key]; + + // format chart data + var pie_data = []; + for (var key in group.values) { + var value = group.values[key]; + pie_data.push ({ + key : value.x, + y : value.y + }); + } + + // add graph to screen + nv.addGraph(function() { + self.chart_3d = nv.models.pieChart() + .donut(true) + .showLegend(false); + + self.options.svg.datum(pie_data) + .call(self.chart_3d); + + nv.utils.windowResize(self.chart_3d.update); + + // set chart state + chart.set('state', 'ok'); + }); + } + }); + } +}); + +}); \ No newline at end of file diff -r feec63e4fc986281fdd3a00478d410bc6280848b -r 8ffa9ee618649b042292610cf8d10cff161c5235 config/plugins/visualizations/charts/static/charts/scatterplot.js --- a/config/plugins/visualizations/charts/static/charts/scatterplot.js +++ /dev/null @@ -1,40 +0,0 @@ -// dependencies -define(['utils/utils'], function(Utils) { - -// widget -return Backbone.View.extend( -{ - // initialize - initialize: function(app, options) { - this.app = app; - this.options = options; - }, - - // render - plot : function(chart, request_dictionary) - { - // request data - var self = this; - this.app.datasets.request(request_dictionary, function(data) { - nv.addGraph(function() { - self.d3_chart = nv.models.scatterChart() - .showDistX(true) - .showDistY(true) - .color(d3.scale.category10().range()); - - self.d3_chart.xAxis.tickFormat(d3.format('.02f')) - self.d3_chart.yAxis.tickFormat(d3.format('.02f')) - - self.options.svg.datum(data) - .call(self.d3_chart); - - nv.utils.windowResize(self.d3_chart.update); - - // set chart state - chart.set('state', 'ok'); - }); - }); - } -}); - -}); \ No newline at end of file diff -r feec63e4fc986281fdd3a00478d410bc6280848b -r 8ffa9ee618649b042292610cf8d10cff161c5235 config/plugins/visualizations/charts/static/charts/scatterplot/config.js --- /dev/null +++ b/config/plugins/visualizations/charts/static/charts/scatterplot/config.js @@ -0,0 +1,15 @@ +define([], function() { + +return { + title : 'Scatter plot', + columns : { + x : { + title : 'Values for x-axis' + }, + y : { + title : 'Values for y-axis' + } + } +}; + +}); \ No newline at end of file diff -r feec63e4fc986281fdd3a00478d410bc6280848b -r 8ffa9ee618649b042292610cf8d10cff161c5235 config/plugins/visualizations/charts/static/charts/scatterplot/scatterplot.js --- /dev/null +++ b/config/plugins/visualizations/charts/static/charts/scatterplot/scatterplot.js @@ -0,0 +1,40 @@ +// dependencies +define(['utils/utils'], function(Utils) { + +// widget +return Backbone.View.extend( +{ + // initialize + initialize: function(app, options) { + this.app = app; + this.options = options; + }, + + // render + draw : function(chart, request_dictionary) + { + // request data + var self = this; + this.app.datasets.request(request_dictionary, function(data) { + nv.addGraph(function() { + self.d3_chart = nv.models.scatterChart() + .showDistX(true) + .showDistY(true) + .color(d3.scale.category10().range()); + + self.d3_chart.xAxis.tickFormat(d3.format('.02f')) + self.d3_chart.yAxis.tickFormat(d3.format('.02f')) + + self.options.svg.datum(data) + .call(self.d3_chart); + + nv.utils.windowResize(self.d3_chart.update); + + // set chart state + chart.set('state', 'ok'); + }); + }); + } +}); + +}); \ No newline at end of file diff -r feec63e4fc986281fdd3a00478d410bc6280848b -r 8ffa9ee618649b042292610cf8d10cff161c5235 config/plugins/visualizations/charts/static/charts/stackedarea.js --- a/config/plugins/visualizations/charts/static/charts/stackedarea.js +++ /dev/null @@ -1,44 +0,0 @@ -// dependencies -define(['utils/utils'], function(Utils) { - -// widget -return Backbone.View.extend( -{ - // initialize - initialize: function(app, options) { - this.app = app; - this.options = options; - }, - - // render - plot : function(chart, request_dictionary) - { - // request data - var self = this; - this.app.datasets.request(request_dictionary, function(data) { - nv.addGraph(function() { - // make plot - self.d3_chart = nv.models.stackedAreaChart() - .x(function(d) { - return d.x - }) - .y(function(d) { - return d.y - }) - .clipEdge(true); - - self.d3_chart.xAxis.tickFormat(function() { return ''; }); - - self.options.svg.datum(data) - .call(self.d3_chart); - - nv.utils.windowResize(self.d3_chart.update); - - // set chart state - chart.set('state', 'ok'); - }); - }); - } -}); - -}); \ No newline at end of file diff -r feec63e4fc986281fdd3a00478d410bc6280848b -r 8ffa9ee618649b042292610cf8d10cff161c5235 config/plugins/visualizations/charts/static/charts/stackedarea/config.js --- /dev/null +++ b/config/plugins/visualizations/charts/static/charts/stackedarea/config.js @@ -0,0 +1,12 @@ +define([], function() { + +return { + title : 'Stacked area', + columns : { + y : { + title : 'Values for y-axis' + } + } +}; + +}); \ No newline at end of file diff -r feec63e4fc986281fdd3a00478d410bc6280848b -r 8ffa9ee618649b042292610cf8d10cff161c5235 config/plugins/visualizations/charts/static/charts/stackedarea/stackedarea.js --- /dev/null +++ b/config/plugins/visualizations/charts/static/charts/stackedarea/stackedarea.js @@ -0,0 +1,44 @@ +// dependencies +define(['utils/utils'], function(Utils) { + +// widget +return Backbone.View.extend( +{ + // initialize + initialize: function(app, options) { + this.app = app; + this.options = options; + }, + + // render + draw : function(chart, request_dictionary) + { + // request data + var self = this; + this.app.datasets.request(request_dictionary, function(data) { + nv.addGraph(function() { + // make plot + self.d3_chart = nv.models.stackedAreaChart() + .x(function(d) { + return d.x + }) + .y(function(d) { + return d.y + }) + .clipEdge(true); + + self.d3_chart.xAxis.tickFormat(function() { return ''; }); + + self.options.svg.datum(data) + .call(self.d3_chart); + + nv.utils.windowResize(self.d3_chart.update); + + // set chart state + chart.set('state', 'ok'); + }); + }); + } +}); + +}); \ No newline at end of file diff -r feec63e4fc986281fdd3a00478d410bc6280848b -r 8ffa9ee618649b042292610cf8d10cff161c5235 config/plugins/visualizations/charts/static/charts/types.js --- /dev/null +++ b/config/plugins/visualizations/charts/static/charts/types.js @@ -0,0 +1,36 @@ +// dependencies +define(['plugin/charts/bardiagram/config', + 'plugin/charts/histogram/config', + 'plugin/charts/horizontal/config', + 'plugin/charts/line/config', + 'plugin/charts/linewithfocus/config', + 'plugin/charts/piechart/config', + 'plugin/charts/scatterplot/config', + 'plugin/charts/stackedarea/config', + ], function(bardiagram, + histogram, + horizontal, + line, + linewithfocus, + piechart, + scatterplot, + stackedarea + ) { + +// widget +return Backbone.Model.extend( +{ + // types + defaults: { + 'bardiagram' : bardiagram, + 'horizontal' : horizontal, + 'histogram' : histogram, + 'line' : line, + 'linewithfocus' : linewithfocus, + 'piechart' : piechart, + 'scatterplot' : scatterplot, + 'stackedarea' : stackedarea + } +}); + +}); \ No newline at end of file diff -r feec63e4fc986281fdd3a00478d410bc6280848b -r 8ffa9ee618649b042292610cf8d10cff161c5235 config/plugins/visualizations/charts/static/library/ui.js --- a/config/plugins/visualizations/charts/static/library/ui.js +++ b/config/plugins/visualizations/charts/static/library/ui.js @@ -69,6 +69,35 @@ }); // plugin +var Icon = Backbone.View.extend( +{ + // options + optionsDefault: { + float : 'right', + icon : '', + tooltip : '', + placement : 'bottom' + }, + + // 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 '<span class="fa ' + options.icon + '" style="font-size: 1.2em;"/>'; + } +}); + +// plugin var ButtonIcon = Backbone.View.extend( { // options @@ -481,6 +510,7 @@ return { Label : Label, Button : Button, + Icon : Icon, ButtonIcon : ButtonIcon, Input : Input, Anchor : Anchor, diff -r feec63e4fc986281fdd3a00478d410bc6280848b -r 8ffa9ee618649b042292610cf8d10cff161c5235 config/plugins/visualizations/charts/static/models/chart.js --- a/config/plugins/visualizations/charts/static/models/chart.js +++ b/config/plugins/visualizations/charts/static/models/chart.js @@ -19,6 +19,7 @@ initialize: function(options) { this.groups = new Groups(); + this.settings = new Backbone.Model(); }, // reset @@ -26,6 +27,7 @@ { this.clear({silent: true}).set(this.defaults); this.groups.reset(); + this.settings.clear(); this.trigger('reset', this); }, @@ -33,11 +35,19 @@ copy: function(new_chart) { // copy chart/groups var current = this; + + // set attributes + current.clear({silent: true}).set(this.defaults); current.set(new_chart.attributes); + + // set nested models/collections + current.settings = new_chart.settings.clone(); current.groups.reset(); new_chart.groups.each(function(group) { current.groups.add(group.clone()); }); + + // trigger change current.trigger('change', current); }, diff -r feec63e4fc986281fdd3a00478d410bc6280848b -r 8ffa9ee618649b042292610cf8d10cff161c5235 config/plugins/visualizations/charts/static/models/types.js --- a/config/plugins/visualizations/charts/static/models/types.js +++ /dev/null @@ -1,80 +0,0 @@ -// dependencies -define([], function() { - -// widget -return Backbone.Model.extend( -{ - // types - defaults: { - 'bardiagram' : { - title : 'Bar diagram', - columns : { - y : { - title : 'Values for y-axis' - } - } - }, - 'horizontal' : { - title : 'Bar diagram (horizontal)', - columns : { - y : { - title : 'Values for y-axis' - } - } - }, - 'histogram' : { - title : 'Histogram', - mode : 'execute', - columns : { - y : { - title : 'Derive frequencies' - } - } - }, - 'line' : { - title : 'Line chart', - columns : { - y : { - title : 'Values for y-axis' - } - } - }, - 'linewithfocus' : { - title : 'Line chart (with focus)', - columns : { - y : { - title : 'Values for y-axis' - } - } - }, - 'piechart' : { - title : 'Pie chart', - columns : { - y : { - title : 'Values for y-axis' - } - } - }, - 'scatterplot' : { - title : 'Scatter plot', - columns : { - x : { - title : 'Values for x-axis' - }, - y : { - title : 'Values for y-axis' - } - } - }, - 'stackedarea' : { - title : 'Stacked area', - columns : { - y : { - title : 'Values for y-axis' - } - } - } - } -}); - -}); \ No newline at end of file diff -r feec63e4fc986281fdd3a00478d410bc6280848b -r 8ffa9ee618649b042292610cf8d10cff161c5235 config/plugins/visualizations/charts/static/views/chart.js --- a/config/plugins/visualizations/charts/static/views/chart.js +++ b/config/plugins/visualizations/charts/static/views/chart.js @@ -1,6 +1,8 @@ // dependencies -define(['mvc/ui/ui-tabs', 'plugin/library/table', 'plugin/library/ui', 'utils/utils', 'plugin/models/chart', 'plugin/models/group', 'plugin/views/group'], - function(Tabs, Table, Ui, Utils, Chart, Group, GroupView) { +define(['mvc/ui/ui-tabs', 'plugin/library/table', 'plugin/library/ui', 'utils/utils', + 'plugin/models/chart', 'plugin/models/group', + 'plugin/views/group', 'plugin/views/settings'], + function(Tabs, Table, Ui, Utils, Chart, Group, GroupView, SettingsView) { // widget return Backbone.View.extend( @@ -33,8 +35,8 @@ if (self.chart.groups.length > 0) { // show modal self.app.modal.show({ - title : 'Switching the chart type?', - body : 'If you continue your data selections will cleared.', + title : 'Switching to another chart type?', + body : 'If you continue your settings and selections will be reseted.', buttons : { 'Cancel' : function() { // hide modal @@ -55,11 +57,12 @@ } }, onchange : function(type) { + // reset type relevant chart content + self.chart.groups.reset(); + self.chart.settings.clear(); + // update chart type self.chart.set({type: type}); - - // reset groups - self.chart.groups.reset(); }, content: 'No chart types available' }); @@ -127,17 +130,31 @@ }); // append element - var $settings = $('<div/>'); - $settings.append(Utils.wrap((new Ui.Label({ title : 'Provide a chart title:'})).$el)); - $settings.append(Utils.wrap(this.title.$el)); - $settings.append(Utils.wrap((new Ui.Label({ title : 'Select a chart type:'})).$el)); - $settings.append(Utils.wrap(this.table.$el)); + var $main = $('<div/>'); + $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)); + + // add tab + this.tabs.add({ + id : 'main', + title : 'Start', + $el : $main + }); + + // + // main settings tab + // + + // create settings view + this.settings = new SettingsView(this.app); // add tab this.tabs.add({ id : 'settings', - title : 'Start', - $el : $settings + title : 'Configuration', + $el : this.settings.$el }); // elements diff -r feec63e4fc986281fdd3a00478d410bc6280848b -r 8ffa9ee618649b042292610cf8d10cff161c5235 config/plugins/visualizations/charts/static/views/charts.js --- a/config/plugins/visualizations/charts/static/views/charts.js +++ b/config/plugins/visualizations/charts/static/views/charts.js @@ -156,11 +156,13 @@ // change _changeChart: function(chart) { - // add chart - this._addChart(chart); + if (chart.get('type')) { + // add chart + this._addChart(chart); - // select available chart - this.table.value(chart.id); + // select available chart + this.table.value(chart.id); + } } }); diff -r feec63e4fc986281fdd3a00478d410bc6280848b -r 8ffa9ee618649b042292610cf8d10cff161c5235 config/plugins/visualizations/charts/static/views/viewport.js --- a/config/plugins/visualizations/charts/static/views/viewport.js +++ b/config/plugins/visualizations/charts/static/views/viewport.js @@ -135,7 +135,7 @@ var id = '#' + chart_id; // create element - var $chart_el = $(this._template({id: id, height : this.options.height})); + var $chart_el = $(this._template({id: id})); // add to portlet this.portlet.append($chart_el); @@ -194,7 +194,7 @@ // create chart view var self = this; - require(['plugin/charts/' + chart_type], function(ChartView) { + require(['plugin/charts/' + chart_type + '/' + chart_type], function(ChartView) { // create chart var view = new ChartView(self.app, {svg : svg}); @@ -202,10 +202,10 @@ var mode = chart_settings.mode; if (mode == 'execute') { self.app.jobs.submit(chart, self._defaultRequestString(chart), function() { - view.plot(chart, self._defaultRequestDictionary(chart)); + view.draw(chart, self._defaultRequestDictionary(chart)); }); } else { - view.plot(chart, self._defaultRequestDictionary(chart)); + view.draw(chart, self._defaultRequestDictionary(chart)); } }); }, @@ -229,7 +229,7 @@ '<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;"/>' + '</span>' + - '<svg style="height: ' + options.height + 'px;"/>' + + '<svg style="height: auto;"/>' + '</div>'; }, Repository URL: https://bitbucket.org/galaxy/galaxy-central/ -- This is a commit notification from bitbucket.org. You are receiving this because you have the service enabled, addressing the recipient of this email.