feat(chord): add ability to customize chord borders color

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

Hide file tree

Showing 7 changed files with 33 additions and 15 deletions.
diff --git a/src/components/charts/chord/Chord.js b/src/components/charts/chord/Chord.js
@@ -25,12 +25,14 @@ const Chord = ({
 
     // arcs
     arcBorderWidth,
+    getArcBorderColor,
 
     // ribbons
     ribbonBorderWidth,
+    getRibbonBorderColor,
 
     // labels
-    enableLabels,
+    enableLabel,
     getLabel, // computed
     labelOffset,
     labelRotation,
@@ -77,6 +79,7 @@ const Chord = ({
                                 ribbons={ribbons}
                                 shapeGenerator={ribbonGenerator}
                                 borderWidth={ribbonBorderWidth}
+                                getBorderColor={getRibbonBorderColor}
                                 getOpacity={getRibbonOpacity}
                                 setCurrent={setCurrentRibbon}
                                 theme={theme}
@@ -88,14 +91,15 @@ const Chord = ({
                                 arcs={arcs}
                                 shapeGenerator={arcGenerator}
                                 borderWidth={arcBorderWidth}
+                                getBorderColor={getArcBorderColor}
                                 getOpacity={getArcOpacity}
                                 setCurrent={setCurrentArc}
                                 theme={theme}
                                 showTooltip={showTooltip}
                                 hideTooltip={hideTooltip}
                                 {...motionProps}
                             />
-                            {enableLabels && (
+                            {enableLabel && (
                                 <ChordLabels
                                     arcs={arcs}
                                     radius={radius + labelOffset}

diff --git a/src/components/charts/chord/ChordArcs.js b/src/components/charts/chord/ChordArcs.js
@@ -15,7 +15,8 @@ import ChordArcTooltip from './ChordArcTooltip'
 
 const ChordArcs = ({
     arcs,
-    arcBorderWidth,
+    borderWidth,
+    getBorderColor,
     getOpacity,
     shapeGenerator,
     theme,
@@ -32,7 +33,7 @@ const ChordArcs = ({
         const arcTooltip = <ChordArcTooltip arc={arc} theme={theme} />
 
         return {
-            strokeWidth: arcBorderWidth,
+            strokeWidth: borderWidth,
             onMouseEnter: e => {
                 setCurrent(arc)
                 showTooltip(arcTooltip, e)
@@ -59,7 +60,7 @@ const ChordArcs = ({
                             d={shapeGenerator(arc)}
                             fill={arc.color}
                             fillOpacity={opacity}
-                            stroke={arc.color}
+                            stroke={getBorderColor(arc)}
                             strokeOpacity={opacity}
                             {...commonProps(arc)}
                         />
@@ -104,7 +105,7 @@ const ChordArcs = ({
                                 })}
                                 fill={color}
                                 fillOpacity={style.opacity}
-                                stroke={color}
+                                stroke={getBorderColor({ ...arc, color })}
                                 strokeOpacity={style.opacity}
                                 {...commonProps(arc)}
                             />

diff --git a/src/components/charts/chord/ChordCanvas.js b/src/components/charts/chord/ChordCanvas.js
@@ -52,7 +52,7 @@ class ChordCanvas extends Component {
             outerHeight,
 
             // labels
-            enableLabels,
+            enableLabel,
             getLabel, // computed
             labelOffset,
             labelRotation,
@@ -107,7 +107,7 @@ class ChordCanvas extends Component {
 
             this.ctx.restore()
 
-            if (enableLabels) {
+            if (enableLabel) {
                 const labelTextColor = getLabelTextColor(arc, theme)
                 const angle = midAngle(arc)
                 const props = getPolarLabelProps(radius + labelOffset, angle, labelRotation)

diff --git a/src/components/charts/chord/ChordRibbons.js b/src/components/charts/chord/ChordRibbons.js
@@ -79,7 +79,8 @@ const ribbonWillLeave = springConfig => ({ data: ribbon }) => ({
 const ChordRibbons = ({
     ribbons,
     shapeGenerator,
-    ribbonBorderWidth,
+    borderWidth,
+    getBorderColor,
     getOpacity,
     theme,
     setCurrent,
@@ -111,7 +112,7 @@ const ChordRibbons = ({
         )
 
         return {
-            strokeWidth: ribbonBorderWidth,
+            strokeWidth: borderWidth,
             onMouseEnter: e => {
                 setCurrent(ribbon)
                 showTooltip(ribbonTooltip, e)
@@ -138,7 +139,7 @@ const ChordRibbons = ({
                             d={shapeGenerator(ribbon)}
                             fill={ribbon.source.color}
                             fillOpacity={opacity}
-                            stroke={ribbon.source.color}
+                            stroke={getBorderColor({ ...ribbon, color: ribbon.source.color })}
                             strokeOpacity={opacity}
                             {...commonProps(ribbon)}
                         />
@@ -196,7 +197,7 @@ const ChordRibbons = ({
                                 })}
                                 fill={color}
                                 fillOpacity={style.opacity}
-                                stroke={color}
+                                stroke={getBorderColor({ ...ribbon, color })}
                                 strokeOpacity={style.opacity}
                                 {...commonProps(ribbon)}
                             />
@@ -212,6 +213,7 @@ ChordRibbons.propTypes = {
     ribbons: PropTypes.array.isRequired,
     shapeGenerator: PropTypes.func.isRequired,
     borderWidth: PropTypes.number.isRequired,
+    getBorderColor: PropTypes.func.isRequired,
     getOpacity: PropTypes.func.isRequired,
     setCurrent: PropTypes.func.isRequired,
     theme: PropTypes.object.isRequired,

diff --git a/src/components/charts/chord/enhance.js b/src/components/charts/chord/enhance.js
@@ -147,5 +147,11 @@ export default Component =>
                 return { ribbons, arcs }
             }
         ),
+        withPropsOnChange(['arcBorderColor'], ({ arcBorderColor }) => ({
+            getArcBorderColor: getInheritedColorGenerator(arcBorderColor),
+        })),
+        withPropsOnChange(['ribbonBorderColor'], ({ ribbonBorderColor }) => ({
+            getRibbonBorderColor: getInheritedColorGenerator(ribbonBorderColor),
+        })),
         pure
     )(Component)
diff --git a/src/components/charts/chord/props.js b/src/components/charts/chord/props.js
@@ -19,13 +19,17 @@ export const ChordPropTypes = {
     // arcs
     arcOpacity: PropTypes.number.isRequired,
     arcBorderWidth: PropTypes.number.isRequired,
+    arcBorderColor: PropTypes.any.isRequired,
+    getArcBorderColor: PropTypes.func.isRequired,
 
     // ribbons
     ribbonOpacity: PropTypes.number.isRequired,
     ribbonBorderWidth: PropTypes.number.isRequired,
+    ribbonBorderColor: PropTypes.any.isRequired,
+    getRibbonBorderColor: PropTypes.func.isRequired,
 
     // labels
-    enableLabels: PropTypes.bool.isRequired,
+    enableLabel: PropTypes.bool.isRequired,
     label: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
     getLabel: PropTypes.func.isRequired, // computed
     labelOffset: PropTypes.number.isRequired,
@@ -55,13 +59,15 @@ export const ChordDefaultProps = {
     // arcs
     arcOpacity: 1,
     arcBorderWidth: 1,
+    arcBorderColor: 'inherit:darker(0.4)',
 
     // ribbons
     ribbonOpacity: 0.5,
     ribbonBorderWidth: 1,
+    ribbonBorderColor: 'inherit:darker(0.4)',
 
     // labels
-    enableLabels: true,
+    enableLabel: true,
     label: 'id',
     labelOffset: 12,
     labelRotation: 0,

diff --git a/src/components/charts/stream/enhance.js b/src/components/charts/stream/enhance.js
@@ -51,7 +51,6 @@ 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 => {