« Test » : différence entre les versions

De 21Wiki
Aucun résumé des modifications
Balise : Éditeur de wikicode 2017
(test doc timelines)
Balise : Éditeur de wikicode 2017
Ligne 43 : Ligne 43 :




Test doc timelines
==Ajout d'une timeline==
Une timeline s'insère entre balises <code>graph</code> 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 :
<code>width</code> et <code>height</code> : 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.
<code>data</code> : liste de toutes les informations qui sont affichés dans la timeline, réparties en 4 blocs.
les champs <code>name</code> et <code>format</code> ne sont pas à modifier.
*<code>membres</code> : un membre se définit avec 5 champs
<syntaxhighlight line="1">
{
  "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, ...)
}
</syntaxhighlight>
*<code>seconds</code>
<syntaxhighlight line="1">
{
  "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)
}
</syntaxhighlight>
*<code>chefs</code>
<syntaxhighlight line="1">
{
  "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)
}
</syntaxhighlight>
*<code>events</code>
<syntaxhighlight line="1">
{
  "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
}
</syntaxhighlight>
<code>marks</code> : les différents éléments affichés dans la timeline.
*pour les évènements (normalement pas besoin de modifier)
**un bloc <code>rect</code> pour le trait
**un bloc <code>text</code> pour la légende.
*pour les membres
**3 blocs <code>rect</code> pour 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 <code>text</code> pour la légende.
Les champs suivants n'ont en général pas besoin d'être modifiés :
*<code>scales</code> : propriété des axes de la timeline
*<code>axes</code> : légende de la timeline
Attention :
'''Les dates''': Elles ont toutes sous le format <code> "AAA-MM-DD"</code> avec les doubles quotes autour
'''Les retours à la lignes''': Json se présente sur ce format <code> { "clef1":valeur,  "clef2": valeur} </code> 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 <code> "Voici un exemple" </code>
''' Donnée manquante''' S'il vous manques des données (par exemple un membre n'a pas encore quitté de gang) mettre la valeur à <code>  "membre_end": null, </code> un null indique que la donéne est vide, une donnée
<br>
<br>
<br>





Version du 9 octobre 2022 à 15:28


Modèle:Date de naissance


Erreur : pas assez de coordonnées pour la forme à la ligne 5.



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 rect pour le trait
    • un bloc text pour la légende.
  • pour les membres
    • 3 blocs rect pour 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 text pour la légende.


Les champs suivants n'ont en général pas besoin d'être modifiés :

  • scales : propriété des axes de la timeline
  • axes : légende de la timeline

Attention :

Les dates: Elles ont toutes sous le format "AAA-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 donéne est vide, une donnée

















<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>