Skip to content

Commit

Permalink
feat(sunburst): add support for custom tooltip #1024
Browse files Browse the repository at this point in the history
* add custom tooltip props

* add Sunburst proptypes

Co-authored-by: Matheus Passos <>
Matheus Passos authored Jun 27, 2020

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
1 parent e2f8cec commit 9a5b1e4
Showing 3 changed files with 53 additions and 14 deletions.
8 changes: 8 additions & 0 deletions packages/sunburst/src/Sunburst.js
Original file line number Diff line number Diff line change
@@ -46,6 +46,9 @@ const Sunburst = ({
borderWidth,
borderColor,

tooltipFormat, // eslint-disable-line react/prop-types
tooltip, // eslint-disable-line react/prop-types

theme, // eslint-disable-line react/prop-types

isInteractive,
@@ -66,6 +69,8 @@ const Sunburst = ({
borderColor={borderColor}
showTooltip={showTooltip}
hideTooltip={hideTooltip}
tooltipFormat={tooltipFormat}
tooltip={tooltip}
theme={theme}
/>
))}
@@ -99,6 +104,9 @@ Sunburst.propTypes = {

childColor: inheritedColorPropType.isRequired,

tooltipFormat: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
tooltip: PropTypes.func,

isInteractive: PropTypes.bool,
}

39 changes: 25 additions & 14 deletions packages/sunburst/src/SunburstArc.js
Original file line number Diff line number Diff line change
@@ -37,27 +37,38 @@ SunburstArc.propTypes = {
borderColor: PropTypes.string.isRequired,
showTooltip: PropTypes.func.isRequired,
hideTooltip: PropTypes.func.isRequired,
tooltipFormat: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
tooltip: PropTypes.func,
theme: PropTypes.object.isRequired,
}

const enhance = compose(
withPropsOnChange(['node', 'arcGenerator'], ({ node, arcGenerator }) => ({
path: arcGenerator(node),
})),
withPropsOnChange(['node', 'showTooltip', 'theme'], ({ node, showTooltip, theme }) => ({
showTooltip: e => {
showTooltip(
<BasicTooltip
id={node.data.id}
enableChip={true}
color={node.data.color}
value={`${node.data.percentage.toFixed(2)}%`}
theme={theme}
/>,
e
)
},
})),
withPropsOnChange(
['node', 'showTooltip', 'tooltip', 'tooltipFormat', 'theme'],
({ node, showTooltip, tooltip, tooltipFormat, theme }) => ({
showTooltip: e => {
showTooltip(
<BasicTooltip
id={node.data.id}
enableChip={true}
color={node.data.color}
value={`${node.data.percentage.toFixed(2)}%`}
theme={theme}
format={tooltipFormat}
renderContent={
typeof tooltip === 'function'
? tooltip.bind(null, { node, ...node })
: null
}
/>,
e
)
},
})
),
pure
)

20 changes: 20 additions & 0 deletions packages/sunburst/stories/sunburst.stories.js
Original file line number Diff line number Diff line change
@@ -26,3 +26,23 @@ stories.add('with child color modifier', () => (
stories.add('with child colors independent of parent', () => (
<Sunburst {...commonProperties} childColor="noinherit" />
))

stories.add('with formatted tooltip value', () => (
<Sunburst
{...commonProperties}
tooltipFormat={value => {
return `~${Math.floor(Number.parseFloat(value))}%`
}}
/>
))

stories.add('with custom tooltip', () => (
<Sunburst
{...commonProperties}
tooltip={({ data: { id, value, color } }) => (
<span style={{ color }}>
{id}: <strong>{value}</strong>
</span>
)}
/>
))

0 comments on commit 9a5b1e4

Please sign in to comment.