From 6268463090776ec564f58bfd3f4f6f5f13f1b1ba Mon Sep 17 00:00:00 2001 From: Stas Vilchik Date: Fri, 20 Feb 2015 17:59:29 +0100 Subject: [PATCH] fix quality flaws --- .../src/main/js/widgets/bubble-chart.js | 1 + .../src/main/js/widgets/pie-chart.js | 124 ++++++++++-------- .../src/main/js/widgets/stack-area.js | 94 +++++++------ 3 files changed, 120 insertions(+), 99 deletions(-) diff --git a/server/sonar-web/src/main/js/widgets/bubble-chart.js b/server/sonar-web/src/main/js/widgets/bubble-chart.js index 86a2a2d2568..0808e13a147 100644 --- a/server/sonar-web/src/main/js/widgets/bubble-chart.js +++ b/server/sonar-web/src/main/js/widgets/bubble-chart.js @@ -331,6 +331,7 @@ window.SonarWidgets = window.SonarWidgets == null ? {} : window.SonarWidgets; window.SonarWidgets.BubbleChart.prototype.adjustScalesAfterUpdate = function () { + var widget = this; // X var minX = d3.min(this.components(), function (d) { return widget.x(widget.getXMetric(d)) - widget.size(widget.getSizeMetric(d)); diff --git a/server/sonar-web/src/main/js/widgets/pie-chart.js b/server/sonar-web/src/main/js/widgets/pie-chart.js index 9c0288f1413..f3d81e7f639 100644 --- a/server/sonar-web/src/main/js/widgets/pie-chart.js +++ b/server/sonar-web/src/main/js/widgets/pie-chart.js @@ -152,61 +152,8 @@ window.SonarWidgets = window.SonarWidgets == null ? {} : window.SonarWidgets; }; - - window.SonarWidgets.PieChart.prototype.update = function(container) { - container = d3.select(container); - - var widget = this, - width = container.property('offsetWidth'); - this.width(width > 100 ? width : 100); - - - // Update svg canvas - this.svg - .attr('width', this.width()) - .attr('height', this.height()); - - - // Update available size - this.availableWidth = this.width() - this.margin().left - this.margin().right - - this.legendWidth() - this.legendMargin(); - this.availableHeight = this.height() - this.margin().top - this.margin().bottom; - this.radius = Math.min(this.availableWidth, this.availableHeight) / 2; - this._legendSize = Math.floor(this.availableHeight / this._lineHeight); - this._legendSymbols = Math.floor((this.width() - this.margin().left - this.margin().right - - this.legendMargin() - 2 * this.radius) / 6.2); - - - // Update plot - this.plotWrap - .attr('transform', trans(this.radius, this.radius)); - - - // Update arc - this.arc - .innerRadius(this.radius / 2) - .outerRadius(this.radius); - - - // Configure sectors - this.sectors = this.plotWrap.selectAll('.arc') - .data(this.pie(this.components())); - - this.sectors - .enter() - .append('path') - .classed('arc', true) - .style('fill', function(d, i) { return widget.color(i); }); - - this.sectors - .transition() - .attr('d', this.arc); - - this.sectors - .exit().remove(); - - - // Update legend + window.SonarWidgets.PieChart.prototype.updateLegend = function () { + var widget = this; this.legendWrap .attr('transform', trans( this.legendMargin() + 2 * this.radius, @@ -235,9 +182,11 @@ window.SonarWidgets = window.SonarWidgets == null ? {} : window.SonarWidgets; .text(function(d) { return d.name.length > widget._legendSymbols ? d.name.substr(0, widget._legendSymbols) + '...' : d.name; }); + }; - // Update details + window.SonarWidgets.PieChart.prototype.updateDetails = function () { + var widget = this; this.detailsWrap .attr('width', this.legendWidth()) .attr('transform', trans( @@ -256,9 +205,11 @@ window.SonarWidgets = window.SonarWidgets == null ? {} : window.SonarWidgets; this.donutLabel2 .attr('transform', trans(0, widget.radius / 6)) .style('font-size', fz + 'px'); + }; - // Configure events + window.SonarWidgets.PieChart.prototype.configureEvents = function () { + var widget = this; var updateMetrics = function(metrics) { widget.detailsMetrics = widget.detailsWrap.selectAll('.details-metric') .data(metrics); @@ -357,6 +308,65 @@ window.SonarWidgets = window.SonarWidgets == null ? {} : window.SonarWidgets; }; + window.SonarWidgets.PieChart.prototype.update = function(container) { + container = d3.select(container); + + var widget = this, + width = container.property('offsetWidth'); + this.width(width > 100 ? width : 100); + + + // Update svg canvas + this.svg + .attr('width', this.width()) + .attr('height', this.height()); + + + // Update available size + this.availableWidth = this.width() - this.margin().left - this.margin().right - + this.legendWidth() - this.legendMargin(); + this.availableHeight = this.height() - this.margin().top - this.margin().bottom; + this.radius = Math.min(this.availableWidth, this.availableHeight) / 2; + this._legendSize = Math.floor(this.availableHeight / this._lineHeight); + this._legendSymbols = Math.floor((this.width() - this.margin().left - this.margin().right - + this.legendMargin() - 2 * this.radius) / 6.2); + + + // Update plot + this.plotWrap + .attr('transform', trans(this.radius, this.radius)); + + + // Update arc + this.arc + .innerRadius(this.radius / 2) + .outerRadius(this.radius); + + + // Configure sectors + this.sectors = this.plotWrap.selectAll('.arc') + .data(this.pie(this.components())); + + this.sectors + .enter() + .append('path') + .classed('arc', true) + .style('fill', function(d, i) { return widget.color(i); }); + + this.sectors + .transition() + .attr('d', this.arc); + + this.sectors + .exit().remove(); + + + this.updateLegend(); + this.updateDetails(); + this.configureEvents(); + }; + + window.SonarWidgets.PieChart.defaults = { width: 350, diff --git a/server/sonar-web/src/main/js/widgets/stack-area.js b/server/sonar-web/src/main/js/widgets/stack-area.js index fdd18e6326a..91997759d7f 100644 --- a/server/sonar-web/src/main/js/widgets/stack-area.js +++ b/server/sonar-web/src/main/js/widgets/stack-area.js @@ -52,39 +52,10 @@ window.SonarWidgets = window.SonarWidgets == null ? {} : window.SonarWidgets; }; - window.SonarWidgets.StackArea.prototype.render = function () { + + window.SonarWidgets.StackArea.prototype.initScales = function() { var widget = this, colorsLength = widget.colors().length; - - this.svg = this.container.append('svg') - .attr('class', 'sonar-d3'); - - this.gWrap = this.svg.append('g'); - - this.gtimeAxis = this.gWrap.append('g') - .attr('class', 'axis x'); - - this.plotWrap = this.gWrap.append('g') - .attr('class', 'plot'); - - this.scanner = this.plotWrap.append('line'); - - this.infoWrap = this.gWrap.append('g'); - this.infoDate = this.infoWrap.append('text'); - this.infoSnapshot = this.infoWrap.append('text'); - this.infoTotal = this.infoWrap.append('text'); - - this.gWrap - .attr('transform', trans(this.margin().left, this.margin().top)); - - - // Configure stack - this.stack = d3.layout.stack(); - this.stackData = this.stack(this.data()); - this.stackDataTop = this.stackData[this.stackData.length - 1]; - - - // Configure scales var timeDomain = this.data() .map(function(_) { return d3.extent(_, function(d) { @@ -106,16 +77,19 @@ window.SonarWidgets = window.SonarWidgets == null ? {} : window.SonarWidgets; this.color = function(i) { return widget.colors()[i % colorsLength][0]; }; + }; - // Configure the axis + window.SonarWidgets.StackArea.prototype.initAxis = function() { this.timeAxis = d3.svg.axis() .scale(this.time) .orient('bottom') .ticks(5); + }; - // Configure the area + window.SonarWidgets.StackArea.prototype.initArea = function() { + var widget = this; this.area = d3.svg.area() .x(function(d) { return widget.time(d.x); }) .y0(function(d) { return widget.y(d.y0); }) @@ -124,15 +98,11 @@ window.SonarWidgets = window.SonarWidgets == null ? {} : window.SonarWidgets; this.areaLine = d3.svg.line() .x(function(d) { return widget.time(d.x); }) .y(function(d) { return widget.y(d.y0 + d.y); }); + }; - // Configure scanner - this.scanner - .attr('class', 'scanner') - .attr('y1', 0); - - - // Configure info + window.SonarWidgets.StackArea.prototype.initInfo = function() { + var widget = this; this.infoWrap .attr('class', 'info') .attr('transform', trans(0, -60)); @@ -176,9 +146,11 @@ window.SonarWidgets = window.SonarWidgets == null ? {} : window.SonarWidgets; prevX += (infoMetricText.node().getComputedTextLength() + 70); } }); + }; - // Configure events + window.SonarWidgets.StackArea.prototype.initEvents = function() { + var widget = this; this.events = widget.snapshots() .filter(function(d) { return d.e.length > 0; }); @@ -256,15 +228,53 @@ window.SonarWidgets = window.SonarWidgets == null ? {} : window.SonarWidgets; cl = closest(widget.data()[0], mx, function(d) { return widget.time(d.x); }); widget.selectSnapshot(cl); }); + }; + + + window.SonarWidgets.StackArea.prototype.render = function () { + this.svg = this.container.append('svg') + .attr('class', 'sonar-d3'); + + this.gWrap = this.svg.append('g'); + + this.gtimeAxis = this.gWrap.append('g') + .attr('class', 'axis x'); + + this.plotWrap = this.gWrap.append('g') + .attr('class', 'plot'); + + this.scanner = this.plotWrap.append('line'); + this.infoWrap = this.gWrap.append('g'); + this.infoDate = this.infoWrap.append('text'); + this.infoSnapshot = this.infoWrap.append('text'); + this.infoTotal = this.infoWrap.append('text'); + + this.gWrap + .attr('transform', trans(this.margin().left, this.margin().top)); + // Configure stack + this.stack = d3.layout.stack(); + this.stackData = this.stack(this.data()); + this.stackDataTop = this.stackData[this.stackData.length - 1]; + + this.initScales(); + this.initAxis(); + this.initArea(); + + // Configure scanner + this.scanner + .attr('class', 'scanner') + .attr('y1', 0); + + this.initInfo(); + this.initEvents(); this.update(); return this; }; - window.SonarWidgets.StackArea.prototype.update = function() { var widget = this, width = this.container.property('offsetWidth'); -- 2.39.5