SONAR-6331 update the style of the overview page

9 files changed, 43 insertions, 98 deletions

diff --git a/server/sonar-web/src/main/js/graphics/sparkline.js b/server/sonar-web/src/main/js/graphics/sparkline.js
index 461c03e13c4..986011c0e58 100644
--- a/server/sonar-web/src/main/js/graphics/sparkline.js
+++ b/server/sonar-web/src/main/js/graphics/sparkline.js
@@ -27,7 +27,8 @@
     height: 30,
     color: '#1f77b4',
     interpolate: 'bundle',
-    tension: 1
+    tension: 1,
+    type: 'INT'
   };
 
   /*
@@ -46,8 +47,8 @@
 
           var container = d3.select(this),
               svg = container.append('svg')
-                  .attr('width', options.width + 1)
-                  .attr('height', options.height + 1)
+                  .attr('width', options.width)
+                  .attr('height', options.height)
                   .classed('sonar-d3', true),
 
               plot = svg.append('g')
@@ -63,6 +64,9 @@
                     return d.count;
                   })),
 
+              minValue = yScale.domain()[0],
+              maxValue = yScale.domain()[1],
+
               line = d3.svg.line()
                   .x(function (d) {
                     return xScale(moment(d.val).toDate());
@@ -71,11 +75,29 @@
                     return yScale(d.count);
                   })
                   .interpolate(options.interpolate)
-                  .tension(options.tension);
+                  .tension(options.tension),
+
+              minLabel = plot.append('text')
+                  .text(window.formatMeasure(minValue, options.type))
+                  .attr('dy', '3px')
+                  .style('text-anchor', 'end')
+                  .style('font-size', '10px')
+                  .style('font-weight', '300')
+                  .style('fill', '#aaa'),
+
+              maxLabel = plot.append('text')
+                  .text(window.formatMeasure(maxValue, options.type))
+                  .attr('dy', '5px')
+                  .style('text-anchor', 'end')
+                  .style('font-size', '10px')
+                  .style('font-weight', '300')
+                  .style('fill', '#aaa'),
+
+              maxLabelWidth = Math.max(minLabel.node().getBBox().width, maxLabel.node().getBBox().width) + 3;
 
           _.extend(options, {
             marginLeft: 1,
-            marginRight: 1,
+            marginRight: 1 + maxLabelWidth,
             marginTop: 6,
             marginBottom: 6
           });
@@ -94,6 +116,13 @@
               .attr('d', line)
               .classed('line', true)
               .style('stroke', options.color);
+
+          minLabel
+              .attr('x', options.availableWidth + maxLabelWidth)
+              .attr('y', yScale(minValue));
+          maxLabel
+              .attr('x', options.availableWidth + maxLabelWidth)
+              .attr('y', yScale(maxValue));
         }
     );
   };
diff --git a/server/sonar-web/src/main/js/overview/app.js b/server/sonar-web/src/main/js/overview/app.js
index e0aa11a6e7a..9470914d271 100644
--- a/server/sonar-web/src/main/js/overview/app.js
+++ b/server/sonar-web/src/main/js/overview/app.js
@@ -23,7 +23,6 @@ requirejs([
   'overview/views/gate-view',
   'overview/views/size-view',
   'overview/views/issues-view',
-  'overview/views/debt-view',
   'overview/views/coverage-view',
   'overview/views/duplications-view'
 ], function (Layout,
@@ -31,7 +30,6 @@ requirejs([
              GateView,
              SizeView,
              IssuesView,
-             DebtView,
              CoverageView,
              DuplicationsView) {
 
@@ -48,7 +46,6 @@ requirejs([
     this.layout.gateRegion.show(new GateView({ model: this.state }));
     this.layout.sizeRegion.show(new SizeView({ model: this.state }));
     this.layout.issuesRegion.show(new IssuesView({ model: this.state }));
-    this.layout.debtRegion.show(new DebtView({ model: this.state }));
     this.layout.coverageRegion.show(new CoverageView({ model: this.state }));
     this.layout.duplicationsRegion.show(new DuplicationsView({ model: this.state }));
     this.state.fetch();
diff --git a/server/sonar-web/src/main/js/overview/layout.js b/server/sonar-web/src/main/js/overview/layout.js
index 5e83b9334fd..ba70f756f62 100644
--- a/server/sonar-web/src/main/js/overview/layout.js
+++ b/server/sonar-web/src/main/js/overview/layout.js
@@ -28,7 +28,6 @@ define([
       gateRegion: '#overview-gate',
       sizeRegion: '#overview-size',
       issuesRegion: '#overview-issues',
-      debtRegion: '#overview-debt',
       coverageRegion: '#overview-coverage',
       duplicationsRegion: '#overview-duplications'
     },
@@ -39,10 +38,8 @@ define([
 
     toggleRegions: function () {
       var conditions = this.model.get('gateConditions'),
-          hasGate = _.isArray(conditions) && conditions.length > 0,
-          hasCoverage = !!this.model.get('coverage');
+          hasGate = _.isArray(conditions) && conditions.length > 0;
       this.$(this.gateRegion.el).toggle(hasGate);
-      this.$(this.coverageRegion.el).toggle(hasCoverage);
     }
   });
 
diff --git a/server/sonar-web/src/main/js/overview/models/state.js b/server/sonar-web/src/main/js/overview/models/state.js
index 44964c68157..6b19a415287 100644
--- a/server/sonar-web/src/main/js/overview/models/state.js
+++ b/server/sonar-web/src/main/js/overview/models/state.js
@@ -117,8 +117,6 @@ define(function () {
       if (nclocMeasure != null) {
         this.set({
           ncloc: nclocMeasure.val,
-          ncloc1: nclocMeasure.var1,
-          ncloc2: nclocMeasure.var2,
           ncloc3: nclocMeasure.var3
         });
       }
@@ -143,12 +141,6 @@ define(function () {
       }
 
       fetchIssuesByPeriod('issues', null);
-      if (this.hasPeriod(1)) {
-        fetchIssuesByPeriod('issues1', this.get('period1Date'));
-      }
-      if (this.hasPeriod(2)) {
-        fetchIssuesByPeriod('issues2', this.get('period2Date'));
-      }
       if (this.hasPeriod(3)) {
         fetchIssuesByPeriod('issues3', this.get('period3Date'));
       }
@@ -158,12 +150,7 @@ define(function () {
       var debtMeasure = _.findWhere(msr, { key: DEBT_METRIC }),
           sqaleRatingMeasure = _.findWhere(msr, { key: SQALE_RATING_METRIC });
       if (debtMeasure != null) {
-        this.set({
-          debt: debtMeasure.val,
-          debt1: debtMeasure.var1,
-          debt2: debtMeasure.var2,
-          debt3: debtMeasure.var3
-        });
+        this.set({ debt: debtMeasure.val });
       }
       if (sqaleRatingMeasure != null) {
         this.set({ sqaleRating: sqaleRatingMeasure.val });
@@ -176,15 +163,11 @@ define(function () {
       if (coverageMeasure != null) {
         this.set({
           coverage: coverageMeasure.val,
-          coverage1: coverageMeasure.var1,
-          coverage2: coverageMeasure.var2,
           coverage3: coverageMeasure.var3
         });
       }
       if (newCoverageMeasure != null) {
         this.set({
-          newCoverage1: newCoverageMeasure.var1,
-          newCoverage2: newCoverageMeasure.var2,
           newCoverage3: newCoverageMeasure.var3
         });
       }
@@ -195,8 +178,6 @@ define(function () {
       if (duplicationsMeasure != null) {
         this.set({
           duplications: duplicationsMeasure.val,
-          duplications1: duplicationsMeasure.var1,
-          duplications2: duplicationsMeasure.var2,
           duplications3: duplicationsMeasure.var3
         });
       }
@@ -210,7 +191,6 @@ define(function () {
             metrics: [
               SIZE_METRIC,
               ISSUES_METRIC,
-              DEBT_METRIC,
               COVERAGE_METRIC,
               DUPLICATIONS_METRIC
             ].join(',')
@@ -219,7 +199,6 @@ define(function () {
         if (_.isArray(r)) {
           that.parseSizeTrend(r[0]);
           that.parseIssuesTrend(r[0]);
-          that.parseDebtTrend(r[0]);
           that.parseCoverageTrend(r[0]);
           that.parseDuplicationsTrend(r[0]);
         }
@@ -231,12 +210,9 @@ define(function () {
           index = _.pluck(r.cols, 'metric').indexOf(metric);
       if (index !== -1) {
         var trend = r.cells.map(function (cell) {
-              return { val: cell.d, count: cell.v[index] };
-            }),
-            filteredTrend = trend.filter(function (t) {
-              return t.val != null && t.count != null;
-            });
-        that.set(property, filteredTrend);
+          return { val: cell.d, count: cell.v[index] || 0 };
+        });
+        that.set(property, trend);
       }
     },
 
@@ -248,10 +224,6 @@ define(function () {
       this.parseTrend(r, 'issuesTrend', ISSUES_METRIC);
     },
 
-    parseDebtTrend: function (r) {
-      this.parseTrend(r, 'debtTrend', DEBT_METRIC);
-    },
-
     parseCoverageTrend: function (r) {
       this.parseTrend(r, 'coverageTrend', COVERAGE_METRIC);
     },
diff --git a/server/sonar-web/src/main/js/overview/views/coverage-view.js b/server/sonar-web/src/main/js/overview/views/coverage-view.js
index f83fbed79bf..ee5b7ff186d 100644
--- a/server/sonar-web/src/main/js/overview/views/coverage-view.js
+++ b/server/sonar-web/src/main/js/overview/views/coverage-view.js
@@ -29,8 +29,7 @@ define([
     },
 
     onRender: function () {
-      this.$('.js-pie-chart').pieChart();
-      if (this.model.has('coverageTrend')) {
+      if (this.model.has('coverageTrend') && this.model.get('coverage') != null) {
         this.$('#overview-coverage-trend').sparkline(this.model.get('coverageTrend'));
       }
     }
diff --git a/server/sonar-web/src/main/js/overview/views/debt-view.js b/server/sonar-web/src/main/js/overview/views/debt-view.js
deleted file mode 100644
index 40f4c068b51..00000000000
--- a/server/sonar-web/src/main/js/overview/views/debt-view.js
+++ /dev/null
@@ -1,43 +0,0 @@
-/*
- * SonarQube, open source software quality management tool.
- * Copyright (C) 2008-2014 SonarSource
- * mailto:contact AT sonarsource DOT com
- *
- * SonarQube is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * SonarQube is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-define([
-  'templates/overview'
-], function () {
-
-  return Marionette.Layout.extend({
-    template: Templates['overview-debt'],
-
-    modelEvents: {
-      'change': 'render'
-    },
-
-    onRender: function () {
-      if (this.model.has('debtTrend')) {
-        this.$('#overview-debt-trend').sparkline(this.model.get('debtTrend'));
-      }
-      this.$('[data-toggle="tooltip"]').tooltip({ container: 'body', placement: 'bottom' });
-    },
-
-    onClose: function () {
-      this.$('[data-toggle="tooltip"]').tooltip('destroy');
-    }
-  });
-
-});
diff --git a/server/sonar-web/src/main/js/overview/views/duplications-view.js b/server/sonar-web/src/main/js/overview/views/duplications-view.js
index b2738e44d4f..51821a67da1 100644
--- a/server/sonar-web/src/main/js/overview/views/duplications-view.js
+++ b/server/sonar-web/src/main/js/overview/views/duplications-view.js
@@ -29,8 +29,7 @@ define([
     },
 
     onRender: function () {
-      this.$('.js-pie-chart').pieChart();
-      if (this.model.has('duplicationsTrend')) {
+      if (this.model.has('duplicationsTrend') && this.model.get('duplications') != null) {
         this.$('#overview-duplications-trend').sparkline(this.model.get('duplicationsTrend'));
       }
     }
diff --git a/server/sonar-web/src/main/js/overview/views/issues-view.js b/server/sonar-web/src/main/js/overview/views/issues-view.js
index c96f57963f8..658ba05b7a4 100644
--- a/server/sonar-web/src/main/js/overview/views/issues-view.js
+++ b/server/sonar-web/src/main/js/overview/views/issues-view.js
@@ -29,14 +29,9 @@ define([
     },
 
     onRender: function () {
-      if (this.model.has('issuesTrend')) {
+      if (this.model.has('issuesTrend') && this.model.get('issues') != null) {
         this.$('#overview-issues-trend').sparkline(this.model.get('issuesTrend'));
       }
-      this.$('[data-toggle="tooltip"]').tooltip({ container: 'body', placement: 'bottom' });
-    },
-
-    onClose: function () {
-      this.$('[data-toggle="tooltip"]').tooltip('destroy');
     }
   });
 
diff --git a/server/sonar-web/src/main/js/overview/views/size-view.js b/server/sonar-web/src/main/js/overview/views/size-view.js
index 43d6b9f2ba6..e09e8a2e7c8 100644
--- a/server/sonar-web/src/main/js/overview/views/size-view.js
+++ b/server/sonar-web/src/main/js/overview/views/size-view.js
@@ -29,7 +29,7 @@ define([
     },
 
     onRender: function () {
-      if (this.model.has('sizeTrend')) {
+      if (this.model.has('sizeTrend') && this.model.get('ncloc') != null) {
         this.$('#overview-size-trend').sparkline(this.model.get('sizeTrend'));
       }
     }