diff --git a/ui/src/visualizations/team-awareness/components/BubbleChart/BubbleChart.js b/ui/src/visualizations/team-awareness/components/BubbleChart/BubbleChart.js index 311114b6..547cf86e 100644 --- a/ui/src/visualizations/team-awareness/components/BubbleChart/BubbleChart.js +++ b/ui/src/visualizations/team-awareness/components/BubbleChart/BubbleChart.js @@ -19,7 +19,22 @@ export default class BubbleChart extends React.Component { } render() { - const legend = [ + const { activeLegend } = this.state; + const legend = activeLegend ? activeLegend : this.constructLegendsFromContent(); + + return ( +
+ (this.svgRef = svg)}> + (this.bubbleAreaRef = area)} /> + + +
(this.tooltipRef = div)} /> +
+ ); + } + + constructLegendsFromContent() { + return [ { name: 'Authors', subLegend: _.map(this.state.content, c => { @@ -32,16 +47,18 @@ export default class BubbleChart extends React.Component { }) } ]; + } + + constructActiveLegend(circle) { + const stakeholder = circle.__data__.data; + const legend = [ + { + name: stakeholder.signature + ' Activity: ' + stakeholder.activity, + style: { fill: this.state.colors.get(stakeholder.id) } + } + ]; - return ( -
- (this.svgRef = svg)}> - (this.bubbleAreaRef = area)} /> - - -
(this.tooltipRef = div)} /> -
- ); + this.setState({ activeLegend: legend }); } componentDidMount() { @@ -80,9 +97,9 @@ export default class BubbleChart extends React.Component { const leaf = bubbleArea.selectAll('a').data(root.leaves()).join('a').attr('transform', d => `translate(${d.x},${d.y})`); leaf.append('title').text(d => `${d.data.signature}\nActivity: ${d.data.activity}`); - leaf.append('circle').attr('fill', d => this.state.colors.get(d.data.id)).attr('r', d => { - return d.r; - }); + leaf.append('circle').attr('fill', d => this.state.colors.get(d.data.id)).attr('r', d => d.r); + leaf.on('mouseenter', d => this.constructActiveLegend(d.target)); + leaf.on('mouseleave', () => this.setState({ activeLegend: null })); } createColorSchema(data) {