SONAR-7065 Add tooltips for complexity distribution bars on the overview page

5 files changed, 34 insertions, 14 deletions

diff --git a/server/sonar-web/src/main/js/apps/overview/components/complexity-distribution.js b/server/sonar-web/src/main/js/apps/overview/components/complexity-distribution.js
index 390273da2e1..a32a6cca4c3 100644
--- a/server/sonar-web/src/main/js/apps/overview/components/complexity-distribution.js
+++ b/server/sonar-web/src/main/js/apps/overview/components/complexity-distribution.js
@@ -9,13 +9,21 @@ const HEIGHT = 80;
 
 export const ComplexityDistribution = React.createClass({
   propTypes: {
-    distribution: React.PropTypes.string.isRequired
+    distribution: React.PropTypes.string.isRequired,
+    of: React.PropTypes.string.isRequired
   },
 
   renderBarChart () {
     let data = this.props.distribution.split(';').map((point, index) => {
-      let tokens = point.split('=');
-      return { x: index, y: parseInt(tokens[1], 10), value: parseInt(tokens[0], 10) };
+      let tokens = point.split('='),
+          y = parseInt(tokens[1], 10),
+          value = parseInt(tokens[0], 10);
+      return {
+        x: index,
+        y: y,
+        value: value,
+        tooltip: window.tp(`overview.complexity_tooltip.${this.props.of}`, y, value)
+      };
     });
 
     let xTicks = data.map(point => point.value);
diff --git a/server/sonar-web/src/main/js/apps/overview/domains/size-domain.js b/server/sonar-web/src/main/js/apps/overview/domains/size-domain.js
index ed309e8d7f4..a5e0f2e7fab 100644
--- a/server/sonar-web/src/main/js/apps/overview/domains/size-domain.js
+++ b/server/sonar-web/src/main/js/apps/overview/domains/size-domain.js
@@ -116,10 +116,14 @@ export const SizeMain = React.createClass({
             <div className="overview-detailed-measures-list">
               <DetailedMeasure {...this.props} {...this.state} metric="complexity" type="INT"/>
               <DetailedMeasure {...this.props} {...this.state} metric="function_complexity" type="FLOAT">
-                <ComplexityDistribution distribution={this.state.measures['function_complexity_distribution']}/>
+                <ComplexityDistribution
+                    distribution={this.state.measures['function_complexity_distribution']}
+                    of="function"/>
               </DetailedMeasure>
               <DetailedMeasure {...this.props} {...this.state} metric="file_complexity" type="FLOAT">
-                <ComplexityDistribution distribution={this.state.measures['file_complexity_distribution']}/>
+                <ComplexityDistribution
+                    distribution={this.state.measures['file_complexity_distribution']}
+                    of="file"/>
               </DetailedMeasure>
               <DetailedMeasure {...this.props} {...this.state} metric="class_complexity" type="FLOAT"/>
               {this.renderOtherComplexityMeasures()}
diff --git a/server/sonar-web/src/main/js/components/charts/bar-chart.js b/server/sonar-web/src/main/js/components/charts/bar-chart.js
index 7ce292921bc..7cd32a52c59 100644
--- a/server/sonar-web/src/main/js/components/charts/bar-chart.js
+++ b/server/sonar-web/src/main/js/components/charts/bar-chart.js
@@ -61,7 +61,12 @@ export const BarChart = React.createClass({
       let maxY = yScale.range()[0];
       let y = Math.round(yScale(d.y)) - /* minimum bar height */ 1;
       let height = maxY - y;
-      return <rect key={index} className="bar-chart-bar"
+      let tooltipAtts = {};
+      if (d.tooltip) {
+        tooltipAtts['title'] = d.tooltip;
+        tooltipAtts['data-toggle'] = 'tooltip';
+      }
+      return <rect key={index} className="bar-chart-bar" {...tooltipAtts}
                    x={x} y={y} width={this.props.barsWidth} height={height}/>;
     });
     return <g>{bars}</g>;
diff --git a/server/sonar-web/tests/apps/overview/components/complexity-distribution-test.js b/server/sonar-web/tests/apps/overview/components/complexity-distribution-test.js
index a79cdbf34bc..0033010e562 100644
--- a/server/sonar-web/tests/apps/overview/components/complexity-distribution-test.js
+++ b/server/sonar-web/tests/apps/overview/components/complexity-distribution-test.js
@@ -13,7 +13,7 @@ describe('ComplexityDistribution', function () {
 
   beforeEach(function () {
     let renderer = TestUtils.createRenderer();
-    renderer.render(<ComplexityDistribution distribution={DISTRIBUTION}/>);
+    renderer.render(<ComplexityDistribution distribution={DISTRIBUTION} of="function"/>);
     let output = renderer.getRenderOutput();
     let child = React.Children.only(output.props.children);
     props = child.props;
@@ -21,13 +21,13 @@ describe('ComplexityDistribution', function () {
 
   it('should pass right data', function () {
     expect(props.data).to.deep.equal([
-      { x: 0, y: 11950, value: 1 },
-      { x: 1, y: 86, value: 2 },
-      { x: 2, y: 77, value: 4 },
-      { x: 3, y: 43, value: 6 },
-      { x: 4, y: 17, value: 8 },
-      { x: 5, y: 12, value: 10 },
-      { x: 6, y: 3, value: 12 }
+      { x: 0, y: 11950, value: 1, tooltip: 'overview.complexity_tooltip.function.11950.1' },
+      { x: 1, y: 86, value: 2, tooltip: 'overview.complexity_tooltip.function.86.2' },
+      { x: 2, y: 77, value: 4, tooltip: 'overview.complexity_tooltip.function.77.4' },
+      { x: 3, y: 43, value: 6, tooltip: 'overview.complexity_tooltip.function.43.6' },
+      { x: 4, y: 17, value: 8, tooltip: 'overview.complexity_tooltip.function.17.8' },
+      { x: 5, y: 12, value: 10, tooltip: 'overview.complexity_tooltip.function.12.10' },
+      { x: 6, y: 3, value: 12, tooltip: 'overview.complexity_tooltip.function.3.12' }
     ]);
   });
 
diff --git a/sonar-core/src/main/resources/org/sonar/l10n/core.properties b/sonar-core/src/main/resources/org/sonar/l10n/core.properties
index cd8c9af424a..9dca2e81f50 100644
--- a/sonar-core/src/main/resources/org/sonar/l10n/core.properties
+++ b/sonar-core/src/main/resources/org/sonar/l10n/core.properties
@@ -3146,6 +3146,9 @@ overview.chart.files=Files
 overview.chart.components=Components
 overview.chart.history=History
 
+overview.complexity_tooltip.function={0} functions have complexity around {1}
+overview.complexity_tooltip.file={0} files have complexity around {1}
+
 
 #------------------------------------------------------------------------------
 #