]> source.dussan.org Git - sonarqube.git/commitdiff
SONAR-8393 Rating indicators are not consistent
authorStas Vilchik <vilchiks@gmail.com>
Tue, 24 Jan 2017 15:02:52 +0000 (16:02 +0100)
committerStas Vilchik <vilchiks@gmail.com>
Tue, 24 Jan 2017 15:02:52 +0000 (16:02 +0100)
server/sonar-web/src/main/js/apps/overview/main/Coverage.js
server/sonar-web/src/main/js/apps/overview/main/Duplications.js
server/sonar-web/src/main/js/apps/overview/main/enhance.js
server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectCardMeasures-test.js.snap
server/sonar-web/src/main/js/apps/projects/filters/CoverageFilter.js
server/sonar-web/src/main/js/apps/projects/filters/DuplicationsFilter.js
server/sonar-web/src/main/js/components/ui/CoverageRating.js
server/sonar-web/src/main/js/components/ui/DuplicationsRating.css
server/sonar-web/src/main/js/components/ui/DuplicationsRating.js

index 8c11d412ab2df93a6ee4e90bcddb0c354a8b04c5..a6f9ec2068313c5e7f1355d2b20107e491123e27 100644 (file)
@@ -23,6 +23,7 @@ import { DrilldownLink } from '../../../components/shared/drilldown-link';
 import { getMetricName } from '../helpers/metrics';
 import { formatMeasure, getPeriodValue } from '../../../helpers/measures';
 import { translate } from '../../../helpers/l10n';
