improve display of little language distribution percentage on the overview page

diff --git a/server/sonar-web/src/main/js/apps/overview/components/language-distribution.js b/server/sonar-web/src/main/js/apps/overview/components/language-distribution.js
index 01685ca3de0c8f6a9f7fbdb9648a63495b771658..fcec62538d6b4ac902978383b921bdd15fde2404 100644 (file)
--- a/server/sonar-web/src/main/js/apps/overview/components/language-distribution.js
+++ b/server/sonar-web/src/main/js/apps/overview/components/language-distribution.js
@@ -42,7 +42,7 @@ export const LanguageDistribution = React.createClass({
 
   getLanguageName (langKey) {
     if (this.state && this.state.languages) {
-      let lang = _.findWhere(this.state.languages, { key: langKey });
+      const lang = _.findWhere(this.state.languages, { key: langKey });
       return lang ? lang.name : translate('unknown');
     } else {
       return langKey;
@@ -55,15 +55,17 @@ export const LanguageDistribution = React.createClass({
 
   renderBarChart () {
     let data = this.props.distribution.split(';').map((point, index) => {
-      let tokens = point.split('=');
+      const tokens = point.split('=');
       return { x: parseInt(tokens[1], 10), y: index, value: tokens[0] };
     });
 
     data = _.sortBy(data, d => -d.x);
 
-    let yTicks = data.map(point => this.getLanguageName(point.value)).map(this.cutLanguageName);
-
-    let yValues = data.map(point => formatMeasure(point.x / this.props.lines * 100, 'PERCENT'));
+    const yTicks = data.map(point => this.getLanguageName(point.value)).map(this.cutLanguageName);
+    const yValues = data.map(point => {
+      const percent = point.x / this.props.lines * 100;
+      return percent >= 0.1 ? formatMeasure(percent, 'PERCENT') : '<0.1%';
+    });
 
     return <Histogram data={data}
                       yTicks={yTicks}

diff --git a/server/sonar-web/tests/apps/overview/components/language-distribution-test.js b/server/sonar-web/tests/apps/overview/components/language-distribution-test.js
index a54ba2b12600e01af147b1d31eaea43b5e98778b..cf5740daa55b70f2be4c8cda535cc462cb3527da 100644 (file)
--- a/server/sonar-web/tests/apps/overview/components/language-distribution-test.js
+++ b/server/sonar-web/tests/apps/overview/components/language-distribution-test.js
@@ -35,4 +35,15 @@ describe('LanguageDistribution', function () {
   it('should pass right yValues', function () {
     expect(props.yValues).to.deep.equal(['19.4%', '2.1%', '1.7%']);
   });
+
+  it('should correctly render very small values', function () {
+    const DISTRIBUTION_SMALL = 'java=194342;js=999';
+
+    let renderer = TestUtils.createRenderer();
+    renderer.render(<LanguageDistribution distribution={DISTRIBUTION_SMALL} lines={LINES}/>);
+    let output = renderer.getRenderOutput();
+    let child = React.Children.only(output.props.children);
+
+    expect(child.props.yValues).to.deep.equal(['19.4%', '<0.1%']);
+  });
 });