vue_visgraph: improve household links (edges)

src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/i18n.js

@@ -3,6 +3,7 @@ const visMessages = {
         visgraph: {
             Course: 'Parcours',
             Household: 'Ménage',
+            Holder: 'Titulaire',
             Legend: 'Calques',
         },
         edit: 'Éditer',

src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/store.js

@@ -1,6 +1,6 @@
 import { createStore } from 'vuex'
 import { getHouseholdByPerson, getCoursesByPerson, getRelationshipByPerson } from './api'
-import { adapt2vis } from './vis-network'
+import { adapt2vis, getHouseholdLabel, getHouseholdWidth } from './vis-network'
 
 const debug = process.env.NODE_ENV !== 'production'
 
@@ -139,8 +139,8 @@ const store = createStore({
          *  @param Household household
          */
         addLinkFromPersonsToHousehold({ commit }, household) {
-            const members = household.members.filter(v => household.current_members_id.includes(v.id))
+            const currentMembers = household.members.filter(v => household.current_members_id.includes(v.id))
-            members.forEach(m => {
+            currentMembers.forEach(m => {
                 //console.log('-> addLink from person', m.person.id, 'to household', m.person.current_household_id)
                 commit('addLink', {
                     from: `${m.person.type}_${m.person.id}`,
@@ -148,9 +148,9 @@ const store = createStore({
                     id: `p${m.person.id}-h${m.person.current_household_id}`,
                     arrows: 'from',
                     color: 'pink',
-                    font: { color: 'pink' },
+                    font: { color: '#D04A60' },
-                    label: 'enfant',
+                    label: getHouseholdLabel(m),
-                    ////group: 'link_person_household',
+                    width: getHouseholdWidth(m),
                 })
             })
 
@@ -203,9 +203,8 @@ const store = createStore({
                     id: `p${p.person.id}-c`+ course.id.split('_')[2],
                     arrows: 'to',
                     color: 'orange',
-                    font: { color: 'orange' },
+                    font: { color: 'darkorange' },
                     label: 'concerné',
-                    //group: 'link_person_course',
                 })
             })
         },

src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/vis-network.js

@@ -1,12 +1,14 @@
 import { visMessages } from './i18n'
 
-/*
+/**
  * Vis-network initial data/configuration script
  * Notes:
  *   Use window.network and window.options to avoid conflict between vue and vis
  *   cfr. https://github.com/almende/vis/issues/2524#issuecomment-307108271
  */
 
+window.network = {};
+
 window.options = {
     locale: 'fr',
     locales: visMessages,
@@ -14,7 +16,7 @@ window.options = {
     configure: {
         enabled: true,
         filter: 'nodes,edges',
-        container: undefined,
+        //container: undefined,
         showButton: true
     },
     */
@@ -46,7 +48,8 @@ window.options = {
             console.log('deleteNode', edgeData)
             callback(edgeData);
         },
-        controlNodeStyle: { /*
+        controlNodeStyle: {
+            /*
             shape:'dot',
             size: 6,
             color: {
@@ -112,18 +115,16 @@ window.options = {
             shape: 'triangle',
             */
             color: 'orange',
-
         },
     }
 };
 
-window.network = {};
+/**
-
+ * Adapt entity to graph (id, label)
-/*
+ * rename id in _id and add properties needed by vis
-*   Adapt entity to graph (id, label)
+ * @param entity
-*   we rename id in _id
+ * @returns entity
-*   and add properties needed by vis
+ */
-*/
 const adapt2vis = (entity) => {
     entity.group = entity.type
     switch (entity.type) {
@@ -146,6 +147,38 @@ const adapt2vis = (entity) => {
     return entity
 }
 
-export {
+/**
-    adapt2vis
+ * Return member position in household
+ * @param member
+ * @returns string
+ */
+const getHouseholdLabel = (member) => {
+    let position = member.position.label.fr
+    let holder = member.holder ? ` (${visMessages.fr.visgraph.Holder})` : ''
+    return position + holder
+}
+
+/**
+ * Return edge width for member (depends of position in household)
+ * @param member
+ * @returns string
+ */
+const getHouseholdWidth = (member) => {
+    switch (member.position.ordering) {
+        case 1: //adult
+            if (member.holder) {
+                return 6
+            }
+            return 3
+        case 2: //children
+        case 3: //children out of household
+            return 1
+    }
+}
+
+
+export {
+    adapt2vis,
+    getHouseholdLabel,
+    getHouseholdWidth
 }