Skip to content

Commit

Permalink
feat(bubble): add ability to center Bubble components text
Browse files Browse the repository at this point in the history
  • Loading branch information
Raphael Benitte committed May 8, 2016
1 parent d55da1d commit fecbc22
Show file tree
Hide file tree
Showing 5 changed files with 17 additions and 6 deletions.
6 changes: 5 additions & 1 deletion src/components/charts/bubble/Bubble.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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)
}}
Expand Down
10 changes: 6 additions & 4 deletions src/components/charts/bubble/BubblePlaceholders.js
Original file line number Diff line number Diff line change
Expand Up @@ -148,8 +148,9 @@ BubblePlaceholders.propTypes = _.omit(bubblePropTypes, [
'borderColor',
'label',
'labelFormat',
'textColor',
'skipRadius',
'labelTextColor',
'labelSkipRadius'
'labelTextDY',
'transitionDuration',
'transitionEasing',
]);
Expand All @@ -159,8 +160,9 @@ BubblePlaceholders.defaultProps = _.omit(bubbleDefaultProps, [
'borderColor',
'label',
'labelFormat',
'textColor',
'skipRadius',
'labelTextColor',
'labelSkipRadius',
'labelTextDY',
'transitionDuration',
'transitionEasing',
]);
Expand Down
2 changes: 2 additions & 0 deletions src/components/charts/bubble/BubbleProps.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down
1 change: 1 addition & 0 deletions src/lib/charts/bubble/BubbleD3.js
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ const BubbleD3 = () => {
* @param {function} valueAccessor
* @param {number} padding
* @param {function} color
* @returns {array}
*/
compute({
width, height,
Expand Down
4 changes: 3 additions & 1 deletion src/lib/charts/bubble/BubbleD3Svg.js
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ const BubbleD3Svg = domRoot => {
padding,
colors,
borderWidth, borderColor,
label, labelFormat, labelSkipRadius, labelTextColor,
label, labelFormat, labelSkipRadius, labelTextColor, labelTextDY,
transitionDuration, transitionEasing
} = props;

Expand Down Expand Up @@ -133,6 +133,7 @@ const BubbleD3Svg = domRoot => {
.style('opacity', 0)
.text(labelFn)
.attr('transform', d => `translate(${d.x},${d.y})`)
.attr('dy', labelTextDY)
;

// —————————————————————————————————————————————————————————————————————————————————————————————————————————
Expand All @@ -146,6 +147,7 @@ const BubbleD3Svg = domRoot => {
.style(textColorStyle)
.style('opacity', 1)
.attr('transform', d => `translate(${d.x},${d.y})`)
.attr('dy', labelTextDY)
;

// —————————————————————————————————————————————————————————————————————————————————————————————————————————
Expand Down

0 comments on commit fecbc22

Please sign in to comment.