SONAR-7064 add link from ncloc histogram to drilldown

2 files changed, 38 insertions, 6 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 ad03795df80..271e6b6eef8 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
@@ -4,6 +4,7 @@ import React from 'react';
 import { Histogram } from '../../../components/charts/histogram';
 import { formatMeasure } from '../../../helpers/measures';
 import { collapsePath } from '../../../helpers/path';
+import { getComponentDrilldownUrl } from '../../../helpers/urls';
 import { getChildren } from '../../../api/components';
 
 
@@ -38,6 +39,10 @@ export const NclocDistribution = React.createClass({
     });
   },
 
+  handleBarClick(d) {
+    window.location = getComponentDrilldownUrl(d.component.key, 'ncloc');
+  },
+
   renderLoading () {
     return <div className="overview-chart-placeholder" style={{ height: HEIGHT }}>
       <i className="spinner"/>
@@ -53,7 +58,8 @@ export const NclocDistribution = React.createClass({
       return {
         x: parseInt(component.measures[METRIC], 10),
         y: index,
-        value: component.name
+        value: component.name,
+        component: component
       };
     });
 
@@ -68,6 +74,7 @@ export const NclocDistribution = React.createClass({
                       yValues={yValues}
                       height={data.length * 25}
                       barsWidth={10}
+                      onBarClick={this.handleBarClick}
                       padding={[0, 50, 0, 240]}/>;
   },
 
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 d406d14eedf..0843e76126a 100644
--- a/server/sonar-web/src/main/js/components/charts/histogram.js
+++ b/server/sonar-web/src/main/js/components/charts/histogram.js
@@ -14,7 +14,8 @@ export const Histogram = React.createClass({
     width: React.PropTypes.number,
     height: React.PropTypes.number,
     padding: React.PropTypes.arrayOf(React.PropTypes.number),
-    barsHeight: React.PropTypes.number
+    barsHeight: React.PropTypes.number,
+    onBarClick: React.PropTypes.func
   },
 
   getDefaultProps() {
@@ -30,6 +31,10 @@ export const Histogram = React.createClass({
     return { width: this.props.width, height: this.props.height };
   },
 
+  handleClick(point) {
+    this.props.onBarClick(point);
+  },
+
   renderTicks (xScale, yScale) {
     if (!this.props.yTicks.length) {
       return null;
@@ -38,7 +43,14 @@ export const Histogram = React.createClass({
       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" x={x} y={y} dx="-1em" dy="0.3em">{tick}</text>;
+      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>;
     });
     return <g>{ticks}</g>;
   },
@@ -51,7 +63,14 @@ export const Histogram = React.createClass({
       let point = this.props.data[index];
       let x = xScale(point.x);
       let y = Math.round(yScale(point.y) + yScale.rangeBand() / 2 + this.props.barsHeight / 2);
-      return <text key={index} className="bar-chart-tick histogram-value" x={x} y={y} dx="1em" dy="0.3em">{value}</text>;
+      return <text key={index}
+                   onClick={this.props.onBarClick && this.handleClick.bind(this, point)}
+                   className="bar-chart-tick histogram-value"
+                   style={{ cursor: this.props.onBarClick ? 'pointer' : 'default' }}
+                   x={x}
+                   y={y}
+                   dx="1em"
+                   dy="0.3em">{value}</text>;
     });
     return <g>{ticks}</g>;
   },
@@ -60,8 +79,14 @@ export const Histogram = React.createClass({
     let bars = this.props.data.map((d, index) => {
       let x = Math.round(xScale(d.x)) + /* minimum bar width */ 1;
       let y = Math.round(yScale(d.y) + yScale.rangeBand() / 2);
-      return <rect key={index} className="bar-chart-bar"
-                   x={0} y={y} width={x} height={this.props.barsHeight}/>;
+      return <rect key={index}
+                   className="bar-chart-bar"
+                   onClick={this.props.onBarClick && this.handleClick.bind(this, d)}
+                   style={{ cursor: this.props.onBarClick ? 'pointer' : 'default' }}
+                   x={0}
+                   y={y}
+                   width={x}
+                   height={this.props.barsHeight}/>;
     });
     return <g>{bars}</g>;
   },