visgraph: basic styles by groups, initialize legend, etc.

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

@@ -74,10 +74,19 @@ const store = createStore({
         },
     },
     actions: {
+        /**
+         *  1) Add a person in state
+         *  @param Person person
+         */
         addPerson({ commit, dispatch }, person) {
             commit('addPerson', person)
             dispatch('fetchInfoForPerson', person)
         },
+
+        /**
+         *  2) Fetch infos for this person (hub)
+         *  @param Person person
+         */
         fetchInfoForPerson({ dispatch }, person) {
             dispatch('fetchHouseholdForPerson', person)
             dispatch('fetchCoursesByPerson', person)
@@ -85,8 +94,9 @@ const store = createStore({
         },
 
         /**
-         *  Fetch person current household if it is not already loading
+         *  3) Fetch person current household (if it is not already loading)
          *  check first isHouseholdLoading to fetch household once
+         *  @param Person person
          */
         fetchHouseholdForPerson({ commit, getters, dispatch }, person) {
             console.log('  isHouseholdLoading ?', getters.isHouseholdLoading(person.current_household_id))
@@ -104,6 +114,11 @@ const store = createStore({
                 })
             }
         },
+
+        /**
+         *  4) Add an edge for each household member (household -> person)
+         *  @param Household household
+         */
         addLinkFromPersonsToHousehold({ commit }, household) {
             const members = household.members.filter(v => household.current_members_id.includes(v.id))
             members.forEach(m => {
@@ -111,14 +126,20 @@ const store = createStore({
                 commit('addRelationship', {
                     from: `${m.person.type}_${m.person.id}`,
                     to: `household_${m.person.current_household_id}`,
-                    id: `p${m.person.id}-h${m.person.current_household_id}`
+                    id: `p${m.person.id}-h${m.person.current_household_id}`,
+                    arrows: 'from',
+                    color: 'pink',
+                    font: { color: 'pink' },
+                    label: 'enfant',
+                    ////group: 'link_person_household',
                 })
             })
 
         },
 
         /**
-         *  Fetch person current AccompanyingCourses
+         *  5) Fetch AccompanyingCourses for the person
+         *  @param Person person
          */
         fetchCoursesByPerson({ dispatch }, person) {
             //console.log('fetchCoursesByPerson', person)
@@ -130,6 +151,11 @@ const store = createStore({
                 }))
 
         },
+
+        /**
+         *  6) Add each distinct course
+         *  @param array courses
+         */
         addCourse({ commit, getters, dispatch }, courses) {
             //console.log('addCourse', courses)
             let currentCourses = courses.filter(c => c.closingDate === null)
@@ -143,6 +169,11 @@ const store = createStore({
                 }
             })
         },
+
+        /**
+         *  7) Add an edge for each course participation (course <- person)
+         *  @param AccompanyingCourse course
+         */
         addLinkFromPersonsToCourse({ commit }, course) {
             let currentParticipations = course.participations.filter(p => p.endDate === null)
             console.log('  participations', currentParticipations.length)
@@ -150,7 +181,12 @@ const store = createStore({
                 commit('addRelationship', {
                     from: `${p.person.type}_${p.person.id}`,
                     to: `${course.id}`,
-                    id: `p${p.person.id}-c`+ course.id.split('_')[2]
+                    id: `p${p.person.id}-c`+ course.id.split('_')[2],
+                    arrows: 'to',
+                    color: 'orange',
+                    font: { color: 'orange' },
+                    label: 'usager',
+                    //group: 'link_person_course',
                 })
             })
         },