feat(bubble): add onBubbleClick property to BubbleD3 component

plouc · May 13, 2016 · 3b61508 · 3b61508
1 parent ca94708
commit 3b61508
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 0 deletions.
diff --git a/src/components/charts/bubble/BubbleProps.js b/src/components/charts/bubble/BubbleProps.js
@@ -26,6 +26,7 @@ export const bubblePropTypes = {
     height:             number.isRequired,
     margin,
     data:               object.isRequired,
+    onBubbleClick:      func.isRequired,
     identityProperty:   string,
     value:              string.isRequired,
     padding:            number.isRequired,
@@ -57,6 +58,7 @@ export const bubblePropTypes = {
  */
 export const bubbleDefaultProps = {
     margin:             Nivo.defaults.margin,
+    onBubbleClick:      () => {},
     identityProperty:   'name',
     value:              'value',
     padding:            1,

diff --git a/src/lib/charts/bubble/BubbleD3Svg.js b/src/lib/charts/bubble/BubbleD3Svg.js
@@ -29,6 +29,7 @@ const BubbleD3Svg = domRoot => {
         draw(props) {
             const {
                 data,
+                onBubbleClick,
                 identityProperty, value,
                 width, height, margin,
                 padding,
@@ -81,6 +82,7 @@ const BubbleD3Svg = domRoot => {
                 .style('stroke', borderColorFn)
                 .style('stroke-width', borderWidth)
                 .attr('transform', d => `translate(${d.x},${d.y})`)
+                .on('click', onBubbleClick)
             ;
 
             // —————————————————————————————————————————————————————————————————————————————————————————————————————————
@@ -105,6 +107,7 @@ const BubbleD3Svg = domRoot => {
                 .duration(transitionDuration)
                 .ease(transitionEasing)
                 .attr('transform', `translate(${width / 2},${height / 2})`)
+                .attr('r', 0)
                 .remove()
             ;
 
@@ -134,6 +137,7 @@ const BubbleD3Svg = domRoot => {
                 .text(labelFn)
                 .attr('transform', d => `translate(${d.x},${d.y})`)
                 .attr('dy', labelTextDY)
+                .on('click', onBubbleClick)
             ;
 
             // —————————————————————————————————————————————————————————————————————————————————————————————————————————