SONAR-6331 update the style of the overview page

16 files changed, 166 insertions, 322 deletions

diff --git a/server/sonar-web/src/main/hbs/overview/overview-coverage.hbs b/server/sonar-web/src/main/hbs/overview/overview-coverage.hbs
index a46eb394a94..bdca7c4d95b 100644
--- a/server/sonar-web/src/main/hbs/overview/overview-coverage.hbs
+++ b/server/sonar-web/src/main/hbs/overview/overview-coverage.hbs
@@ -1,68 +1,26 @@
-<h6 class="note">{{t 'overview.coverage'}}</h6>
+<div class="overview-highlight">
+  <h6 class="note">{{t 'overview.coverage'}}</h6>
+  <div class="overview-main-measure">
+    {{#notNull coverage}}
+      <a href="{{urlForDrilldown componentKey 'overall_coverage'}}">{{formatMeasure coverage 'PERCENT'}}</a>
+    {{else}}
+      –
+    {{/notNull}}
+  </div>
+  {{#notNull coverage3}}
+    <div class="spacer-top">
+      <span class="overview-measure {{#gt coverage3 0}}text-success{{/gt}}{{#lt coverage3 0}}text-danger{{/lt}}">{{formatMeasureVariation coverage3 'PERCENT'}}</span>
+      <span class="note">{{period3Name}}</span>
+    </div>
+  {{/notNull}}
+  {{#notNull newCoverage3}}
+    <div class="spacer-top">
+      <a class="overview-measure spacer-top" href="{{urlForDrilldown componentKey 'new_overall_coverage' 3}}">{{formatMeasure newCoverage3 'PERCENT'}}</a>
+      <span class="note">on new code</span>
+    </div>
+  {{/notNull}}
+</div>
 
-<table class="width100">
-  <tr>
-    <td class="width-55">
-      <div class="overview-main-measure">
-        <a href="{{urlForDrilldown componentKey 'overall_coverage'}}">{{formatMeasure coverage 'PERCENT'}}</a>
-      </div>
-      <div class="overview-trend">
-        <div id="overview-coverage-trend" data-width="100" data-height="30" data-color="#4b9fd5"></div>
-      </div>
-    </td>
-    <td class="width-15">
-      {{#notNull coverage1}}
-        <a class="overview-measure" href="{{urlForDrilldown componentKey 'overall_coverage' 1}}">
-          {{formatMeasureVariation coverage1 'PERCENT'}}
-        </a>
-        <p class="note">{{period1Name}}</p>
-      {{/notNull}}
-    </td>
-    <td class="width-15">
-      {{#notNull coverage2}}
-        <a class="overview-measure" href="{{urlForDrilldown componentKey 'overall_coverage' 2}}">
-          {{formatMeasureVariation coverage2 'PERCENT'}}
-        </a>
-        <p class="note">{{period2Name}}</p>
-      {{/notNull}}
-    </td>
-    <td class="width-15">
-      {{#notNull coverage3}}
-        <a class="overview-measure" href="{{urlForDrilldown componentKey 'overall_coverage' 3}}">
-          {{formatMeasureVariation coverage3 'PERCENT'}}
-        </a>
-        <p class="note">{{period3Name}}</p>
-      {{/notNull}}
-    </td>
-  </tr>
-  <tr>
-    <td class="width-55"></td>
-    <td class="width-15">
-      {{#notNull newCoverage1}}
-        <div class="spacer-top"></div>
-        <a class="overview-measure" href="{{urlForDrilldown componentKey 'new_overall_coverage' 1}}">
-          {{formatMeasure newCoverage1 'PERCENT'}}
-        </a>
-        <p class="note">on new code</p>
-      {{/notNull}}
-    </td>
-    <td class="width-15">
-      {{#notNull newCoverage2}}
-        <div class="spacer-top"></div>
-        <a class="overview-measure spacer-top" href="{{urlForDrilldown componentKey 'new_overall_coverage' 2}}">
-          {{formatMeasure newCoverage2 'PERCENT'}}
-        </a>
-        <p class="note">on new code</p>
-      {{/notNull}}
-    </td>
-    <td class="width-15">
-      {{#notNull newCoverage3}}
-        <div class="spacer-top"></div>
-        <a class="overview-measure spacer-top" href="{{urlForDrilldown componentKey 'new_overall_coverage' 3}}">
-          {{formatMeasure newCoverage3 'PERCENT'}}
-        </a>
-        <p class="note">on new code</p>
-      {{/notNull}}
-    </td>
-  </tr>
-</table>
+<div class="overview-trend">
+  <div class="overview-sparkline" id="overview-coverage-trend" data-width="300" data-height="50" data-color="#f3ca8e" data-type="PERCENT"></div>
+</div>
diff --git a/server/sonar-web/src/main/hbs/overview/overview-debt.hbs b/server/sonar-web/src/main/hbs/overview/overview-debt.hbs
deleted file mode 100644
index 132f040fcbd..00000000000
--- a/server/sonar-web/src/main/hbs/overview/overview-debt.hbs
+++ /dev/null
@@ -1,38 +0,0 @@
-<h6 class="note">{{t 'overview.debt'}}</h6>
-
-<table class="width100">
-  <tr>
-    <td class="width-55">
-      <div class="overview-main-measure">
-        {{#notNull sqaleRating}}
-          <a href="{{urlForDrilldown componentKey 'sqale_rating'}}"><span class="rating rating-{{formatMeasure sqaleRating 'RATING'}}">{{formatMeasure sqaleRating 'RATING'}}</span></a>
-        {{/notNull}}
-        <a href="{{urlForDrilldown componentKey 'sqale_index'}}">{{formatMeasure debt 'WORK_DUR'}}</a>
-      </div>
-      <div class="overview-trend">
-        <div id="overview-debt-trend" data-width="100" data-height="30" data-color="#4b9fd5"></div>
-      </div>
-    </td>
-    <td class="width-15">
-      <a href="{{urlForDrilldown componentKey 'sqale_index' 1}}"
-         class="overview-measure {{#gt deb1 0}}text-danger{{/gt}}{{#lt debt1 0}}text-success{{/lt}}">
-        {{formatMeasureVariation debt1 'WORK_DUR'}}
-      </a>
-      <p class="note">{{period1Name}}</p>
-    </td>
-    <td class="width-15">
-      <a href="{{urlForDrilldown componentKey 'sqale_index' 2}}"
-         class="overview-measure {{#gt debt2 0}}text-danger{{/gt}}{{#lt debt2 0}}text-success{{/lt}}">
-        {{formatMeasureVariation debt2 'WORK_DUR'}}
-      </a>
-      <p class="note">{{period2Name}}</p>
-    </td>
-    <td class="width-15">
-      <a href="{{urlForDrilldown componentKey 'sqale_index' 3}}"
-         class="overview-measure {{#gt debt3 0}}text-danger{{/gt}}{{#lt debt3 0}}text-success{{/lt}}">
-        {{formatMeasureVariation debt3 'WORK_DUR'}}
-      </a>
-      <p class="note">{{period3Name}}</p>
-    </td>
-  </tr>
-</table>
diff --git a/server/sonar-web/src/main/hbs/overview/overview-duplications.hbs b/server/sonar-web/src/main/hbs/overview/overview-duplications.hbs
index 2f670d35cc4..68b7ecf1748 100644
--- a/server/sonar-web/src/main/hbs/overview/overview-duplications.hbs
+++ b/server/sonar-web/src/main/hbs/overview/overview-duplications.hbs
@@ -1,34 +1,19 @@
-<h6 class="note">{{t 'overview.duplications'}}</h6>
+<div class="overview-highlight">
+  <h6 class="note">{{t 'overview.duplications'}}</h6>
+  <div class="overview-main-measure">
+    <a href="{{urlForDrilldown componentKey 'duplicated_lines_density'}}">
+      {{formatMeasure duplications 'PERCENT'}}
+    </a>
+  </div>
+  {{#notNull duplications3}}
+    <div class="spacer-top">
+      <a class="overview-measure {{#gt duplications3 0}}text-danger{{/gt}}{{#lt duplications3 0}}text-success{{/lt}}"
+         href="{{urlForDrilldown componentKey 'duplicated_lines_density' 3}}">{{formatMeasureVariation duplications3 'PERCENT'}}</a>
+      <span class="note">{{period3Name}}</span>
+    </div>
+  {{/notNull}}
+</div>
 
-<table class="width100">
-  <tr>
-    <td class="width-55">
-      <div class="overview-main-measure">
-        <a href="{{urlForDrilldown componentKey 'duplicated_lines_density'}}">
-          {{formatMeasure duplications 'PERCENT'}}
-        </a>
-      </div>
-      <div class="overview-trend">
-        <div id="overview-duplications-trend" data-width="100" data-height="30" data-color="#4b9fd5"></div>
-      </div>
-    </td>
-    <td class="width-15">
-      <a class="overview-measure" href="{{urlForDrilldown componentKey 'duplicated_lines_density' 1}}">
-        {{formatMeasureVariation duplications1 'PERCENT'}}
-      </a>
-      <p class="note">{{period1Name}}</p>
-    </td>
-    <td class="width-15">
-      <a class="overview-measure" href="{{urlForDrilldown componentKey 'duplicated_lines_density' 2}}">
-        {{formatMeasureVariation duplications2 'PERCENT'}}
-      </a>
-      <p class="note">{{period2Name}}</p>
-    </td>
-    <td class="width-15">
-      <a class="overview-measure" href="{{urlForDrilldown componentKey 'duplicated_lines_density' 3}}">
-        {{formatMeasureVariation duplications3 'PERCENT'}}
-      </a>
-      <p class="note">{{period3Name}}</p>
-    </td>
-  </tr>
-</table>
+<div class="overview-trend">
+  <div class="overview-sparkline" id="overview-duplications-trend" data-width="300" data-height="50" data-color="#f3ca8e" data-type="PERCENT"></div>
+</div>
diff --git a/server/sonar-web/src/main/hbs/overview/overview-issues.hbs b/server/sonar-web/src/main/hbs/overview/overview-issues.hbs
index 5a7ba8090c3..ddc1ebdc350 100644
--- a/server/sonar-web/src/main/hbs/overview/overview-issues.hbs
+++ b/server/sonar-web/src/main/hbs/overview/overview-issues.hbs
@@ -1,44 +1,24 @@
-<h6 class="note">{{t 'overview.issues'}}</h6>
+<div class="overview-highlight">
+  <h6 class="note">{{t 'overview.issues'}}</h6>
+  <div class="overview-main-measure">
+    <a href="{{urlForIssuesOverview componentKey}}">{{formatMeasure issues 'INT'}}</a>
+  </div>
+  <div class="spacer-top">
+    {{#notNull sqaleRating}}
+      <a class="overview-measure" href="{{urlForDrilldown componentKey 'sqale_rating'}}"><span class="rating rating-{{formatMeasure sqaleRating 'RATING'}}">{{formatMeasure sqaleRating 'RATING'}}</span></a>
+    {{/notNull}}
+    &nbsp;&nbsp;
+    <a class="overview-measure" href="{{urlForDrilldown componentKey 'sqale_index'}}">{{formatMeasure debt 'WORK_DUR'}}</a>
+  </div>
+  {{#notNull issues3}}
+    <div class="spacer-top">
+      <a href="{{urlForIssuesOverview componentKey period3Date}}"
+         class="overview-measure {{#gt issues3 0}}text-danger{{else}}text-success{{/gt}}">{{formatMeasureVariation issues3 'INT'}}</a>
+      <span class="note">new {{period3Name}}</span>
+    </div>
+  {{/notNull}}
+</div>
 
-<table class="width100">
-  <tr>
-    <td class="width-55">
-      <div class="overview-main-measure">
-        <a href="{{urlForIssuesOverview componentKey}}">{{formatMeasure issues 'INT'}}</a>
-      </div>
-      <div class="overview-trend">
-        <div id="overview-issues-trend" data-width="100" data-height="30" data-color="#4b9fd5"></div>
-      </div>
-    </td>
-    <td class="width-15">
-      {{#notNull issues1}}
-        <a href="{{urlForIssuesOverview componentKey period1Date}}"
-           class="overview-measure {{#gt issues1 0}}text-danger{{else}}text-success{{/gt}}">
-          {{formatMeasureVariation issues1 'INT'}}
-        </a>
-        <span class="note">new</span>
-        <p class="note">{{period1Name}}</p>
-      {{/notNull}}
-    </td>
-    <td class="width-15">
-      {{#notNull issues2}}
-        <a href="{{urlForIssuesOverview componentKey period2Date}}"
-           class="overview-measure {{#gt issues2 0}}text-danger{{else}}text-success{{/gt}}">
-          {{formatMeasureVariation issues2 'INT'}}
-        </a>
-        <span class="note">new</span>
-        <p class="note">{{period2Name}}</p>
-      {{/notNull}}
-    </td>
-    <td class="width-15">
-      {{#notNull issues3}}
-        <a href="{{urlForIssuesOverview componentKey period3Date}}"
-           class="overview-measure {{#gt issues3 0}}text-danger{{else}}text-success{{/gt}}">
-          {{formatMeasureVariation issues3 'INT'}}
-        </a>
-        <span class="note">new</span>
-        <p class="note">{{period3Name}}</p>
-      {{/notNull}}
-    </td>
-  </tr>
-</table>
+<div class="overview-trend">
+  <div class="overview-sparkline" id="overview-issues-trend" data-width="300" data-height="50" data-color="#f3ca8e" data-type="INT"></div>
+</div>
diff --git a/server/sonar-web/src/main/hbs/overview/overview-layout.hbs b/server/sonar-web/src/main/hbs/overview/overview-layout.hbs
index 46bf13084f5..8ce2a7d4e4f 100644
--- a/server/sonar-web/src/main/hbs/overview/overview-layout.hbs
+++ b/server/sonar-web/src/main/hbs/overview/overview-layout.hbs
@@ -1,6 +1,18 @@
-<div class="overview-card" id="overview-gate"></div>
-<div class="overview-card" id="overview-size"></div>
-<div class="overview-card" id="overview-issues"></div>
-<div class="overview-card" id="overview-debt"></div>
-<div class="overview-card" id="overview-coverage"></div>
-<div class="overview-card" id="overview-duplications"></div>
+<div class="overview-card overview-gate" id="overview-gate"></div>
+
+<div class="overview-container columns">
+  <div class="column-half">
+    <div class="overview-card" id="overview-size"></div>
+  </div>
+  <div class="column-half">
+    <div class="overview-card" id="overview-issues"></div>
+  </div>
+</div>
+<div class="overview-container columns">
+  <div class="column-half">
+    <div class="overview-card" id="overview-coverage"></div>
+  </div>
+  <div class="column-half">
+    <div class="overview-card" id="overview-duplications"></div>
+  </div>
+</div>
diff --git a/server/sonar-web/src/main/hbs/overview/overview-size.hbs b/server/sonar-web/src/main/hbs/overview/overview-size.hbs
index f3e18a8ef6f..b06b14ed706 100644
--- a/server/sonar-web/src/main/hbs/overview/overview-size.hbs
+++ b/server/sonar-web/src/main/hbs/overview/overview-size.hbs
@@ -1,28 +1,16 @@
-<h6 class="note">{{t 'overview.lines_of_code'}}</h6>
-
-<table class="width100">
-  <tr>
-    <td class="width-55">
-      <div>
-        <div class="overview-main-measure">
-          <a href="{{urlForDrilldown componentKey 'ncloc'}}">{{formatMeasure ncloc 'INT'}}</a>
-        </div>
-        <div class="overview-trend">
-          <div id="overview-size-trend" data-width="100" data-height="30" data-color="#4b9fd5"></div>
-        </div>
-      </div>
-    </td>
-    <td class="width-15">
-      <span class="overview-measure">{{formatMeasureVariation ncloc1 'INT'}}</span>
-      <p class="note">{{period1Name}}</p>
-    </td>
-    <td class="width-15">
-      <span class="overview-measure">{{formatMeasureVariation ncloc2 'INT'}}</span>
-      <p class="note">{{period2Name}}</p>
-    </td>
-    <td class="width-15">
+<div class="overview-highlight">
+  <h6 class="note">{{t 'overview.lines_of_code'}}</h6>
+  <div class="overview-main-measure">
+    <a href="{{urlForDrilldown componentKey 'ncloc'}}">{{formatMeasure ncloc 'INT'}}</a>
+  </div>
+  {{#notNull ncloc3}}
+    <div class="spacer-top">
       <span class="overview-measure">{{formatMeasureVariation ncloc3 'INT'}}</span>
-      <p class="note">{{period3Name}}</p>
-    </td>
-  </tr>
-</table>
+      <span class="note">{{period3Name}}</span>
+    </div>
+  {{/notNull}}
+</div>
+
+<div class="overview-trend">
+  <div class="overview-sparkline" id="overview-size-trend" data-width="300" data-height="50" data-color="#f3ca8e" data-type="INT"></div>
+</div>
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'));
       }
     }
diff --git a/server/sonar-web/src/main/less/pages/overview.less b/server/sonar-web/src/main/less/pages/overview.less
index 57d7f35b39c..311e5bb6bc4 100644
--- a/server/sonar-web/src/main/less/pages/overview.less
+++ b/server/sonar-web/src/main/less/pages/overview.less
@@ -28,13 +28,13 @@
 }
 
 .overview-card {
-  padding: 10px;
+  padding-top: 5px;
   background: @white;
   border: 1px solid @barBorderColor;
 }
 
-.overview-card + .overview-card {
-  margin-top: 10px;
+.overview-gate {
+  padding: 10px;
 }
 
 .overview-gate-ok { border: 2px solid @green; }
@@ -43,6 +43,11 @@
 
 .overview-gate-error { border: 2px solid @red; }
 
+.overview-container {
+  margin-top: 20px;
+  text-align: center;
+}
+
 .overview-card-header {
   padding-bottom: 5px;
   border-bottom: 1px solid @barBorderColor;
@@ -68,23 +73,32 @@
 .overview-status-WARN { background-color: @orange; }
 .overview-status-ERROR { background-color: @red; }
 
+.overview-highlight {
+  height: 145px;
+}
+
 .overview-main-measure {
-  display: inline-block;
-  vertical-align: middle;
+  line-height: 1.3;
   font-size: 36px;
   font-weight: 300;
 }
 
 .overview-trend {
+  height: 50px;
+  margin-top: 15px;
+  padding: 5px 10px;
+  border-top: 1px solid @barBorderColor;
+  background-color: #fdfdfd;
+
+  .note { font-size: 10px; }
+}
+
+.overview-sparkline {
   display: inline-block;
   vertical-align: middle;
-  margin-left: 15px;
 }
 
 .overview-measure {
   font-size: 16px;
-}
-
-.overview-measure ~ .note:last-child {
-  padding-top: 3px;
+  font-weight: 300;
 }