From 8432c215a3d992131db34c8cf25de9450b73d5b3 Mon Sep 17 00:00:00 2001 From: juminet Date: Fri, 28 Jan 2022 08:49:59 +0000 Subject: [PATCH] filiations: small adjustments (colors, labels, ...) --- CHANGELOG.md | 1 + .../Resources/public/vuejs/VisGraph/colors.js | 6 +++++ .../Resources/public/vuejs/VisGraph/store.js | 19 ++++++------- .../public/vuejs/VisGraph/vis-network.js | 27 ++++++++++--------- 4 files changed, 31 insertions(+), 22 deletions(-) create mode 100644 src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/colors.js diff --git a/CHANGELOG.md b/CHANGELOG.md index fb0ba2fef..a983ac15b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,7 @@ and this project adheres to ## Unreleased +* [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) diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/colors.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/colors.js new file mode 100644 index 000000000..4f2cb2469 --- /dev/null +++ b/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'; \ No newline at end of file diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/store.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/store.js index b5b1b56da..023faa679 100644 --- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/store.js +++ b/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', - font: { color: '#33839d' }, + color: lightGreen, + 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', - font: { color: '#D04A60' }, + color: lightBrown, + 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', - font: { color: 'darkorange' }, + color: lightBlue, + 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', - font: { color: '#33839d' }, + color: lightGreen, + font: { color: darkGreen }, dashes: true, label: getRelationshipLabel(relationship), title: getRelationshipTitle(relationship), 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 675ce63e9..ef87cb779 100644 --- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/vis-network.js +++ b/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', - background: 'rgb(156,213,203)' + border: '#216458', + background: darkGreen, }, hover: { - border: '#89c9a9', - background: 'rgb(156,213,203)' + border: '#216458', + 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, }, } }