feat(tooltip): prop to format values in tooltip was added (#69)

plouc · Oct 26, 2017 · 0dfafff · 0dfafff
1 parent 000e2c3
commit 0dfafff
Show file tree

Hide file tree

Showing 41 changed files with 301 additions and 65 deletions.
diff --git a/src/components/charts/bar/Bar.js b/src/components/charts/bar/Bar.js
@@ -102,6 +102,7 @@ const Bar = ({
 
     // interactivity
     isInteractive,
+    tooltipFormat,
     onClick,
 }) => {
     const options = {
@@ -163,6 +164,7 @@ const Bar = ({
                     hideTooltip,
                     onClick,
                     theme,
+                    tooltipFormat,
                 }
 
                 let bars

diff --git a/src/components/charts/bar/BarItem.js b/src/components/charts/bar/BarItem.js
@@ -32,6 +32,7 @@ const BarItem = ({
     showTooltip,
     hideTooltip,
     onClick,
+    tooltipFormat,
 
     theme,
 }) => {
@@ -43,6 +44,7 @@ const BarItem = ({
                 enableChip={true}
                 color={color}
                 theme={theme}
+                format={tooltipFormat}
             />,
             e
         )
@@ -100,6 +102,7 @@ BarItem.propTypes = {
     shouldRenderLabel: PropTypes.bool.isRequired,
     labelColor: PropTypes.string.isRequired,
 
+    tooltipFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
     showTooltip: PropTypes.func.isRequired,
     hideTooltip: PropTypes.func.isRequired,
 

diff --git a/src/components/charts/bar/props.js b/src/components/charts/bar/props.js
@@ -61,6 +61,7 @@ export const BarPropTypes = {
     // interactivity
     isInteractive: PropTypes.bool,
     onClick: PropTypes.func.isRequired,
+    tooltipFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
 
     // canvas specific
     pixelRatio: PropTypes.number.isRequired,

diff --git a/src/components/charts/bubble/Bubble.js b/src/components/charts/bubble/Bubble.js
@@ -42,6 +42,7 @@ const Bubble = ({
     // interactivity
     isInteractive,
     onClick,
+    tooltipFormat,
     isZoomable,
     zoomToNode,
 }) => {
@@ -59,6 +60,7 @@ const Bubble = ({
             isZoomable,
             zoomToNode,
             theme,
+            tooltipFormat,
         })
 
     return (

diff --git a/src/components/charts/bubble/interactivity.js b/src/components/charts/bubble/interactivity.js
@@ -11,7 +11,16 @@ import BasicTooltip from '../../tooltip/BasicTooltip'
 
 export const getNodeHandlers = (
     node,
-    { isInteractive, onClick, showTooltip, hideTooltip, isZoomable, zoomToNode, theme }
+    {
+        isInteractive,
+        onClick,
+        showTooltip,
+        hideTooltip,
+        isZoomable,
+        zoomToNode,
+        theme,
+        tooltipFormat,
+    }
 ) => {
     if (!isInteractive) return {}
 
@@ -23,6 +32,7 @@ export const getNodeHandlers = (
                 enableChip={true}
                 color={node.color}
                 theme={theme}
+                format={tooltipFormat}
             />,
             e
         )

diff --git a/src/components/charts/bubble/props.js b/src/components/charts/bubble/props.js
@@ -47,6 +47,7 @@ const commonPropTypes = {
     isInteractive: PropTypes.bool.isRequired,
     onClick: PropTypes.func.isRequired,
     isZoomable: PropTypes.bool.isRequired,
+    tooltipFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
 }
 
 export const BubblePropTypes = {

diff --git a/src/components/charts/chord/Chord.js b/src/components/charts/chord/Chord.js
@@ -46,6 +46,7 @@ const Chord = ({
 
     // interactivity
     isInteractive,
+    tooltipFormat,
 
     // motion
     animate,
@@ -83,6 +84,7 @@ const Chord = ({
                                 getOpacity={getRibbonOpacity}
                                 setCurrent={setCurrentRibbon}
                                 theme={theme}
+                                tooltipFormat={tooltipFormat}
                                 showTooltip={showTooltip}
                                 hideTooltip={hideTooltip}
                                 {...motionProps}
@@ -95,6 +97,7 @@ const Chord = ({
                                 getOpacity={getArcOpacity}
                                 setCurrent={setCurrentArc}
                                 theme={theme}
+                                tooltipFormat={tooltipFormat}
                                 showTooltip={showTooltip}
                                 hideTooltip={hideTooltip}
                                 {...motionProps}

diff --git a/src/components/charts/chord/ChordArcTooltip.js b/src/components/charts/chord/ChordArcTooltip.js
@@ -11,8 +11,15 @@ import PropTypes from 'prop-types'
 import pure from 'recompose/pure'
 import BasicTooltip from '../../tooltip/BasicTooltip'
 
-const ChordArcTooltip = ({ arc, theme }) => (
-    <BasicTooltip id={arc.id} value={arc.value} color={arc.color} enableChip={true} theme={theme} />
+const ChordArcTooltip = ({ arc, theme, format }) => (
+    <BasicTooltip
+        id={arc.id}
+        value={arc.value}
+        color={arc.color}
+        enableChip={true}
+        theme={theme}
+        format={format}
+    />
 )
 
 ChordArcTooltip.propTypes = {

diff --git a/src/components/charts/chord/ChordArcs.js b/src/components/charts/chord/ChordArcs.js
@@ -20,6 +20,7 @@ const ChordArcs = ({
     getOpacity,
     shapeGenerator,
     theme,
+    tooltipFormat,
     setCurrent,
     showTooltip,
     hideTooltip,
@@ -30,7 +31,7 @@ const ChordArcs = ({
     motionStiffness,
 }) => {
     const commonProps = arc => {
-        const arcTooltip = <ChordArcTooltip arc={arc} theme={theme} />
+        const arcTooltip = <ChordArcTooltip arc={arc} theme={theme} format={tooltipFormat} />
 
         return {
             strokeWidth: borderWidth,

diff --git a/src/components/charts/chord/ChordRibbons.js b/src/components/charts/chord/ChordRibbons.js
@@ -8,8 +8,11 @@
  */
 import React from 'react'
 import PropTypes from 'prop-types'
-import { mapValues } from 'lodash'
+import { isFunction, mapValues } from 'lodash'
 import { TransitionMotion, spring } from 'react-motion'
+import { format as d3Format } from 'd3-format'
+import compose from 'recompose/compose'
+import withPropsOnChange from 'recompose/withPropsOnChange'
 import pure from 'recompose/pure'
 import { colorMotionSpring, getInterpolatedColor } from '../../../lib/colors'
 import { midAngle } from '../../../lib/polar'
@@ -83,6 +86,7 @@ const ChordRibbons = ({
     getBorderColor,
     getOpacity,
     theme,
+    tooltipFormat,
     setCurrent,
     showTooltip,
     hideTooltip,
@@ -100,12 +104,12 @@ const ChordRibbons = ({
                     [
                         <Chip color={ribbon.source.color} />,
                         <strong>{ribbon.source.id}</strong>,
-                        ribbon.source.value,
+                        tooltipFormat ? tooltipFormat(ribbon.source.value) : ribbon.source.value,
                     ],
                     [
                         <Chip color={ribbon.target.color} />,
                         <strong>{ribbon.target.id}</strong>,
-                        ribbon.target.value,
+                        tooltipFormat ? tooltipFormat(ribbon.target.value) : ribbon.target.value,
                     ],
                 ]}
             />
@@ -221,4 +225,12 @@ ChordRibbons.propTypes = {
     hideTooltip: PropTypes.func.isRequired,
 }
 
-export default pure(ChordRibbons)
+const enhance = compose(
+    withPropsOnChange(['tooltipFormat'], ({ tooltipFormat }) => {
+        if (!tooltipFormat || isFunction(tooltipFormat)) return { tooltipFormat }
+        return { tooltipFormat: d3Format(tooltipFormat) }
+    }),
+    pure
+)
+
+export default enhance(ChordRibbons)
diff --git a/src/components/charts/chord/props.js b/src/components/charts/chord/props.js
@@ -46,6 +46,7 @@ export const ChordPropTypes = {
     arcHoverOthersOpacity: PropTypes.number.isRequired,
     ribbonHoverOpacity: PropTypes.number.isRequired,
     ribbonHoverOthersOpacity: PropTypes.number.isRequired,
+    tooltipFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
 
     // canvas specific
     pixelRatio: PropTypes.number.isRequired,

diff --git a/src/components/charts/heatmap/HeatMap.js b/src/components/charts/heatmap/HeatMap.js
@@ -25,9 +25,9 @@ class HeatMap extends Component {
     static propTypes = HeatMapPropTypes
 
     handleNodeHover = (showTooltip, node, event) => {
-        const { setCurrentNode, theme } = this.props
+        const { setCurrentNode, theme, tooltipFormat } = this.props
         setCurrentNode(node)
-        showTooltip(<HeatMapCellTooltip node={node} theme={theme} />, event)
+        showTooltip(<HeatMapCellTooltip node={node} theme={theme} format={tooltipFormat} />, event)
     }
 
     handleNodeLeave = hideTooltip => {

diff --git a/src/components/charts/heatmap/HeatMapCellTooltip.js b/src/components/charts/heatmap/HeatMapCellTooltip.js
@@ -10,13 +10,14 @@ import React from 'react'
 import pure from 'recompose/pure'
 import BasicTooltip from '../../tooltip/BasicTooltip'
 
-const HeatMapCellTooltip = ({ node, theme }) => (
+const HeatMapCellTooltip = ({ node, theme, format }) => (
     <BasicTooltip
         id={`${node.yKey} - ${node.xKey}`}
         value={node.value}
         enableChip={true}
         color={node.color}
         theme={theme}
+        format={format}
     />
 )
 

diff --git a/src/components/charts/heatmap/props.js b/src/components/charts/heatmap/props.js
@@ -53,6 +53,7 @@ export const HeatMapPropTypes = {
     hoverTarget: PropTypes.oneOf(['cell', 'row', 'column', 'rowColumn']).isRequired,
     cellHoverOpacity: PropTypes.number.isRequired,
     cellHoverOthersOpacity: PropTypes.number.isRequired,
+    tooltipFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
 
     // canvas specific
     pixelRatio: PropTypes.number.isRequired,

diff --git a/src/components/charts/line/Line.js b/src/components/charts/line/Line.js
@@ -81,6 +81,7 @@ const Line = ({
 
     // interactivity
     isInteractive,
+    tooltipFormat,
 
     // stackTooltip
     enableStackTooltip,
@@ -137,6 +138,7 @@ const Line = ({
                             showTooltip={showTooltip}
                             hideTooltip={hideTooltip}
                             theme={theme}
+                            tooltipFormat={tooltipFormat}
                         />
                     )}
                     {enableDots && (

diff --git a/src/components/charts/line/LineSlices.js b/src/components/charts/line/LineSlices.js
@@ -11,7 +11,7 @@ import PropTypes from 'prop-types'
 import pure from 'recompose/pure'
 import LineSlicesItem from './LineSlicesItem'
 
-const LineSlices = ({ slices, height, showTooltip, hideTooltip, theme }) => (
+const LineSlices = ({ slices, height, showTooltip, hideTooltip, theme, tooltipFormat }) => (
     <g>
         {slices.map(slice => (
             <LineSlicesItem
@@ -21,6 +21,7 @@ const LineSlices = ({ slices, height, showTooltip, hideTooltip, theme }) => (
                 showTooltip={showTooltip}
                 hideTooltip={hideTooltip}
                 theme={theme}
+                tooltipFormat={tooltipFormat}
             />
         ))}
     </g>

diff --git a/src/components/charts/line/LineSlicesItem.js b/src/components/charts/line/LineSlicesItem.js
@@ -8,6 +8,8 @@
  */
 import React from 'react'
 import PropTypes from 'prop-types'
+import { isFunction } from 'lodash'
+import { format as d3Format } from 'd3-format'
 import compose from 'recompose/compose'
 import pure from 'recompose/pure'
 import withState from 'recompose/withState'
@@ -56,14 +58,23 @@ LineSlicesItem.propTypes = {
 
 const enhance = compose(
     withState('isHover', 'setIsHover', false),
-    withPropsOnChange(['slice', 'theme'], ({ slice, theme }) => ({
-        tooltip: (
-            <TableTooltip
-                theme={theme}
-                rows={slice.points.map(p => [<Chip color={p.color} />, p.id, p.value])}
-            />
-        ),
-    })),
+    withPropsOnChange(['slice', 'theme', 'tooltipFormat'], ({ slice, theme, tooltipFormat }) => {
+        const format =
+            !tooltipFormat || isFunction(tooltipFormat) ? tooltipFormat : d3Format(tooltipFormat)
+
+        return {
+            tooltip: (
+                <TableTooltip
+                    theme={theme}
+                    rows={slice.points.map(p => [
+                        <Chip color={p.color} />,
+                        p.id,
+                        format ? format(p.value) : p.value,
+                    ])}
+                />
+            ),
+        }
+    }),
     withHandlers({
         showTooltip: ({ showTooltip, setIsHover, tooltip }) => e => {
             setIsHover(true)

diff --git a/src/components/charts/line/props.js b/src/components/charts/line/props.js
@@ -75,6 +75,7 @@ export const LinePropTypes = {
     // interactivity
     isInteractive: PropTypes.bool.isRequired,
     enableStackTooltip: PropTypes.bool.isRequired,
+    tooltipFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
 }
 
 export const LineDefaultProps = {

diff --git a/src/components/charts/pie/Pie.js b/src/components/charts/pie/Pie.js
@@ -71,6 +71,7 @@ const Pie = ({
 
     // interactivity
     isInteractive,
+    tooltipFormat,
 }) => {
     const centerX = width / 2
     const centerY = height / 2
@@ -168,6 +169,7 @@ const Pie = ({
                                                     enableChip={true}
                                                     color={d.data.color}
                                                     theme={theme}
+                                                    format={tooltipFormat}
                                                 />,
                                                 e
                                             )

diff --git a/src/components/charts/pie/props.js b/src/components/charts/pie/props.js
@@ -59,6 +59,7 @@ export const PiePropTypes = {
 
     // interactivity
     isInteractive: PropTypes.bool,
+    tooltipFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
 }
 
 export const PieDefaultProps = {

diff --git a/src/components/charts/radar/Radar.js b/src/components/charts/radar/Radar.js
@@ -76,6 +76,7 @@ const Radar = ({
 
     // interactivity
     isInteractive,
+    tooltipFormat,
 }) => {
     const motionProps = {
         animate,
@@ -119,6 +120,7 @@ const Radar = ({
                                 radius={radius}
                                 angleStep={angleStep}
                                 theme={theme}
+                                tooltipFormat={tooltipFormat}
                                 showTooltip={showTooltip}
                                 hideTooltip={hideTooltip}
                             />
@@ -191,6 +193,7 @@ Radar.propTypes = {
 
     // interactivity
     isInteractive: PropTypes.bool.isRequired,
+    tooltipFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
 }
 
 export const RadarDefaultProps = {

diff --git a/src/components/charts/radar/RadarTooltip.js b/src/components/charts/radar/RadarTooltip.js
@@ -20,6 +20,7 @@ const RadarTooltip = ({
     radius,
     angleStep,
     theme,
+    tooltipFormat,
     showTooltip,
     hideTooltip,
 }) => {
@@ -51,6 +52,7 @@ const RadarTooltip = ({
                         radius={radius}
                         arcGenerator={arc}
                         theme={theme}
+                        tooltipFormat={tooltipFormat}
                         showTooltip={showTooltip}
                         hideTooltip={hideTooltip}
                     />