feat(tooltips): improve bar & stream tooltips

plouc · Nov 18, 2018 · 698585f · 698585f
1 parent 0e5a933
commit 698585f
Show file tree

Hide file tree

Showing 8 changed files with 87 additions and 38 deletions.
diff --git a/packages/bar/src/BarItem.js b/packages/bar/src/BarItem.js
@@ -132,7 +132,7 @@ const enhance = compose(
                     format={tooltipFormat}
                     renderContent={
                         typeof tooltip === 'function'
-                            ? tooltip.bind(null, { color, ...data })
+                            ? tooltip.bind(null, { color, theme, ...data })
                             : null
                     }
                 />

diff --git a/packages/stream/src/Stream.js b/packages/stream/src/Stream.js
@@ -61,8 +61,8 @@ const Stream = ({
     motionDamping,
 
     isInteractive,
-    tooltipFormat,
-
+    getTooltipValue,
+    getTooltipLabel,
     enableStackTooltip,
 
     legends,
@@ -130,6 +130,7 @@ const Stream = ({
                         getBorderColor={getBorderColor}
                         showTooltip={showTooltip}
                         hideTooltip={hideTooltip}
+                        getTooltipLabel={getTooltipLabel}
                         theme={theme}
                         {...motionProps}
                     />
@@ -169,7 +170,8 @@ const Stream = ({
                                 showTooltip={showTooltip}
                                 hideTooltip={hideTooltip}
                                 theme={theme}
-                                tooltipFormat={tooltipFormat}
+                                getTooltipValue={getTooltipValue}
+                                getTooltipLabel={getTooltipLabel}
                             />
                         )}
                     {legends.map((legend, i) => {

diff --git a/packages/stream/src/StreamLayers.js b/packages/stream/src/StreamLayers.js
@@ -22,6 +22,7 @@ const StreamLayers = ({
 
     showTooltip,
     hideTooltip,
+    getTooltipLabel,
 
     animate,
     motionStiffness,
@@ -31,11 +32,16 @@ const StreamLayers = ({
         return (
             <g>
                 {layers.map((layer, i) => {
-                    const { id, path, color } = layer
+                    const { path, color } = layer
 
                     const handleTooltip = e =>
                         showTooltip(
-                            <BasicTooltip id={id} enableChip={true} color={color} theme={theme} />,
+                            <BasicTooltip
+                                id={getTooltipLabel(layer)}
+                                enableChip={true}
+                                color={color}
+                                theme={theme}
+                            />,
                             e
                         )
 
@@ -65,11 +71,16 @@ const StreamLayers = ({
     return (
         <g>
             {layers.map((layer, i) => {
-                const { id, path, color } = layer
+                const { path, color } = layer
 
                 const handleTooltip = e =>
                     showTooltip(
-                        <BasicTooltip id={id} enableChip={true} color={color} theme={theme} />,
+                        <BasicTooltip
+                            id={getTooltipLabel(layer)}
+                            enableChip={true}
+                            color={color}
+                            theme={theme}
+                        />,
                         e
                     )
 
@@ -105,6 +116,9 @@ StreamLayers.propTypes = {
     borderWidth: PropTypes.number.isRequired,
     getBorderColor: PropTypes.func.isRequired,
     theme: PropTypes.object.isRequired,
+    showTooltip: PropTypes.func.isRequired,
+    hideTooltip: PropTypes.func.isRequired,
+    getTooltipLabel: PropTypes.func.isRequired,
     ...motionPropTypes,
 }
 

diff --git a/packages/stream/src/StreamSlices.js b/packages/stream/src/StreamSlices.js
@@ -11,7 +11,15 @@ import PropTypes from 'prop-types'
 import pure from 'recompose/pure'
 import StreamSlicesItem from './StreamSlicesItem'
 
-const StreamSlices = ({ slices, height, showTooltip, hideTooltip, theme, tooltipFormat }) => (
+const StreamSlices = ({
+    slices,
+    height,
+    showTooltip,
+    hideTooltip,
+    theme,
+    getTooltipLabel,
+    getTooltipValue,
+}) => (
     <g>
         {slices.map(slice => (
             <StreamSlicesItem
@@ -21,7 +29,8 @@ const StreamSlices = ({ slices, height, showTooltip, hideTooltip, theme, tooltip
                 showTooltip={showTooltip}
                 hideTooltip={hideTooltip}
                 theme={theme}
-                tooltipFormat={tooltipFormat}
+                getTooltipLabel={getTooltipLabel}
+                getTooltipValue={getTooltipValue}
             />
         ))}
     </g>
@@ -44,7 +53,8 @@ StreamSlices.propTypes = {
     height: PropTypes.number.isRequired,
     showTooltip: PropTypes.func.isRequired,
     hideTooltip: PropTypes.func.isRequired,
-    tooltipFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+    getTooltipLabel: PropTypes.func.isRequired,
+    getTooltipValue: PropTypes.func.isRequired,
     theme: PropTypes.object.isRequired,
 }
 

diff --git a/packages/stream/src/StreamSlicesItem.js b/packages/stream/src/StreamSlicesItem.js
@@ -8,8 +8,6 @@
  */
 import React from 'react'
 import PropTypes from 'prop-types'
-import isFunction from 'lodash/isFunction'
-import { format as d3Format } from 'd3-format'
 import compose from 'recompose/compose'
 import pure from 'recompose/pure'
 import withState from 'recompose/withState'
@@ -48,29 +46,31 @@ StreamSlicesItem.propTypes = {
     height: PropTypes.number.isRequired,
     showTooltip: PropTypes.func.isRequired,
     hideTooltip: PropTypes.func.isRequired,
+    getTooltipLabel: PropTypes.func.isRequired,
+    getTooltipValue: PropTypes.func.isRequired,
     isHover: PropTypes.bool.isRequired,
     theme: PropTypes.object.isRequired,
 }
 
 const enhance = compose(
     withState('isHover', 'setIsHover', false),
-    withPropsOnChange(['slice', 'theme', 'tooltipFormat'], ({ slice, theme, tooltipFormat }) => {
-        const format =
-            !tooltipFormat || isFunction(tooltipFormat) ? tooltipFormat : d3Format(tooltipFormat)
-
-        return {
-            tooltip: (
-                <TableTooltip
-                    theme={theme}
-                    rows={slice.stack.map(p => [
-                        <Chip key={p.id} color={p.color} />,
-                        p.id,
-                        format ? format(p.value) : p.value,
-                    ])}
-                />
-            ),
+    withPropsOnChange(
+        ['slice', 'theme', 'getTooltipLabel', 'getTooltipValue'],
+        ({ slice, theme, getTooltipLabel, getTooltipValue }) => {
+            return {
+                tooltip: (
+                    <TableTooltip
+                        theme={theme}
+                        rows={slice.stack.map(p => [
+                            <Chip key={p.id} color={p.color} />,
+                            getTooltipLabel(p),
+                            getTooltipValue(p),
+                        ])}
+                    />
+                ),
+            }
         }
-    }),
+    ),
     withHandlers({
         showTooltip: ({ showTooltip, setIsHover, tooltip }) => e => {
             setIsHover(true)

diff --git a/packages/stream/src/enhance.js b/packages/stream/src/enhance.js
@@ -6,12 +6,10 @@
  * For the full copyright and license information, please view the LICENSE
  * file that was distributed with this source code.
  */
-import min from 'lodash/min'
-import max from 'lodash/max'
 import range from 'lodash/range'
-import isFunction from 'lodash/isFunction'
 import { stack as d3Stack, area } from 'd3-shape'
 import { scaleLinear, scalePoint } from 'd3-scale'
+import { format as d3Format } from 'd3-format'
 import compose from 'recompose/compose'
 import defaultProps from 'recompose/defaultProps'
 import pure from 'recompose/pure'
@@ -28,8 +26,10 @@ import {
 } from '@nivo/core'
 import { StreamDefaultProps } from './props'
 
-const stackMin = layers => min(layers.reduce((acc, layer) => [...acc, ...layer.map(d => d[0])], []))
-const stackMax = layers => max(layers.reduce((acc, layer) => [...acc, ...layer.map(d => d[1])], []))
+const stackMin = layers =>
+    Math.min(...layers.reduce((acc, layer) => [...acc, ...layer.map(d => d[0])], []))
+const stackMax = layers =>
+    Math.max(...layers.reduce((acc, layer) => [...acc, ...layer.map(d => d[1])], []))
 
 export default Component =>
     compose(
@@ -82,16 +82,36 @@ export default Component =>
             }
         ),
         withPropsOnChange(['dotSize'], ({ dotSize }) => ({
-            getDotSize: isFunction(dotSize) ? dotSize : () => dotSize,
+            getDotSize: typeof dotSize === 'function' ? dotSize : () => dotSize,
         })),
         withPropsOnChange(['dotColor'], ({ dotColor }) => ({
             getDotColor: getInheritedColorGenerator(dotColor),
         })),
         withPropsOnChange(['dotBorderWidth'], ({ dotBorderWidth }) => ({
-            getDotBorderWidth: isFunction(dotBorderWidth) ? dotBorderWidth : () => dotBorderWidth,
+            getDotBorderWidth:
+                typeof dotBorderWidth === 'function' ? dotBorderWidth : () => dotBorderWidth,
         })),
         withPropsOnChange(['dotBorderColor'], ({ dotBorderColor }) => ({
             getDotBorderColor: getInheritedColorGenerator(dotBorderColor),
         })),
+        withPropsOnChange(['tooltipLabel', 'tooltipFormat'], ({ tooltipLabel, tooltipFormat }) => {
+            let getTooltipLabel = d => d.id
+            if (typeof tooltipLabel === 'function') {
+                getTooltipLabel = tooltipLabel
+            }
+
+            let getTooltipValue = d => d.value
+            if (typeof tooltipFormat === 'function') {
+                getTooltipValue = tooltipFormat
+            } else if (typeof tooltipFormat === 'string' || tooltipFormat instanceof String) {
+                const formatter = d3Format(tooltipFormat)
+                getTooltipValue = d => formatter(d.value)
+            }
+
+            return {
+                getTooltipValue,
+                getTooltipLabel,
+            }
+        }),
         pure
     )(Component)
diff --git a/packages/stream/src/props.js b/packages/stream/src/props.js
@@ -61,8 +61,11 @@ export const StreamPropTypes = {
     dotBorderColor: PropTypes.any.isRequired,
 
     isInteractive: PropTypes.bool,
-    enableStackTooltip: PropTypes.bool.isRequired,
+    tooltipLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+    getTooltipLabel: PropTypes.func.isRequired,
     tooltipFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+    getTooltipValue: PropTypes.func.isRequired,
+    enableStackTooltip: PropTypes.bool.isRequired,
 
     legends: PropTypes.arrayOf(PropTypes.shape(LegendPropShape)).isRequired,
 }

diff --git a/website/src/components/charts/stream/generators.js b/website/src/components/charts/stream/generators.js
@@ -36,7 +36,7 @@ const names = [
 ]
 
 export const generateLightDataSet = () => ({
-    data: range(16).map(() =>
+    data: range(4).map(() =>
         names.slice(0, 6).reduce((layer, key) => {
             layer[key] = random(10, 200)
             return layer