diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/i18n.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/i18n.js index 077c3c7f6..c4ad74907 100644 --- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/i18n.js +++ b/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', diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/store.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/store.js index 310315946..0d0ff4442 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, 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)) - members.forEach(m => { + const currentMembers = household.members.filter(v => household.current_members_id.includes(v.id)) + 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' }, - label: 'enfant', - ////group: 'link_person_household', + font: { color: '#D04A60' }, + label: getHouseholdLabel(m), + 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', }) }) }, 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 bfdc74991..8774501a0 100644 --- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/vis-network.js +++ b/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) -* we rename id in _id -* and add properties needed by vis -*/ +/** + * Adapt entity to graph (id, label) + * rename id in _id and add properties needed by vis + * @param entity + * @returns entity + */ 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 }