feat(legends): add default text color + canvas support for text color

plouc · Jan 27, 2018 · 20a30ab · 20a30ab
1 parent 8a985a4
commit 20a30ab
Show file tree

Hide file tree

Showing 5 changed files with 6 additions and 2 deletions.
diff --git a/packages/nivo-legends/src/canvas/index.js b/packages/nivo-legends/src/canvas/index.js
@@ -45,6 +45,7 @@ export const renderLegendToCanvas = (
         itemsSpacing = LegendSvg.defaultProps.itemsSpacing,
         symbolSize = LegendSvgItem.defaultProps.symbolSize,
         symbolSpacing = LegendSvgItem.defaultProps.symbolSpacing,
+        textColor = LegendSvg.defaultProps.textColor,
         // @todo add support for shapes
         // symbolShape = LegendSvgItem.defaultProps.symbolShape,
     }
@@ -99,7 +100,7 @@ export const renderLegendToCanvas = (
 
         ctx.textAlign = textPropsMapping.align[labelAnchor]
         ctx.textBaseline = textPropsMapping.baseline[labelAlignment]
-        ctx.fillStyle = '#000000'
+        ctx.fillStyle = textColor
         ctx.fillText(d.label, itemX + labelX, itemY + labelY)
     })
 

diff --git a/packages/nivo-legends/src/props.js b/packages/nivo-legends/src/props.js
@@ -76,4 +76,5 @@ export const LegendPropShape = {
     symbolSize: PropTypes.number,
     symbolSpacing: PropTypes.number,
     symbolShape: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+    textColor: PropTypes.string
 }
diff --git a/packages/nivo-legends/src/svg/BoxLegendSvg.js b/packages/nivo-legends/src/svg/BoxLegendSvg.js
@@ -128,7 +128,7 @@ BoxLegendSvg.propTypes = {
     symbolSize: PropTypes.number,
     symbolSpacing: PropTypes.number,
     symbolShape: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
-    textColor: PropTypes.string.isRequired,
+    textColor: PropTypes.string,
 }
 
 BoxLegendSvg.defaultProps = {

diff --git a/packages/nivo-legends/src/svg/LegendSvg.js b/packages/nivo-legends/src/svg/LegendSvg.js
@@ -129,6 +129,7 @@ LegendSvg.defaultProps = {
     // items
     itemDirection: DIRECTION_LEFT_TO_RIGHT,
     itemsSpacing: 0,
+    textColor: 'black',
 }
 
 export default LegendSvg
diff --git a/packages/nivo-legends/tests/svg/LegendSvgItem.test.js b/packages/nivo-legends/tests/svg/LegendSvgItem.test.js
@@ -23,6 +23,7 @@ const commonProps = {
     height: 36,
     label: 'testing',
     fill: 'red',
+    textColor: 'black',
 }
 
 const directions = [