feat(pie): use same tooltip for both svg and canvas implementations

plouc · Nov 4, 2020 · baa8af8 · baa8af8
1 parent b2c2bf1
commit baa8af8
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 35 deletions.
diff --git a/packages/pie/src/PieCanvas.js b/packages/pie/src/PieCanvas.js
@@ -17,10 +17,10 @@ import {
 } from '@nivo/core'
 import { renderLegendToCanvas } from '@nivo/legends'
 import { useInheritedColor } from '@nivo/colors'
+import { useTooltip } from '@nivo/tooltip'
 import { PieSvgDefaultProps, PieSvgPropTypes } from './props'
 import { useNormalizedData, usePieFromBox, usePieRadialLabels, usePieSliceLabels } from './hooks'
-import PieTooltip from './PieTooltip'
-import { useTooltip } from '@nivo/tooltip'
+import { PieTooltip } from './PieTooltip'
 
 const drawSliceLabels = (ctx, labels, theme) => {
     ctx.textAlign = 'center'

diff --git a/packages/pie/src/PieSlice.js b/packages/pie/src/PieSlice.js
@@ -8,8 +8,9 @@
  */
 import React, { useCallback } from 'react'
 import PropTypes from 'prop-types'
-import { BasicTooltip, useTooltip } from '@nivo/tooltip'
+import { useTooltip } from '@nivo/tooltip'
 import { PiePropTypes, datumWithArcPropType } from './props'
+import { PieTooltip } from './PieTooltip'
 
 export const PieSlice = ({
     datum,
@@ -28,14 +29,7 @@ export const PieSlice = ({
     const handleTooltip = useCallback(
         e =>
             showTooltipFromEvent(
-                <BasicTooltip
-                    id={datum.label || datum.id}
-                    value={datum.formattedValue}
-                    enableChip
-                    color={datum.color}
-                    format={tooltipFormat}
-                    renderContent={typeof tooltip === 'function' ? tooltip.bind(null, datum) : null}
-                />,
+                <PieTooltip datum={datum} tooltip={tooltip} tooltipFormat={tooltipFormat} />,
                 e
             ),
         [showTooltipFromEvent, datum, tooltipFormat, tooltip]

diff --git a/packages/pie/src/PieTooltip.js b/packages/pie/src/PieTooltip.js
@@ -7,37 +7,26 @@
  * file that was distributed with this source code.
  */
 import React from 'react'
-import PropTypes from 'prop-types'
 import { BasicTooltip } from '@nivo/tooltip'
+import { datumWithArcPropType, PiePropTypes } from './props'
 
-const PieTooltip = ({ data, color, tooltipFormat, tooltip, theme }) => {
+export const PieTooltip = ({ datum, tooltipFormat, tooltip }) => {
     return (
         <BasicTooltip
-            id={data.label}
-            value={data.value}
+            id={datum.label || datum.id}
+            value={datum.formattedValue}
             enableChip={true}
-            color={color}
-            theme={theme}
+            color={datum.color}
             format={tooltipFormat}
-            renderContent={
-                typeof tooltip === 'function' ? tooltip.bind(null, { color, ...data }) : null
-            }
+            renderContent={typeof tooltip === 'function' ? tooltip.bind(null, datum) : null}
         />
     )
 }
 
 PieTooltip.propTypes = {
-    data: PropTypes.shape({
-        id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-        label: PropTypes.string.isRequired,
-        value: PropTypes.number.isRequired,
-    }).isRequired,
-    color: PropTypes.string.isRequired,
-    tooltipFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-    tooltip: PropTypes.func,
-    theme: PropTypes.shape({
-        tooltip: PropTypes.shape({}).isRequired,
-    }).isRequired,
+    datum: datumWithArcPropType.isRequired,
+    tooltipFormat: PiePropTypes.tooltipFormat,
+    tooltip: PiePropTypes.tooltip,
 }
 
 export default PieTooltip
diff --git a/website/src/data/components/pie/mapper.js b/website/src/data/components/pie/mapper.js
@@ -16,19 +16,19 @@ const TooltipWrapper = styled.div`
     grid-template-columns: 1fr 1fr;
     grid-column-gap: 12px;
 `
-const TooltipKey = styled.span`
+const TooltipKey = styled.span``
+const TooltipValue = styled.span`
     font-weight: 600;
 `
-const TooltipValue = styled.span``
 
 const CustomTooltip = data => (
     <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>formattedValue</TooltipKey>
+        <TooltipValue>{data.formattedValue}</TooltipValue>
         <TooltipKey>color</TooltipKey>
         <TooltipValue>{data.color}</TooltipValue>
     </TooltipWrapper>