SONAR-7068 Add a visual indicators for each domain on the overview page

4 files changed, 30 insertions, 12 deletions

diff --git a/server/sonar-web/src/main/js/apps/overview/main/coverage.js b/server/sonar-web/src/main/js/apps/overview/main/coverage.js
index 71d83c93b9d..1e37aac5139 100644
--- a/server/sonar-web/src/main/js/apps/overview/main/coverage.js
+++ b/server/sonar-web/src/main/js/apps/overview/main/coverage.js
@@ -3,6 +3,7 @@ import React from 'react';
 import { Domain, DomainHeader, DomainPanel, DomainNutshell, DomainLeak, MeasuresList, Measure, DomainMixin } from './components';
 import { DrilldownLink } from '../../../components/shared/drilldown-link';
 import { TooltipsMixin } from '../../../components/mixins/tooltips-mixin';
+import { DonutChart } from '../../../components/charts/donut-chart';
 import { getMetricName } from '../helpers/metrics';
 import { formatMeasure } from '../../../helpers/measures';
 
@@ -71,12 +72,20 @@ export const GeneralCoverage = React.createClass({
       return null;
     }
 
+    let donutData = [
+      { value: this.props.measures[coverageMetric], fill: '#85bb43' },
+      { value: 100 - this.props.measures[coverageMetric], fill: '#d4333f' }
+    ];
+
     return <Domain>
       <DomainHeader component={this.props.component} title={window.t('overview.domain.coverage')} linkTo="/tests"/>
 
       <DomainPanel domain="coverage">
         <DomainNutshell>
           <MeasuresList>
+            <Measure composite={true}>
+              <DonutChart width="48" height="48" thickness="6" data={donutData}/>
+            </Measure>
             <Measure label={getMetricName('coverage')}>
               <DrilldownLink component={this.props.component.key} metric={coverageMetric}>
                 <span className="js-overview-main-coverage">
diff --git a/server/sonar-web/src/main/js/apps/overview/main/duplications.js b/server/sonar-web/src/main/js/apps/overview/main/duplications.js
index 8dcd5b0b4b3..18db99bb3c7 100644
--- a/server/sonar-web/src/main/js/apps/overview/main/duplications.js
+++ b/server/sonar-web/src/main/js/apps/overview/main/duplications.js
@@ -3,6 +3,7 @@ import React from 'react';
 import { Domain, DomainHeader, DomainPanel, DomainNutshell, DomainLeak, MeasuresList, Measure, DomainMixin } from './components';
 import { DrilldownLink } from '../../../components/shared/drilldown-link';
 import { TooltipsMixin } from '../../../components/mixins/tooltips-mixin';
+import { DonutChart } from '../../../components/charts/donut-chart';
 import { getMetricName } from '../helpers/metrics';
 import { formatMeasure, formatMeasureVariation } from '../../../helpers/measures';
 
@@ -43,6 +44,11 @@ export const GeneralDuplications = React.createClass({
   },
 
   render () {
+    let donutData = [
+      { value: this.props.measures['duplicated_lines_density'], fill: '#f3ca8e' },
+      { value: 100 - this.props.measures['duplicated_lines_density'], fill: '#e6e6e6' }
+    ];
+
     return <Domain>
       <DomainHeader component={this.props.component} title={window.t('overview.domain.duplications')}
                     linkTo="/duplications"/>
@@ -50,6 +56,9 @@ export const GeneralDuplications = React.createClass({
       <DomainPanel domain="duplications">
         <DomainNutshell>
           <MeasuresList>
+            <Measure composite={true}>
+              <DonutChart width="48" height="48" thickness="6" data={donutData}/>
+            </Measure>
             <Measure label={getMetricName('duplications')}>
               <DrilldownLink component={this.props.component.key} metric="duplicated_lines_density">
                 {formatMeasure(this.props.measures['duplicated_lines_density'], 'PERCENT')}
diff --git a/server/sonar-web/src/main/js/apps/overview/main/issues.js b/server/sonar-web/src/main/js/apps/overview/main/issues.js
index 3f742f035fa..b291d8243eb 100644
--- a/server/sonar-web/src/main/js/apps/overview/main/issues.js
+++ b/server/sonar-web/src/main/js/apps/overview/main/issues.js
@@ -28,18 +28,18 @@ export const GeneralIssues = React.createClass({
 
     return <DomainLeak>
       <MeasuresList>
-        <Measure label={getMetricName('new_issues')}>
-          <IssuesLink component={this.props.component.key}
-                      params={{ resolved: 'false', createdAfter: createdAfter }}>
-            {formatMeasure(this.props.leak.issues, 'SHORT_INT')}
-          </IssuesLink>
-        </Measure>
         <Measure label={getMetricName('new_debt')}>
           <IssuesLink component={this.props.component.key}
                       params={{ resolved: 'false', createdAfter: createdAfter, facetMode: 'debt' }}>
             {formatMeasure(this.props.leak.debt, 'SHORT_WORK_DUR')}
           </IssuesLink>
         </Measure>
+        <Measure label={getMetricName('new_issues')}>
+          <IssuesLink component={this.props.component.key}
+                      params={{ resolved: 'false', createdAfter: createdAfter }}>
+            {formatMeasure(this.props.leak.issues, 'SHORT_INT')}
+          </IssuesLink>
+        </Measure>
       </MeasuresList>
       {this.renderTimeline('after')}
     </DomainLeak>;
@@ -58,16 +58,16 @@ export const GeneralIssues = React.createClass({
                 <Rating value={this.props.measures['sqale_rating']}/>
               </DrilldownLink>
             </Measure>
-            <Measure label={getMetricName('issues')}>
-              <IssuesLink component={this.props.component.key} params={{ resolved: 'false' }}>
-                {formatMeasure(this.props.measures.issues, 'SHORT_INT')}
-              </IssuesLink>
-            </Measure>
             <Measure label={getMetricName('debt')}>
               <IssuesLink component={this.props.component.key} params={{ resolved: 'false', facetMode: 'debt' }}>
                 {formatMeasure(this.props.measures.debt, 'SHORT_WORK_DUR')}
               </IssuesLink>
             </Measure>
+            <Measure label={getMetricName('issues')}>
+              <IssuesLink component={this.props.component.key} params={{ resolved: 'false' }}>
+                {formatMeasure(this.props.measures.issues, 'SHORT_INT')}
+              </IssuesLink>
+            </Measure>
           </MeasuresList>
           {this.renderTimeline('before')}
         </DomainNutshell>
diff --git a/server/sonar-web/src/main/js/apps/overview/main/size.js b/server/sonar-web/src/main/js/apps/overview/main/size.js
index 0520e5466c5..0ae35795ccb 100644
--- a/server/sonar-web/src/main/js/apps/overview/main/size.js
+++ b/server/sonar-web/src/main/js/apps/overview/main/size.js
@@ -49,12 +49,12 @@ export const GeneralSize = React.createClass({
       <DomainPanel domain="size">
         <DomainNutshell>
           <MeasuresList>
+            {this.renderLanguageDistribution()}
             <Measure label={getMetricName('ncloc')}>
               <DrilldownLink component={this.props.component.key} metric="ncloc">
                 {formatMeasure(this.props.measures['ncloc'], 'SHORT_INT')}
               </DrilldownLink>
             </Measure>
-            {this.renderLanguageDistribution()}
           </MeasuresList>
           {this.renderTimeline('before')}
         </DomainNutshell>