mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-06-07 18:44:08 +00:00
visgraph: basic styles by groups, initialize legend, etc.
This commit is contained in:
parent
136c6f19de
commit
2ef70b301f
@ -1,8 +1,32 @@
|
||||
<template>
|
||||
<div id="visgraph"></div>
|
||||
<!--
|
||||
<button class="btn btn-outline-primary" @click="refreshNetwork">refresh</button>
|
||||
-->
|
||||
<div id="visgraph"></div>
|
||||
|
||||
<teleport to="#visgraph-legend">
|
||||
<div class="my-4 post-menu legend">
|
||||
<h3>Afficher</h3>
|
||||
<div class="list-group">
|
||||
<label class="list-group-item">
|
||||
<input class="form-check-input me-1" type="checkbox" value="">
|
||||
Ménage n°65
|
||||
</label>
|
||||
<label class="list-group-item">
|
||||
<input class="form-check-input me-1" type="checkbox" value="">
|
||||
Parcours n°1615
|
||||
</label>
|
||||
<label class="list-group-item">
|
||||
<input class="form-check-input me-1" type="checkbox" value="">
|
||||
Parcours n°1613
|
||||
</label>
|
||||
<label class="list-group-item">
|
||||
<input class="form-check-input me-1" type="checkbox" value="">
|
||||
Parcours n°1614
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-sm btn-outline-secondary" @click="refreshNetwork">Rafraîchir</button>
|
||||
</teleport>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -29,7 +53,7 @@ export default {
|
||||
},
|
||||
refreshNetwork() { // B
|
||||
console.log('--- refresh network')
|
||||
window.network.setData(this.visgraph_data) // <-- Error: [vuex] do not mutate vuex store state outside mutation handlers.
|
||||
window.network.setData(this.visgraph_data)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
@ -64,7 +88,19 @@ export default {
|
||||
<style lang="scss" scoped>
|
||||
div#visgraph {
|
||||
margin: 2em auto;
|
||||
height: 500px;
|
||||
border: 1px solid lightgray;
|
||||
height: 700px;
|
||||
border: 0px solid lightgray;
|
||||
}
|
||||
div#visgraph-legend {
|
||||
div.post-menu.legend {
|
||||
ul.legend-list {
|
||||
padding-left: 0;
|
||||
list-style-type: square;
|
||||
li::marker {
|
||||
color: red;
|
||||
background-color: cyan;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -6,7 +6,8 @@ const visMessages = {
|
||||
'Course': 'Parcours',
|
||||
'Household': 'Ménage',
|
||||
}
|
||||
}
|
||||
},
|
||||
en: {}
|
||||
}
|
||||
|
||||
//Object.assign(visMessages.fr, personMessages.fr);
|
||||
|
||||
@ -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',
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
@ -8,6 +8,8 @@ import { visMessages } from './i18n'
|
||||
*/
|
||||
|
||||
window.options = {
|
||||
locale: 'fr',
|
||||
locales: visMessages,
|
||||
manipulation: {
|
||||
enabled: true,
|
||||
initiallyActive: true,
|
||||
@ -20,6 +22,10 @@ window.options = {
|
||||
console.log('editNode', nodeData)
|
||||
callback(nodeData);
|
||||
},
|
||||
deleteNode: function(nodeData, callback) {
|
||||
console.log('deleteNode', nodeData)
|
||||
callback(nodeData);
|
||||
},
|
||||
addEdge: function(edgeData, callback) {
|
||||
console.log('addEdge', edgeData)
|
||||
callback(edgeData);
|
||||
@ -28,12 +34,78 @@ window.options = {
|
||||
console.log('editNode', edgeData)
|
||||
callback(edgeData);
|
||||
},
|
||||
deleteEdge: function(edgeData, callback) {
|
||||
console.log('deleteNode', edgeData)
|
||||
callback(edgeData);
|
||||
},
|
||||
controlNodeStyle: { /*
|
||||
shape:'dot',
|
||||
size: 6,
|
||||
color: {
|
||||
background: '#ff0000',
|
||||
border: '#3c3c3c',
|
||||
highlight: {
|
||||
background: '#07f968',
|
||||
border: '#3c3c3c'
|
||||
}
|
||||
},
|
||||
borderWidth: 2,
|
||||
borderWidthSelected: 2
|
||||
*/
|
||||
}
|
||||
},
|
||||
nodes: {
|
||||
physics: true
|
||||
physics: true,
|
||||
borderWidth: 1,
|
||||
borderWidthSelected: 3,
|
||||
},
|
||||
edges: {
|
||||
physics: true
|
||||
physics: true,
|
||||
font: {
|
||||
color: '#b0b0b0',
|
||||
size: 9,
|
||||
face: 'arial',
|
||||
background: 'none',
|
||||
strokeWidth: 2, // px
|
||||
strokeColor: '#ffffff',
|
||||
align: 'horizontal',
|
||||
multi: false,
|
||||
vadjust: 0,
|
||||
},
|
||||
scaling:{
|
||||
label: true,
|
||||
},
|
||||
smooth: true,
|
||||
},
|
||||
groups: {
|
||||
person: {
|
||||
shape: 'box',
|
||||
shapeProperties: {
|
||||
borderDashes: false,
|
||||
borderRadius: 3,
|
||||
},
|
||||
color: {
|
||||
border: '#b0b0b0',
|
||||
background: 'rgb(193,229,222)',
|
||||
highlight: {
|
||||
border: '#368d7e',
|
||||
background: 'rgb(193,229,222)'
|
||||
}
|
||||
}
|
||||
},
|
||||
household: {
|
||||
/*
|
||||
shape: 'dot',
|
||||
*/
|
||||
color: 'pink'
|
||||
},
|
||||
accompanying_period: {
|
||||
/*
|
||||
shape: 'triangle',
|
||||
*/
|
||||
color: 'orange',
|
||||
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
@ -45,6 +117,7 @@ window.network = {};
|
||||
* and add properties needed by vis
|
||||
*/
|
||||
const adapt2vis = (entity) => {
|
||||
entity.group = entity.type
|
||||
switch (entity.type) {
|
||||
case 'person':
|
||||
entity._id = entity.id
|
||||
|
||||
@ -8,13 +8,11 @@
|
||||
<div id="relationship-graph"
|
||||
data-persons="{{ persons|e('html_attr') }}">
|
||||
</div>
|
||||
{#
|
||||
{{ dump() }}
|
||||
#}
|
||||
|
||||
{% endblock %}
|
||||
|
||||
{% block block_post_menu %}{% endblock %}
|
||||
{% block block_post_menu %}
|
||||
<div id="visgraph-legend"></div>
|
||||
{% endblock %}
|
||||
|
||||
{% block js %}
|
||||
{{ encore_entry_script_tags('vue_visgraph') }}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user