commit/galaxy-central: guerler: Charts: Improve axes labeling, formatting options and chart interaction
1 new commit in galaxy-central: https://bitbucket.org/galaxy/galaxy-central/commits/66cfcaf35801/ Changeset: 66cfcaf35801 User: guerler Date: 2014-06-11 08:30:52 Summary: Charts: Improve axes labeling, formatting options and chart interaction Affected #: 22 files diff -r c52cb1f827d49f0f0ee2c1c97d3626dd1b2cc348 -r 66cfcaf35801b8c80491743807ca4d491bfb42e6 config/plugins/visualizations/charts/static/charts/jqplot/bar/config.js --- a/config/plugins/visualizations/charts/static/charts/jqplot/bar/config.js +++ b/config/plugins/visualizations/charts/static/charts/jqplot/bar/config.js @@ -7,7 +7,8 @@ x : { title : 'Values for x-axis', is_label : true, - is_auto : true + is_auto : true, + is_unique : true }, y : { title : 'Values for y-axis', diff -r c52cb1f827d49f0f0ee2c1c97d3626dd1b2cc348 -r 66cfcaf35801b8c80491743807ca4d491bfb42e6 config/plugins/visualizations/charts/static/charts/jqplot/boxplot/wrapper.js --- a/config/plugins/visualizations/charts/static/charts/jqplot/boxplot/wrapper.js +++ b/config/plugins/visualizations/charts/static/charts/jqplot/boxplot/wrapper.js @@ -1,5 +1,5 @@ // dependencies -define(['plugin/charts/jqplot/common/wrapper'], function(Plot) { +define(['plugin/charts/jqplot/common/wrapper', 'plugin/charts/tools'], function(Plot, Tools) { // widget return Backbone.View.extend( @@ -19,8 +19,7 @@ group.columns = null; group.columns = { x: { - index: index++, - is_numeric: true + index : index++ } } } @@ -30,66 +29,67 @@ process_id : process_id, chart : chart, request_dictionary : request_dictionary, - makeConfig : function(plot_config){ + makeConfig : function(plot_config, groups){ + var boundary = Tools.getDomains(groups, 'x'); $.extend(true, plot_config, { seriesDefaults: { renderer: $.jqplot.OHLCRenderer, rendererOptions : { - candleStick : true + candleStick : true, + fillUpBody : true, + fillDownBody : true + } + }, + axes : { + xaxis: { + pad: 1.2 + }, + yaxis: { + min: boundary.x.min, + max: boundary.x.max } } }); }, makeSeries : function (groups) { + /* example data + var catOHLC = [ + [0, 138.7, 139.68, 135.18, 135.4], + [1, 143.46, 144.66, 139.79, 140.02], + [2, 140.67, 143.56, 132.88, 142.44], + [3, 136.01, 139.5, 134.53, 139.48] + ]; + return [catOHLC]; + */ + // plot data var plot_data = []; // check group length - if (groups.length == 0 && groups[0].values.length == 0) { - return; + if (groups.length == 0 || groups[0].values.length < 5) { + chart.state('failed', 'Boxplot data could not be found.'); + return [plot_data]; } - // reset data/categories - var data = []; - - /*/ loop through data groups - for (var key in request_dictionary.groups) { + // loop through data groups + for (var group_index in request_dictionary.groups) { // get group - var group = request_dictionary.groups[key]; - + var group = request_dictionary.groups[group_index]; + // format chart data var point = []; - point.push(group.key); - for (var key in [0, 1, 3, 4]) { - point.push(group.values[key].x); + point.push(parseInt(group_index)); + var indeces = [2, 4, 0, 1]; + for (var key in indeces) { + point.push(group.values[indeces[key]].x); } - + // add to data - data.push (point); - }*/ - - /*/ loop through data groups - for (var key in groups) { - var group = groups[key]; - var point = []; - for (var value_index in group.values) { - point.push(group.values[value_index].x); - } plot_data.push (point); } // return return [plot_data]; - - var catOHLC = [[1, 138.7, 139.68, 135.18, 135.4], - [2, 143.46, 144.66, 139.79, 140.02], - [3, 140.67, 143.56, 132.88, 142.44], - [4, 136.01, 139.5, 134.53, 139.48], - [5, 443.82, 144.56, 136.04, 136.97], - [6, 136.47, 146.4, 136, 144.67], - [7, 124.76, 135.9, 124.55, 135.81], - [8, 223.73, 129.31, 121.57, 122.5]]; - return [catOHLC];*/ } }); } diff -r c52cb1f827d49f0f0ee2c1c97d3626dd1b2cc348 -r 66cfcaf35801b8c80491743807ca4d491bfb42e6 config/plugins/visualizations/charts/static/charts/jqplot/common/plot-config.js --- a/config/plugins/visualizations/charts/static/charts/jqplot/common/plot-config.js +++ b/config/plugins/visualizations/charts/static/charts/jqplot/common/plot-config.js @@ -7,6 +7,7 @@ // get chart settings var settings = chart.settings; var plot_config = { + enablePlugins: true, seriesColors: function() { var colors = []; var colorScale = d3.scale.category20(); @@ -61,30 +62,11 @@ // is specified for each series. series: [], - // Show the legend and put it outside the grid, but inside the - // plot container, shrinking the grid to accomodate the legend. - // A value of "outside" would not shrink the grid and allow - // the legend to overflow the container. - legend: { - renderer : $.jqplot.EnhancedLegendRenderer, - show : chart.settings.get('show_legend') == 'true', - placement : 'outsideGrid', - location : 'n', - rendererOptions: { - textColor : '#000000', - fontSize : '12pt', - border : 'none', - shadowAlpha : 1, - background : 'rgba(255, 255, 255, 0.9)', - fontFamily : 'Arial', - numberRows : 1 - } - }, - axesDefaults: { labelRenderer : $.jqplot.CanvasAxisLabelRenderer, labelOptions: { - fontSize : '12pt' + fontSize : '12pt', + textColor : '#000000' }, tickRenderer : $.jqplot.CanvasAxisTickRenderer , tickOptions: { @@ -108,6 +90,7 @@ // not touch, the grid boundaries. 1.2 is the default padding. yaxis: { label : chart.settings.get('y_axis_label'), + tickOptions : {}, pad : 0 //tickOptions : {formatString: '$%d'}, //padding : 1.2, @@ -116,7 +99,7 @@ }, grid: { - background : '#FFFFFF', // CSS color spec for background color of grid. + background : '#FFFFFF', borderWidth : 0, shadow : false }, @@ -124,11 +107,38 @@ cursor: { show : true, zoom : true, - showTooltip : true, + showTooltip : false, style : 'pointer' + }, + highlighter: { + show : true, + showMarker : false, + tooltipAxes : 'xy' } }; + // Show the legend and put it outside the grid, but inside the + // plot container, shrinking the grid to accomodate the legend. + // A value of "outside" would not shrink the grid and allow + // the legend to overflow the container. + if (chart.settings.get('show_legend') == 'true') { + plot_config.legend = { + renderer : $.jqplot.EnhancedLegendRenderer, + show : true, + placement : 'outsideGrid', + location : 'n', + rendererOptions: { + textColor : '#000000', + fontSize : '12pt', + border : 'none', + shadowAlpha : 1, + background : 'rgba(255, 255, 255, 0.9)', + fontFamily : 'Arial', + numberRows : 1 + } + }; + } + // callback return plot_config; }; diff -r c52cb1f827d49f0f0ee2c1c97d3626dd1b2cc348 -r 66cfcaf35801b8c80491743807ca4d491bfb42e6 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 @@ -37,35 +37,41 @@ // draw all data into a single canvas render: function(groups, el_canvas) { - // set chart settings - var chart = this.options.chart; - var makeConfig = this.options.makeConfig; - var makeSeries = this.options.makeSeries; + // get parameters + var chart = this.options.chart; + var makeCategories = this.options.makeCategories; + var makeSeries = this.options.makeSeries; + var makeConfig = this.options.makeConfig; // create configuration var plot_config = configmaker(chart); var plot_data = [] - - // identify categories - this._makeCategories(chart, groups, plot_config, true); - - // reset data - if (makeSeries) { - plot_data = makeSeries(groups); - } else { - plot_data = Tools.makeSeries(groups); - } - + // draw plot try { // canvas var canvas = el_canvas[0]; + + // make custom categories call + this._makeAxes(plot_config, groups, chart.settings); - // make custom wrapper callback + // make custom series call + if (makeSeries) { + plot_data = makeSeries(groups); + } else { + plot_data = Tools.makeSeries(groups); + } + + // make custom config call if (makeConfig) { - makeConfig(plot_config); + makeConfig(plot_config, groups); } - + + // check chart state + if (chart.get('state') == 'failed') { + return false; + } + // Draw graph with default options, overwriting with passed options function drawGraph (opts) { el_canvas.empty(); @@ -89,53 +95,54 @@ } }, - // create categories - _makeCategories: function(chart, groups, plot_config) { - - // check length - if (groups.length == 0) { - return; + // create axes formatting + _makeAxes: function(plot_config, groups, settings) { + // result + var makeCategories = this.options.makeCategories; + var categories; + if (makeCategories) { + categories = makeCategories(groups, plot_config); + } else { + categories = Tools.makeCategories(groups); } - - // result - var result = Tools.makeCategories(chart, groups); - - /*/ add categories to plot configuration - for (var key in result.array) { - var axis = key + 'axis'; - if (plot_config.axes[axis]) { - plot_config.axes[axis].ticks = result.array[key]; + + // make axis + 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; } - }*/ - - // add x tick formatter - function axisTickFormatter (axis_char, plot_axis, axis_type, axis_tick) { - // get chart definition from first group - var chart_definition = groups[0]; - /*if (axis_type != 'auto' && axis_type !== undefined) { - plot_axis.tickOptions.formatter = function(format, value) { - if (axis_type == 'hide') { - return ''; - } - var format = d3.format(axis_tick + axis_type); - return format(v); + // format values/labels + if (type == 'auto') { + if (is_category) { + axis.formatter = function(format, value) { + return categories.array[id][value] || ''; + }; } - } else {*/ - if (chart_definition.columns[axis_char] && chart_definition.columns[axis_char].is_label) { - plot_axis.tickOptions.formatter = function(format, value) { - if (result.array[axis_char] !== undefined && - result.array[axis_char][value] !== undefined) { - return result.array[axis_char][value]; - } else { - return ''; - } + } 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); } } - //} - } - //axisTickFormatter ('x', plot_config.axes.xaxis, chart.settings.get('x_axis_type'), chart.settings.get('x_axis_tick')); - //axisTickFormatter ('y', plot_config.axes.yaxis, chart.settings.get('y_axis_type'), chart.settings.get('y_axis_tick')); + } + }; + + // make axes + makeAxis('x'); + makeAxis('y'); }, // handle error diff -r c52cb1f827d49f0f0ee2c1c97d3626dd1b2cc348 -r 66cfcaf35801b8c80491743807ca4d491bfb42e6 config/plugins/visualizations/charts/static/charts/jqplot/line/config.js --- a/config/plugins/visualizations/charts/static/charts/jqplot/line/config.js +++ b/config/plugins/visualizations/charts/static/charts/jqplot/line/config.js @@ -7,7 +7,8 @@ x : { title : 'Values for x-axis', is_label : true, - is_auto : true + is_auto : true, + is_unique : true }, y : { title : 'Values for y-axis', diff -r c52cb1f827d49f0f0ee2c1c97d3626dd1b2cc348 -r 66cfcaf35801b8c80491743807ca4d491bfb42e6 config/plugins/visualizations/charts/static/charts/nvd3/bar/config.js --- a/config/plugins/visualizations/charts/static/charts/nvd3/bar/config.js +++ b/config/plugins/visualizations/charts/static/charts/nvd3/bar/config.js @@ -7,10 +7,11 @@ x : { title : 'Values for x-axis', is_label : true, - is_auto : true + is_auto : true, + is_unique : true }, y : { - title : 'Values for y-axis', + title : 'Values for y-axis', is_numeric : true } } diff -r c52cb1f827d49f0f0ee2c1c97d3626dd1b2cc348 -r 66cfcaf35801b8c80491743807ca4d491bfb42e6 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 @@ -4,21 +4,22 @@ title : 'Horizontal', category : 'Bar diagrams', keywords : 'default small', + settings : { + x_axis_type : { + init : 'hide' + } + }, columns : { x : { title : 'Values for x-axis', is_label : true, - is_auto : true + is_auto : true, + is_unique : true }, y : { title : 'Values for y-axis', is_numeric : true } - }, - settings : { - x_axis_type : { - init : 'hide' - } } }); diff -r c52cb1f827d49f0f0ee2c1c97d3626dd1b2cc348 -r 66cfcaf35801b8c80491743807ca4d491bfb42e6 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 @@ -10,8 +10,14 @@ } }, columns : { + x : { + title : 'Values for x-axis', + is_label : true, + is_auto : true, + is_unique : true + }, y : { - title : 'Values for y-axis', + title : 'Values for y-axis', is_numeric : true } } diff -r c52cb1f827d49f0f0ee2c1c97d3626dd1b2cc348 -r 66cfcaf35801b8c80491743807ca4d491bfb42e6 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 @@ -5,8 +5,14 @@ category : 'Bar diagrams', keywords : 'default small', columns : { + x : { + title : 'Values for x-axis', + is_label : true, + is_auto : true, + is_unique : true + }, y : { - title : 'Values for y-axis', + title : 'Values for y-axis', is_numeric : true } } diff -r c52cb1f827d49f0f0ee2c1c97d3626dd1b2cc348 -r 66cfcaf35801b8c80491743807ca4d491bfb42e6 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 @@ -39,15 +39,9 @@ var self = this; nv.addGraph(function() { try { - // x axis - self._axis(d3chart.xAxis, chart.settings.get('x_axis_type'), chart.settings.get('x_axis_tick')); - // x axis label d3chart.xAxis.axisLabel(chart.settings.get('x_axis_label')); - // y axis - self._axis(d3chart.yAxis, chart.settings.get('y_axis_type'), chart.settings.get('y_axis_tick')); - // y axis label d3chart.yAxis.axisLabel(chart.settings.get('y_axis_label')) .axisLabelDistance(30); @@ -60,14 +54,14 @@ d3chart.showLegend(chart.settings.get('show_legend') == 'true'); } + // make categories + self._makeAxes(d3chart, groups, chart.settings); + // custom callback if (makeConfig) { makeConfig(d3chart); } - // make categories - self._makeCategories(chart, groups, d3chart); - // hide min/max values d3chart.xAxis.showMaxMin(false); d3chart.yAxis.showMaxMin(chart.definition.showmaxmin); @@ -94,6 +88,11 @@ // add zoom handler _addZoom: function(nvd3_model, svg, zoom_mode) { + // clip edges + if (nvd3_model.clipEdge) { + nvd3_model.clipEdge(true); + } + // get canvas dimensions var width = parseInt(svg.style('width')); var height = parseInt(svg.style('height')); @@ -109,63 +108,97 @@ var y = d3.scale.linear() .domain(y_domain) .range([height, 0]); - + + // min/max boundaries + var x_boundary = nvd3_model.xScale().domain().slice(); + var y_boundary = nvd3_model.yScale().domain().slice(); + + // create d3 zoom handler + var d3zoom = d3.behavior.zoom(); + + // fix domain + function fixDomain(domain, boundary) { + domain[0] = Math.max(domain[0], boundary[0]); + domain[1] = Math.min(domain[1], boundary[1]); + return domain; + }; + // zoom event handler function zoomed() { if (zoom_mode == 'axis') { - nvd3_model.xDomain(x.domain()); - nvd3_model.yDomain(y.domain()); + nvd3_model.xDomain(fixDomain(x.domain(), x_boundary)); + nvd3_model.yDomain(fixDomain(y.domain(), y_boundary)); nvd3_model.update(); } else { var translate = d3.event.translate; svg.select('.nvd3').attr("transform", "translate(" + translate + ") scale(" + d3.event.scale + ")"); } - } + }; - // clip edges - if (nvd3_model.clipEdge) { - nvd3_model.clipEdge(true); - } - - // d3 zoom wrapper - var d3zoom = d3.behavior.zoom() - .x(x) - .y(y) - .scaleExtent([1, 10]) - .on("zoom", zoomed); + // zoom event handler + function unzoomed() { + if (zoom_mode == 'axis') { + nvd3_model.xDomain(x_boundary); + nvd3_model.yDomain(y_boundary); + nvd3_model.update(); + d3zoom.scale(1); + d3zoom.translate([0,0]); + } else { + var translate = d3.event.translate; + svg.select('.nvd3').attr("transform", "translate([0,0]) scale(1)"); + } + }; + + // initialize wrapper + d3zoom.x(x) + .y(y) + .scaleExtent([1, 10]) + .on("zoom", zoomed); // add handler - svg.call(d3zoom); + svg.call(d3zoom).on("dblclick.zoom", unzoomed); }, - // create categories - _makeCategories: function(chart, groups, d3chart) { + // create axes formatting + _makeAxes: function(d3chart, groups, settings) { // result - var result = Tools.makeCategories(chart, groups); + var categories = Tools.makeCategories(groups); - // add categories to flot configuration - for (var key in result.array) { - var axis = key + 'Axis'; - if (d3chart[axis]) { - var a = result.array[key]; - d3chart[axis].tickFormat(function(value) { - return a[value]; - }); + // make axis + 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] + }); + } + } 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 axis - _axis: function(axis, type, tick) { - switch (type) { - case 'hide': - axis.tickFormat(function() { return '' }); - break; - case 'auto': - break; - default: - axis.tickFormat(d3.format(tick + type)); - } + // make axes + makeAxis('x'); + makeAxis('y'); }, // handle error diff -r c52cb1f827d49f0f0ee2c1c97d3626dd1b2cc348 -r 66cfcaf35801b8c80491743807ca4d491bfb42e6 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 @@ -1,6 +1,5 @@ define(['plugin/charts/nvd3/common/config'], function(nvd3_config) { - return $.extend(true, {}, nvd3_config, { title : 'Histogram', category : 'Data processing (requires \'charts\' tool from Toolshed)', @@ -8,7 +7,7 @@ keywords : 'small medium large', columns : { y : { - title : 'Observations', + title : 'Observations', is_numeric : true } }, diff -r c52cb1f827d49f0f0ee2c1c97d3626dd1b2cc348 -r 66cfcaf35801b8c80491743807ca4d491bfb42e6 config/plugins/visualizations/charts/static/charts/nvd3/histogram/wrapper.js --- a/config/plugins/visualizations/charts/static/charts/nvd3/histogram/wrapper.js +++ b/config/plugins/visualizations/charts/static/charts/nvd3/histogram/wrapper.js @@ -2,8 +2,7 @@ define(['plugin/charts/nvd3/common/wrapper'], function(NVD3) { // widget -return Backbone.View.extend( -{ +return Backbone.View.extend({ // initialize initialize: function(app, options) { this.app = app; @@ -11,18 +10,18 @@ }, // render - draw : function(process_id, chart, request_dictionary) - { + 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 + index : 0, + is_numeric : true }, y: { - index: index++ + index : index++ } } } diff -r c52cb1f827d49f0f0ee2c1c97d3626dd1b2cc348 -r 66cfcaf35801b8c80491743807ca4d491bfb42e6 config/plugins/visualizations/charts/static/charts/nvd3/line/config.js --- a/config/plugins/visualizations/charts/static/charts/nvd3/line/config.js +++ b/config/plugins/visualizations/charts/static/charts/nvd3/line/config.js @@ -8,10 +8,11 @@ x : { title : 'Values for x-axis', is_label : true, - is_auto : true + is_auto : true, + is_unique : true }, y : { - title : 'Values for y-axis', + title : 'Values for y-axis', is_numeric : true } } diff -r c52cb1f827d49f0f0ee2c1c97d3626dd1b2cc348 -r 66cfcaf35801b8c80491743807ca4d491bfb42e6 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 @@ -8,7 +8,8 @@ x : { title : 'Values for x-axis', is_label : true, - is_auto : true + is_auto : true, + is_unique : true }, y : { title : 'Values for y-axis', diff -r c52cb1f827d49f0f0ee2c1c97d3626dd1b2cc348 -r 66cfcaf35801b8c80491743807ca4d491bfb42e6 config/plugins/visualizations/charts/static/charts/nvd3/stackedarea/config.js --- a/config/plugins/visualizations/charts/static/charts/nvd3/stackedarea/config.js +++ b/config/plugins/visualizations/charts/static/charts/nvd3/stackedarea/config.js @@ -9,7 +9,8 @@ x : { title : 'Values for x-axis', is_label : true, - is_auto : true + is_auto : true, + is_unique : true }, y : { title : 'Values for y-axis', diff -r c52cb1f827d49f0f0ee2c1c97d3626dd1b2cc348 -r 66cfcaf35801b8c80491743807ca4d491bfb42e6 config/plugins/visualizations/charts/static/charts/nvd3/stackedarea_full/config.js --- a/config/plugins/visualizations/charts/static/charts/nvd3/stackedarea_full/config.js +++ b/config/plugins/visualizations/charts/static/charts/nvd3/stackedarea_full/config.js @@ -6,6 +6,12 @@ category : 'Area charts', keywords : 'default small', columns : { + x : { + title : 'Values for x-axis', + is_label : true, + is_auto : true, + is_unique : true + }, y : { title : 'Values for y-axis', is_numeric : true diff -r c52cb1f827d49f0f0ee2c1c97d3626dd1b2cc348 -r 66cfcaf35801b8c80491743807ca4d491bfb42e6 config/plugins/visualizations/charts/static/charts/nvd3/stackedarea_stream/config.js --- a/config/plugins/visualizations/charts/static/charts/nvd3/stackedarea_stream/config.js +++ b/config/plugins/visualizations/charts/static/charts/nvd3/stackedarea_stream/config.js @@ -7,6 +7,12 @@ keywords : 'default small', showmaxmin : true, columns : { + x : { + title : 'Values for x-axis', + is_label : true, + is_auto : true, + is_unique : true + }, y : { title : 'Values for y-axis', is_numeric : true diff -r c52cb1f827d49f0f0ee2c1c97d3626dd1b2cc348 -r 66cfcaf35801b8c80491743807ca4d491bfb42e6 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 @@ -81,15 +81,15 @@ return result; }; -// series maker -function makeSeries(groups, order) { +// default series maker +function makeSeries(groups, keys) { // plot data var plot_data = []; // loop through data groups - for (var key in groups) { + for (var group_index in groups) { // get group - var group = groups[key]; + var group = groups[group_index]; // reset data var data = []; @@ -98,9 +98,9 @@ for (var value_index in group.values) { // parse data var point = []; - if (order) { - for (var order_index in order) { - var column_index = order[order_index]; + if (keys) { + for (var key_index in keys) { + var column_index = keys[key_index]; point.push(group.values[value_index][column_index]); } } else { @@ -122,8 +122,50 @@ return plot_data; }; -// category maker -function makeCategories(chart, groups, with_index) { +// default category maker +function makeCategories(groups, with_index) { + // hashkeys, arrays and counter for labeled columns + var array = {}; + + // identify label columns + var chart_definition = groups[0]; + for (var key in chart_definition.columns) { + var column_def = chart_definition.columns[key]; + if (column_def.is_label) { + array[key] = []; + } + } + + // collect string labels in array + if (groups && groups[0]) { + var group = groups[0]; + for (var j in group.values) { + var value_dict = group.values[j]; + for (var key in array) { + array[key].push (String(value_dict[key])); + } + } + } + + // index all values contained in label columns (for all groups) + for (var i in groups) { + var group = groups[i]; + for (var j in group.values) { + var value_dict = group.values[j]; + for (var key in array) { + value_dict[key] = parseInt(j) + } + } + } + + // return dictionary + return { + array : array + } +}; + +// category make for unique category labels +function makeCategoriesUnique(groups, with_index) { // hashkeys, arrays and counter for labeled columns var categories = {}; var array = {}; diff -r c52cb1f827d49f0f0ee2c1c97d3626dd1b2cc348 -r 66cfcaf35801b8c80491743807ca4d491bfb42e6 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 @@ -56,7 +56,7 @@ 'nvd3_histogram_discrete' : nvd3_histogram_discrete, 'jqplot_line' : jqplot_line, 'jqplot_scatter' : jqplot_scatter, - //'jqplot_boxplot' : jqplot_boxplot + 'jqplot_boxplot' : jqplot_boxplot } }); diff -r c52cb1f827d49f0f0ee2c1c97d3626dd1b2cc348 -r 66cfcaf35801b8c80491743807ca4d491bfb42e6 config/plugins/visualizations/charts/static/plugins/jqplot/jquery.jqplot.css --- a/config/plugins/visualizations/charts/static/plugins/jqplot/jquery.jqplot.css +++ b/config/plugins/visualizations/charts/static/plugins/jqplot/jquery.jqplot.css @@ -1,1 +1,261 @@ -.jqplot-target{position:relative;color:#666;font-family:"Trebuchet MS",Arial,Helvetica,sans-serif;font-size:1em}.jqplot-axis{font-size:.75em}.jqplot-xaxis{margin-top:10px}.jqplot-x2axis{margin-bottom:10px}.jqplot-yaxis{margin-right:10px}.jqplot-y2axis,.jqplot-y3axis,.jqplot-y4axis,.jqplot-y5axis,.jqplot-y6axis,.jqplot-y7axis,.jqplot-y8axis,.jqplot-y9axis,.jqplot-yMidAxis{margin-left:10px;margin-right:10px}.jqplot-axis-tick,.jqplot-xaxis-tick,.jqplot-yaxis-tick,.jqplot-x2axis-tick,.jqplot-y2axis-tick,.jqplot-y3axis-tick,.jqplot-y4axis-tick,.jqplot-y5axis-tick,.jqplot-y6axis-tick,.jqplot-y7axis-tick,.jqplot-y8axis-tick,.jqplot-y9axis-tick,.jqplot-yMidAxis-tick{position:absolute;white-space:pre}.jqplot-xaxis-tick{top:0;left:15px;vertical-align:top}.jqplot-x2axis-tick{bottom:0;left:15px;vertical-align:bottom}.jqplot-yaxis-tick{right:0;top:15px;text-align:right}.jqplot-yaxis-tick.jqplot-breakTick{right:-20px;margin-right:0;padding:1px 5px 1px 5px;z-index:2;font-size:1.5em}.jqplot-y2axis-tick,.jqplot-y3axis-tick,.jqplot-y4axis-tick,.jqplot-y5axis-tick,.jqplot-y6axis-tick,.jqplot-y7axis-tick,.jqplot-y8axis-tick,.jqplot-y9axis-tick{left:0;top:15px;text-align:left}.jqplot-yMidAxis-tick{text-align:center;white-space:nowrap}.jqplot-xaxis-label{margin-top:10px;font-size:11pt;position:absolute}.jqplot-x2axis-label{margin-bottom:10px;font-size:11pt;position:absolute}.jqplot-yaxis-label{margin-right:10px;font-size:11pt;position:absolute}.jqplot-yMidAxis-label{font-size:11pt;position:absolute}.jqplot-y2axis-label,.jqplot-y3axis-label,.jqplot-y4axis-label,.jqplot-y5axis-label,.jqplot-y6axis-label,.jqplot-y7axis-label,.jqplot-y8axis-label,.jqplot-y9axis-label{font-size:11pt;margin-left:10px;position:absolute}.jqplot-meterGauge-tick{font-size:.75em;color:#999}.jqplot-meterGauge-label{font-size:1em;color:#999}table.jqplot-table-legend{margin-top:12px;margin-bottom:12px;margin-left:12px;margin-right:12px}table.jqplot-table-legend,table.jqplot-cursor-legend{background-color:rgba(255,255,255,0.6);border:1px solid #ccc;position:absolute;font-size:.75em}td.jqplot-table-legend{vertical-align:middle}td.jqplot-seriesToggle:hover,td.jqplot-seriesToggle:active{cursor:pointer}.jqplot-table-legend .jqplot-series-hidden{text-decoration:line-through}div.jqplot-table-legend-swatch-outline{border:1px solid #ccc;padding:1px}div.jqplot-table-legend-swatch{width:0;height:0;border-top-width:5px;border-bottom-width:5px;border-left-width:6px;border-right-width:6px;border-top-style:solid;border-bottom-style:solid;border-left-style:solid;border-right-style:solid}.jqplot-title{top:0;left:0;padding-bottom:.5em;font-size:1.2em}table.jqplot-cursor-tooltip{border:1px solid #ccc;font-size:.75em}.jqplot-cursor-tooltip{border:1px solid #ccc;font-size:.75em;white-space:nowrap;background:rgba(208,208,208,0.5);padding:1px}.jqplot-highlighter-tooltip,.jqplot-canvasOverlay-tooltip{border:1px solid #ccc;font-size:.75em;white-space:nowrap;background:rgba(208,208,208,0.5);padding:1px}.jqplot-point-label{font-size:.75em;z-index:2}td.jqplot-cursor-legend-swatch{vertical-align:middle;text-align:center}div.jqplot-cursor-legend-swatch{width:1.2em;height:.7em}.jqplot-error{text-align:center}.jqplot-error-message{position:relative;top:46%;display:inline-block}div.jqplot-bubble-label{font-size:.8em;padding-left:2px;padding-right:2px;color:rgb(20%,20%,20%)}div.jqplot-bubble-label.jqplot-bubble-label-highlight{background:rgba(90%,90%,90%,0.7)}div.jqplot-noData-container{text-align:center;background-color:rgba(96%,96%,96%,0.3)} \ No newline at end of file +/*rules for the plot target div. These will be cascaded down to all plot elements according to css rules*/ +.jqplot-target { + position: relative; + color: #666666; + font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; + font-size: 1em; +/* height: 300px; + width: 400px;*/ +} + +/*rules applied to all axes*/ +.jqplot-axis { + font-size: 0.75em; +} + +.jqplot-xaxis { + margin-top: 10px; +} + +.jqplot-x2axis { + margin-bottom: 10px; +} + +.jqplot-yaxis { + margin-right: 10px; +} + +.jqplot-y2axis, .jqplot-y3axis, .jqplot-y4axis, .jqplot-y5axis, .jqplot-y6axis, .jqplot-y7axis, .jqplot-y8axis, .jqplot-y9axis, .jqplot-yMidAxis { + margin-left: 10px; + margin-right: 10px; +} + +/*rules applied to all axis tick divs*/ +.jqplot-axis-tick, .jqplot-xaxis-tick, .jqplot-yaxis-tick, .jqplot-x2axis-tick, .jqplot-y2axis-tick, .jqplot-y3axis-tick, .jqplot-y4axis-tick, .jqplot-y5axis-tick, .jqplot-y6axis-tick, .jqplot-y7axis-tick, .jqplot-y8axis-tick, .jqplot-y9axis-tick, .jqplot-yMidAxis-tick { + position: absolute; + white-space: pre; +} + + +.jqplot-xaxis-tick { + top: 0px; + /* initial position untill tick is drawn in proper place */ + left: 15px; +/* padding-top: 10px;*/ + vertical-align: top; +} + +.jqplot-x2axis-tick { + bottom: 0px; + /* initial position untill tick is drawn in proper place */ + left: 15px; +/* padding-bottom: 10px;*/ + vertical-align: bottom; +} + +.jqplot-yaxis-tick { + right: 0px; + /* initial position untill tick is drawn in proper place */ + top: 15px; +/* padding-right: 10px;*/ + text-align: right; +} + +.jqplot-yaxis-tick.jqplot-breakTick { + right: -20px; + margin-right: 0px; + padding:1px 5px 1px 5px; +/* background-color: white;*/ + z-index: 2; + font-size: 1.5em; +} + +.jqplot-y2axis-tick, .jqplot-y3axis-tick, .jqplot-y4axis-tick, .jqplot-y5axis-tick, .jqplot-y6axis-tick, .jqplot-y7axis-tick, .jqplot-y8axis-tick, .jqplot-y9axis-tick { + left: 0px; + /* initial position untill tick is drawn in proper place */ + top: 15px; +/* padding-left: 10px;*/ +/* padding-right: 15px;*/ + text-align: left; +} + +.jqplot-yMidAxis-tick { + text-align: center; + white-space: nowrap; +} + +.jqplot-xaxis-label { + margin-top: 10px; + font-size: 11pt; + position: absolute; +} + +.jqplot-x2axis-label { + margin-bottom: 10px; + font-size: 11pt; + position: absolute; +} + +.jqplot-yaxis-label { + margin-right: 10px; +/* text-align: center;*/ + font-size: 11pt; + position: absolute; +} + +.jqplot-yMidAxis-label { + font-size: 11pt; + position: absolute; +} + +.jqplot-y2axis-label, .jqplot-y3axis-label, .jqplot-y4axis-label, .jqplot-y5axis-label, .jqplot-y6axis-label, .jqplot-y7axis-label, .jqplot-y8axis-label, .jqplot-y9axis-label { +/* text-align: center;*/ + font-size: 11pt; + margin-left: 10px; + position: absolute; +} + +.jqplot-meterGauge-tick { + font-size: 0.75em; + color: #999999; +} + +.jqplot-meterGauge-label { + font-size: 1em; + color: #999999; +} + +table.jqplot-table-legend { + margin-top: 12px; + margin-bottom: 12px; + margin-left: 12px; + margin-right: 12px; +} + +table.jqplot-table-legend, table.jqplot-cursor-legend { + background-color: rgba(255,255,255,0.6); + border: 1px solid #cccccc; + position: absolute; + font-size: 0.75em; +} + +td.jqplot-table-legend { + vertical-align:middle; +} + +/* +These rules could be used instead of assigning +element styles and relying on js object properties. +*/ + +/* +td.jqplot-table-legend-swatch { + padding-top: 0.5em; + text-align: center; +} + +tr.jqplot-table-legend:first td.jqplot-table-legend-swatch { + padding-top: 0px; +} +*/ + +td.jqplot-seriesToggle:hover, td.jqplot-seriesToggle:active { + cursor: pointer; +} + +.jqplot-table-legend .jqplot-series-hidden { + text-decoration: line-through; +} + +div.jqplot-table-legend-swatch-outline { + border: 1px solid #cccccc; + padding:1px; +} + +div.jqplot-table-legend-swatch { + width:0px; + height:0px; + border-top-width: 5px; + border-bottom-width: 5px; + border-left-width: 6px; + border-right-width: 6px; + border-top-style: solid; + border-bottom-style: solid; + border-left-style: solid; + border-right-style: solid; +} + +.jqplot-title { + top: 0px; + left: 0px; + padding-bottom: 0.5em; + font-size: 1.2em; +} + +table.jqplot-cursor-tooltip { + border: 1px solid #cccccc; + font-size: 0.75em; +} + + +.jqplot-cursor-tooltip { + border: 1px solid #cccccc; + font-size: 0.75em; + white-space: nowrap; + background: rgba(208,208,208,0.5); + padding: 1px; +} + +.jqplot-highlighter-tooltip, .jqplot-canvasOverlay-tooltip { + border: 1px solid #cccccc; + font-size: 1.2em; + font-weight: bold; + white-space: nowrap; + background: rgba(235,235,235,1); + padding: 1px; + border-radius: 5px; +} + +.jqplot-point-label { + font-size: 0.75em; + z-index: 2; +} + +td.jqplot-cursor-legend-swatch { + vertical-align: middle; + text-align: center; +} + +div.jqplot-cursor-legend-swatch { + width: 1.2em; + height: 0.7em; +} + +.jqplot-error { +/* Styles added to the plot target container when there is an error go here.*/ + text-align: center; +} + +.jqplot-error-message { +/* Styling of the custom error message div goes here.*/ + position: relative; + top: 46%; + display: inline-block; +} + +div.jqplot-bubble-label { + font-size: 0.8em; +/* background: rgba(90%, 90%, 90%, 0.15);*/ + padding-left: 2px; + padding-right: 2px; + color: rgb(20%, 20%, 20%); +} + +div.jqplot-bubble-label.jqplot-bubble-label-highlight { + background: rgba(90%, 90%, 90%, 0.7); +} + +div.jqplot-noData-container { + text-align: center; + background-color: rgba(96%, 96%, 96%, 0.3); +} diff -r c52cb1f827d49f0f0ee2c1c97d3626dd1b2cc348 -r 66cfcaf35801b8c80491743807ca4d491bfb42e6 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 @@ -266,7 +266,7 @@ _resetChart: function() { // reset chart details this.chart.set('id', Utils.uuid()); - this.chart.set('type', 'highcharts_bar'); + this.chart.set('type', 'nvd3_bar'); this.chart.set('dataset_id', this.app.options.config.dataset_id); this.chart.set('title', 'New Chart'); diff -r c52cb1f827d49f0f0ee2c1c97d3626dd1b2cc348 -r 66cfcaf35801b8c80491743807ca4d491bfb42e6 config/plugins/visualizations/charts/static/views/group.js --- a/config/plugins/visualizations/charts/static/views/group.js +++ b/config/plugins/visualizations/charts/static/views/group.js @@ -134,6 +134,7 @@ var is_label = column_definition.is_label; var is_auto = column_definition.is_auto; var is_numeric = column_definition.is_numeric; + var is_unique = column_definition.is_unique; // configure columns var columns = []; @@ -184,11 +185,31 @@ // update model value this.group.set(id, first); } - select.value(this.group.get(id)); + + // set initial value + if (is_unique) { + select.value(this.chart.groups.first().get(id)); + } else { + select.value(this.group.get(id)); + } + + // link group with select field + this.group.on('change:' + id, function(){ + select.value(self.group.get(id)); + }); // link select field with group select.setOnChange(function(value) { - self.group.set(id, value); + // update model value + if (is_unique) { + // update all groups + self.chart.groups.each(function(group) { + group.set(id, value); + }); + } else { + // only change this group + self.group.set(id, value); + } self.chart.set('modified', true); }); 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