diff --git a/packages/nivo-core/src/components/tooltip/TableTooltip.js b/packages/nivo-core/src/components/tooltip/TableTooltip.js index 70a136054a..14201c790e 100644 --- a/packages/nivo-core/src/components/tooltip/TableTooltip.js +++ b/packages/nivo-core/src/components/tooltip/TableTooltip.js @@ -15,27 +15,33 @@ const tableStyle = { borderCollapse: 'collapse', } -const TableTooltip = ({ title, rows, theme }) => { +const TableTooltip = ({ title, rows, theme, renderContent }) => { if (!rows.length) return null - return ( -
- {title && title} - - - {rows.map((row, i) => ( - - {row.map((column, j) => ( - - ))} - - ))} - -
- {column} -
-
- ) + let content + if (typeof renderContent === 'function') { + content = renderContent() + } else { + content = ( +
+ {title && title} + + + {rows.map((row, i) => ( + + {row.map((column, j) => ( + + ))} + + ))} + +
+ {column} +
+
+ ) + } + return
{content}
} TableTooltip.propTypes = { @@ -48,6 +54,7 @@ TableTooltip.propTypes = { tableCell: PropTypes.object.isRequired, }).isRequired, }).isRequired, + renderContent: PropTypes.func, } TableTooltip.defaultProps = {} diff --git a/packages/nivo-line/src/Line.js b/packages/nivo-line/src/Line.js index 36c627b93f..5220e753ef 100644 --- a/packages/nivo-line/src/Line.js +++ b/packages/nivo-line/src/Line.js @@ -80,6 +80,7 @@ const Line = ({ // interactivity isInteractive, tooltipFormat, + tooltip, // stackTooltip enableStackTooltip, @@ -147,6 +148,7 @@ const Line = ({ hideTooltip={hideTooltip} theme={theme} tooltipFormat={tooltipFormat} + tooltip={tooltip} /> )} {enableDots && ( diff --git a/packages/nivo-line/src/LineSlices.js b/packages/nivo-line/src/LineSlices.js index 45953d294b..8cdfcb8c96 100644 --- a/packages/nivo-line/src/LineSlices.js +++ b/packages/nivo-line/src/LineSlices.js @@ -11,7 +11,15 @@ import PropTypes from 'prop-types' import pure from 'recompose/pure' import LineSlicesItem from './LineSlicesItem' -const LineSlices = ({ slices, height, showTooltip, hideTooltip, theme, tooltipFormat }) => ( +const LineSlices = ({ + slices, + height, + showTooltip, + hideTooltip, + theme, + tooltip, + tooltipFormat, +}) => ( {slices.map(slice => ( ))} @@ -45,6 +54,8 @@ LineSlices.propTypes = { showTooltip: PropTypes.func.isRequired, hideTooltip: PropTypes.func.isRequired, theme: PropTypes.object.isRequired, + tooltip: PropTypes.element, + tooltipFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), } export default pure(LineSlices) diff --git a/packages/nivo-line/src/LineSlicesItem.js b/packages/nivo-line/src/LineSlicesItem.js index 85d980be28..b1465902da 100644 --- a/packages/nivo-line/src/LineSlicesItem.js +++ b/packages/nivo-line/src/LineSlicesItem.js @@ -21,7 +21,7 @@ const Chip = ({ color }) => ( ) -const LineSlicesItem = ({ slice, height, showTooltip, hideTooltip, isHover }) => ( +const LineSlicesItem = ({ slice, height, showTooltip, hideTooltip, isHover, tooltip }) => ( {isHover && ( { - const format = - !tooltipFormat || isFunction(tooltipFormat) ? tooltipFormat : d3Format(tooltipFormat) - const hasValues = slice.points.some(p => p.value !== null) + withPropsOnChange( + ['slice', 'theme', 'tooltip', 'tooltipFormat'], + ({ slice, theme, tooltip, tooltipFormat }) => { + const format = + !tooltipFormat || isFunction(tooltipFormat) + ? tooltipFormat + : d3Format(tooltipFormat) + const hasValues = slice.points.some(p => p.value !== null) - return { - tooltip: hasValues ? ( - p.value !== null) - .map(p => [ - , - p.id, - format ? format(p.value) : p.value, - ])} - /> - ) : null, + return { + tooltipElement: hasValues ? ( + p.value !== null) + .map(p => [ + , + p.id, + format ? format(p.value) : p.value, + ])} + format={format} + renderContent={ + typeof tooltip === 'function' ? tooltip.bind(null, { ...slice }) : null + } + /> + ) : null, + } } - }), + ), withHandlers({ - showTooltip: ({ showTooltip, setIsHover, tooltip }) => e => { + showTooltip: ({ showTooltip, setIsHover, tooltipElement }) => e => { setIsHover(true) - showTooltip(tooltip, e) + showTooltip(tooltipElement, e) }, hideTooltip: ({ hideTooltip, setIsHover }) => () => { setIsHover(false) diff --git a/packages/nivo-line/src/props.js b/packages/nivo-line/src/props.js index 15caedd079..3fe78276fe 100644 --- a/packages/nivo-line/src/props.js +++ b/packages/nivo-line/src/props.js @@ -79,6 +79,7 @@ export const LinePropTypes = { // interactivity isInteractive: PropTypes.bool.isRequired, enableStackTooltip: PropTypes.bool.isRequired, + tooltip: PropTypes.func, tooltipFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), legends: PropTypes.arrayOf(PropTypes.shape(LegendPropShape)).isRequired, diff --git a/packages/nivo-line/stories/line.stories.js b/packages/nivo-line/stories/line.stories.js index 3ebb9668da..6675ea43ee 100644 --- a/packages/nivo-line/stories/line.stories.js +++ b/packages/nivo-line/stories/line.stories.js @@ -271,3 +271,30 @@ stories.add('with formatted values', () => ( } /> )) + +stories.add('with custom tooltip', () => ( + { + return ( +
+

{slice.id}

+ {slice.points.map((e, i) => ( +

+ {e.id}: {e.value} +

+ ))} +
+ ) + }} + theme={{ + tooltip: { + container: { + border: '1px solid red', + }, + }, + }} + /> +)) diff --git a/website/src/components/charts/line/props.js b/website/src/components/charts/line/props.js index 96864fb19d..d161ab2c67 100644 --- a/website/src/components/charts/line/props.js +++ b/website/src/components/charts/line/props.js @@ -378,5 +378,13 @@ export default [ controlType: 'switch', controlGroup: 'Interactivity', }, + { + key: 'tooltip', + scopes: ['Line'], + description: `Method to create custom tooltip`, + type: '{Function}', + required: false, + default: defaults.tooltip, + }, ...motionProperties(['Line'], defaults), ]