feat(bar): add support for border on Bar component

plouc · Sep 10, 2017 · 7f5ac7c · 7f5ac7c
1 parent cd4c166
commit 7f5ac7c
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 1 deletion.
diff --git a/src/components/charts/bar/Bar.js b/src/components/charts/bar/Bar.js
@@ -92,6 +92,8 @@ const Bar = ({
     defs,
     fill,
     borderRadius,
+    borderWidth,
+    getBorderColor,
 
     // motion
     animate,
@@ -154,6 +156,7 @@ const Bar = ({
             {({ showTooltip, hideTooltip }) => {
                 const commonProps = {
                     borderRadius,
+                    borderWidth,
                     enableLabel,
                     labelSkipWidth,
                     labelSkipHeight,
@@ -194,6 +197,7 @@ const Bar = ({
                                             height: Math.max(style.height, 0),
                                             label: getLabel(bar.data),
                                             labelColor: getLabelTextColor(baseProps, theme),
+                                            borderColor: getBorderColor(baseProps),
                                         })
                                     })}
                                 </g>
@@ -206,9 +210,10 @@ const Bar = ({
                             key: d.key,
                             ...d,
                             ...commonProps,
-                            label: getLabel(d),
+                            label: getLabel(d.data),
                             shouldRenderLabel: shouldRenderLabel(d),
                             labelColor: getLabelTextColor(d, theme),
+                            borderColor: getBorderColor(d),
                         })
                     )
                 }

diff --git a/src/components/charts/bar/BarItem.js b/src/components/charts/bar/BarItem.js
@@ -22,6 +22,8 @@ const BarItem = ({
     height,
     borderRadius,
     color,
+    borderWidth,
+    borderColor,
 
     label,
     shouldRenderLabel,
@@ -53,6 +55,8 @@ const BarItem = ({
                 rx={borderRadius}
                 ry={borderRadius}
                 fill={data.fill ? data.fill : color}
+                strokeWidth={borderWidth}
+                stroke={borderColor}
                 onMouseEnter={handleTooltip}
                 onMouseMove={handleTooltip}
                 onMouseLeave={hideTooltip}
@@ -89,6 +93,8 @@ BarItem.propTypes = {
     height: PropTypes.number.isRequired,
     color: PropTypes.string.isRequired,
     borderRadius: PropTypes.number.isRequired,
+    borderWidth: PropTypes.number.isRequired,
+    borderColor: PropTypes.string.isRequired,
 
     label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
     shouldRenderLabel: PropTypes.bool.isRequired,

diff --git a/src/components/charts/bar/enhance.js b/src/components/charts/bar/enhance.js
@@ -37,5 +37,8 @@ export default Component =>
         withPropsOnChange(['label', 'labelFormat'], ({ label, labelFormat }) => ({
             getLabel: getLabelGenerator(label, labelFormat),
         })),
+        withPropsOnChange(['borderColor'], ({ borderColor }) => ({
+            getBorderColor: getInheritedColorGenerator(borderColor),
+        })),
         pure
     )(Component)
diff --git a/src/components/charts/bar/props.js b/src/components/charts/bar/props.js
@@ -64,6 +64,9 @@ export const BarPropTypes = {
                 .isRequired,
         })
     ).isRequired,
+    borderWidth: PropTypes.number.isRequired,
+    borderColor: PropTypes.any.isRequired,
+    getBorderColor: PropTypes.func.isRequired,
 
     // interactivity
     isInteractive: PropTypes.bool,
@@ -107,6 +110,8 @@ export const BarDefaultProps = {
 
     defs: [],
     fill: [],
+    borderWidth: 0,
+    borderColor: 'inherit',
 
     // interactivity
     isInteractive: true,