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.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.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) {