Skip to content

Commit

Permalink
feat(bubble): add border support for Bubble components
Browse files Browse the repository at this point in the history
  • Loading branch information
Raphael Benitte committed May 7, 2016
1 parent d0ea00b commit 6e2f25e
Show file tree
Hide file tree
Showing 7 changed files with 181 additions and 155 deletions.
50 changes: 26 additions & 24 deletions src/components/charts/bubble/Bubble.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,16 +8,18 @@
*/
'use strict';

import React, { Component, PropTypes } from 'react';
import React, { Component } from 'react';
import _ from 'lodash';
import Nivo from '../../../Nivo';
import { getLabelGenerator } from '../../../lib/LabelHelper';
import { bubblePropTypes, bubbleDefaultProps } from './BubbleProps';
import BubblePlaceholders from './BubblePlaceholders';
import { getColorGenerator } from '../../../ColorUtils';


const createNodes = ({ label, labelFormat, skipRadius }) => {
const labelFn = getLabelGenerator(label, labelFormat);
const createNodes = ({ borderWidth, borderColor, label, labelFormat, labelSkipRadius, labelTextColor }) => {
const labelFn = getLabelGenerator(label, labelFormat);
const borderColorFn = getColorGenerator(borderColor);
const textColorFn = getColorGenerator(labelTextColor);

return nodes => {
const renderedNodes = [];
Expand All @@ -29,21 +31,28 @@ const createNodes = ({ label, labelFormat, skipRadius }) => {
r={node.style.r}
className="nivo_bubble_node"
transform={`translate(${node.style.x},${node.style.y})`}
style={{ fill: node.style.color }}
style={{
fill: node.style.color,
stroke: borderColorFn(node.style),
strokeWidth: borderWidth,
}}
/>
);
});

nodes
.filter(node => {
return skipRadius === 0 || node.data.r >= skipRadius;
return labelSkipRadius === 0 || node.data.r >= labelSkipRadius;
})
.forEach(node => {
renderedNodes.push(
<text
key={`${node.key}.text`}
transform={`translate(${node.style.x},${node.style.y})`}
textAnchor={'middle'}
style={{
fill: textColorFn(node.style)
}}
>
{labelFn(node.data)}
</text>
Expand All @@ -69,25 +78,18 @@ class Bubble extends Component {
}
}

const { number, string, any } = PropTypes;
Bubble.propTypes = _.omit(bubblePropTypes, [
'children',
'namespace',
'transitionDuration',
'transitionEasing',
]);

Bubble.propTypes = _.assign({}, bubblePropTypes, {
label: string.isRequired,
labelFormat: string,
textColor: any.isRequired,
skipRadius: number.isRequired,
width: number.isRequired,
height: number.isRequired,
stiffness: number.isRequired, // react-motion
damping: number.isRequired, // react-motion
});

Bubble.defaultProps = _.assign({}, bubbleDefaultProps, {
label: 'name',
skipRadius: 0,
stiffness: Nivo.defaults.motionStiffness,
damping: Nivo.defaults.motionDamping,
});
Bubble.defaultProps = _.omit(bubbleDefaultProps, [
'namespace',
'transitionDuration',
'transitionEasing',
]);


export default Bubble;
27 changes: 13 additions & 14 deletions src/components/charts/bubble/BubbleD3.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
*/
'use strict';

import React, { Component, PropTypes } from 'react';
import React, { Component } from 'react';
import { findDOMNode } from 'react-dom';
import _ from 'lodash';
import { bubblePropTypes, bubbleDefaultProps } from './BubbleProps';
Expand Down Expand Up @@ -41,19 +41,18 @@ class BubbleD3 extends Component {
}
}

const { number, string } = PropTypes;

BubbleD3.propTypes = _.assign({}, bubblePropTypes, {
width: number.isRequired,
height: number.isRequired,
transitionDuration: number.isRequired,
transitionEasing: string.isRequired,
});

BubbleD3.defaultProps = _.assign({}, bubbleDefaultProps, {
transitionDuration: Nivo.defaults.transitionDuration,
transitionEasing: Nivo.defaults.transitionEasing,
});
BubbleD3.propTypes = _.omit(bubblePropTypes, [
'children',
'namespace',
'motionStiffness',
'motionDamping',
]);

BubbleD3.defaultProps = _.omit(bubbleDefaultProps, [
'namespace',
'motionStiffness',
'motionDamping',
]);


export default BubbleD3;
85 changes: 0 additions & 85 deletions src/components/charts/bubble/BubbleLegends.js
View file

This file was deleted.

45 changes: 26 additions & 19 deletions src/components/charts/bubble/BubblePlaceholders.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
*/
'use strict';

import React, { Component, PropTypes } from 'react';
import React, { Component } from 'react';
import { TransitionMotion, spring } from 'react-motion';
import d3 from 'd3';
import _ from 'lodash';
Expand Down Expand Up @@ -38,7 +38,7 @@ class BubblePlaceholders extends Component {
identityProperty, value,
padding,
colors,
stiffness, damping
motionStiffness, motionDamping
} = this.props;

const valueAccessor = d => d[value];
Expand Down Expand Up @@ -101,6 +101,9 @@ class BubblePlaceholders extends Component {
containerProps.style = margin;
}

const stiffness = motionStiffness;
const damping = motionDamping;

return React.createElement(wrapperTag, wrapperProps, (
<TransitionMotion
willEnter={this.willEnter}
Expand Down Expand Up @@ -140,22 +143,26 @@ class BubblePlaceholders extends Component {
}
}

const { number, func, oneOf } = PropTypes;

BubblePlaceholders.propTypes = _.assign({}, bubblePropTypes, {
namespace: oneOf(['html', 'svg']),
children: func.isRequired,
width: number.isRequired,
height: number.isRequired,
stiffness: number.isRequired, // react-motion
damping: number.isRequired, // react-motion
});

BubblePlaceholders.defaultProps = _.assign({}, bubbleDefaultProps, {
namespace: 'html',
stiffness: Nivo.defaults.motionStiffness,
damping: Nivo.defaults.motionDamping,
});

BubblePlaceholders.propTypes = _.omit(bubblePropTypes, [
'borderWidth',
'borderColor',
'label',
'labelFormat',
'textColor',
'skipRadius',
'transitionDuration',
'transitionEasing',
]);

BubblePlaceholders.defaultProps = _.omit(bubbleDefaultProps, [
'borderWidth',
'borderColor',
'label',
'labelFormat',
'textColor',
'skipRadius',
'transitionDuration',
'transitionEasing',
]);

export default BubblePlaceholders;
48 changes: 40 additions & 8 deletions src/components/charts/bubble/BubbleProps.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,33 +13,65 @@ import Nivo from '../../../Nivo';
import { margin } from '../../../PropTypes';


const { object, number, string, any } = PropTypes;
const { object, number, string, any, func, oneOf } = PropTypes;


/**
* Bubble components common propTypes.
* Bubble components propTypes.
*
* @type {object}
*/
export const bubblePropTypes = {
width: number.isRequired,
height: number.isRequired,
margin,
root: object.isRequired, // data
identityProperty: string,
value: string.isRequired,
padding: number.isRequired,
colors: any.isRequired,
// placeholders
namespace: oneOf(['html', 'svg']),
children: func.isRequired,
// border
borderWidth: number.isRequired,
borderColor: any.isRequired,
// labels
label: string.isRequired,
labelFormat: string,
labelTextColor: any.isRequired,
labelSkipRadius: number.isRequired,
// transitions
motionStiffness: number.isRequired, // react-motion
motionDamping: number.isRequired, // react-motion
transitionDuration: number.isRequired, // d3 transitions
transitionEasing: string.isRequired, // d3 transitions
};


/**
* Bubble components common defaultProps.
* Bubble components defaultProps.
*
* @type {object}
*/
export const bubbleDefaultProps = {
margin: Nivo.defaults.margin,
identityProperty: 'name',
value: 'value',
padding: 1,
colors: Nivo.defaults.colorRange,
margin: Nivo.defaults.margin,
identityProperty: 'name',
value: 'value',
padding: 1,
colors: Nivo.defaults.colorRange,
// placeholders
namespace: 'html',
// border
borderWidth: 0,
borderColor: 'inherit',
// labels
label: 'name',
labelTextColor: 'inherit:darker(1)',
labelSkipRadius: 0,
// transitions
motionStiffness: Nivo.defaults.motionStiffness, // react-motion
motionDamping: Nivo.defaults.motionDamping, // react-motion
transitionDuration: Nivo.defaults.transitionDuration, // d3 transitions
transitionEasing: Nivo.defaults.transitionEasing, // d3 transitions
};
1 change: 0 additions & 1 deletion src/components/charts/bubble/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,4 +15,3 @@ export BubbleD3 from './BubbleD3';
export ResponsiveBubbleD3 from './ResponsiveBubbleD3';
export BubblePlaceholders from './BubblePlaceholders';
export ResponsiveBubblePlaceholders from './ResponsiveBubblePlaceholders';
export BubbleLegends from './BubbleLegends';
Loading

0 comments on commit 6e2f25e

Please sign in to comment.