feat(stream): add border suppport

plouc · Sep 8, 2017 · 5eabc45 · 5eabc45
1 parent 73adbeb
commit 5eabc45
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 12 deletions.
diff --git a/src/components/charts/bar/Bar.js b/src/components/charts/bar/Bar.js
@@ -164,10 +164,10 @@ const Bar = ({
                                 key: bar.key,
                                 data: bar,
                                 style: {
-                                    x: spring(bar.x, motionProps),
-                                    y: spring(bar.y, motionProps),
-                                    width: spring(bar.width, motionProps),
-                                    height: spring(bar.height, motionProps),
+                                    x: spring(bar.x, springConfig),
+                                    y: spring(bar.y, springConfig),
+                                    width: spring(bar.width, springConfig),
+                                    height: spring(bar.height, springConfig),
                                 },
                             }))}
                         >

diff --git a/src/components/charts/stream/Stream.js b/src/components/charts/stream/Stream.js
@@ -40,10 +40,12 @@ const Stream = ({
     enableGridX,
     enableGridY,
 
-    // theming
+    // styling
     theme,
     getColor,
     fillOpacity,
+    borderWidth,
+    getBorderColor,
 
     // motion
     animate,
@@ -107,6 +109,8 @@ const Stream = ({
                     <StreamLayers
                         layers={enhancedLayers}
                         fillOpacity={fillOpacity}
+                        borderWidth={borderWidth}
+                        getBorderColor={getBorderColor}
                         showTooltip={showTooltip}
                         hideTooltip={hideTooltip}
                         theme={theme}

diff --git a/src/components/charts/stream/StreamLayers.js b/src/components/charts/stream/StreamLayers.js
@@ -14,13 +14,17 @@ import BasicTooltip from '../../tooltip/BasicTooltip'
 
 const StreamLayers = ({
     layers,
+
+    // styling
     fillOpacity,
+    borderWidth,
+    getBorderColor,
+    theme,
 
+    // interactivity
     showTooltip,
     hideTooltip,
 
-    theme,
-
     // motion
     animate,
     motionStiffness,
@@ -29,12 +33,15 @@ const StreamLayers = ({
     if (animate !== true) {
         return (
             <g>
-                {layers.map(({ id, path, color }, i) => {
+                {layers.map((layer, i) => {
+                    const { id, path, color } = layer
+
                     const handleTooltip = e =>
                         showTooltip(
                             <BasicTooltip id={id} enableChip={true} color={color} theme={theme} />,
                             e
                         )
+
                     return (
                         <path
                             key={i}
@@ -44,6 +51,8 @@ const StreamLayers = ({
                             d={path}
                             fill={color}
                             fillOpacity={fillOpacity}
+                            stroke={getBorderColor(layer)}
+                            strokeWidth={borderWidth}
                         />
                     )
                 })}
@@ -58,12 +67,15 @@ const StreamLayers = ({
 
     return (
         <g>
-            {layers.map(({ id, path, color }, i) => {
+            {layers.map((layer, i) => {
+                const { id, path, color } = layer
+
                 const handleTooltip = e =>
                     showTooltip(
                         <BasicTooltip id={id} enableChip={true} color={color} theme={theme} />,
                         e
                     )
+
                 return (
                     <SmartMotion
                         key={i}
@@ -79,6 +91,8 @@ const StreamLayers = ({
                                 onMouseEnter={handleTooltip}
                                 onMouseLeave={hideTooltip}
                                 {...style}
+                                stroke={getBorderColor(layer)}
+                                strokeWidth={borderWidth}
                             />
                         )}
                     </SmartMotion>
@@ -90,7 +104,8 @@ const StreamLayers = ({
 
 StreamLayers.propTypes = {
     fillOpacity: PropTypes.number.isRequired,
-
+    borderWidth: PropTypes.number.isRequired,
+    getBorderColor: PropTypes.func.isRequired,
     theme: PropTypes.object.isRequired,
 
     // motion

diff --git a/src/components/charts/stream/enhance.js b/src/components/charts/stream/enhance.js
@@ -16,7 +16,7 @@ import pure from 'recompose/pure'
 import withPropsOnChange from 'recompose/withPropsOnChange'
 import { stackOrderFromProp, stackOffsetFromProp } from '../../../props'
 import { withTheme, withCurve, withDimensions, withMotion } from '../../../hocs'
-import { getColorRange } from '../../../lib/colors'
+import { getColorRange, getInheritedColorGenerator } from '../../../lib/colors'
 import { StreamDefaultProps } from './props'
 
 const stackMin = layers => min(layers.reduce((acc, layer) => [...acc, ...layer.map(d => d[0])], []))
@@ -39,6 +39,9 @@ export default Component =>
         withPropsOnChange(['colors'], ({ colors }) => ({
             getColor: getColorRange(colors),
         })),
+        withPropsOnChange(['borderColor'], ({ borderColor }) => ({
+            getBorderColor: getInheritedColorGenerator(borderColor),
+        })),
         withPropsOnChange(['keys', 'offsetType', 'order'], ({ keys, offsetType, order }) => ({
             stack: d3Stack()
                 .keys(keys)
@@ -48,6 +51,7 @@ export default Component =>
         withPropsOnChange(
             ['stack', 'data', 'width', 'height'],
             ({ stack, data, width, height }) => {
+                console.log('compute')
                 const layers = stack(data)
                 layers.forEach(layer => {
                     layer.forEach(point => {

diff --git a/src/components/charts/stream/props.js b/src/components/charts/stream/props.js
@@ -31,10 +31,15 @@ export const StreamPropTypes = {
     enableGridX: PropTypes.bool.isRequired,
     enableGridY: PropTypes.bool.isRequired,
 
+    // border
+    borderWidth: PropTypes.number.isRequired,
+    borderColor: PropTypes.any.isRequired,
+    getBorderColor: PropTypes.func.isRequired, // computed
+
     // theming
     colors: PropTypes.any.isRequired,
     fillOpacity: PropTypes.number.isRequired,
-    getColor: PropTypes.func.isRequired,
+    getColor: PropTypes.func.isRequired, // computed
 
     // interactivity
     isInteractive: PropTypes.bool,
@@ -53,6 +58,9 @@ export const StreamDefaultProps = {
     enableGridX: true,
     enableGridY: false,
 
+    borderWidth: 3,
+    borderColor: 'inherit:darker(1)',
+
     // theming
     colors: 'nivo',
     fillOpacity: 1,