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';
});
},
+ handleBarClick(d) {
+ window.location = getComponentDrilldownUrl(d.component.key, 'ncloc');
+ },
+
renderLoading () {
return <div className="overview-chart-placeholder" style={{ height: HEIGHT }}>
<i className="spinner"/>
return {
x: parseInt(component.measures[METRIC], 10),
y: index,
- value: component.name
+ value: component.name,
+ component: component
};
});
yValues={yValues}
height={data.length * 25}
barsWidth={10}
+ onBarClick={this.handleBarClick}
padding={[0, 50, 0, 240]}/>;
},
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() {
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;
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>;
},
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>;
},
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>;
},