feat(scatterplot): add ability to format x/y values

plouc · Jun 8, 2019 · 7a80184 · 7a80184
1 parent 501ee0f
commit 7a80184
Show file tree

Hide file tree

Showing 13 changed files with 102 additions and 78 deletions.
diff --git a/packages/scatterplot/index.d.ts b/packages/scatterplot/index.d.ts
@@ -1,5 +1,12 @@
 import * as React from 'react'
-import { Dimensions, Box, Theme, MotionProps, CartesianMarkerProps } from '@nivo/core'
+import {
+    Dimensions,
+    Box,
+    Theme,
+    MotionProps,
+    CartesianMarkerProps,
+    CssMixBlendMode,
+} from '@nivo/core'
 import { OrdinalColorsInstruction } from '@nivo/colors'
 import { LegendProps } from '@nivo/legends'
 import { AxisProps } from '@nivo/axes'
@@ -29,6 +36,8 @@ declare module '@nivo/scatterplot' {
         sizes: [number, number]
     }
 
+    type ValueFormatter = (value: number | string | Date) => string | number
+
     export interface ScatterPlotProps {
         data: Array<{
             id: string
@@ -39,25 +48,26 @@ declare module '@nivo/scatterplot' {
         }>
 
         xScale?: Scale
+        xFormat?: string | ValueFormatter
         yScale?: Scale
-
-        colors?: OrdinalColorsInstruction
-        theme?: Theme
+        yFormat?: string | ValueFormatter
 
         margin?: Box
 
         layers: any[]
 
+        theme?: Theme
+        colors?: OrdinalColorsInstruction
+        blendMode?: CssMixBlendMode
+
+        enableGridX?: boolean
+        enableGridY?: boolean
         axisTop?: AxisProps | null
         axisRight?: AxisProps | null
         axisBottom?: AxisProps | null
         axisLeft?: AxisProps | null
 
-        enableGridX?: boolean
-        enableGridY?: boolean
-
-        symbolSize?: number | DatumAccessor<number> | DynamicSizeSpec
-        symbolShape?: 'circle' | 'square'
+        nodeSize?: number | DatumAccessor<number> | DynamicSizeSpec
 
         isInteractive?: boolean
         useMesh?: boolean
@@ -67,7 +77,6 @@ declare module '@nivo/scatterplot' {
         onMouseLeave?: ScatterPlotMouseHandler
         onClick?: ScatterPlotMouseHandler
 
-        tooltipFormat?: TooltipFormatter
         tooltip?: (data: ScatterPlotDatum) => React.ReactNode
 
         legends?: LegendProps[]

diff --git a/packages/scatterplot/src/AnimatedNodes.js b/packages/scatterplot/src/AnimatedNodes.js
@@ -66,21 +66,15 @@ const AnimatedNodes = ({
 
 AnimatedNodes.propTypes = {
     nodes: PropTypes.arrayOf(NodePropType).isRequired,
-    renderNode: PropTypes.oneOfType([
-        PropTypes.func,
-        PropTypes.object,
-    ]).isRequired,
+    renderNode: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,
 
     isInteractive: PropTypes.bool.isRequired,
     onMouseEnter: PropTypes.func,
     onMouseMove: PropTypes.func,
     onMouseLeave: PropTypes.func,
     onClick: PropTypes.func,
 
-    tooltip: PropTypes.oneOfType([
-        PropTypes.func,
-        PropTypes.object
-    ]).isRequired,
+    tooltip: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,
 
     blendMode: blendModePropType.isRequired,
 }

diff --git a/packages/scatterplot/src/NodeWrapper.js b/packages/scatterplot/src/NodeWrapper.js
@@ -70,7 +70,7 @@ const NodeWrapper = ({
         onMouseEnter: isInteractive ? handleMouseEnter : undefined,
         onMouseMove: isInteractive ? handleMouseMove : undefined,
         onMouseLeave: isInteractive ? handleMouseLeave : undefined,
-        onClick: (isInteractive && onClick) ? handleClick : undefined,
+        onClick: isInteractive && onClick ? handleClick : undefined,
     })
 }
 
@@ -88,10 +88,7 @@ NodeWrapper.propTypes = {
     onMouseLeave: PropTypes.func,
     onClick: PropTypes.func,
 
-    tooltip: PropTypes.oneOfType([
-        PropTypes.func,
-        PropTypes.object
-    ]).isRequired,
+    tooltip: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,
 
     blendMode: blendModePropType.isRequired,
 }

diff --git a/packages/scatterplot/src/ScatterPlot.js b/packages/scatterplot/src/ScatterPlot.js
@@ -8,7 +8,14 @@
  */
 import React, { memo, Fragment, useMemo } from 'react'
 import { TransitionMotion, spring } from 'react-motion'
-import { SvgWrapper, withContainer, useDimensions, useTheme, useMotionConfig, CartesianMarkers } from '@nivo/core'
+import {
+    SvgWrapper,
+    withContainer,
+    useDimensions,
+    useTheme,
+    useMotionConfig,
+    CartesianMarkers,
+} from '@nivo/core'
 import { Axes, Grid } from '@nivo/axes'
 import { BoxLegendSvg } from '@nivo/legends'
 import { Mesh } from '@nivo/voronoi'
@@ -21,7 +28,9 @@ const ScatterPlot = props => {
     const {
         data,
         xScale: xScaleSpec,
+        xFormat,
         yScale: yScaleSpec,
+        yFormat,
 
         width,
         height,
@@ -62,7 +71,9 @@ const ScatterPlot = props => {
     const { xScale, yScale, nodes } = useScatterPlot({
         data,
         xScaleSpec,
+        xFormat,
         yScaleSpec,
+        yFormat,
         width: innerWidth,
         height: innerHeight,
         nodeSize,
@@ -154,9 +165,7 @@ const ScatterPlot = props => {
 
                 if (typeof layer === 'function') {
                     return (
-                        <Fragment key={i}>
-                            {React.createElement(layer, customLayerProps)}
-                        </Fragment>
+                        <Fragment key={i}>{React.createElement(layer, customLayerProps)}</Fragment>
                     )
                 }
 

diff --git a/packages/scatterplot/src/StaticNodes.js b/packages/scatterplot/src/StaticNodes.js
@@ -45,21 +45,15 @@ const StaticNodes = ({
 
 StaticNodes.propTypes = {
     nodes: PropTypes.arrayOf(NodePropType).isRequired,
-    renderNode: PropTypes.oneOfType([
-        PropTypes.func,
-        PropTypes.object,
-    ]).isRequired,
+    renderNode: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,
 
     isInteractive: PropTypes.bool.isRequired,
     onMouseEnter: PropTypes.func,
     onMouseMove: PropTypes.func,
     onMouseLeave: PropTypes.func,
     onClick: PropTypes.func,
 
-    tooltip: PropTypes.oneOfType([
-        PropTypes.func,
-        PropTypes.object
-    ]).isRequired,
+    tooltip: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,
 
     blendMode: blendModePropType.isRequired,
 }

diff --git a/packages/scatterplot/src/Tooltip.js b/packages/scatterplot/src/Tooltip.js
@@ -14,7 +14,7 @@ const Tooltip = ({ node }) => {
     return (
         <BasicTooltip
             id={node.serieId}
-            value={`x: ${node.data.x}, y: ${node.data.y}`}
+            value={`x: ${node.data.formattedX}, y: ${node.data.formattedY}`}
             enableChip={true}
             color={node.style.color}
         />

diff --git a/packages/scatterplot/src/compute.js b/packages/scatterplot/src/compute.js
@@ -42,9 +42,7 @@ export const getNodeSizeGenerator = size => {
     throw new Error('symbolSize is invalid, it should be either a function, a number or an object')
 }
 
-export const computePoints = ({
-    series
-}) => {
+export const computePoints = ({ series, formatX, formatY }) => {
     return series.reduce(
         (agg, serie) => [
             ...agg,
@@ -53,19 +51,23 @@ export const computePoints = ({
                 serieId: serie.id,
                 x: d.position.x,
                 y: d.position.y,
-                data: { ...d.data, serie, id: `${serie.id}.${i}` },
+                data: {
+                    ...d.data,
+                    id: `${serie.id}.${i}`,
+                    formattedX: formatX(d.data.x),
+                    formattedY: formatY(d.data.y),
+                    serie,
+                },
             })),
         ],
         []
     )
 }
 
-export const computeLegendData = ({
-    series,
-}) => {
+export const computeLegendData = ({ series }) => {
     return series.map(serie => ({
         id: serie.id,
         label: serie.id,
         //color: getColor({ serie }),
     }))
-}
+}
diff --git a/packages/scatterplot/src/hooks.js b/packages/scatterplot/src/hooks.js
@@ -7,7 +7,7 @@
  * file that was distributed with this source code.
  */
 import { useMemo } from 'react'
-import { useTheme } from '@nivo/core'
+import { useTheme, useValueFormatter } from '@nivo/core'
 import { useOrdinalColorScale } from '@nivo/colors'
 import { computeXYScalesForSeries } from '@nivo/scales'
 import { computePoints, getNodeSizeGenerator } from './compute'
@@ -17,41 +17,43 @@ const useNodeSize = size => useMemo(() => getNodeSizeGenerator(size), [size])
 export const useScatterPlot = ({
     data,
     xScaleSpec,
+    xFormat,
     yScaleSpec,
+    yFormat,
     width,
     height,
     nodeSize,
     colors,
 }) => {
-    const {
-        series,
-        xScale,
-        yScale,
-    } = useMemo(
+    const { series, xScale, yScale } = useMemo(
         () => computeXYScalesForSeries(data, xScaleSpec, yScaleSpec, width, height),
         [data, xScaleSpec, yScaleSpec, width, height]
     )
 
-    const rawNodes = useMemo(
-        () => computePoints({ series }),
-        [series]
-    )
+    const formatX = useValueFormatter(xFormat)
+    const formatY = useValueFormatter(yFormat)
+    const rawNodes = useMemo(() => computePoints({ series, formatX, formatY }), [
+        series,
+        formatX,
+        formatY,
+    ])
 
     const getNodeSize = useNodeSize(nodeSize)
 
     const theme = useTheme()
     const getColor = useOrdinalColorScale(colors, 'serie.id')
 
     const nodes = useMemo(
-        () => rawNodes.map(rawNode => {
-            return {
-                ...rawNode,
-                size: getNodeSize(rawNode.data),
-                style: {
-                    color: getColor(rawNode.data)
+        () =>
+            rawNodes.map(rawNode => {
+                return {
+                    ...rawNode,
+                    size: getNodeSize(rawNode.data),
+                    style: {
+                        color: getColor(rawNode.data),
+                    },
                 }
-            }
-        }),
+            }),
         [rawNodes, getNodeSize, getColor]
     )
 

diff --git a/packages/scatterplot/src/index.js b/packages/scatterplot/src/index.js
@@ -11,3 +11,4 @@ export { default as ResponsiveScatterPlot } from './ResponsiveScatterPlot'
 export { default as ScatterPlotCanvas } from './ScatterPlotCanvas'
 export { default as ResponsiveScatterPlotCanvas } from './ResponsiveScatterPlotCanvas'
 export * from './props'
+export * from './hooks'
diff --git a/packages/scatterplot/src/props.js b/packages/scatterplot/src/props.js
@@ -36,7 +36,9 @@ const commonPropTypes = {
         })
     ).isRequired,
     xScale: scalePropType.isRequired,
+    xFormat: PropTypes.any,
     yScale: scalePropType.isRequired,
+    yFormat: PropTypes.any,
 
     layers: PropTypes.arrayOf(
         PropTypes.oneOfType([
@@ -61,10 +63,7 @@ const commonPropTypes = {
         }),
         PropTypes.func,
     ]).isRequired,
-    renderNode: PropTypes.oneOfType([
-        PropTypes.func,
-        PropTypes.object,
-    ]).isRequired,
+    renderNode: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,
 
     markers: PropTypes.arrayOf(
         PropTypes.shape({
@@ -85,10 +84,7 @@ const commonPropTypes = {
     onMouseLeave: PropTypes.func,
     onClick: PropTypes.func,
 
-    tooltip: PropTypes.oneOfType([
-        PropTypes.func,
-        PropTypes.object
-    ]).isRequired,
+    tooltip: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,
 
     legends: PropTypes.arrayOf(PropTypes.shape(LegendPropShape)).isRequired,
 }
@@ -154,7 +150,15 @@ export const NodePropType = PropTypes.shape({
     x: PropTypes.number.isRequired,
     y: PropTypes.number.isRequired,
     size: PropTypes.number.isRequired,
+    data: PropTypes.shape({
+        x: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.instanceOf(Date)])
+            .isRequired,
+        formattedX: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+        y: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.instanceOf(Date)])
+            .isRequired,
+        formattedY: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+    }).isRequired,
     style: PropTypes.shape({
         color: PropTypes.string.isRequired,
     }).isRequired,
-})
+})
diff --git a/website/src/data/components/scatterplot/meta.yml b/website/src/data/components/scatterplot/meta.yml
@@ -27,7 +27,7 @@ ScatterPlot:
 
     It lets you plot data on 2 dimensions, **x** & **y**, and can optionally
     show a third quantitative dimension if you enable **dynamic node size**,
-    please have a look at the `size` property for further information.
+    please have a look at the `nodeSize` property for further information.
 
     The responsive alternative of this component is
     `ResponsiveScatterPlot`, it also offers another