feat(bubble): add ability to center Bubble components text

plouc · May 8, 2016 · fecbc22 · fecbc22
1 parent d55da1d
commit fecbc22
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 6 deletions.
diff --git a/src/components/charts/bubble/Bubble.js b/src/components/charts/bubble/Bubble.js
@@ -16,7 +16,10 @@ import BubblePlaceholders                      from './BubblePlaceholders';
 import { getColorGenerator }                   from '../../../ColorUtils';
 
 
-const createNodes = ({ borderWidth, borderColor, label, labelFormat, labelSkipRadius, labelTextColor }) => {
+const createNodes = ({
+    borderWidth, borderColor,
+    label, labelFormat, labelSkipRadius, labelTextColor, labelTextDY
+}) => {
     const labelFn       = getLabelGenerator(label, labelFormat);
     const borderColorFn = getColorGenerator(borderColor);
     const textColorFn   = getColorGenerator(labelTextColor);
@@ -51,6 +54,7 @@ const createNodes = ({ borderWidth, borderColor, label, labelFormat, labelSkipRa
                         className="nivo_bubble_legend"
                         transform={`translate(${node.style.x},${node.style.y})`}
                         textAnchor={'middle'}
+                        dy={labelTextDY}
                         style={{
                             fill: textColorFn(node.style)
                         }}

diff --git a/src/components/charts/bubble/BubblePlaceholders.js b/src/components/charts/bubble/BubblePlaceholders.js
@@ -148,8 +148,9 @@ BubblePlaceholders.propTypes = _.omit(bubblePropTypes, [
     'borderColor',
     'label',
     'labelFormat',
-    'textColor',
-    'skipRadius',
+    'labelTextColor',
+    'labelSkipRadius'
+    'labelTextDY',
     'transitionDuration',
     'transitionEasing',
 ]);
@@ -159,8 +160,9 @@ BubblePlaceholders.defaultProps = _.omit(bubbleDefaultProps, [
     'borderColor',
     'label',
     'labelFormat',
-    'textColor',
-    'skipRadius',
+    'labelTextColor',
+    'labelSkipRadius',
+    'labelTextDY',
     'transitionDuration',
     'transitionEasing',
 ]);

diff --git a/src/components/charts/bubble/BubbleProps.js b/src/components/charts/bubble/BubbleProps.js
@@ -40,6 +40,7 @@ export const bubblePropTypes = {
     label:              string.isRequired,
     labelFormat:        string,
     labelTextColor:     any.isRequired,
+    labelTextDY:        number.isRequired,
     labelSkipRadius:    number.isRequired,
     // transitions
     motionStiffness:    number.isRequired, // react-motion
@@ -68,6 +69,7 @@ export const bubbleDefaultProps = {
     // labels
     label:              'name',
     labelTextColor:     'inherit:darker(1)',
+    labelTextDY:        5,
     labelSkipRadius:    0,
     // transitions
     motionStiffness:    Nivo.defaults.motionStiffness,    // react-motion

diff --git a/src/lib/charts/bubble/BubbleD3.js b/src/lib/charts/bubble/BubbleD3.js
@@ -31,6 +31,7 @@ const BubbleD3 = () => {
          * @param {function} valueAccessor
          * @param {number}   padding
          * @param {function} color
+         * @returns {array}
          */
         compute({
             width, height,

diff --git a/src/lib/charts/bubble/BubbleD3Svg.js b/src/lib/charts/bubble/BubbleD3Svg.js
@@ -34,7 +34,7 @@ const BubbleD3Svg = domRoot => {
                 padding,
                 colors,
                 borderWidth, borderColor,
-                label, labelFormat, labelSkipRadius, labelTextColor,
+                label, labelFormat, labelSkipRadius, labelTextColor, labelTextDY,
                 transitionDuration, transitionEasing
             } = props;
 
@@ -133,6 +133,7 @@ const BubbleD3Svg = domRoot => {
                 .style('opacity', 0)
                 .text(labelFn)
                 .attr('transform', d => `translate(${d.x},${d.y})`)
+                .attr('dy', labelTextDY)
             ;
 
             // —————————————————————————————————————————————————————————————————————————————————————————————————————————
@@ -146,6 +147,7 @@ const BubbleD3Svg = domRoot => {
                 .style(textColorStyle)
                 .style('opacity', 1)
                 .attr('transform', d => `translate(${d.x},${d.y})`)
+                .attr('dy', labelTextDY)
             ;
 
             // —————————————————————————————————————————————————————————————————————————————————————————————————————————