add tooltips for ncloc distribution chart

2 files changed, 24 insertions, 12 deletions

diff --git a/server/sonar-web/src/main/js/apps/overview/components/ncloc-distribution.js b/server/sonar-web/src/main/js/apps/overview/components/ncloc-distribution.js
index 764457ad403..0a24b77c65d 100644
--- a/server/sonar-web/src/main/js/apps/overview/components/ncloc-distribution.js
+++ b/server/sonar-web/src/main/js/apps/overview/components/ncloc-distribution.js
@@ -65,7 +65,12 @@ export const NclocDistribution = React.createClass({
 
     data = _.sortBy(data, d => -d.x);
 
-    let yTicks = data.map(d => collapsePath(d.value, 20));
+    let yTicks = data.map(d => {
+      return {
+        label: collapsePath(d.value, 20),
+        tooltip: d.value
+      };
+    });
 
     let yValues = data.map(d => formatMeasure(d.x, 'SHORT_INT'));
 
diff --git a/server/sonar-web/src/main/js/components/charts/histogram.js b/server/sonar-web/src/main/js/components/charts/histogram.js
index ffac187583c..c64146f2d28 100644
--- a/server/sonar-web/src/main/js/components/charts/histogram.js
+++ b/server/sonar-web/src/main/js/components/charts/histogram.js
@@ -40,17 +40,24 @@ export const Histogram = React.createClass({
       return null;
     }
     let ticks = this.props.yTicks.map((tick, index) => {
-      let point = this.props.data[index];
-      let x = xScale.range()[0];
-      let y = Math.round(yScale(point.y) + yScale.rangeBand() / 2 + this.props.barsHeight / 2);
-      return <text key={index}
-                   className="bar-chart-tick histogram-tick"
-                   onClick={this.props.onBarClick && this.handleClick.bind(this, point)}
-                   style={{ cursor: this.props.onBarClick ? 'pointer' : 'default' }}
-                   x={x}
-                   y={y}
-                   dx="-1em"
-                   dy="0.3em">{tick}</text>;
+      const point = this.props.data[index];
+      const x = xScale.range()[0];
+      const y = Math.round(yScale(point.y) + yScale.rangeBand() / 2 + this.props.barsHeight / 2);
+      const label = tick.label ? tick.label : tick;
+      const tooltip = tick.tooltip ? tick.tooltip : null;
+      return <text
+          key={index}
+          className="bar-chart-tick histogram-tick"
+          onClick={this.props.onBarClick && this.handleClick.bind(this, point)}
+          style={{ cursor: this.props.onBarClick ? 'pointer' : 'default' }}
+          data-title={tooltip}
+          data-toggle={tooltip ? 'tooltip' : null}
+          x={x}
+          y={y}
+          dx="-1em"
+          dy="0.3em">
+        {label}
+      </text>;
     });
     return <g>{ticks}</g>;
   },