SONAR-15515 Fix Language Distribution UI

server/sonar-web/src/main/js/apps/component-measures/components/MeasureHeader.tsx

@@ -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>

server/sonar-web/src/main/js/components/charts/Histogram.css

@@ -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;
 }

server/sonar-web/src/main/js/components/charts/LanguageDistribution.tsx

@@ -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);

server/sonar-web/src/main/js/components/charts/LanguageDistributionContainer.tsx

@@ -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);

server/sonar-web/src/main/js/components/charts/__tests__/LanguageDistribution-test.tsx

@@ -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();

server/sonar-web/src/main/js/components/charts/__tests__/__snapshots__/LanguageDistribution-test.tsx.snap

@@ -19,7 +19,7 @@ exports[`renders 1`] = `
       80,
     ]
   }
-  width={100}
+  width={260}
   yTicks={
     Array [
       "Java",