init household filiation page with hello world visjs graph

src/Bundle/ChillPersonBundle/Controller/HouseholdController.php

@@ -167,6 +167,23 @@ class HouseholdController extends AbstractController
         );
     }
 
+    /**
+     * @Route(
+     *      "/{household_id}/relationship",
+     *      name="chill_person_household_relationship",
+     *      methods={"GET", "HEAD"}
+     *  )
+     *  @ParamConverter("household", options={"id" = "household_id"})
+     */
+    public function showRelationship(Request $request, Household $household)
+    {
+        return $this->render('@ChillPerson/Household/relationship.html.twig',
+            [
+                'household' => $household
+            ]
+        );
+    }
+
     /**
      * @Route(
      *      "/{household_id}/members/metadata/edit",

src/Bundle/ChillPersonBundle/Menu/HouseholdMenuBuilder.php

@@ -50,6 +50,13 @@ class HouseholdMenuBuilder implements LocalMenuBuilderInterface
         ]])
         ->setExtras(['order' => 30]);
 
+        $menu->addChild($this->translator->trans('household.Relationship'), [
+            'route' => 'chill_person_household_relationship',
+            'routeParameters' => [
+                'household_id' => $household->getId()
+            ]])
+            ->setExtras(['order' => 40]);
+
     }
 
 

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 %}

src/Bundle/ChillPersonBundle/chill.webpack.config.js

@@ -8,7 +8,6 @@ module.exports = function(encore, entries)
         ChillPersonAssets: __dirname + '/Resources/public'
     });
 
-
     encore.addEntry('vue_household_members_editor', __dirname + '/Resources/public/vuejs/HouseholdMembersEditor/index.js');
     encore.addEntry('vue_accourse', __dirname + '/Resources/public/vuejs/AccompanyingCourse/index.js');
     encore.addEntry('vue_accourse_work_create', __dirname + '/Resources/public/vuejs/AccompanyingCourseWorkCreate/index.js');
@@ -17,4 +16,5 @@ module.exports = function(encore, entries)
     encore.addEntry('page_household_edit_metadata', __dirname + '/Resources/public/page/household_edit_metadata/index.js');
     encore.addEntry('page_person', __dirname + '/Resources/public/page/person/index.js');
     encore.addEntry('page_accompanying_course_index_person_locate', __dirname + '/Resources/public/page/accompanying_course_index/person_locate.js');
+    encore.addEntry('page_vis', __dirname + '/Resources/public/page/vis/index.js');
 };

src/Bundle/ChillPersonBundle/translations/messages+intl-icu.fr.yaml

@@ -51,6 +51,8 @@ household:
     Household summary: Résumé du ménage
     Accompanying period: Parcours d'accompagnement
     Addresses: Historique adresse
+    Relationship: Composition familiale
+    Household relationships: Composition du ménage
     Current address: Adresse actuelle
     Household does not have any address currently: Le ménage n'a pas d'adresse renseignée actuellement
     Edit household members: Modifier l'appartenance au ménage