feat(scatterplot): rename symbolSize to nodeSize

plouc · Jun 8, 2019 · 501ee0f · 501ee0f
1 parent 4b667da
commit 501ee0f
Show file tree

Hide file tree

Showing 8 changed files with 33 additions and 38 deletions.
diff --git 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
@@ -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
@@ -23,28 +23,24 @@ const StaticNodes = ({
     tooltip,
     blendMode,
 }) => {
-    return (
-        <>
-            {nodes.map(node => (
-                <NodeWrapper
-                    key={node.id}
-                    node={node}
-                    renderNode={renderNode}
-                    x={node.x}
-                    y={node.y}
-                    size={node.size}
-                    color={node.style.color}
-                    isInteractive={isInteractive}
-                    onMouseEnter={onMouseEnter}
-                    onMouseMove={onMouseMove}
-                    onMouseLeave={onMouseLeave}
-                    onClick={onClick}
-                    tooltip={tooltip}
-                    blendMode={blendMode}
-                />
-            ))}
-        </>
-    )
+    return nodes.map(node => (
+        <NodeWrapper
+            key={node.id}
+            node={node}
+            renderNode={renderNode}
+            x={node.x}
+            y={node.y}
+            size={node.size}
+            color={node.style.color}
+            isInteractive={isInteractive}
+            onMouseEnter={onMouseEnter}
+            onMouseMove={onMouseMove}
+            onMouseLeave={onMouseLeave}
+            onClick={onClick}
+            tooltip={tooltip}
+            blendMode={blendMode}
+        />
+    ))
 }
 
 StaticNodes.propTypes = {

diff --git 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
@@ -10,17 +10,17 @@ 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,
     xScaleSpec,
     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
@@ -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
@@ -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
@@ -36,7 +36,7 @@ const initialProperties = {
     colors: ScatterPlotDefaultProps.colors,
     blendMode: 'multiply',
 
-    size: ScatterPlotDefaultProps.size,
+    nodeSize: ScatterPlotDefaultProps.nodeSize,
 
     enableGridX: ScatterPlotDefaultProps.enableGridX,
     enableGridY: ScatterPlotDefaultProps.enableGridY,