Add fontColor as a configuration option for node's <text> fill property #64
Conversation
src/components/node/Node.jsx
Outdated
| dy: CONST.NODE_LABEL_DY, | ||
| fontSize: this.props.fontSize, | ||
| fontWeight: this.props.fontWeight, | ||
| fill: this.props.fontColor, |
There was a problem hiding this comment.
Prettier ran and formatted this file so it's hard to tell, but this is the main change in this file (the addition of fill on textProps)
There was a problem hiding this comment.
Regarding the indentation can you please change the file react-d3-graph/.prettierrc.js? It has a typo 😄 , tabWidt should be tabWidth: 4, this should make prettier reindent the file correctly. Thanks!
|
I'll get to this tonight and fix the tests |
|
Nice one @dmmulroy 👌, I'll complete the code review asap. |
|
Fixed up the tests, everything should be good to go! |
src/components/graph/graph.config.js
Outdated
| @@ -59,6 +59,7 @@ | |||
| * property for all nodes' labels. | |||
| * @param {string} [node.fontWeight='normal'] - {@link https://developer.mozilla.org/en/docs/Web/CSS/font-weight?v=control|font-weight} | |||
| * property for all nodes' labels. | |||
| * @param {string} [node.fontWeight='normal'] - fill color for node's <text> svg label | |||
There was a problem hiding this comment.
Just some minor details here:
node.fontColor='black'instead ofnode.fontWeight;- Properties are ordered alphabetically, so
fontColorshould be on top offontWeight(both here and in the config object)
sandbox/rd3g.sandbox.bundle.js
Outdated
| @@ -3,7 +3,7 @@ | |||
| object-assign | |||
There was a problem hiding this comment.
Please check out this change, I'll generate the sandbox bundle upon a new rd3g release, thanks
src/components/graph/graph.helper.js
Outdated
| @@ -294,6 +294,7 @@ function buildNodeProps(node, config, nodeCallbacks = {}, highlightedNode, highl | |||
| const dx = fontSize * t + nodeSize / 100 + 1.5; | |||
| const strokeWidth = highlight ? config.node.highlightStrokeWidth : config.node.strokeWidth; | |||
| const svg = node.svg || config.node.svg; | |||
| const fontColor = config.node.fontColor || 'green'; | |||
There was a problem hiding this comment.
Please use the following:
const fontColor = node.fontColor || config.node.fontColor;This way each node will be able to override the global defined color (the global is the on in config.node.fontColor)
src/components/node/Node.jsx
Outdated
| @@ -27,6 +27,7 @@ import nodeHelper from './node.helper'; | |||
| * fontSize=10 | |||
| * dx=90 | |||
| * fontWeight='normal' | |||
| * fontColor='black' | |||
There was a problem hiding this comment.
Place fontColor on top of fontWeight
| @@ -22,6 +22,7 @@ exports[`Snapshot - Node Component should match snapshot 1`] = ` | |||
| <text | |||
| dx=".90em" | |||
| dy=".35em" | |||
| fill={undefined} | |||
There was a problem hiding this comment.
Please check whether this value should have value black
|
Changes should be in |
This enables users to set a fontColor under the node configuration option that will set the Node Components svg elements fill color.