vue_visgraph: improve graph

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

@@ -6,6 +6,11 @@ const visMessages = {
             Holder: 'Titulaire',
             Legend: 'Calques',
             concerned: 'concerné',
+            both: 'neutre, non binaire',
+            woman: 'féminin',
+            man: 'masculin',
+            years: 'ans'
+
         },
         edit: 'Éditer',
         del: 'Supprimer',

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

@@ -1,6 +1,6 @@
 import { createStore } from 'vuex'
 import { getHouseholdByPerson, getCoursesByPerson, getRelationshipsByPerson } from './api'
-import { adapt2vis, getHouseholdLabel, getHouseholdWidth, getRelationshipLabel } from './vis-network'
+import { adapt2vis, getHouseholdLabel, getHouseholdWidth, getRelationshipLabel, getRelationshipTitle } from './vis-network'
 import { visMessages } from './i18n'
 
 const debug = process.env.NODE_ENV !== 'production'
@@ -115,7 +115,6 @@ const store = createStore({
          *  1) Add a person in state
          *  @param Person person
          */
-
         addPerson({ commit, dispatch }, person) {
             commit('markPersonLoaded', person.id)
             commit('addPerson', person)
@@ -127,7 +126,9 @@ const store = createStore({
          *  @param Person person
          */
         fetchInfoForPerson({ dispatch }, person) {
-            dispatch('fetchHouseholdForPerson', person)
+            if (null !== person.current_household_id) {
+                dispatch('fetchHouseholdForPerson', person)
+            }
             dispatch('fetchCoursesByPerson', person)
             dispatch('fetchRelationshipByPerson', person)
         },
@@ -226,7 +227,7 @@ const store = createStore({
                     arrows: 'from',
                     color: 'orange',
                     font: { color: 'darkorange' },
-                    label: visMessages.fr.visgraph.concerned,
+                    //label: visMessages.fr.visgraph.concerned,
                 })
                 if (!getters.isPersonLoaded(p.person.id)) {
                     console.log('  person is not loaded', p.person.id)
@@ -277,9 +278,11 @@ const store = createStore({
                 to: `person_${r.toPerson.id}`,
                 id: 'r' + r.id + '_p' + r.fromPerson.id + '_p' + r.toPerson.id,
                 arrows: 'to',
-                color: 'lightblue', dashes: true,
+                color: 'lightblue',
                 font: { color: '#33839d' },
+                dashes: true,
                 label: getRelationshipLabel(r, false),
+                title: getRelationshipTitle(r),
             })
             for (let person of [r.fromPerson, r.toPerson]) {
                 if (!getters.isPersonLoaded(person.id)) {

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

@@ -128,7 +128,7 @@ window.options = {
             background: 'none',
             strokeWidth: 2, // px
             strokeColor: '#ffffff',
-            align: 'horizontal',
+            align: 'middle',
             multi: false,
             vadjust: 0,
         },
@@ -154,15 +154,9 @@ window.options = {
             }
         },
         household: {
-            /*
-            shape: 'dot',
-            */
             color: 'pink'
         },
         accompanying_period: {
-            /*
-            shape: 'triangle',
-            */
             color: 'orange',
         },
     }
@@ -179,7 +173,8 @@ const adapt2vis = (entity) => {
     switch (entity.type) {
         case 'person':
             entity._id = entity.id
-            entity.label = `${entity.text}\n` + getGender(entity.gender_numeric) +' - '+ getAge(entity.birthdate)
+            entity.label = `${entity.text}\n` + getGender(entity.gender) +' - '+ getAge(entity.birthdate)
+            //entity.title = `${entity.text}`
             entity.id = `person_${entity.id}`
             break
         case 'household':
@@ -195,29 +190,42 @@ const adapt2vis = (entity) => {
         case 'relationship':
             entity._id = entity.id
             entity.id = `relationship_${entity.id}`
+            break
+        default:
+            throw 'entity undefined'
     }
     return entity
 }
 
+/**
+ * @param gender
+ * @returns {string}
+ */
 const getGender = (gender) => {
     switch (gender) {
-        case 0:
+        case 'both':
-            return 'N'
+            return visMessages.fr.visgraph.both
-        case 1:
+        case 'woman':
-            return 'M'
+            return visMessages.fr.visgraph.woman
-        case 2:
+        case 'man':
-            return 'F'
+            return visMessages.fr.visgraph.man
         default:
             throw 'gender undefined'
     }
 }
+
+/**
+ * TODO Repeat getAge() in PersonRenderBox.vue
+ * @param birthdate
+ * @returns {string|null}
+ */
 const getAge = (birthdate) => {
     if (null === birthdate) {
         return null
     }
     const birthday = new Date(birthdate.datetime)
     const now = new Date()
-    return (now.getFullYear() - birthday.getFullYear()) + ' ans'
+    return (now.getFullYear() - birthday.getFullYear()) + ' '+ visMessages.fr.visgraph.years
 }
 
 /**
@@ -235,24 +243,15 @@ const getHouseholdLabel = (member) => {
  * Return edge width for member (depends of position in household)
  * @param member
  * @returns integer (width)
- *
- * TODO
- * to use: holder, shareHousehold
- * not use: ordering, position (-> null)
  */
 const getHouseholdWidth = (member) => {
-    switch (member.position.ordering) {
+    if (member.holder) {
-        case 1: //adult
+        return 5
-            if (member.holder) {
-                return 6
-            }
-            return 3
-        case 2: //children
-        case 3: //children out of household
-            return 1
-        default:
-            throw 'Ordering not supported'
     }
+    if (member.shareHousehold) {
+        return 2
+    }
+    return 1
 }
 
 /**
@@ -264,9 +263,22 @@ const getRelationshipLabel = (relationship, reverse) => {
    return (!reverse) ? relationship.relation.title.fr : relationship.relation.reverseTitle.fr
 }
 
+/**
+ * Return title edge
+ * @param relationship
+ * @returns string
+ */
+const getRelationshipTitle = (relationship) => {
+    return relationship.relation.title.fr + ': '
+        + relationship.fromPerson.text + '\n'
+        + relationship.relation.reverseTitle.fr + ': '
+        + relationship.toPerson.text
+}
+
 export {
     adapt2vis,
     getHouseholdLabel,
     getHouseholdWidth,
-    getRelationshipLabel
+    getRelationshipLabel,
+    getRelationshipTitle
 }