filiations: small adjustments (colors, labels, ...)

CHANGELOG.md

@@ -11,6 +11,7 @@ and this project adheres to
 ## Unreleased
 
 <!-- write down unreleased development here -->
+* [person] improve filiations vis graph: disable physics, use chill colors for persons-households-course, increase label of relations, remove labels on household arrows and other improvements (https://gitlab.com/champs-libres/departement-de-la-vendee/accent-suivi-developpement/-/issues/286, https://gitlab.com/champs-libres/departement-de-la-vendee/chill/-/issues/362)
 * [activity] Order activity by date and by id (https://gitlab.com/champs-libres/departement-de-la-vendee/accent-suivi-developpement/-/issues/364)
 * [main] increase length of 4 Address fields (change to TEXT, no size limits) (https://gitlab.com/champs-libres/departement-de-la-vendee/accent-suivi-developpement/-/issues/277)
 * [main] Add confidential option for address, in edit and view (https://gitlab.com/champs-libres/departement-de-la-vendee/accent-suivi-developpement/-/issues/165)

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

@@ -0,0 +1,6 @@
+export const lightGreen = '#43b29d';
+export const darkGreen = '#368e7e';
+export const lightBrown = '#a2ac80';
+export const darkBrown = '#929d69';
+export const lightBlue = '#8d9dab';
+export const darkBlue = '#718596';

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

@@ -2,6 +2,7 @@ import { createStore } from 'vuex'
 import { getHouseholdByPerson, getCoursesByPerson, getRelationshipsByPerson } from './api'
 import { getHouseholdLabel, getHouseholdWidth, getRelationshipLabel, getRelationshipTitle, getRelationshipDirection, splitId, getGender, getAge } from './vis-network'
 import {visMessages} from "./i18n";
+import { darkBlue, darkBrown, darkGreen, lightBlue, lightBrown, lightGreen } from './colors';
 
 const debug = process.env.NODE_ENV !== 'production'
 
@@ -172,8 +173,8 @@ const store = createStore({
                 id: 'relationship_' + splitId(link.id,'id')
                     + '-person_' + link.fromPerson.id + '-person_' + link.toPerson.id,
                 arrows: getRelationshipDirection(link),
-                color: 'lightblue',
+                color: lightGreen,
-                font: { color: '#33839d' },
+                font: { color: darkGreen },
                 dashes: true,
                 label: getRelationshipLabel(link),
                 title: getRelationshipTitle(link),
@@ -316,10 +317,10 @@ const store = createStore({
                     to: `${household.id}`,
                     id: `${household.id}-person_${m.person.id}`,
                     arrows: 'from',
-                    color: 'pink',
+                    color: lightBrown,
-                    font: { color: '#D04A60' },
+                    font: { color: darkBrown },
                     dashes: (getHouseholdWidth(m) === 1)? [0,4] : false,  //edge style:  [dash, gap, dash, gap]
-                    label: getHouseholdLabel(m),
+                    //label: getHouseholdLabel(m),
                     width: getHouseholdWidth(m),
                 })
                 if (!getters.isPersonLoaded(m.person.id)) {
@@ -375,8 +376,8 @@ const store = createStore({
                     to: `${course.id}`,
                     id: `accompanying_period_${splitId(course.id,'id')}-person_${p.person.id}`,
                     arrows: 'from',
-                    color: 'orange',
+                    color: lightBlue,
-                    font: { color: 'darkorange' },
+                    font: { color: darkBlue },
                 })
                 if (!getters.isPersonLoaded(p.person.id)) {
                     dispatch('addMissingPerson', [p.person, course])
@@ -428,8 +429,8 @@ const store = createStore({
                 id: 'relationship_' + splitId(relationship.id,'id')
                     + '-person_' + relationship.fromPerson.id + '-person_' + relationship.toPerson.id,
                 arrows: getRelationshipDirection(relationship),
-                color: 'lightblue',
+                color: lightGreen,
-                font: { color: '#33839d' },
+                font: { color: darkGreen },
                 dashes: true,
                 label: getRelationshipLabel(relationship),
                 title: getRelationshipTitle(relationship),

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

@@ -1,4 +1,5 @@
-import { visMessages } from './i18n'
+import { darkGreen, lightBlue, lightBrown, lightGreen } from './colors';
+import { visMessages } from './i18n';
 
 /**
  * Vis-network initial data/configuration script
@@ -15,12 +16,12 @@ window.options = {
     /*
     */
     configure: {
-        enabled: true,
+        enabled: false,
         filter: 'physics',
         showButton: true
     },
     physics: {
-        enabled: true,
+        enabled: false,
         barnesHut: {
             theta: 0.5,
             gravitationalConstant: -2000,
@@ -89,7 +90,7 @@ window.options = {
     edges: {
         font: {
             color: '#b0b0b0',
-            size: 9,
+            size: 14,
             face: 'arial',
             background: 'none',
             strokeWidth: 2, // px
@@ -112,30 +113,30 @@ window.options = {
             },
             color: {
                 border: '#b0b0b0',
-                background: 'rgb(193,229,222)',
+                background: lightGreen,
                 highlight: {
-                    border: '#89c9a9',
+                    border: '#216458',
-                    background: 'rgb(156,213,203)'
+                    background: darkGreen,
                 },
                 hover: {
-                    border: '#89c9a9',
+                    border: '#216458',
-                    background: 'rgb(156,213,203)'
+                    background: darkGreen,
                 }
             },
-            opacity: 0.85,
+            opacity: 0.9,
             shadow:{
                 enabled: true,
                 color: 'rgba(0,0,0,0.5)',
                 size:10,
                 x:5,
-                y:5
+                y:5,
             },
         },
         household: {
-            color: 'pink'
+            color: lightBrown,
         },
         accompanying_period: {
-            color: 'orange',
+            color: lightBlue,
         },
     }
 }