From 1c60a5b51e33a3a8159886c81108d0835d94352a Mon Sep 17 00:00:00 2001 From: Mathieu Jaumotte Date: Fri, 29 Oct 2021 12:06:59 +0200 Subject: [PATCH] vue_visgraph: improve graph --- .../Resources/public/vuejs/VisGraph/i18n.js | 5 ++ .../Resources/public/vuejs/VisGraph/store.js | 13 ++-- .../public/vuejs/VisGraph/vis-network.js | 74 +++++++++++-------- 3 files changed, 56 insertions(+), 36 deletions(-) diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/i18n.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/i18n.js index 9ca273f72..0e1cf4686 100644 --- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/i18n.js +++ b/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', diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/store.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/store.js index 394fd55e6..b336da45a 100644 --- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/store.js +++ b/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)) { diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/vis-network.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/vis-network.js index eeddb7da4..f8001f441 100644 --- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/vis-network.js +++ b/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: - return 'N' - case 1: - return 'M' - case 2: - return 'F' + case 'both': + return visMessages.fr.visgraph.both + case 'woman': + return visMessages.fr.visgraph.woman + case 'man': + 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) { - case 1: //adult - 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.holder) { + return 5 } + 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 }