fix quality flaws

1 files changed, 134 insertions, 102 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 1b148797bd4..86a2a2d2568 100644
--- a/server/sonar-web/src/main/js/widgets/bubble-chart.js
+++ b/server/sonar-web/src/main/js/widgets/bubble-chart.js
@@ -64,32 +64,26 @@ window.SonarWidgets = window.SonarWidgets == null ? {} : window.SonarWidgets;
     };
   };
 
-  window.SonarWidgets.BubbleChart.prototype.render = function (container) {
-    var widget = this,
-        containerS = container;
 
-    container = d3.select(container);
-
-    var noInvalidEntry = true,
-      atLeastOneValueOnX = false,
-      atLeastOneValueOnY = false;
+  window.SonarWidgets.BubbleChart.prototype.hasValidData = function () {
+    var widget = this,
+        noInvalidEntry = true,
+        atLeastOneValueOnX = false,
+        atLeastOneValueOnY = false;
     this.components().forEach(function(component) {
       noInvalidEntry = noInvalidEntry &&
-        !!component.measures[widget.metricsPriority()[0]] &&
-        !!component.measures[widget.metricsPriority()[1]];
+      !!component.measures[widget.metricsPriority()[0]] &&
+      !!component.measures[widget.metricsPriority()[1]];
       atLeastOneValueOnX = atLeastOneValueOnX ||
-        (component.measures[widget.metricsPriority()[0]] || {}).fval !== '-';
+      (component.measures[widget.metricsPriority()[0]] || {}).fval !== '-';
       atLeastOneValueOnY = atLeastOneValueOnY ||
-        (component.measures[widget.metricsPriority()[1]] || {}).fval !== '-';
+      (component.measures[widget.metricsPriority()[1]] || {}).fval !== '-';
     });
-    var validData = !!noInvalidEntry && !!atLeastOneValueOnX && !!atLeastOneValueOnY;
-
-    if (!validData) {
-      container.text(this.options().noMainMetric);
-      return;
-    }
+    return !!noInvalidEntry && !!atLeastOneValueOnX && !!atLeastOneValueOnY;
+  };
 
 
+  window.SonarWidgets.BubbleChart.prototype.init = function (container) {
     this.width(container.property('offsetWidth'));
 
     this.svg = container.append('svg')
@@ -110,9 +104,12 @@ window.SonarWidgets = window.SonarWidgets == null ? {} : window.SonarWidgets;
 
     this.gWrap
         .attr('transform', trans(this.margin().left, this.margin().top));
+  };
+
 
+  window.SonarWidgets.BubbleChart.prototype.initMetrics = function () {
+    var widget = this;
 
-    // Configure metrics
     this.xMetric = this.metricsPriority()[0];
     this.getXMetric = function(d) {
       return d.measures[widget.xMetric].val;
@@ -127,9 +124,11 @@ window.SonarWidgets = window.SonarWidgets == null ? {} : window.SonarWidgets;
     this.getSizeMetric = function(d) {
       return !!d.measures[widget.sizeMetric] ? d.measures[widget.sizeMetric].val : 0;
     };
+  };
 
 
-    // Configure scales
+  window.SonarWidgets.BubbleChart.prototype.initScales = function () {
+    var widget = this;
     this
         .xLog(this.options().xLog)
         .yLog(this.options().yLog);
@@ -161,7 +160,11 @@ window.SonarWidgets = window.SonarWidgets == null ? {} : window.SonarWidgets;
       this.y.domain([ym * 0.8, ym * 1.2]);
       this.size.domain([sm * 0.8, sm * 1.2]);
     }
+  };
+
 
+  window.SonarWidgets.BubbleChart.prototype.initBubbles = function () {
+    var widget = this;
 
     // Create bubbles
     this.items = this.plotWrap.selectAll('.item')
@@ -193,9 +196,11 @@ window.SonarWidgets = window.SonarWidgets == null ? {} : window.SonarWidgets;
     this.items.sort(function (a, b) {
       return widget.getSizeMetric(b) - widget.getSizeMetric(a);
     });
+  };
 
 
-    // Set event listeners
+  window.SonarWidgets.BubbleChart.prototype.initBubbleEvents = function () {
+    var widget = this;
     this.items
         .on('click', function (d) {
           window.location = widget.options().baseUrl + '?id=' + encodeURIComponent(d.key);
@@ -238,12 +243,13 @@ window.SonarWidgets = window.SonarWidgets == null ? {} : window.SonarWidgets;
           widget.infoDate.text('');
           widget.infoMetrics.text('');
         });
+  };
 
 
-    // Configure axis
+  window.SonarWidgets.BubbleChart.prototype.initAxes = function () {
     // X
     this.xAxis = d3.svg.axis()
-        .scale(widget.x)
+        .scale(this.x)
         .orient('bottom');
 
     this.gxAxisLabel = this.gxAxis.append('text')
@@ -254,7 +260,7 @@ window.SonarWidgets = window.SonarWidgets == null ? {} : window.SonarWidgets;
 
     // Y
     this.yAxis = d3.svg.axis()
-        .scale(widget.y)
+        .scale(this.y)
         .orient('left');
 
     this.gyAxis.attr('transform', trans(60 - this.margin().left, 0));
@@ -263,13 +269,15 @@ window.SonarWidgets = window.SonarWidgets == null ? {} : window.SonarWidgets;
         .text(this.metrics()[this.yMetric].name)
         .style('font-weight', 'bold')
         .style('text-anchor', 'middle');
+  };
 
 
-    // Configure grid
-    this.gxGridLines = this.gxGrid.selectAll('line').data(widget.x.ticks()).enter()
+  window.SonarWidgets.BubbleChart.prototype.initGrid = function () {
+    var widget = this;
+    this.gxGridLines = this.gxGrid.selectAll('line').data(this.x.ticks()).enter()
         .append('line');
 
-    this.gyGridLines = this.gyGrid.selectAll('line').data(widget.y.ticks()).enter()
+    this.gyGridLines = this.gyGrid.selectAll('line').data(this.y.ticks()).enter()
         .append('line');
 
     this.gGrid.selectAll('line')
@@ -285,47 +293,92 @@ window.SonarWidgets = window.SonarWidgets == null ? {} : window.SonarWidgets;
         .style('text-anchor', 'start')
         .style('font-weight', 'bold');
 
-    var metricLines = [widget.metrics().x, widget.metrics().y, widget.metrics().size];
-    widget.infoMetrics = widget.infoWrap.selectAll('.metric')
+    var metricLines = [this.metrics().x, this.metrics().y, this.metrics().size];
+    this.infoMetrics = this.infoWrap.selectAll('.metric')
         .data(metricLines);
-    widget.infoMetrics.enter().append('text').attr('class', 'metric info-text-small')
+    this.infoMetrics.enter().append('text').attr('class', 'metric info-text-small')
         .text(function(d) { return d; });
-    widget.infoMetricWidth = [];
-    widget.infoMetrics.each(function() {
+    this.infoMetricWidth = [];
+    this.infoMetrics.each(function() {
       widget.infoMetricWidth.push(this.getComputedTextLength() + 140);
     });
-    widget.infoMetrics.text('');
+    this.infoMetrics.text('');
+  };
 
 
-    // Update widget
+  window.SonarWidgets.BubbleChart.prototype.render = function (container) {
+    var containerS = container;
+
+    container = d3.select(container);
+
+    if (!this.hasValidData()) {
+      container.text(this.options().noMainMetric);
+      return;
+    }
+
+    this.init(container);
+    this.initMetrics();
+    this.initScales();
+    this.initBubbles();
+    this.initBubbleEvents();
+    this.initAxes();
+    this.initGrid();
+
     this.update(containerS);
 
     return this;
   };
 
 
+  window.SonarWidgets.BubbleChart.prototype.adjustScalesAfterUpdate = function () {
+    // X
+    var minX = d3.min(this.components(), function (d) {
+          return widget.x(widget.getXMetric(d)) - widget.size(widget.getSizeMetric(d));
+        }),
+        maxX = d3.max(this.components(), function (d) {
+          return widget.x(widget.getXMetric(d)) + widget.size(widget.getSizeMetric(d));
+        }),
+        dMinX = minX < 0 ? this.x.range()[0] - minX : this.x.range()[0],
+        dMaxX = maxX > this.x.range()[1] ? maxX - this.x.range()[1] : 0;
+    this.x.range([dMinX, this.availableWidth - dMaxX]);
 
-  window.SonarWidgets.BubbleChart.prototype.update = function(container) {
-    container = d3.select(container);
-
-    var widget = this,
-        width = container.property('offsetWidth');
-
-    this.width(width > 100 ? width : 100);
+    // Y
+    var minY = d3.min(this.components(), function (d) {
+          return widget.y(widget.getYMetric(d)) - widget.size(widget.getSizeMetric(d));
+        }),
+        maxY = d3.max(this.components(), function (d) {
+          return widget.y(widget.getYMetric(d)) + widget.size(widget.getSizeMetric(d));
+        }),
+        dMinY = minY < 0 ? this.y.range()[1] - minY: this.y.range()[1],
+        dMaxY = maxY > this.y.range()[0] ? maxY - this.y.range()[0] : 0;
+    this.y.range([this.availableHeight - dMaxY, dMinY]);
 
 
-    // Update svg canvas
-    this.svg
-        .attr('width', this.width())
-        .attr('height', this.height());
+    // Format improvement for log scales
+    // X
+    if (this.xLog()) {
+      this.xAxis.tickFormat(function (d) {
+        var ticksCount = widget.availableWidth / 50;
+        return widget.x.tickFormat(ticksCount, d3.format(',d'))(d);
+      });
+    }
 
+    // Y
+    if (this.yLog()) {
+      this.yAxis.tickFormat(function (d) {
+        var ticksCount = widget.availableHeight / 30;
+        return widget.y.tickFormat(ticksCount, d3.format(',d'))(d);
+      });
+    }
 
-    // Update available size
-    this.availableWidth = this.width() - this.margin().left - this.margin().right;
-    this.availableHeight = this.height() - this.margin().top - this.margin().bottom;
+    // Make scale's domains nice
+    this.x.nice();
+    this.y.nice();
+  };
 
 
-    // Update scales
+  window.SonarWidgets.BubbleChart.prototype.updateScales = function () {
+    var widget = this;
     this.x.range([0, this.availableWidth]);
     this.y.range([this.availableHeight, 0]);
 
@@ -346,16 +399,13 @@ window.SonarWidgets = window.SonarWidgets == null ? {} : window.SonarWidgets;
       this.size.domain([sm * 0.8, sm * 1.2]);
     }
 
-
     if (this.x.domain()[0] === 0 && this.x.domain()[1] === 0) {
       this.x.domain([0, 1]);
     }
-
     if (this.y.domain()[0] === 0 && this.y.domain()[1] === 0) {
       this.y.domain([0, 1]);
     }
 
-
     // Avoid zero values when using log scale
     if (this.xLog) {
       var xDomain = this.x.domain();
@@ -370,64 +420,20 @@ window.SonarWidgets = window.SonarWidgets == null ? {} : window.SonarWidgets;
           .domain([yDomain[0] > 0 ? yDomain[0] : 0.1, yDomain[1]])
           .clamp(true);
     }
+  };
 
 
-    // Adjust the scale domain so the circles don't cross the bounds
-    // X
-    var minX = d3.min(this.components(), function (d) {
-          return widget.x(widget.getXMetric(d)) - widget.size(widget.getSizeMetric(d));
-        }),
-        maxX = d3.max(this.components(), function (d) {
-          return widget.x(widget.getXMetric(d)) + widget.size(widget.getSizeMetric(d));
-        }),
-        dMinX = minX < 0 ? this.x.range()[0] - minX : this.x.range()[0],
-        dMaxX = maxX > this.x.range()[1] ? maxX - this.x.range()[1] : 0;
-    this.x.range([dMinX, this.availableWidth - dMaxX]);
-
-    // Y
-    var minY = d3.min(this.components(), function (d) {
-          return widget.y(widget.getYMetric(d)) - widget.size(widget.getSizeMetric(d));
-        }),
-        maxY = d3.max(this.components(), function (d) {
-          return widget.y(widget.getYMetric(d)) + widget.size(widget.getSizeMetric(d));
-        }),
-        dMinY = minY < 0 ? this.y.range()[1] - minY: this.y.range()[1],
-        dMaxY = maxY > this.y.range()[0] ? maxY - this.y.range()[0] : 0;
-    this.y.range([this.availableHeight - dMaxY, dMinY]);
-
-
-    // Format improvement for log scales
-    // X
-    if (this.xLog()) {
-      this.xAxis.tickFormat(function (d) {
-        var ticksCount = widget.availableWidth / 50;
-        return widget.x.tickFormat(ticksCount, d3.format(',d'))(d);
-      });
-    }
-
-    // Y
-    if (this.yLog()) {
-      this.yAxis.tickFormat(function (d) {
-        var ticksCount = widget.availableHeight / 30;
-        return widget.y.tickFormat(ticksCount, d3.format(',d'))(d);
-      });
-    }
-
-
-    // Make scale's domains nice
-    this.x.nice();
-    this.y.nice();
-
-
-    // Update bubbles position
+  window.SonarWidgets.BubbleChart.prototype.updateBubbles = function () {
+    var widget = this;
     this.items
         .transition()
         .attr('transform', function (d) {
           return trans(widget.x(widget.getXMetric(d)), widget.y(widget.getYMetric(d)));
         });
+  };
 
 
-    // Update axis
+  window.SonarWidgets.BubbleChart.prototype.updateAxes = function () {
     // X
     this.gxAxis.attr('transform', trans(0, this.availableHeight + this.margin().bottom - 40));
 
@@ -455,9 +461,11 @@ window.SonarWidgets = window.SonarWidgets == null ? {} : window.SonarWidgets;
 
     this.gyAxisLabel
         .attr('transform', trans(-45, this.availableHeight / 2) + ' rotate(-90)');
+  };
 
 
-    // Update grid
+  window.SonarWidgets.BubbleChart.prototype.updateGrid = function () {
+    var widget = this;
     this.gxGridLines
         .transition()
         .attr({
@@ -486,6 +494,30 @@ window.SonarWidgets = window.SonarWidgets == null ? {} : window.SonarWidgets;
   };
 
 
+  window.SonarWidgets.BubbleChart.prototype.update = function (container) {
+    container = d3.select(container);
+
+    var 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.availableHeight = this.height() - this.margin().top - this.margin().bottom;
+
+    this.updateScales();
+    this.adjustScalesAfterUpdate();
+    this.updateBubbles();
+    this.updateAxes();
+    this.updateGrid();
+  };
+
+
 
   window.SonarWidgets.BubbleChart.defaults = {
     width: 350,