@@ -19,7 +19,7 @@ | |||
*/ | |||
import * as React from 'react'; | |||
import { Link } from 'react-router'; | |||
import LanguageDistributionContainer from '../../../components/charts/LanguageDistributionContainer'; | |||
import LanguageDistribution from '../../../components/charts/LanguageDistribution'; | |||
import Tooltip from '../../../components/controls/Tooltip'; | |||
import HistoryIcon from '../../../components/icons/HistoryIcon'; | |||
import IssueTypeIcon from '../../../components/icons/IssueTypeIcon'; | |||
@@ -82,11 +82,7 @@ export default function MeasureHeader(props: Props) { | |||
secondaryMeasure.metric === 'ncloc_language_distribution' && | |||
secondaryMeasure.value !== undefined && ( | |||
<div className="measure-details-secondary"> | |||
<LanguageDistributionContainer | |||
alignTicks={true} | |||
distribution={secondaryMeasure.value} | |||
width={260} | |||
/> | |||
<LanguageDistribution distribution={secondaryMeasure.value} /> | |||
</div> | |||
)} | |||
</div> |
@@ -18,13 +18,13 @@ | |||
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. | |||
*/ | |||
.histogram-tick { | |||
text-anchor: end; | |||
text-anchor: end !important; | |||
} | |||
.histogram-tick-start { | |||
text-anchor: start; | |||
text-anchor: start !important; | |||
} | |||
.histogram-value { | |||
text-anchor: start; | |||
text-anchor: start !important; | |||
} |
@@ -19,18 +19,21 @@ | |||
*/ | |||
import { sortBy } from 'lodash'; | |||
import * as React from 'react'; | |||
import { connect } from 'react-redux'; | |||
import Histogram from '../../components/charts/Histogram'; | |||
import { translate } from '../../helpers/l10n'; | |||
import { formatMeasure } from '../../helpers/measures'; | |||
import { getLanguages, Store } from '../../store/rootReducer'; | |||
import { MetricType } from '../../types/metrics'; | |||
interface Props { | |||
alignTicks?: boolean; | |||
interface LanguageDistributionProps { | |||
distribution: string; | |||
languages: T.Languages; | |||
width: number; | |||
} | |||
export default function LanguageDistribution(props: Props) { | |||
const NUMBER_FORMAT_THRESHOLD = 1000; | |||
export function LanguageDistribution(props: LanguageDistributionProps) { | |||
let distribution = props.distribution.split(';').map(point => { | |||
const tokens = point.split('='); | |||
return { language: tokens[0], lines: parseInt(tokens[1], 10) }; | |||
@@ -40,16 +43,17 @@ export default function LanguageDistribution(props: Props) { | |||
const data = distribution.map(d => d.lines); | |||
const yTicks = distribution.map(d => getLanguageName(d.language)).map(cutLanguageName); | |||
const yTooltips = distribution.map(d => (d.lines > 1000 ? formatMeasure(d.lines, 'INT') : '')); | |||
const yValues = distribution.map(d => formatMeasure(d.lines, 'SHORT_INT')); | |||
const yTooltips = distribution.map(d => | |||
d.lines > NUMBER_FORMAT_THRESHOLD ? formatMeasure(d.lines, MetricType.Integer) : '' | |||
); | |||
const yValues = distribution.map(d => formatMeasure(d.lines, MetricType.ShortInteger)); | |||
return ( | |||
<Histogram | |||
alignTicks={props.alignTicks} | |||
bars={data} | |||
height={distribution.length * 25} | |||
padding={[0, 60, 0, 80]} | |||
width={props.width} | |||
width={260} | |||
yTicks={yTicks} | |||
yTooltips={yTooltips} | |||
yValues={yValues} | |||
@@ -68,3 +72,9 @@ export default function LanguageDistribution(props: Props) { | |||
function cutLanguageName(name: string) { | |||
return name.length > 10 ? `${name.substr(0, 7)}...` : name; | |||
} | |||
const mapStateToProps = (state: Store) => ({ | |||
languages: getLanguages(state) | |||
}); | |||
export default connect(mapStateToProps)(LanguageDistribution); |
@@ -1,28 +0,0 @@ | |||
/* | |||
* SonarQube | |||
* Copyright (C) 2009-2021 SonarSource SA | |||
* mailto:info AT sonarsource DOT com | |||
* | |||
* This program 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. | |||
* | |||
* This program 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. | |||
*/ | |||
import { connect } from 'react-redux'; | |||
import { getLanguages, Store } from '../../store/rootReducer'; | |||
import LanguageDistribution from './LanguageDistribution'; | |||
const mapStateToProps = (state: Store) => ({ | |||
languages: getLanguages(state) | |||
}); | |||
export default connect(mapStateToProps)(LanguageDistribution); |
@@ -19,7 +19,7 @@ | |||
*/ | |||
import { shallow } from 'enzyme'; | |||
import * as React from 'react'; | |||
import LanguageDistribution from '../LanguageDistribution'; | |||
import { LanguageDistribution } from '../LanguageDistribution'; | |||
it('renders', () => { | |||
expect( | |||
@@ -27,7 +27,6 @@ it('renders', () => { | |||
<LanguageDistribution | |||
distribution="java=1734;js=845;cpp=73;<null>=15" | |||
languages={{ java: { key: 'java', name: 'Java' }, js: { key: 'js', name: 'JavaScript' } }} | |||
width={100} | |||
/> | |||
) | |||
).toMatchSnapshot(); |
@@ -19,7 +19,7 @@ exports[`renders 1`] = ` | |||
80, | |||
] | |||
} | |||
width={100} | |||
width={260} | |||
yTicks={ | |||
Array [ | |||
"Java", |