Test
Carrière
Test doc timelines
Ajout d'une timeline
Une timeline s'insère entre balises graph au format json.
La structure utilisée est Vega 2.
Il est possible de tester des rendus en local avant publication grâce à l'éditeur Vega : https://vega.github.io/vega-editor/?mode=vega.
On retrouve 6 attributs de premier niveau :
width et height : dimensions de la timeline en pixel. Jusqu'à présent la largeur est standard entre toutes les timelines et la hauteur peut être adaptée selon le nombre de membres dans la timeline.
data : liste de toutes les informations qui sont affichés dans la timeline, réparties en 4 blocs.
les champs name et format ne sont pas à modifier.
membres: un membre se définit avec 5 champs
{
"label": "miguel", // identifiant du membre (doit être unique)
"nom": "Miguel Rodriguez", // nom complet (espaces, guillemets, accents sont possibles)
"membre_start": "2021-05-11", // date d'entrée dans le groupe (format année-mois-jour)
"membre_end": "2021-10-30", // date de sortie du groupe (format année-mois-jour, à mettre à la date du jour si le membre est toujours là)
"status": "" // possibilité d'ajouter un émoji à la fin de la ligne pour expliciter le départ du groupe (décès, départ de l'île, retour à la vie civile, ...)
}seconds
{
"label": "haylie", // identifiant du second (cf. liste des membres)
"second_start": "2021-05-11", // début du rôle de second (format année-mois-jour)
"second_end": "2021-06-08" // fin du rôle de second (format année-mois-jour)
}chefs
{
"label": "miguel", // identifiant du chef (cf. liste des membres)
"chef_start": "2021-05-11", // début du rôle de chef (format année-mois-jour)
"chef_end": "2021-10-30" // fin du rôle de chef (format année-mois-jour)
}events
{
"name": "27/05 - Méthamphétamine", // légende de l'évènement
"date": "2021-05-27", // date de l'évènement (format année-mois-jour)
"y": -20 // offset vertical (en pixel) à appliquer, à modifier quand plusieurs évènements sont proches et que le texte se chevauche
}
marks : les différents éléments affichés dans la timeline.
- pour les évènements (normalement pas besoin de modifier)
- un bloc
rectpour le trait - un bloc
textpour la légende.
- un bloc
- pour les membres
- 3 blocs
rectpour le trait (membre, second, chef). C'est ici qu'on peut choisir la couleur du trait en modifiant la valeur hexadécimale dans "properties -> fill -> value") - un bloc
textpour la légende.
- 3 blocs
Les champs suivants n'ont en général pas besoin d'être modifiés :
scales: propriété des axes de la timelineaxes: légende de la timeline
Attention :
Les dates: Elles ont toutes sous le format "AAAA-MM-DD" avec les doubles quotes autour
Les retours à la lignes: Json se présente sur ce format { "clef1":valeur, "clef2": valeur} Il est encadré d'acolades et chaque fin de ligne est marquée par une virgule sauf la derniere.
Le texte: Toujours encadré de doubles quotes "Voici un exemple"
Donnée manquante S'il vous manques des données (par exemple un membre n'a pas encore quitté de gang) mettre la valeur à "membre_end": null, un null indique que la donnée est vide, il est aussi possible de mettre "" pour une date ou du text
<tabs> <tab name="01/06/22">{| class="wikitable center" style="margin-left: auto; margin-right: 10px;"
!Pourcentage
!Actionnaire
|-
|- style="color:blue"
|50%
|Henri Favre
|-
|20%
|Jay Moore
|-
|20%
|Niko Zilman
|-
|10%
|Chin Chon
|-
| colspan="3" |
Les actionnaires majoritaires sont inscrits en bleu. |}</tab> <tab name="12/05/22"> Henri Favre : 55% Chin Chon : 45% </tab> <tab name="10/05/22"> Henri Favre : 55% Rosita Alvarez Hook : 45% </tab> <tab name="14/03/22"> Henri Favre : 45% Rosita Alvarez Hook : 45% Simon Waylander : 10% </tab> <tab name="06/03/22"> Elyana Torres : 45% Rosita Alvarez Hook : 45% Simon Waylander : 10% </tab> <tab name="06/03/22"> Elyana Torres : 55% Rosita Alvarez Hook : 45% </tab> <tab name="31/01/22"> Elyana Torres : 100% </tab> </tabs>
