1 new commit in galaxy-central: https://bitbucket.org/galaxy/galaxy-central/commits/d408a47ca329/ Changeset: d408a47ca329 User: guerler Date: 2014-06-14 07:42:52 Summary: Charts: Add tick formatting Affected #: 4 files diff -r 287abf1a826352fdbe1bd0702ad55c1bdaa93094 -r d408a47ca3292a13ef58e435ee06e81ac04a04a5 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 @@ -113,8 +113,8 @@ var categories = Tools.makeCategories(groups); // make axes - function makeAxis (id) { - Tools.makeAxis({ + function makeTickFormat (id) { + Tools.makeTickFormat({ categories : categories.array[id], type : settings.get(id + '_axis_type'), precision : settings.get(id + '_axis_precision'), @@ -127,8 +127,8 @@ } }); }; - makeAxis('x'); - makeAxis('y'); + makeTickFormat('x'); + makeTickFormat('y'); }, // handle error diff -r 287abf1a826352fdbe1bd0702ad55c1bdaa93094 -r d408a47ca3292a13ef58e435ee06e81ac04a04a5 config/plugins/visualizations/charts/static/charts/others/heatmap/wrapper.js --- a/config/plugins/visualizations/charts/static/charts/others/heatmap/wrapper.js +++ b/config/plugins/visualizations/charts/static/charts/others/heatmap/wrapper.js @@ -11,6 +11,10 @@ // render draw : function(process_id, chart, request_dictionary) { + // backup chart + this.chart = chart; + + // distribute data groups on svgs and handle process var self = this; var plot = Tools.panelHelper({ app : this.app, @@ -26,14 +30,14 @@ // render render : function(canvas_id, groups) { + // categories + this.categories = Tools.makeUniqueCategories(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; }); @@ -45,7 +49,19 @@ 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]); - + + // create axis + this.xAxis = d3.svg.axis().scale(this.xScale).orient('bottom'); + this.yAxis = d3.svg.axis().scale(this.yScale).orient('left'); + + // set ticks + this.xAxis.tickValues(d3.range(this.xScale.domain()[0], this.xScale.domain()[1], 1)); + this.yAxis.tickValues(d3.range(this.yScale.domain()[0], this.yScale.domain()[1], 1)); + + // make categories + this._makeTickFormat('x'); + this._makeTickFormat('y'); + // refresh on window resize var self = this; $(window).on('resize', function () { @@ -87,35 +103,20 @@ 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)); + boxWidth = Math.max(1, Math.floor(width / colCount)), + boxHeight = Math.max(1, Math.floor(height / rowCount)); // box location function _locator(d) { @@ -127,6 +128,17 @@ return self.zScale(d.z); }; + // + // 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 + ')'); + // clip path var clip = svg.append('clipPath') .attr('id', 'clip') @@ -159,8 +171,6 @@ 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) @@ -168,8 +178,6 @@ .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) @@ -190,24 +198,21 @@ }, // 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); - }); - } + _makeTickFormat: function(id) { + var settings = this.chart.settings; + var self = this; + Tools.makeTickFormat({ + categories : self.categories.array[id], + type : settings.get(id + '_axis_type'), + precision : settings.get(id + '_axis_precision'), + formatter : function(formatter) { + if (formatter) { + self[id + 'Axis'].tickFormat(function(value) { + return formatter(value); + }); } - }); - }; - makeAxis('x'); - makeAxis('y'); + } + }); }, // handle error diff -r 287abf1a826352fdbe1bd0702ad55c1bdaa93094 -r d408a47ca3292a13ef58e435ee06e81ac04a04a5 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 @@ -248,7 +248,7 @@ }; // make axis -function makeAxis (options) { +function makeTickFormat (options) { var type = options.type; var precision = options.precision; var categories = options.categories; @@ -296,6 +296,9 @@ // add zoom handler function addZoom(options) { + // scaleExtent + var scaleExtent = 10; + // parameters var yAxis = options.yAxis; var xAxis = options.xAxis; @@ -323,11 +326,11 @@ // fix domain function fixDomain(domain, boundary) { if (discrete) { - domain[0] = parseInt(domain[0]); - domain[1] = parseInt(domain[1]); + domain[0] = Math.floor(domain[0]); + domain[1] = Math.ceil(domain[1]); } - domain[0] = Math.max(domain[0], boundary[0]); - domain[1] = Math.max(0, Math.min(domain[1], boundary[1])); + domain[0] = Math.min(Math.max(domain[0], boundary[0]), boundary[1] - boundary[1]/scaleExtent); + domain[1] = Math.max(boundary[0] + boundary[1]/scaleExtent, Math.min(domain[1], boundary[1])); return domain; }; @@ -350,7 +353,7 @@ // initialize wrapper d3zoom.x(xScale) .y(yScale) - .scaleExtent([1, 10]) + .scaleExtent([1, scaleExtent]) .on('zoom', zoomed); // add handler @@ -365,7 +368,7 @@ makeSeries : makeSeries, getDomains : getDomains, mapCategories : mapCategories, - makeAxis : makeAxis, + makeTickFormat : makeTickFormat, addZoom : addZoom } diff -r 287abf1a826352fdbe1bd0702ad55c1bdaa93094 -r d408a47ca3292a13ef58e435ee06e81ac04a04a5 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 @@ -193,7 +193,7 @@ } // set initial value - if (is_unique) { + if (is_unique && this.chart.groups.first()) { select.value(this.chart.groups.first().get(id)); } else { select.value(this.group.get(id)); 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.