commit/galaxy-central: guerler: Charts: Add custom heatmap, unify chart configuration
1 new commit in galaxy-central: https://bitbucket.org/galaxy/galaxy-central/commits/79ddd419dd50/ Changeset: 79ddd419dd50 User: guerler Date: 2014-06-14 01:04:41 Summary: Charts: Add custom heatmap, unify chart configuration Affected #: 29 files diff -r 4bcc1949021ba358ea3e1dbf624d0014e8fab525 -r 79ddd419dd50430978b753f4f0abf2564e02047a config/plugins/visualizations/charts/static/app.css --- a/config/plugins/visualizations/charts/static/app.css +++ b/config/plugins/visualizations/charts/static/app.css @@ -48,7 +48,7 @@ margin-left: 5px; top: -1px; font-size: 1.0em; - display: inline-block; + display: inline; } .charts-viewport .icon { diff -r 4bcc1949021ba358ea3e1dbf624d0014e8fab525 -r 79ddd419dd50430978b753f4f0abf2564e02047a config/plugins/visualizations/charts/static/charts/forms/default.js --- /dev/null +++ b/config/plugins/visualizations/charts/static/charts/forms/default.js @@ -0,0 +1,266 @@ +define([], function() { + +return { + title : '', + category : '', + library : '', + tag : '', + keywords : '', + query_limit : 0, + settings : { + separator_x : { + 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' + }, + x_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', + operations : { + hide : ['x_axis_precision'] + } + }, + { + label : 'Auto', + value : 'auto', + operations : { + hide : ['x_axis_precision'] + } + }, + { + label : 'Float', + value : 'f', + operations : { + show : ['x_axis_precision'] + } + }, + { + label : 'Exponent', + value : 'e', + operations : { + show : ['x_axis_precision'] + } + }, + { + label : 'Integer', + value : 'd', + operations : { + hide : ['x_axis_precision'] + } + }, + { + label : 'Percentage', + value : 'p', + operations : { + show : ['x_axis_precision'] + } + }, + { + label : 'Rounded', + value : 'r', + operations : { + show : ['x_axis_precision'] + } + }, + { + label : 'SI-prefix', + value : 's', + operations : { + show : ['x_axis_precision'] + } + } + ] + }, + x_axis_precision : { + 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_y : { + 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', + operations : { + hide : ['y_axis_precision'] + } + }, + { + label : 'Auto', + value : 'auto', + operations : { + hide : ['y_axis_precision'] + } + }, + { + label : 'Float', + value : 'f', + operations : { + show : ['y_axis_precision'] + } + }, + { + label : 'Exponent', + value : 'e', + operations : { + show : ['y_axis_precision'] + } + }, + { + label : 'Integer', + value : 'd', + operations : { + hide : ['y_axis_precision'] + } + }, + { + label : 'Percentage', + value : 'p', + operations : { + show : ['y_axis_precision'] + } + }, + { + label : 'Rounded', + value : 'r', + operations : { + show : ['y_axis_precision'] + } + }, + { + label : 'SI-prefix', + value : 's', + operations : { + show : ['y_axis_precision'] + } + } + ] + }, + y_axis_precision : { + 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_legend : { + title : 'Others', + type : 'separator' + }, + show_legend : { + title : 'Show legend', + info : 'Would you like to add a legend?', + type : 'radiobutton', + init : 'true', + data : [ + { + label : 'Yes', + value : 'true' + }, + { + label : 'No', + value : 'false' + } + ] + }, + use_panels : { + title : 'Use multi-panels', + info : 'Would you like to separate your data into individual panels?', + type : 'radiobutton', + init : 'false', + data : [ + { + label : 'Yes', + value : 'true' + }, + { + label : 'No', + value : 'false' + } + ] + } + } +}; + +}); \ No newline at end of file diff -r 4bcc1949021ba358ea3e1dbf624d0014e8fab525 -r 79ddd419dd50430978b753f4f0abf2564e02047a config/plugins/visualizations/charts/static/charts/jqplot/common/config.js --- a/config/plugins/visualizations/charts/static/charts/jqplot/common/config.js +++ b/config/plugins/visualizations/charts/static/charts/jqplot/common/config.js @@ -1,108 +1,21 @@ -define([], function() { +define(['plugin/charts/forms/default'], function(config_default) { -return { +return $.extend(true, {}, config_default, { title : '', category : '', - library : 'JqPlot', + library : 'jqPlot', tag : 'div', - keywords : 'default medium', + zoomable : true, + keywords : 'medium', query_limit : 10000, settings : { - separator_label : { - title : 'X axis', + separator_grid : { + title : 'Grids', type : 'separator' }, - x_axis_label : { - title : 'Axis label', - info : 'Provide a label for the axis.', - type : 'text', - init : 'X-axis', - placeholder : 'Axis label' - }, - x_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 : ['x_axis_tick'] - }, - { - label : 'Auto', - value : 'auto', - hide : ['x_axis_tick'] - }, - { - label : 'Float', - value : 'f', - show : ['x_axis_tick'] - }, - { - label : 'Exponent', - value : 'e', - show : ['x_axis_tick'] - }, - { - label : 'Integer', - value : 'd', - hide : ['x_axis_tick'] - }, - { - label : 'Percentage', - value : 'p', - show : ['x_axis_tick'] - }, - { - label : 'Rounded', - value : 'r', - show : ['x_axis_tick'] - }, - { - label : 'SI-prefix', - value : 's', - show : ['x_axis_tick'] - } - ] - }, - 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' - } - ] - - }, x_axis_grid : { title : 'Axis grid', - info : 'Would you like to show grid lines for this axis?', + info : 'Would you like to show grid lines for the X axis?', type : 'radiobutton', init : 'false', data : [ @@ -116,101 +29,9 @@ } ] }, - 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?', + info : 'Would you like to show grid lines for the Y axis?', type : 'radiobutton', init : 'true', data : [ @@ -223,44 +44,8 @@ value : 'false' } ] - }, - separator_legend : { - title : 'Others', - type : 'separator' - }, - show_legend : { - title : 'Show legend', - info : 'Would you like to add a legend?', - type : 'radiobutton', - init : 'true', - data : [ - { - label : 'Yes', - value : 'true' - }, - { - label : 'No', - value : 'false' - } - ] - }, - use_panels : { - title : 'Use multi-panels', - info : 'Would you like to separate your data into individual panels?', - type : 'radiobutton', - init : 'false', - data : [ - { - label : 'Yes', - value : 'true' - }, - { - label : 'No', - value : 'false' - } - ] } } -}; +}); }); \ No newline at end of file diff -r 4bcc1949021ba358ea3e1dbf624d0014e8fab525 -r 79ddd419dd50430978b753f4f0abf2564e02047a config/plugins/visualizations/charts/static/charts/jqplot/common/wrapper.js --- a/config/plugins/visualizations/charts/static/charts/jqplot/common/wrapper.js +++ b/config/plugins/visualizations/charts/static/charts/jqplot/common/wrapper.js @@ -54,7 +54,7 @@ this._makeAxes(groups, plot_config, chart.settings); // make custom series call - if (makeSeries) { + if (makeSeriesLabels) { plot_config.series = makeSeriesLabels(groups, plot_config); } else { plot_config.series = this._makeSeriesLabels(groups); @@ -92,7 +92,6 @@ var plot = drawGraph(); // catch window resize event - var self = this; $(window).on('resize', function () { drawGraph(); }); @@ -126,41 +125,21 @@ categories = Tools.makeCategories(groups); } - // make axis + // make axes function makeAxis (id) { - var axis = plot_config.axes[id + 'axis'].tickOptions; - var type = settings.get(id + '_axis_type'); - var tick = settings.get(id + '_axis_tick'); - var is_category = categories.array[id]; - - // hide axis - if (type == 'hide') { - axis.formatter = function(format, value) { return '' }; - return; - } - - // format values/labels - if (type == 'auto') { - if (is_category) { - axis.formatter = function(format, value) { - return categories.array[id][value] || ''; - }; - } - } else { - var formatter = d3.format(tick + type); - if (is_category) { - axis.formatter = function(format, value) { - return formatter(categories.array[id][value]); - }; - } else { - axis.formatter = function(format, value) { - return formatter(value); + Tools.makeAxis({ + categories : categories.array[id], + type : settings.get(id + '_axis_type'), + precision : settings.get(id + '_axis_precision'), + formatter : function(formatter) { + if (formatter) { + plot_config.axes[id + 'axis'].tickOptions.formatter = function(format, value) { + return formatter(value); + }; } } - } + }); }; - - // make axes makeAxis('x'); makeAxis('y'); }, diff -r 4bcc1949021ba358ea3e1dbf624d0014e8fab525 -r 79ddd419dd50430978b753f4f0abf2564e02047a config/plugins/visualizations/charts/static/charts/nvd3/bar_horizontal/config.js --- a/config/plugins/visualizations/charts/static/charts/nvd3/bar_horizontal/config.js +++ b/config/plugins/visualizations/charts/static/charts/nvd3/bar_horizontal/config.js @@ -3,7 +3,6 @@ return $.extend(true, {}, nvd3_config, { title : 'Horizontal', category : 'Bar diagrams', - keywords : 'default small', settings : { x_axis_type : { init : 'hide' diff -r 4bcc1949021ba358ea3e1dbf624d0014e8fab525 -r 79ddd419dd50430978b753f4f0abf2564e02047a config/plugins/visualizations/charts/static/charts/nvd3/bar_horizontal_stacked/config.js --- a/config/plugins/visualizations/charts/static/charts/nvd3/bar_horizontal_stacked/config.js +++ b/config/plugins/visualizations/charts/static/charts/nvd3/bar_horizontal_stacked/config.js @@ -3,7 +3,6 @@ return $.extend(true, {}, nvd3_config, { title : 'Stacked horizontal', category : 'Bar diagrams', - keywords : 'default small', settings : { x_axis_type : { init : 'hide' diff -r 4bcc1949021ba358ea3e1dbf624d0014e8fab525 -r 79ddd419dd50430978b753f4f0abf2564e02047a config/plugins/visualizations/charts/static/charts/nvd3/bar_stacked/config.js --- a/config/plugins/visualizations/charts/static/charts/nvd3/bar_stacked/config.js +++ b/config/plugins/visualizations/charts/static/charts/nvd3/bar_stacked/config.js @@ -3,7 +3,6 @@ return $.extend(true, {}, nvd3_config, { title : 'Stacked', category : 'Bar diagrams', - keywords : 'default small', columns : { x : { title : 'Values for x-axis', diff -r 4bcc1949021ba358ea3e1dbf624d0014e8fab525 -r 79ddd419dd50430978b753f4f0abf2564e02047a config/plugins/visualizations/charts/static/charts/nvd3/common/config.js --- a/config/plugins/visualizations/charts/static/charts/nvd3/common/config.js +++ b/config/plugins/visualizations/charts/static/charts/nvd3/common/config.js @@ -1,234 +1,11 @@ -define(['plugin/plugins/nvd3/nv.d3'], function() { - -return { +define(['plugin/charts/forms/default', 'plugin/plugins/nvd3/nv.d3'], function(config_default) { +return $.extend(true, {}, config_default, { title : '', category : '', library : 'NVD3', tag : 'svg', keywords : 'small', - query_limit : 500, - 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' - }, - x_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 : ['x_axis_tick'] - }, - { - label : 'Auto', - value : 'auto', - hide : ['x_axis_tick'] - }, - { - label : 'Float', - value : 'f', - show : ['x_axis_tick'] - }, - { - label : 'Exponent', - value : 'e', - show : ['x_axis_tick'] - }, - { - label : 'Integer', - value : 'd', - hide : ['x_axis_tick'] - }, - { - label : 'Percentage', - value : 'p', - show : ['x_axis_tick'] - }, - { - label : 'Rounded', - value : 'r', - show : ['x_axis_tick'] - }, - { - label : 'SI-prefix', - value : 's', - show : ['x_axis_tick'] - } - ] - }, - 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', - 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' - } - ] - - }, - separator_legend : { - title : 'Others', - type : 'separator' - }, - show_legend : { - title : 'Show legend', - info : 'Would you like to add a legend?', - type : 'radiobutton', - init : 'true', - data : [ - { - label : 'Yes', - value : 'true' - }, - { - label : 'No', - value : 'false' - } - ] - }, - use_panels : { - title : 'Use multi-panels', - info : 'Would you like to separate your data into individual panels?', - type : 'radiobutton', - init : 'false', - data : [ - { - label : 'Yes', - value : 'true' - }, - { - label : 'No', - value : 'false' - } - ] - } - } -}; + query_limit : 500 +}); }); \ No newline at end of file diff -r 4bcc1949021ba358ea3e1dbf624d0014e8fab525 -r 79ddd419dd50430978b753f4f0abf2564e02047a config/plugins/visualizations/charts/static/charts/nvd3/common/wrapper.js --- a/config/plugins/visualizations/charts/static/charts/nvd3/common/wrapper.js +++ b/config/plugins/visualizations/charts/static/charts/nvd3/common/wrapper.js @@ -173,39 +173,21 @@ // result var categories = Tools.makeCategories(groups); - // make axis + // make axes function makeAxis (id) { - var axis = d3chart[id + 'Axis']; - var type = settings.get(id + '_axis_type'); - var tick = settings.get(id + '_axis_tick'); - var is_category = categories.array[id]; - - // hide axis - if (type == 'hide') { - axis.tickFormat(function() { return '' }); - return; - } - - // format values/labels - if (type == 'auto') { - if (is_category) { - axis.tickFormat(function(value) { - return categories.array[id][value] - }); + Tools.makeAxis({ + categories : categories.array[id], + type : settings.get(id + '_axis_type'), + precision : settings.get(id + '_axis_precision'), + formatter : function(formatter) { + if (formatter) { + d3chart[id + 'Axis'].tickFormat(function(value) { + return formatter(value); + }); + } } - } else { - var formatter = d3.format(tick + type); - if (is_category) { - axis.tickFormat(function(value) { - return formatter(categories.array[id][value]); - }); - } else { - axis.tickFormat(formatter); - } - } + }); }; - - // make axes makeAxis('x'); makeAxis('y'); }, diff -r 4bcc1949021ba358ea3e1dbf624d0014e8fab525 -r 79ddd419dd50430978b753f4f0abf2564e02047a config/plugins/visualizations/charts/static/charts/nvd3/histogram/config.js --- a/config/plugins/visualizations/charts/static/charts/nvd3/histogram/config.js +++ b/config/plugins/visualizations/charts/static/charts/nvd3/histogram/config.js @@ -21,7 +21,7 @@ y_axis_type : { init : 'f' }, - y_axis_tick : { + y_axis_precision : { init : '.2' } } diff -r 4bcc1949021ba358ea3e1dbf624d0014e8fab525 -r 79ddd419dd50430978b753f4f0abf2564e02047a config/plugins/visualizations/charts/static/charts/nvd3/histogram_discrete/config.js --- a/config/plugins/visualizations/charts/static/charts/nvd3/histogram_discrete/config.js +++ b/config/plugins/visualizations/charts/static/charts/nvd3/histogram_discrete/config.js @@ -21,7 +21,7 @@ y_axis_type : { init : 'f' }, - y_axis_tick : { + y_axis_precision : { init : '.2' } } diff -r 4bcc1949021ba358ea3e1dbf624d0014e8fab525 -r 79ddd419dd50430978b753f4f0abf2564e02047a config/plugins/visualizations/charts/static/charts/nvd3/line_focus/config.js --- a/config/plugins/visualizations/charts/static/charts/nvd3/line_focus/config.js +++ b/config/plugins/visualizations/charts/static/charts/nvd3/line_focus/config.js @@ -3,7 +3,7 @@ return $.extend(true, {}, nvd3_config, { title : 'Line with focus', category : 'Others', - keywords : 'default small', + zoomable : true, columns : { x : { title : 'Values for x-axis', diff -r 4bcc1949021ba358ea3e1dbf624d0014e8fab525 -r 79ddd419dd50430978b753f4f0abf2564e02047a config/plugins/visualizations/charts/static/charts/nvd3/pie/config.js --- a/config/plugins/visualizations/charts/static/charts/nvd3/pie/config.js +++ b/config/plugins/visualizations/charts/static/charts/nvd3/pie/config.js @@ -5,8 +5,7 @@ category : 'Area charts', library : 'NVD3', tag : 'svg', - keywords : 'default small', - use_panels : true, + keywords : 'small', columns : { label : { title : 'Labels', @@ -20,21 +19,9 @@ }, settings : { - show_legend : { - title : 'Show legend', - info : 'Would you like to add a legend?', - type : 'select', - init : 'false', - data : [ - { - label : 'Yes', - value : 'true' - }, - { - label : 'No', - value : 'false' - } - ] + main_separator : { + type : 'separator', + title : 'Pie chart settings' }, donut_ratio : { @@ -61,6 +48,23 @@ } ] }, + + show_legend : { + title : 'Show legend', + info : 'Would you like to add a legend?', + type : 'radiobutton', + init : 'false', + data : [ + { + label : 'Yes', + value : 'true' + }, + { + label : 'No', + value : 'false' + } + ] + }, label_separator : { type : 'separator', @@ -99,7 +103,7 @@ label_outside : { title : 'Show outside', info : 'Would you like to show labels outside the donut?', - type : 'select', + type : 'radiobutton', init : 'false', data : [ { @@ -111,6 +115,11 @@ value : 'false' } ] + }, + + use_panels : { + init : 'true', + hide : true } } }); diff -r 4bcc1949021ba358ea3e1dbf624d0014e8fab525 -r 79ddd419dd50430978b753f4f0abf2564e02047a config/plugins/visualizations/charts/static/charts/others/heatmap/config.js --- /dev/null +++ b/config/plugins/visualizations/charts/static/charts/others/heatmap/config.js @@ -0,0 +1,31 @@ +define(['plugin/charts/forms/default'], function(config_default) { + +return $.extend(true, {}, config_default, { + title : 'Heat map', + //execute : 'heatmap', + category : 'Others', + query_limit : 5, + library : 'Custom', + tag : 'div', + keywords : 'small', + columns : { + x : { + title : 'Column labels', + is_label : true, + is_numeric : true, + is_unique : true + }, + y : { + title : 'Row labels', + is_label : true, + is_numeric : true, + is_unique : true + }, + z : { + title : 'Observation', + is_numeric : true + } + } +}); + +}); \ No newline at end of file diff -r 4bcc1949021ba358ea3e1dbf624d0014e8fab525 -r 79ddd419dd50430978b753f4f0abf2564e02047a config/plugins/visualizations/charts/static/charts/others/heatmap/logo.png Binary file config/plugins/visualizations/charts/static/charts/others/heatmap/logo.png has changed diff -r 4bcc1949021ba358ea3e1dbf624d0014e8fab525 -r 79ddd419dd50430978b753f4f0abf2564e02047a config/plugins/visualizations/charts/static/charts/others/heatmap/wrapper.js --- /dev/null +++ b/config/plugins/visualizations/charts/static/charts/others/heatmap/wrapper.js @@ -0,0 +1,272 @@ +// dependencies +define(['plugin/charts/tools'], function(Tools) { + +// 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 self = this; + var plot = Tools.panelHelper({ + app : this.app, + canvas_list : this.options.canvas_list, + process_id : process_id, + chart : chart, + request_dictionary : request_dictionary, + render : function(canvas_id, groups) { + return self.render(canvas_id, groups) + } + }); + }, + + // render + render : function(canvas_id, groups) { + // collect parameters + this.canvas_id = canvas_id; + this.data = groups[0].values; + this.color_set = ['#ffffd9','#edf8b1','#c7e9b4','#7fcdbb','#41b6c4','#1d91c0','#225ea8','#253494','#081d58']; + + // result + var categories = Tools.makeUniqueCategories(groups); + + // get limits + this.xMax = d3.max(this.data, function(d) { return d.x; }); + this.yMax = d3.max(this.data, function(d) { return d.y; }); + this.zMax = d3.max(this.data, function(d) { return d.z; }); + + // + // domains/scales + // + this.xScale = d3.scale.linear().domain([0, this.xMax]); + this.yScale = d3.scale.linear().domain([0, this.yMax]); + this.zScale = d3.scale.ordinal().domain([0, this.zMax]); + + // refresh on window resize + var self = this; + $(window).on('resize', function () { + self.redraw(); + }); + + // draw + this.redraw(); + + // add zoom + this._addZoom(); + + // return + return true; + }, + + // redraw + redraw: function() { + // get parameters + var chart = this.options.chart; + var type = this.options.type; + var data = this.data; + var color_set = this.color_set; + var self = this; + + // get/reset container + var container = $('#' + this.canvas_id); + container.empty(); + + // set margin and heights + var margin = {top: 20, right: 90, bottom: 90, left: 100}, + width = parseInt(container.width()) - margin.left - margin.right, + height = parseInt(container.height()) - margin.top - margin.bottom; + + // + // create svg + // + var svg = d3.select('#' + this.canvas_id) + .append('svg') + .attr('width', width + margin.left + margin.right) + .attr('height', height + margin.top + margin.bottom) + .append('g') + .attr('class', 'heatmap') + .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')'); + + // + // set range + // + this.xScale.range([0, width]); + this.yScale.range([height, 0]); + this.zScale.range(color_set); + + // get domain + var xDomain = this.xScale.domain(); + var yDomain = this.yScale.domain(); + + // + // draw boxes + // + // get box properties + var rowCount = this.yScale.domain()[1] - this.yScale.domain()[0], + colCount = this.xScale.domain()[1] - this.xScale.domain()[0], + boxWidth = Math.max(1, Math.min(Math.floor(width / colCount), 20)), + boxHeight = Math.max(1, Math.min(Math.floor(height / rowCount), 20)); + + // box location + function _locator(d) { + return 'translate(' + self.xScale(d.x) + ',' + self.yScale(d.y) + ')'; + }; + + // box color + function _color (d) { + return self.zScale(d.z); + }; + + // clip path + var clip = svg.append('clipPath') + .attr('id', 'clip') + .append('rect') + .attr('x', 0) + .attr('y', boxHeight) + .attr('width', width) + .attr('height', height); + + // create chart area + var chartBody = svg.append('g') + .attr('clip-path', 'url(#clip)'); + + // add boxes to chart area + var boxes = chartBody.selectAll('g.box-group').data(data, function(d, i) { + return d.x + '\0' + d.y; + }); + var gEnter = boxes.enter().append('g') + .attr('class', 'box-group'); + gEnter.append('rect') + .attr('class','heat-box') + .attr('fill', 'red'); + boxes.selectAll('rect') + .attr('rx', 2) + .attr('ry', 2) + .attr('fill', _color) + .attr('width', boxWidth) + .attr('height', boxHeight) + .attr('transform', _locator); + boxes.exit().remove(); + + // draw x axis + this.xAxis = d3.svg.axis().scale(this.xScale).orient('bottom'); + this.xAxis.tickValues(d3.range(xDomain[0], xDomain[1], 1)); + this.gxAxis = svg.append('g') + .attr('class', 'x axis') + .style('stroke-width', 0) + .attr('transform', 'translate(0,' + (height + margin.top + boxHeight) + ')') + .call(this.xAxis); + + // draw y axis + this.yAxis = d3.svg.axis().scale(this.yScale).orient('left'); + this.yAxis.tickValues(d3.range(yDomain[0], yDomain[1], 1)); + this.gyAxis = svg.append('g') + .attr('class', 'y axis') + .style('stroke-width', 0) + .call(this.yAxis); + + // fix text + var xFontSize = Math.min(boxWidth, 12); + this.gxAxis.selectAll('text') + .style({'font-family': 'Courier New', 'font-size': xFontSize + 'px'}) + .attr('transform', 'rotate(-90)') + .attr('y', (boxWidth-xFontSize)/2); + + // fix text + var yFontSize = Math.min(boxHeight, 12); + this.gyAxis.selectAll('text') + .style({'font-family': 'Courier New', 'font-size': yFontSize + 'px'}) + .attr('y', -boxHeight/2 + boxHeight); + }, + + // add zoom handler + _addZoom: function() { + // link this + var self = this; + + // min/max boundaries + var x_boundary = this.xScale.domain().slice(); + var y_boundary = this.yScale.domain().slice(); + + // create d3 zoom handler + var d3zoom = d3.behavior.zoom(); + + // fix domain + function fixDomain(domain, boundary) { + domain[0] = parseInt(domain[0]); + domain[1] = parseInt(domain[1]); + domain[0] = Math.max(domain[0], boundary[0]); + domain[1] = Math.max(0, Math.min(domain[1], boundary[1])); + return domain; + }; + + // zoom event handler + function zoomed() { + var yDomain = fixDomain(self.yScale.domain(), y_boundary); + if (Math.abs(yDomain[1]-yDomain[0]) > 30) { + self.yScale.domain(yDomain); + self.gyAxis.call(self.yAxis); + } + var xDomain = fixDomain(self.xScale.domain(), x_boundary); + if (Math.abs(xDomain[1]-xDomain[0]) > 30) { + self.xScale.domain(xDomain); + self.gxAxis.call(self.xAxis); + } + self.redraw(); + }; + + // zoom event handler + function unzoomed() { + self.xScale.domain(x_boundary); + self.yScale.domain(y_boundary); + self.redraw(); + d3zoom.scale(1); + d3zoom.translate([0,0]); + }; + + // initialize wrapper + d3zoom.x(this.xScale) + .y(this.yScale) + .scaleExtent([1, 10]) + .on('zoom', zoomed); + + // clip edges + //svg.clipEdge(true); + + // add handler + var svg = d3.select('#' + this.canvas_id); + svg.call(d3zoom).on('dblclick.zoom', unzoomed); + }, + + // create axes formatting + _makeAxes: function(d3chart, settings) { + // make axes + function makeAxis (id) { + Tools.makeAxis({ + categories : categories.array[id], + type : settings.get(id + '_axis_type'), + precision : settings.get(id + '_axis_precision'), + formatter : function(formatter) { + if (formatter) { + d3chart[id + 'Axis']().tickFormat(function(value) { + return formatter(value); + }); + } + } + }); + }; + //makeAxis('x'); + //makeAxis('y'); + }, + + // handle error + _handleError: function(chart, err) { + chart.state('failed', err); + } +}); + +}); \ No newline at end of file diff -r 4bcc1949021ba358ea3e1dbf624d0014e8fab525 -r 79ddd419dd50430978b753f4f0abf2564e02047a config/plugins/visualizations/charts/static/charts/tools.js --- a/config/plugins/visualizations/charts/static/charts/tools.js +++ b/config/plugins/visualizations/charts/static/charts/tools.js @@ -246,14 +246,63 @@ counter : counter } }; + +// make axis +function makeAxis (options) { + var type = options.type; + var precision = options.precision; + var categories = options.categories; + var formatter = options.formatter; + // hide axis + if (type == 'hide') { + formatter(function() { return '' }); + return; + } + + // format values/labels + if (type == 'auto') { + if (categories) { + formatter(function(value) { + return categories[value] || ''; + }); + } + } else { + var d3format = d3.format(precision + type); + if (categories) { + formatter(function(value) { + var label = categories[value]; + if (label) { + if (isNaN(label)) { + return label; + } else { + try { + return d3format(label); + } catch (err) { + return label; + } + } + } else { + return ''; + } + }); + } else { + formatter(function(value) { + return d3format(value); + }); + } + } +}; + // return return { - panelHelper : panelHelper, - makeCategories : makeCategories, - makeSeries : makeSeries, - getDomains : getDomains, - mapCategories : mapCategories + panelHelper : panelHelper, + makeCategories : makeCategories, + makeUniqueCategories : makeUniqueCategories, + makeSeries : makeSeries, + getDomains : getDomains, + mapCategories : mapCategories, + makeAxis : makeAxis } }); \ No newline at end of file diff -r 4bcc1949021ba358ea3e1dbf624d0014e8fab525 -r 79ddd419dd50430978b753f4f0abf2564e02047a config/plugins/visualizations/charts/static/charts/types.js --- a/config/plugins/visualizations/charts/static/charts/types.js +++ b/config/plugins/visualizations/charts/static/charts/types.js @@ -15,7 +15,8 @@ 'plugin/charts/jqplot/bar/config', 'plugin/charts/jqplot/line/config', 'plugin/charts/jqplot/scatter/config', - 'plugin/charts/jqplot/boxplot/config' + 'plugin/charts/jqplot/boxplot/config', + 'plugin/charts/others/heatmap/config' ], function(nvd3_bar, nvd3_bar_stacked, nvd3_bar_horizontal, @@ -32,7 +33,8 @@ jqplot_bar, jqplot_line, jqplot_scatter, - jqplot_boxplot + jqplot_boxplot, + others_heatmap ) { // widget @@ -56,7 +58,8 @@ 'nvd3_histogram_discrete' : nvd3_histogram_discrete, 'jqplot_line' : jqplot_line, 'jqplot_scatter' : jqplot_scatter, - 'jqplot_boxplot' : jqplot_boxplot + 'jqplot_boxplot' : jqplot_boxplot, + 'others_heatmap' : others_heatmap } }); diff -r 4bcc1949021ba358ea3e1dbf624d0014e8fab525 -r 79ddd419dd50430978b753f4f0abf2564e02047a config/plugins/visualizations/charts/static/library/ui-table-form.js --- a/config/plugins/visualizations/charts/static/library/ui-table-form.js +++ b/config/plugins/visualizations/charts/static/library/ui-table-form.js @@ -97,13 +97,14 @@ // find selected dictionary var dict = _.findWhere(settings_def.data, {value: value}); - if (dict) { - for (var i in dict.show) { - var target = dict.show[i]; + if (dict && dict.operations) { + var operations = dict.operations; + for (var i in operations.show) { + var target = operations.show[i]; self.table.get(target).show(); } - for (var i in dict.hide) { - var target = dict.hide[i]; + for (var i in operations.hide) { + var target = operations.hide[i]; self.table.get(target).hide(); } } @@ -122,13 +123,14 @@ // find selected dictionary var dict = _.findWhere(settings_def.data, {value: value}); - if (dict) { - for (var i in dict.show) { - var target = dict.show[i]; + if (dict && dict.operations) { + var operations = dict.operations; + for (var i in operations.show) { + var target = operations.show[i]; self.table.get(target).show(); } - for (var i in dict.hide) { - var target = dict.hide[i]; + for (var i in operations.hide) { + var target = operations.hide[i]; self.table.get(target).hide(); } } @@ -226,6 +228,11 @@ // add to table this.table.append(id); + + // show/hide + if (settings_def.hide) { + this.table.get(id).hide(); + } } }); diff -r 4bcc1949021ba358ea3e1dbf624d0014e8fab525 -r 79ddd419dd50430978b753f4f0abf2564e02047a config/plugins/visualizations/charts/static/views/editor.js --- a/config/plugins/visualizations/charts/static/views/editor.js +++ b/config/plugins/visualizations/charts/static/views/editor.js @@ -207,7 +207,7 @@ this.chart.groups.each(function(group) { var title = group.get('key', ''); if (title == '') { - title = 'Chart data'; + title = 'Data label'; } self.tabs.title(group.id, ++counter + ': ' + title); }); diff -r 4bcc1949021ba358ea3e1dbf624d0014e8fab525 -r 79ddd419dd50430978b753f4f0abf2564e02047a config/plugins/visualizations/charts/static/views/types.js --- a/config/plugins/visualizations/charts/static/views/types.js +++ b/config/plugins/visualizations/charts/static/views/types.js @@ -138,10 +138,19 @@ // add chart types for (var id in this.categories[category]) { + // get type var type = this.categories[category][id]; + + // make title + var title = type.title + ' (' + type.library + ')'; + if (type.zoomable) { + title = '<span class="fa fa-search-plus"/>' + title; + } + + // append type to screen $el.append(Utils.wrap(this._template_item({ id : id, - title : type.title + ' (' + type.library + ')', + title : title, url : config.app_root + 'charts/' + this.app.chartPath(id) + '/logo.png' }))); } diff -r 4bcc1949021ba358ea3e1dbf624d0014e8fab525 -r 79ddd419dd50430978b753f4f0abf2564e02047a config/plugins/visualizations/charts/templates/charts.mako --- a/config/plugins/visualizations/charts/templates/charts.mako +++ b/config/plugins/visualizations/charts/templates/charts.mako @@ -29,6 +29,9 @@ ${h.javascript_link( app_root + "plugins/jqplot/jquery.jqplot.js" )} ${h.javascript_link( app_root + "plugins/jqplot/jquery.jqplot.plugins.js" )} + ## dc + ${h.javascript_link( app_root + "plugins/dc/crossfilter.js" )} + ## load merged/minified code ${h.javascript_link( app_root + "build-app.js" )} @@ -61,12 +64,13 @@ require.config({ baseUrl: config.root + "static/scripts/", paths: { - "plugin" : "${app_root}" + "plugin" : "${app_root}", + "d3" : "libs/d3" }, shim: { "libs/underscore": { exports: "_" }, "libs/backbone/backbone": { exports: "Backbone" }, - "d3": { exports: "d3"}, + "d3": { exports: "d3"} } }); This diff is so big that we needed to truncate the remainder. 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.
participants (1)
-
commits-noreply＠bitbucket.org