feat(pie): add support for custom tooltip

plouc · May 30, 2018 · d373442 · d373442
1 parent d7a87ef
commit d373442
Show file tree

Hide file tree

Showing 7 changed files with 138 additions and 19 deletions.
diff --git a/packages/nivo-pie/index.d.ts b/packages/nivo-pie/index.d.ts
@@ -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;
 

diff --git a/packages/nivo-pie/src/Pie.js b/packages/nivo-pie/src/Pie.js
@@ -73,6 +73,7 @@ const Pie = ({
     isInteractive,
     onClick,
     tooltipFormat,
+    tooltip,
 
     legends,
 }) => {
@@ -181,6 +182,8 @@ const Pie = ({
                                             borderColor={borderColor(d.data)}
                                             showTooltip={showTooltip}
                                             hideTooltip={hideTooltip}
+                                            tooltipFormat={tooltipFormat}
+                                            tooltip={tooltip}
                                             theme={theme}
                                             onClick={onClick}
                                         />

diff --git a/packages/nivo-pie/src/PieSlice.js b/packages/nivo-pie/src/PieSlice.js
@@ -26,6 +26,7 @@ const PieSlice = ({
     hideTooltip,
     onClick,
     tooltipFormat,
+    tooltip,
 
     theme,
 }) => {
@@ -38,6 +39,9 @@ const PieSlice = ({
                 color={color}
                 theme={theme}
                 format={tooltipFormat}
+                renderContent={
+                    typeof tooltip === 'function' ? tooltip.bind(null, { color, ...data }) : null
+                }
             />,
             e
         )
@@ -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,

diff --git a/packages/nivo-pie/src/props.js b/packages/nivo-pie/src/props.js
@@ -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,
 }
 

diff --git a/website/src/components/charts/pie/Pie.js b/website/src/components/charts/pie/Pie.js
@@ -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',
@@ -122,7 +125,6 @@ export default class Pie extends Component {
                         <ResponsivePie
                             data={data}
                             {...mappedSettings}
-                            theme={nivoTheme}
                             onClick={this.handleNodeClick}
                         />
                     </ChartTabs>

diff --git a/website/src/components/charts/pie/props.js b/website/src/components/charts/pie/props.js
@@ -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'],
@@ -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',
+    },
     /*
     ————————————————————————————————————————————————————————————————————————————
 

diff --git a/website/src/components/charts/pie/propsMapper.js b/website/src/components/charts/pie/propsMapper.js
@@ -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'],
+    }
+)