feat(bump): add active/inactive state to points

plouc · Dec 13, 2019 · ee906f4 · ee906f4
1 parent b4c739d
commit ee906f4
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 2 deletions.
diff --git a/packages/bump/src/bump/Point.js b/packages/bump/src/bump/Point.js
@@ -29,6 +29,8 @@ Point.propTypes = {
     data: PropTypes.object.isRequired,
     x: PropTypes.number.isRequired,
     y: PropTypes.number.isRequired,
+    isActive: PropTypes.bool.isRequired,
+    isInactive: PropTypes.bool.isRequired,
     size: PropTypes.number.isRequired,
     color: PropTypes.string.isRequired,
     borderColor: PropTypes.string.isRequired,

diff --git a/packages/bump/src/bump/Points.js b/packages/bump/src/bump/Points.js
@@ -21,6 +21,8 @@ const Points = ({ pointComponent, points }) => {
                 data: point.data,
                 x: point.x,
                 y: point.y,
+                isActive: point.isActive,
+                isInactive: point.isInactive,
                 size: point.style.size,
                 color: point.color,
                 borderColor: point.borderColor,
@@ -50,6 +52,8 @@ const Points = ({ pointComponent, points }) => {
                             data: point.data,
                             x: style.x,
                             y: point.y,
+                            isActive: point.isActive,
+                            isInactive: point.isInactive,
                             size: Math.max(style.size, 0),
                             color: point.color,
                             borderColor: point.borderColor,
@@ -70,6 +74,8 @@ Points.propTypes = {
             data: PropTypes.object.isRequired,
             x: PropTypes.number.isRequired,
             y: PropTypes.number.isRequired,
+            isActive: PropTypes.bool.isRequired,
+            isInactive: PropTypes.bool.isRequired,
             color: PropTypes.string.isRequired,
             borderColor: PropTypes.string.isRequired,
             style: PropTypes.shape({

diff --git a/packages/bump/src/bump/hooks.js b/packages/bump/src/bump/hooks.js
@@ -211,6 +211,8 @@ export const useBump = ({
                     ...rawPoint,
                     serie,
                     serieId: serie.id,
+                    isActive: currentSerie === serie.id,
+                    isInactive: currentSerie !== null && currentSerie !== serie.id,
                 }
                 point.color = getPointColor(point)
                 point.borderColor = getPointBorderColor(point)
@@ -220,7 +222,7 @@ export const useBump = ({
         })
 
         return pts
-    }, [series, getPointColor, getPointBorderColor, getPointStyle])
+    }, [series, getPointColor, getPointBorderColor, getPointStyle, currentSerie])
 
     return {
         xScale,

diff --git a/packages/bump/stories/bump.stories.js b/packages/bump/stories/bump.stories.js
@@ -41,6 +41,52 @@ const stories = storiesOf('Bump', module)
 
 stories.add('default', () => <Bump {...commonProps} />)
 
-stories.add('Custom points', () => <Bump {...commonProps} />)
+const CustomPoint = ({ x, y, isActive, isInactive, size, color, borderColor, borderWidth }) => {
+    return (
+        <g transform={`translate(${x}, ${y})`} style={{ pointerEvents: 'none' }}>
+            <rect
+                x={size * -0.5 - 4}
+                y={size * -0.5 + 4}
+                width={size + borderWidth}
+                height={size + borderWidth}
+                fill="rgba(0, 0, 0, .07)"
+            />
+            <rect
+                x={size * -0.5}
+                y={size * -0.5}
+                width={size}
+                height={size}
+                fill={color}
+                stroke={borderColor}
+                strokeWidth={borderWidth}
+            />
+            {isActive && (
+                <text textAnchor="middle" y={4} fill={borderColor}>
+                    A
+                </text>
+            )}
+            {isInactive && (
+                <text textAnchor="middle" y={4} fill={borderColor}>
+                    I
+                </text>
+            )}
+        </g>
+    )
+}
+
+stories.add('Custom points', () => (
+    <Bump
+        {...commonProps}
+        pointComponent={CustomPoint}
+        pointSize={20}
+        activePointSize={24}
+        inactivePointSize={16}
+        pointBorderWidth={2}
+        activePointBorderWidth={4}
+        inactivePointBorderWidth={1}
+        pointColor="#ffffff"
+        pointBorderColor={{ from: 'serie.color' }}
+    />
+))
 
 stories.add('Missing data', () => <Bump {...commonProps} />)