Skip to content

Commit

Permalink
feat(pie): add support for custom tooltip
Browse files Browse the repository at this point in the history
  • Loading branch information
Raphaël Benitte authored and Raphaël Benitte committed May 30, 2018
1 parent d7a87ef commit d373442
Show file tree
Hide file tree
Showing 7 changed files with 138 additions and 19 deletions.
3 changes: 2 additions & 1 deletion packages/nivo-pie/index.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,8 @@ declare module '@nivo/pie' {

isInteractive: boolean;
onClick: (dataSlize: PieDataItem, event: React.MouseEvent<SVGPathElement>) => void;
// tooltipFormat?: string | SettingsGetterFunc; No docs, no usage in source
tooltipFormat: string | Function;
tooltip: Function;

theme: Theme;

Expand Down
3 changes: 3 additions & 0 deletions packages/nivo-pie/src/Pie.js
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,7 @@ const Pie = ({
isInteractive,
onClick,
tooltipFormat,
tooltip,

legends,
}) => {
Expand Down Expand Up @@ -181,6 +182,8 @@ const Pie = ({
borderColor={borderColor(d.data)}
showTooltip={showTooltip}
hideTooltip={hideTooltip}
tooltipFormat={tooltipFormat}
tooltip={tooltip}
theme={theme}
onClick={onClick}
/>
Expand Down
5 changes: 5 additions & 0 deletions packages/nivo-pie/src/PieSlice.js
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ const PieSlice = ({
hideTooltip,
onClick,
tooltipFormat,
tooltip,

theme,
}) => {
Expand All @@ -38,6 +39,9 @@ const PieSlice = ({
color={color}
theme={theme}
format={tooltipFormat}
renderContent={
typeof tooltip === 'function' ? tooltip.bind(null, { color, ...data }) : null
}
/>,
e
)
Expand Down Expand Up @@ -70,6 +74,7 @@ PieSlice.propTypes = {
borderColor: PropTypes.string.isRequired,

tooltipFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
tooltip: PropTypes.func,
showTooltip: PropTypes.func.isRequired,
hideTooltip: PropTypes.func.isRequired,
onClick: PropTypes.func,
Expand Down
2 changes: 2 additions & 0 deletions packages/nivo-pie/src/props.js
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,9 @@ export const PiePropTypes = {
isInteractive: PropTypes.bool,
onClick: PropTypes.func.isRequired,
tooltipFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
tooltip: PropTypes.func,

// legends
legends: PropTypes.arrayOf(PropTypes.shape(LegendPropShape)).isRequired,
}

Expand Down
4 changes: 3 additions & 1 deletion website/src/components/charts/pie/Pie.js
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,9 @@ export default class Pie extends Component {
state = {
settings: {
...omit(defaultProps, ['width', 'height']),
'custom tooltip example': false,
tooltip: null,
theme: nivoTheme,
legends: [
{
anchor: 'bottom',
Expand Down Expand Up @@ -122,7 +125,6 @@ export default class Pie extends Component {
<ResponsivePie
data={data}
{...mappedSettings}
theme={nivoTheme}
onClick={this.handleNodeClick}
/>
</ChartTabs>
Expand Down
56 changes: 56 additions & 0 deletions website/src/components/charts/pie/props.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,30 @@
* file that was distributed with this source code.
*/
import React from 'react'
import dedent from 'dedent-js'
import { PieDefaultProps as defaults } from '@nivo/pie'
import { marginProperties } from '../../../lib/componentProperties'

export default [
{
key: 'data',
scopes: '*',
description: (
<div>
Chart data, which must conform to this structure:
<pre className="code code-block">
{dedent`
Array<{
id: {string|number},
value: {number}
}>
`}
</pre>
</div>
),
type: '{Array<Object>}',
required: true,
},
{
key: 'width',
scopes: ['api'],
Expand Down Expand Up @@ -389,6 +409,42 @@ export default [
type: '{Function}',
required: false,
},
{
key: 'tooltip',
scopes: ['Pie'],
type: '{Function}',
required: false,
description: (
<div>
A function allowing complete tooltip customisation, it must return a valid HTML
element and will receive the following data:
<pre className="code code-block">
{dedent`
{
id: {string|number},
value: {number},
label: {string|number},
color: {string}
}
`}
</pre>
</div>
),
},
{
key: 'custom tooltip example',
scopes: ['Pie'],
excludeFromDoc: true,
description: (
<span>
You can customize the tooltip using the <code>tooltip</code> property and{' '}
<code>theme.tooltip</code> object.
</span>
),
type: '{boolean}',
controlType: 'switch',
controlGroup: 'Interactivity',
},
/*
————————————————————————————————————————————————————————————————————————————
Expand Down
84 changes: 67 additions & 17 deletions website/src/components/charts/pie/propsMapper.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,23 +6,73 @@
* For the full copyright and license information, please view the LICENSE
* file that was distributed with this source code.
*/
import React from 'react'
import styled from 'styled-components'
import { settingsMapper, mapInheritedColor } from '../../../lib/settings'

export default settingsMapper({
colorBy: value => {
if (value === 'd => d.color') return d => d.color
return value
},
radialLabel: value => {
if (value === `d => \`\${d.id} (\${d.value})\``) return d => `${d.id} (${d.value})`
return value
},
sliceLabel: value => {
if (value === `d => \`\${d.id} (\${d.value})\``) return d => `${d.id} (${d.value})`
return value
const TooltipWrapper = styled.div`
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 12px;
`
const TooltipKey = styled.span`
font-weight: 600;
`
const TooltipValue = styled.span``

const CustomTooltip = data => {
return (
<TooltipWrapper style={{ color: data.color }}>
<TooltipKey>id</TooltipKey>
<TooltipValue>{data.id}</TooltipValue>
<TooltipKey>value</TooltipKey>
<TooltipValue>{data.value}</TooltipValue>
<TooltipKey>label</TooltipKey>
<TooltipValue>{data.label}</TooltipValue>
<TooltipKey>color</TooltipKey>
<TooltipValue>{data.color}</TooltipValue>
</TooltipWrapper>
)
}

export default settingsMapper(
{
colorBy: value => {
if (value === 'd => d.color') return d => d.color
return value
},
radialLabel: value => {
if (value === `d => \`\${d.id} (\${d.value})\``) return d => `${d.id} (${d.value})`
return value
},
sliceLabel: value => {
if (value === `d => \`\${d.id} (\${d.value})\``) return d => `${d.id} (${d.value})`
return value
},
borderColor: mapInheritedColor,
radialLabelsTextColor: mapInheritedColor,
radialLabelsLinkColor: mapInheritedColor,
slicesLabelsTextColor: mapInheritedColor,
tooltip: (value, values) => {
if (!values['custom tooltip example']) return null

return CustomTooltip
},
theme: (value, values) => {
if (!values['custom tooltip example']) return value

return {
...values.theme,
tooltip: {
container: {
...values.theme.tooltip.container,
background: '#333',
},
},
}
},
},
borderColor: mapInheritedColor,
radialLabelsTextColor: mapInheritedColor,
radialLabelsLinkColor: mapInheritedColor,
slicesLabelsTextColor: mapInheritedColor,
})
{
exclude: ['custom tooltip example'],
}
)

0 comments on commit d373442

Please sign in to comment.