From 501ee0ffc4add6373d35d81fb291d20774bdd7ad Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rapha=C3=ABl=20Benitte?= Date: Sun, 2 Jun 2019 10:43:21 +0900 Subject: [PATCH] feat(scatterplot): rename symbolSize to nodeSize --- packages/scatterplot/package.json | 3 +- packages/scatterplot/src/ScatterPlot.js | 4 +- packages/scatterplot/src/StaticNodes.js | 40 +++++++++---------- packages/scatterplot/src/compute.js | 2 +- packages/scatterplot/src/hooks.js | 12 +++--- packages/scatterplot/src/props.js | 4 +- .../src/data/components/scatterplot/props.js | 4 +- website/src/pages/scatterplot/index.js | 2 +- 8 files changed, 33 insertions(+), 38 deletions(-) diff --git a/packages/scatterplot/package.json b/packages/scatterplot/package.json index bc4dd9119..113726159 100644 --- a/packages/scatterplot/package.json +++ b/packages/scatterplot/package.json @@ -33,8 +33,7 @@ "d3-scale": "^3.0.0", "d3-shape": "^1.3.5", "lodash": "^4.17.11", - "react-motion": "^0.5.2", - "recompose": "^0.30.0" + "react-motion": "^0.5.2" }, "peerDependencies": { "prop-types": ">= 15.5.10 < 16.0.0", diff --git a/packages/scatterplot/src/ScatterPlot.js b/packages/scatterplot/src/ScatterPlot.js index ecf80199d..8ced6cef3 100644 --- a/packages/scatterplot/src/ScatterPlot.js +++ b/packages/scatterplot/src/ScatterPlot.js @@ -32,7 +32,7 @@ const ScatterPlot = props => { colors, blendMode, - size, + nodeSize, renderNode, enableGridX, @@ -65,7 +65,7 @@ const ScatterPlot = props => { yScaleSpec, width: innerWidth, height: innerHeight, - size, + nodeSize, colors, }) diff --git a/packages/scatterplot/src/StaticNodes.js b/packages/scatterplot/src/StaticNodes.js index 939429c67..d5ca49672 100644 --- a/packages/scatterplot/src/StaticNodes.js +++ b/packages/scatterplot/src/StaticNodes.js @@ -23,28 +23,24 @@ const StaticNodes = ({ tooltip, blendMode, }) => { - return ( - <> - {nodes.map(node => ( - - ))} - - ) + return nodes.map(node => ( + + )) } StaticNodes.propTypes = { diff --git a/packages/scatterplot/src/compute.js b/packages/scatterplot/src/compute.js index 73477e808..0d4c17950 100644 --- a/packages/scatterplot/src/compute.js +++ b/packages/scatterplot/src/compute.js @@ -12,7 +12,7 @@ import isNumber from 'lodash/isNumber' import isPlainObject from 'lodash/isPlainObject' import { scaleLinear } from 'd3-scale' -export const getSizeGenerator = size => { +export const getNodeSizeGenerator = size => { if (typeof size === 'function') return size if (isNumber(size)) return () => size if (isPlainObject(size)) { diff --git a/packages/scatterplot/src/hooks.js b/packages/scatterplot/src/hooks.js index e30e291da..ebdbdcb1c 100644 --- a/packages/scatterplot/src/hooks.js +++ b/packages/scatterplot/src/hooks.js @@ -10,9 +10,9 @@ import { useMemo } from 'react' import { useTheme } from '@nivo/core' import { useOrdinalColorScale } from '@nivo/colors' import { computeXYScalesForSeries } from '@nivo/scales' -import { computePoints, getSizeGenerator } from './compute' +import { computePoints, getNodeSizeGenerator } from './compute' -const useSize = size => useMemo(() => getSizeGenerator(size), [size]) +const useNodeSize = size => useMemo(() => getNodeSizeGenerator(size), [size]) export const useScatterPlot = ({ data, @@ -20,7 +20,7 @@ export const useScatterPlot = ({ yScaleSpec, width, height, - size, + nodeSize, colors, }) => { const { @@ -37,7 +37,7 @@ export const useScatterPlot = ({ [series] ) - const getSize = useSize(size) + const getNodeSize = useNodeSize(nodeSize) const theme = useTheme() const getColor = useOrdinalColorScale(colors, 'serie.id') @@ -46,13 +46,13 @@ export const useScatterPlot = ({ () => rawNodes.map(rawNode => { return { ...rawNode, - size: getSize(rawNode.data), + size: getNodeSize(rawNode.data), style: { color: getColor(rawNode.data) } } }), - [rawNodes, getSize, getColor] + [rawNodes, getNodeSize, getColor] ) return { diff --git a/packages/scatterplot/src/props.js b/packages/scatterplot/src/props.js index 39bfd4483..d0ccd8f00 100644 --- a/packages/scatterplot/src/props.js +++ b/packages/scatterplot/src/props.js @@ -52,7 +52,7 @@ const commonPropTypes = { axisBottom: axisPropType, axisLeft: axisPropType, - size: PropTypes.oneOfType([ + nodeSize: PropTypes.oneOfType([ PropTypes.number, PropTypes.shape({ key: PropTypes.string.isRequired, @@ -122,7 +122,7 @@ const commonDefaultProps = { axisBottom: {}, axisLeft: {}, - size: 9, + nodeSize: 9, renderNode: Node, colors: { scheme: 'nivo' }, diff --git a/website/src/data/components/scatterplot/props.js b/website/src/data/components/scatterplot/props.js index 468e32722..28d58755b 100644 --- a/website/src/data/components/scatterplot/props.js +++ b/website/src/data/components/scatterplot/props.js @@ -134,9 +134,9 @@ const props = [ }, }, { - key: 'size', + key: 'nodeSize', group: 'Base', - defaultValue: defaults.size, + defaultValue: defaults.nodeSize, type: 'number | object | Function', help: `How to compute node size, static or dynamic.`, description: ` diff --git a/website/src/pages/scatterplot/index.js b/website/src/pages/scatterplot/index.js index ac363ec46..e747917d3 100644 --- a/website/src/pages/scatterplot/index.js +++ b/website/src/pages/scatterplot/index.js @@ -36,7 +36,7 @@ const initialProperties = { colors: ScatterPlotDefaultProps.colors, blendMode: 'multiply', - size: ScatterPlotDefaultProps.size, + nodeSize: ScatterPlotDefaultProps.nodeSize, enableGridX: ScatterPlotDefaultProps.enableGridX, enableGridY: ScatterPlotDefaultProps.enableGridY,