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 () {
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';
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">
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 () {
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');
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">
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 {
);
}
- 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);
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)}/>
className="spacer-right">
<CoverageRating
muted={false}
- small={false}
+ size="normal"
value="88.3" />
</span>
<Measure
className="spacer-right">
<CoverageRating
muted={false}
- small={false}
+ size="normal"
value="88.3" />
</span>
<Measure
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>
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>
* 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
};
];
}
- 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
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;
}
* 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 = {
};
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),