Add Support to pass a function to node.labelProperty (#135)

* Checking for function in labelProperty and assigning output as new value, otherwise defaulting to original method

* Applying marvel config to demonstrate function usage.

* Updating sandbox bundle

* Adding try catch in case user function fails

* Applying string template suggested changes

* Removing try catch and renaming variable assignment to utilize short hand

* Reverting sandbox changes

* Update graph.config labelProperty jsdoc

* Improve labelProperty function in sandbox marvel.config

Author: dgautsch

sandbox/data/marvel/marvel.config.js

@@ -30,7 +30,7 @@ module.exports = {
         highlightFontWeight: 'bold',
         highlightStrokeColor: 'red',
         highlightStrokeWidth: 1.5,
-        labelProperty: 'id',
+        labelProperty: n => (n.name ? `${n.id} - ${n.name}` : n.id),
         mouseCursor: 'crosshair',
         opacity: 0.9,
         renderLabel: true,

src/components/graph/graph.config.js

@@ -92,9 +92,19 @@
  * @param {string} [node.highlightFontWeight='normal'] - fontWeight in highlighted state.
  * @param {string} [node.highlightStrokeColor='SAME'] - strokeColor in highlighted state.
  * @param {number} [node.highlightStrokeWidth=1.5] - strokeWidth in highlighted state.
- * @param {string} [node.labelProperty='id'] - this is the node property that will be used in runtime to
+ * @param {string|Function} [node.labelProperty='id'] - this is the node property that will be used in runtime to
  * fetch the label content. You just need to add some property (e.g. firstName) to the node payload and then set
- * node.labelProperty to be **'firstName'**.
+ * node.labelProperty to be **'firstName'**. **This can also be a function!**, if you pass a function here it will be called
+ * to obtain the `label` value on the fly, as a client you will receive all the node information that you passed down into react-d3-graph,
+ * so the signature of the function would be:
+ * ```javascript
+ * function myCustomLabelBuilder(node) {
+ *     // do stuff to get the final result...
+ *     return 'label string';
+ * }
+ * ```
+ * Then you just need to make sure that you pass this function in the config in `config.node.labelProperty`.
+ * <br/>
  * @param {string} [node.mouseCursor='pointer'] - {@link https://developer.mozilla.org/en/docs/Web/CSS/cursor?v=control|cursor}
  * property for when some node is mouse hovered.
  * @param {number} [node.opacity=1] - by default all nodes will have this opacity value.

src/components/graph/graph.helper.js

@@ -342,6 +342,12 @@ function buildNodeProps(node, config, nodeCallbacks = {}, highlightedNode, highl
         stroke = config.node.highlightStrokeColor;
     }
 
+    let label = node[config.node.labelProperty] || node.id;
+
+    if (typeof config.node.labelProperty === 'function') {
+        label = config.node.labelProperty(node);
+    }
+
     const t = 1 / transform;
     const nodeSize = node.size || config.node.size;
     const fontSize = highlight ? config.node.highlightFontSize : config.node.fontSize;
@@ -362,7 +368,7 @@ function buildNodeProps(node, config, nodeCallbacks = {}, highlightedNode, highl
         dx,
         fontWeight: highlight ? config.node.highlightFontWeight : config.node.fontWeight,
         id: node.id,
-        label: node[config.node.labelProperty] || node.id,
+        label,
         onClickNode: nodeCallbacks.onClickNode,
         onRightClickNode: nodeCallbacks.onRightClickNode,
         onMouseOverNode: nodeCallbacks.onMouseOverNode,