+import CoverageRating from '../../../components/ui/CoverageRating';
 
 class Coverage extends React.Component {
   getCoverage () {
@@ -55,14 +56,6 @@ class Coverage extends React.Component {
     return this.props.renderMeasure('tests');
   }
 
-  renderCoverageDonut (coverage) {
-    const data = [
-      { value: coverage, fill: '#85bb43' },
-      { value: 100 - coverage, fill: '#d4333f' }
-    ];
-    return this.props.renderDonut(data);
-  }
-
   renderCoverage () {
     const { component } = this.props;
     const metric = 'coverage';
@@ -70,7 +63,9 @@ class Coverage extends React.Component {
 
     return (
         <div className="overview-domain-measure">
-          {this.renderCoverageDonut(coverage)}
+          <div className="display-inline-block text-middle big-spacer-right">
+            <CoverageRating value={coverage} size="big"/>
+          </div>
 
           <div className="display-inline-block text-middle">
             <div className="overview-domain-measure-value">
index 9d65c911acea4b8887ef8ca61c08a7af50266845..2d7a189dbdb56fa7c236a788c3a24871cb944a9d 100644 (file)
@@ -23,6 +23,7 @@ import { DrilldownLink } from '../../../components/shared/drilldown-link';
 import { getMetricName } from '../helpers/metrics';
 import { formatMeasure, getPeriodValue } from '../../../helpers/measures';
 import { translate } from '../../../helpers/l10n';
+import DuplicationsRating from '../../../components/ui/DuplicationsRating';
 
 class Duplications extends React.Component {
   renderHeader () {
@@ -39,14 +40,6 @@ class Duplications extends React.Component {
     return this.props.renderMeasure('duplicated_blocks');
   }
 
-  renderDuplicationsDonut (duplications) {
-    const data = [
-      { value: duplications, fill: '#f3ca8e' },
-      { value: Math.max(0, 20 - duplications), fill: '#e6e6e6' }
-    ];
-    return this.props.renderDonut(data);
-  }
-
   renderDuplications () {
     const { component, measures } = this.props;
     const measure = measures.find(measure => measure.metric.key === 'duplicated_lines_density');
@@ -54,7 +47,9 @@ class Duplications extends React.Component {
 
     return (
         <div className="overview-domain-measure">
-          {this.renderDuplicationsDonut(duplications)}
+          <div className="display-inline-block text-middle big-spacer-right">
+            <DuplicationsRating value={duplications} size="big"/>
+          </div>
 
           <div className="display-inline-block text-middle">
             <div className="overview-domain-measure-value">
index cedb89d9cf98f3de8ab9e856bd65e6b42b78d028..47850e7dd2f1728a0af42f5580ebace6958543b5 100644 (file)
@@ -22,7 +22,6 @@ import { Link } from 'react-router';
 import moment from 'moment';
 import shallowCompare from 'react-addons-shallow-compare';
 import { DrilldownLink } from '../../../components/shared/drilldown-link';
-import { DonutChart } from '../../../components/charts/donut-chart';
 import Rating from './../../../components/ui/Rating';
 import Timeline from '../components/Timeline';
 import {
@@ -121,18 +120,6 @@ export default function enhance (ComposedComponent) {
       );
     }
 
-    renderDonut (data) {
-      return (
-          <div className="display-inline-block text-middle big-spacer-right">
-            <DonutChart
-                data={data}
-                width={40}
-                height={40}
-                thickness={4}/>
-          </div>
-      );
-    }
-
     renderRating (metricKey) {
       const { component, measures } = this.props;
       const measure = measures.find(measure => measure.metric.key === metricKey);
@@ -208,7 +195,6 @@ export default function enhance (ComposedComponent) {
               renderHeader={this.renderHeader.bind(this)}
               renderMeasure={this.renderMeasure.bind(this)}
               renderMeasureVariation={this.renderMeasureVariation.bind(this)}
-              renderDonut={this.renderDonut.bind(this)}
               renderRating={this.renderRating.bind(this)}
               renderIssues={this.renderIssues.bind(this)}
               renderTimeline={this.renderTimeline.bind(this)}/>
index 8ad0529999fef3bfa9bc75440cc792a5871e4e22..42c81f82b0dd80f8bf857578e3bd97643eb8dbe1 100644 (file)
@@ -218,7 +218,7 @@ exports[`test should not render duplications 1`] = `
           className="spacer-right">
           <CoverageRating
             muted={false}
-            small={false}
+            size="normal"
             value="88.3" />
         </span>
         <Measure
@@ -370,7 +370,7 @@ exports[`test should not render ncloc 1`] = `
           className="spacer-right">
           <CoverageRating
             muted={false}
-            small={false}
+            size="normal"
             value="88.3" />
         </span>
         <Measure
index 04cdd0e6f28e8840fd686cfb13a63dbf2a2f6fc8..c7a6ddaeabc336baf728b58e6fc85f82160213f8 100644 (file)
@@ -26,7 +26,7 @@ export default class CoverageFilter extends React.Component {
   renderOption = (option, selected) => {
     return (
         <span>
-          <CoverageRating value={getCoverageRatingAverageValue(option)} small={true} muted={!selected}/>
+          <CoverageRating value={getCoverageRatingAverageValue(option)} size="small" muted={!selected}/>
           <span className="spacer-left">
             {getCoverageRatingLabel(option)}
           </span>
index 2c3788bb0b3f476370eb72c15dda0af74544763b..20a032b3bc582e0206fa96731b4b13819ea9363c 100644 (file)
@@ -26,7 +26,7 @@ export default class DuplicationsFilter extends React.Component {
   renderOption = (option, selected) => {
     return (
         <span>
-          <DuplicationsRating value={getDuplicationsRatingAverageValue(option)} small={true} muted={!selected}/>
+          <DuplicationsRating value={getDuplicationsRatingAverageValue(option)} size="small" muted={!selected}/>
           <span className="spacer-left">
             {getDuplicationsRatingLabel(option)}
           </span>
index 3477b3df1ee2c1625068959190b9301dc23efe90..bb65d33d7c3824f13a29575f9b1ce54588b51185 100644 (file)
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+// @flow
 import React from 'react';
 import { DonutChart } from '../charts/donut-chart';
 
+const SIZE_TO_WIDTH_MAPPING = {
+  'small': 16,
+  'normal': 24,
+  'big': 40
+};
+
+const SIZE_TO_THICKNESS_MAPPING = {
+  'small': 2,
+  'normal': 3,
+  'big': 4
+};
+
 export default class CoverageRating extends React.Component {
-  static propTypes = {
-    value: React.PropTypes.oneOfType([React.PropTypes.number, React.PropTypes.string]),
-    small: React.PropTypes.bool,
-    muted: React.PropTypes.bool
+  props: {
+    value: number | string,
+    size?: 'small' | 'normal' | 'big',
+    muted?: boolean,
   };
 
   static defaultProps = {
-    small: false,
+    size: 'normal',
     muted: false
   };
 
@@ -43,8 +56,11 @@ export default class CoverageRating extends React.Component {
       ];
     }
 
-    const size = this.props.small ? 16 : 24;
-    const thickness = this.props.small ? 2 : 3;
+    // $FlowFixMe
+    const size = SIZE_TO_WIDTH_MAPPING[this.props.size];
+
+    // $FlowFixMe
+    const thickness = SIZE_TO_THICKNESS_MAPPING[this.props.size];
 
     return (
         <DonutChart
index feb5dc4a3d9c4aa58198561e80ae1316abe9adc9..6e9842abc7764150a898060c48d7b57c4bf803c7 100644 (file)
   border-width: 2px;
 }
 
+.duplications-rating-big {
+  width: 40px;
+  height: 40px;
+  border-width: 3px;
+}
+
 .duplications-rating-muted {
   border-color: #bdbdbd !important;
 }
   height: 2px;
 }
 
+.duplications-rating-big.duplications-rating-B:after {
+  width: 12px;
+  height: 12px;
+}
+
 .duplications-rating-C:after {
   width: 8px;
   height: 8px;
   height: 6px;
 }
 
+.duplications-rating-big.duplications-rating-C:after {
+  width: 16px;
+  height: 16px;
+}
+
 .duplications-rating-D {
   border-color: #d4333f;
 }
 .duplications-rating-small.duplications-rating-D:after {
   width: 8px;
   height: 8px;
-  background-color: #d4333f;
+}
+
+.duplications-rating-big.duplications-rating-D:after {
+  width: 24px;
+  height: 24px;
 }
 
 .duplications-rating-E {
   border-color: #d4333f;
 }
 
+.duplications-rating-E:after {
+  width: 14px;
+  height: 14px;
+  background-color: #d4333f;
+}
+
 .duplications-rating-small.duplications-rating-E:after {
   width: 10px;
   height: 10px;
-  background-color: #d4333f;
 }
 
-.duplications-rating-E:after {
-  width: 14px;
-  height: 14px;
-  background-color: #d4333f;
+.duplications-rating-big.duplications-rating-E:after {
+  width: 28px;
+  height: 28px;
 }
index c2ffe4f543905ee519d590da922deabaf383232a..038dcf346d7e595e107ce8405d99f34a4cfbc90f 100644 (file)
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+// @flow
 import React from 'react';
 import classNames from 'classnames';
 import inRange from 'lodash/inRange';
 import './DuplicationsRating.css';
 
 export default class DuplicationsRating extends React.Component {
-  static propTypes = {
-    value: React.PropTypes.oneOfType([React.PropTypes.number, React.PropTypes.string]).isRequired,
-    small: React.PropTypes.bool,
-    muted: React.PropTypes.bool
+  props: {
+    value: number,
+    size?: 'small' | 'normal' | 'big',
+    muted?: boolean
   };
 
   static defaultProps = {
@@ -35,10 +36,11 @@ export default class DuplicationsRating extends React.Component {
   };
 
   render () {
-    const { value } = this.props;
+    const { value, size, muted } = this.props;
     const className = classNames('duplications-rating', {
-      'duplications-rating-small': this.props.small,
-      'duplications-rating-muted': this.props.muted,
+      'duplications-rating-small': size === 'small',
+      'duplications-rating-big': size === 'big',
+      'duplications-rating-muted': muted,
       'duplications-rating-A': inRange(value, 3),
       'duplications-rating-B': inRange(value, 3, 5),
       'duplications-rating-C': inRange(value, 5, 10),