From 5acade3789ddfe07ccff4a3562decf8fe1b6f2ea Mon Sep 17 00:00:00 2001 From: Stas Vilchik Date: Tue, 24 Jan 2017 16:02:52 +0100 Subject: [PATCH] SONAR-8393 Rating indicators are not consistent --- .../main/js/apps/overview/main/Coverage.js | 13 +++---- .../js/apps/overview/main/Duplications.js | 13 +++---- .../src/main/js/apps/overview/main/enhance.js | 14 -------- .../ProjectCardMeasures-test.js.snap | 4 +-- .../apps/projects/filters/CoverageFilter.js | 2 +- .../projects/filters/DuplicationsFilter.js | 2 +- .../main/js/components/ui/CoverageRating.js | 30 ++++++++++++---- .../js/components/ui/DuplicationsRating.css | 36 +++++++++++++++---- .../js/components/ui/DuplicationsRating.js | 16 +++++---- 9 files changed, 74 insertions(+), 56 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 8c11d412ab2..a6f9ec20683 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 @@ -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 (
- {this.renderCoverageDonut(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 9d65c911ace..2d7a189dbdb 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 @@ -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 (
- {this.renderDuplicationsDonut(duplications)} +
+ +
diff --git a/server/sonar-web/src/main/js/apps/overview/main/enhance.js b/server/sonar-web/src/main/js/apps/overview/main/enhance.js index cedb89d9cf9..47850e7dd2f 100644 --- a/server/sonar-web/src/main/js/apps/overview/main/enhance.js +++ b/server/sonar-web/src/main/js/apps/overview/main/enhance.js @@ -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 ( -
- -
- ); - } - 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)}/> diff --git a/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectCardMeasures-test.js.snap b/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectCardMeasures-test.js.snap index 8ad0529999f..42c81f82b0d 100644 --- a/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectCardMeasures-test.js.snap +++ b/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectCardMeasures-test.js.snap @@ -218,7 +218,7 @@ exports[`test should not render duplications 1`] = ` className="spacer-right"> { return ( - + {getCoverageRatingLabel(option)} diff --git a/server/sonar-web/src/main/js/apps/projects/filters/DuplicationsFilter.js b/server/sonar-web/src/main/js/apps/projects/filters/DuplicationsFilter.js index 2c3788bb0b3..20a032b3bc5 100644 --- a/server/sonar-web/src/main/js/apps/projects/filters/DuplicationsFilter.js +++ b/server/sonar-web/src/main/js/apps/projects/filters/DuplicationsFilter.js @@ -26,7 +26,7 @@ export default class DuplicationsFilter extends React.Component { renderOption = (option, selected) => { return ( - + {getDuplicationsRatingLabel(option)} diff --git a/server/sonar-web/src/main/js/components/ui/CoverageRating.js b/server/sonar-web/src/main/js/components/ui/CoverageRating.js index 3477b3df1ee..bb65d33d7c3 100644 --- a/server/sonar-web/src/main/js/components/ui/CoverageRating.js +++ b/server/sonar-web/src/main/js/components/ui/CoverageRating.js @@ -17,18 +17,31 @@ * 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 (