Global viewGenerator included in default config object (#131)

* fix: Add `viewGenerator` to default config

When installing the library in a project, the `viewGenerator` function
defined in the config object by the user did have no effect. The reason
for this was that properties not included in the default config object
(graph.config.js) were been ignored when building the graph and
rendering it in the browser.

In order to solve this issue, a `viewGenerator` property is now included
in the default config object, with an initial value of `null`.

* fix: Don't show function or null properties in sandbox

The current sandbox example created a form that allowed all of the
available config properties to be customized in real time.

The `viewGenerator` property, though, cannot be customized with a form.
Since its value must be a function, the user cannot set it via a form
field.

Also, the fact that it's initialized to null made some of the sandbox
examples to throw an error because the form schema generator doesn't
support neither null or undefined values. Functions are not allowed
either, and in this case an error would appear on screen by saying that
this type of data is not supported.

The current change filters the config elements so that neither null,
undefined or function values are included in the config form.

* test: Update expected value for `viewGenerator`

Author: LonelyPrincess

sandbox/utils.js

@@ -32,7 +32,9 @@ function generateFormSchema(o, rootSpreadProp, accum = {}) {
     for (let k of Object.keys(o)) {
         const kk = rootSpreadProp ? `${rootSpreadProp}.${k}` : k;
 
-        typeof o[k] === 'object' ? generateFormSchema(o[kk], kk, accum) : (accum[kk] = formMap(kk, o[k]));
+        if (o[k] !== undefined && o[k] !== null && typeof o[k] !== 'function') {
+            typeof o[k] === 'object' ? generateFormSchema(o[kk], kk, accum) : (accum[kk] = formMap(kk, o[k]));
+        }
     }
 
     return accum;

src/components/graph/graph.config.js

@@ -113,7 +113,7 @@
  *   - 'wye'
  *
  * **[note]** react-d3-graph will map this values to [d3 symbols](https://github.com/d3/d3-shape#symbols)
- * @param {Function} [node.viewGenerator=undefined] - 🔍🔍🔍 function that receives a node and returns a JSX view.
+ * @param {Function} [node.viewGenerator=null] - 🔍🔍🔍 function that receives a node and returns a JSX view.
  * <br/>
  * @param {Object} link link object is explained in the next section. ⬇️
  * <h2 id="config-link"><a href="#config-link">#</a> Link level configurations</h2>
@@ -194,7 +194,8 @@ export default {
         strokeColor: 'none',
         strokeWidth: 1.5,
         svg: '',
-        symbolType: 'circle'
+        symbolType: 'circle',
+        viewGenerator: null
     },
     link: {
         color: '#d3d3d3',

test/component/graph/graph.helper.test.js

@@ -124,7 +124,7 @@ describe('Graph Helper', () => {
                     strokeWidth: 2,
                     svg: 'file.svg',
                     type: 'circle',
-                    viewGenerator: undefined,
+                    viewGenerator: null,
                     overrideGlobalViewGenerator: undefined
                 });
             });
@@ -170,7 +170,7 @@ describe('Graph Helper', () => {
                         strokeWidth: 1.5,
                         svg: 'file.svg',
                         type: 'circle',
-                        viewGenerator: undefined,
+                        viewGenerator: null,
                         overrideGlobalViewGenerator: undefined
                     });
                 });
@@ -215,7 +215,7 @@ describe('Graph Helper', () => {
                         strokeWidth: 1.5,
                         svg: 'file.svg',
                         type: 'circle',
-                        viewGenerator: undefined,
+                        viewGenerator: null,
                         overrideGlobalViewGenerator: undefined
                     });
                 });