init household filiation page with hello world visjs graph

src/Bundle/ChillPersonBundle/Resources/public/page/vis/index.js

@@ -0,0 +1,32 @@
+import vis from 'vis-network/dist/vis-network.min';
+
+require('./scss/vis.scss');
+
+// create an array with nodes
+let nodes = new vis.DataSet([
+    { id: 1, label: "Node 1" },
+    { id: 2, label: "Node 2" },
+    { id: 3, label: "Node 3" },
+    { id: 4, label: "Node 4" },
+    { id: 5, label: "Node 5", cid: 1 },
+]);
+
+// create an array with edges
+let edges = new vis.DataSet([
+    { from: 1, to: 3 },
+    { from: 1, to: 2 },
+    { from: 2, to: 4 },
+    { from: 2, to: 5 },
+    { from: 3, to: 3 },
+]);
+
+// create a network
+let container = document.getElementById("graph-relationship");
+let data = {
+    nodes: nodes,
+    edges: edges,
+};
+let options = {};
+
+//
+let network = new vis.Network(container, data, options);

src/Bundle/ChillPersonBundle/Resources/public/page/vis/scss/vis.scss

@@ -0,0 +1,5 @@
+div#graph-relationship {
+    margin: 2em auto;
+    height: 500px;
+    border: 1px solid lightgray;
+}

src/Bundle/ChillPersonBundle/Resources/views/Household/relationship.html.twig

@@ -0,0 +1,27 @@
+{% extends '@ChillPerson/Household/layout.html.twig' %}
+
+{% block title 'household.Relationship'|trans %}
+
+{% block content %}
+    <h1>{{ block('title') }}</h1>
+    <div id="graph-relationship"></div>
+
+    {% for m in household.members %}
+        {% if m.endDate is null %}
+            {{ dump(m) }}
+        {% endif %}
+    {% endfor %}
+
+{% endblock %}
+
+{% block js %}
+    {{ parent() }}
+    {{ encore_entry_script_tags('page_vis') }}
+{% endblock %}
+
+{% block css %}
+    {{ parent() }}
+    {{ encore_entry_link_tags('page_vis') }}
+{% endblock %}
+
+{% block block_post_menu %}{% endblock %}