Extension:EasyTimeline/syntaxe

This page is a translated version of the page Extension:EasyTimeline/syntax and the translation is 70% complete.
Outdated translations are marked like this.

La fonction EasyTimeline produit une image intégrée à partir de wikitext. L'image peut être un diagramme unidimensionnel (horizontalement ou verticalement), ou un diagramme bidimensionnel. Le nom "EasyTimeline" fait référence à la possibilité d'appliquer la fonction avec une échelle de temps horizontalement ou verticalement, éventuellement avec un autre paramètre dans l'autre sens, mais il existe également diverses autres possibilités.

Introduction

Des chronologies graphiques peuvent être produites en fournissant un script entre des balises spéciales :

<timeline> script </timeline>

EasyTimeline sera alors invoqué pour rendre une image PNG et (éventuellement) une carte cliquable.

Clause de non-responsabilité : Même si EasyTimeline est conçu pour être facile à utiliser, une chronologie graphique compliquée est une affaire non triviale. Une simple chronologie peut prendre une demi-heure à composer (ou même plus, lorsqu'un exemple approprié est pris comme base). Des délais longs peuvent prendre quelques heures pour la composition et la mise au point. Cependant, l'ajout ou la correction d'une chronologie, aussi complexe soit-il, devrait être une affaire relativement simple, même pour les contributeurs qui n'ont aucune connaissance approfondie de la syntaxe décrite ici.

N'hésitez pas à demander conseil au auteur d'EasyTimeline.

Commandes disponibles

Les commandes de script définissent :

Règles générales de codage

Un script peut contenir des commandes et des commentaires. Chaque commande est suivie d'un ou plusieurs attributs.

Cas des lettres : les commandes et leurs attributs peuvent être écrits en minuscules, majuscules ou en casse mixte. Veuillez essayer d'être cohérent dans l'application du cas car cela améliorera la lisibilité, par exemple utilisez une casse mixte pour toutes les commandes et des minuscules pour tous les attributs.

Les commandes suivantes sont obligatoires :

  • ImageSize, détermine la taille globale de la chronologie
  • PlotArea, détermine les marges
  • Period, détermine la période qui sera affichée dans le graphique
  • TimeAxis, l'orientation (horizontale/verticale) de l'axe du temps

Au moins une des commandes suivantes est requise (l'une ou les deux peuvent se produire plusieurs fois) :

Tous les autres paramètres sont optionnels.

Commentaires

Des commentaires sur une ou plusieurs lignes peuvent être spécifiés :

  • Le texte suivant le signe dièse # sera considéré comme un commentaire
  • Le texte entre #> et <# sera également considéré comme un commentaire. Les commentaires peuvent s'étendre sur plusieurs lignes lorsqu'ils sont étiquetés de cette façon.

Exemples :

DateFormat = dd/mm/yyyy # European date format

Period = from:01/09/1939 till:02/09/1945 #> this chart will show
  the complete duration of World War II <#

Commandes

Les commandes doivent commencer sur la première position d'une ligne.

Certaines commandes peuvent être suivies de plusieurs lignes de données et/ou d'options.

Ces lignes supplémentaires doivent commencer par au moins un espace ou être complètement vides (ce dernier est utile pour regrouper visuellement les lignes de données associées).

Les commandes ont l'une des formes suivantes, selon le type de commande :

Commande = attribut(s)

DateFormat = dd/mm/yyyy

Nom de commande = attribut(s)

Define $US = text:"United States"

Command =

attribute(s)
attribute(s)
etc.
PlotData =
  fontsize:XS width:20
  bar:Japan from:start till:19/02/1945 color:JT
  bar:Japan from:19/02/1945 till:14/03/1945 color:AI

Attributs

Lorsque plusieurs attributs peuvent être spécifiés pour une certaine commande, ils sont notés comme des paires 'nom:valeur'. Lorsque plusieurs valeurs peuvent être spécifiées pour un attribut, elles doivent être placées entre parenthèses. Quelques commandes, comme Color, utilisent d'autres formats.

Exemples :

BackgroundColors = bars:darkgrey
PlotData = at:5 shift:(10, -7) text:Foo
Color SB = value:rgb(0.8,0,0.7) legend:Sea_Battles

Paramètres avec éléments de données

La plupart des commandes n'acceptent que les attributs spécifiés sur la même ligne.

Blocs de données
Certaines commandes, comme BarData, PlotData, TextData, Colors attendent un bloc de données composé de une ou plusieurs lignes de données. Les lignes de données doivent commencer par un ou plusieurs espaces. Un bloc de données est considéré comme complet lorsqu'une ligne commençant par un non-espace est rencontrée (exception : les lignes vides sont ignorées, elles peuvent être utilisées pour regrouper des lignes de données liées au sein d'un bloc).
Les attributs d'un bloc de données peuvent être divisés conceptuellement en paramètres et éléments de données. Les blocs de données peuvent contenir des paramètres et des éléments de données entremêlés.
Éléments de données
Dans les lignes de données, les attributs text, from, till et at s'appliquent toujours uniquement à la ligne dans laquelle ils apparaissent.
Paramètres
Dans les lignes de données, les attributs tels que color et fontsize ont des implications différentes selon le contexte. Si ces paramètres apparaissent sur une ligne sans éléments de données, ils définissent de nouvelles valeurs par défaut pour les lignes de données qui suivent. S'ils apparaissent sur une ligne mélangée avec des éléments de données, ils s'appliquent uniquement à cette ligne, remplaçant ainsi une valeur par défaut précédemment définie.

Exemple :

# In this example two sets of bars are drawn, in red and blue respectively,
# but in each set one bar (marking war periods) will be drawn in green.

PlotData =
  color:red fontsize:S                               # set defaults
  bar:USSR from:1919 till:1922 text:Lenin            # red bar
  bar:USSR from:1922 till:1953 text:Stalin           # red bar
  bar:USSR from:1939 till:1945 text:WWII color:green # green bar
  bar:USSR from:1953 till:1964 text:Krushchev        # red bar
   
  color:blue                                         # change default color
  bar:US from:1913 till:1921 text:Wilson             # blue bar
  bar:US from:1917 till:1918 text:WWI color:green    # green bar
  bar:US from:1921 till:1923 text:Harding            # blue bar

#> this multiline comment does not end command PlotData,
   even when the previous line does not start with a space<#

   bar:US from:1923 till:1929 text:Coolidge           # blue bar

TextData =                                            # now PlotData is considered complete
   tabs:...etc

Règles d'entrée des données d'attribut

Mesures

Les mesures peuvent être absolues ou relatives à la taille de l'image en fonction de l'unité spécifiée dans les attributs.

Dans les attributs qui prennent des paires de coordonnées, la première coordonnée est horizontale de gauche à droite, la seconde est verticalement vers le haut.

Mesures absolues

Ils peuvent être utilisés pour spécifier les tailles totales de l'image, les positions et les décalages de position. La valeur peut être spécifiée en pixels (px), en pouces (in) ou en centimètres (cm) en ajoutant une unité postfixée à la valeur. Les valeurs peuvent avoir des décimales fractionables.

Exemple :

PlotArea = left:50 bottom:50 right:50 top:90

Les mesures absolues suivantes sont équivalentes :

  • 800px
  • 800 (l'unité par défaut est le pixel)
  • 8 pouces (en supposant une résolution d'affichage de 100 pixels par pouce)
  • 3,15cm (en supposant la même résolution d'affichage, convertie en centimètres)

Mesures relatives

Ils peuvent être utilisés pour spécifier des tailles et des positions en fonction des tailles totales d'image ; ils ne peuvent pas être utilisés pour spécifier les tailles totales d'image (voir ImageSize) mais peuvent être utilisés pour définir le PlotArea.

Pour les mesures horizontales, le pourcentage est lié à la largeur de l'image, pour les mesures verticales à la hauteur de l'image.

Spécifiez un nombre compris entre 0 et 100, immédiatement suivi d'un signe % (pourcentage).

Exemple :

PlotArea = left:10% bottom:5% right:5% top:15%

Saisie de texte

La saisie de texte est soumise à quelques règles :

  1. Seul un sous-ensemble d'Unicode est autorisé pour le rendu des polices, mais l'Unicode dans les liens devrait fonctionner pour tous les caractères. Voir aussi Prise en charge des polices.
  2. Lorsque le texte doit contenir des espaces, spécifiez-les en utilisant des traits de soulignement (_) ou placez le texte entre des "guillemets doubles".
    Exception : lorsque l'attribut text est le dernier attribut d'une ligne, les espaces sont autorisés (aucune confusion ne surviendra là où le texte s'arrête et où commence l'attribut suivant, c'est-à-dire, pour être précis, lorsqu'il n'y a pas de deux-points dans le texte).
  3. Dans les lignes de données suivant la commande TextData deux caractères ont une signification particulière :
  4.  : ^ (caret) signifie tab
  5.  : ~ (tilde) signifie nouvelle ligne

Exemple : (les éléments suivants sont tous équivalents)

BarData =
  text:Japanese_mandate_since_1914 bar:Marshalls

BarData =
  text:"Japanese mandate since 1914" bar:Marshalls

BarData =
  bar:Marshalls text:Japanese mandate since 1914

Exemple montrant des onglets :

TextData =
  tabs:(4-right,12-right,14-left,34-left)
  text:^1^1940^27/9^Berlin Ger,It,Jap sign Tripartite Pact
  text:^10^1944^1-22/7^Bretton Woods 44 nations establish
  text:^^^^^IMF and World Bank

# will be shown as:
#
#      1    27/9 Berlin Ger,It,Jap sign Tripartite Pact
#     10  1-22/7 Bretton Woods 44 nations establish
#                                    IMF and World Bank

Cartes cliquables

Les deux formats de sortie disponibles dans MediaWiki, à savoir PNG et SVG, peuvent contenir des liens cliquables. Les textes affichés en bleu et les barres peuvent ensuite être cliqués pour naviguer vers une autre page Web.

Les liens peuvent être spécifiés avec les commandes BarData, PlotData et TextData, soit avec l'attribut link, soit en tant que liens incorporés, via l'attribut text.

Liens intégrés

Les liens incorporés sont des liens qui font (partie d'un) texte affichable, spécifié avec l'attribut text. Leur contrepartie sont des liens explicites (URL uniquement) qui sont définis avec l'attribut link.

Les deux types de liens peuvent être spécifiés avec les commandes BarData, PlotData et TextData et sont utilisés pour clickable maps.

Dans les liens incorporés, le style de lien interne est comme d'habitude, le style de lien interwiki ne fonctionne pas, le style de lien externe est comme d'habitude avec des crochets simples, mais ici avec un pipe au lieu d'un espace.

Exemples :

  text:example [[Help:Link]] internal link

sera affiché comme :

Help:Link
  text:[[Help:Link|Link]]

sera affiché comme :

Help:Link
  text:[http://en.wikipedia.org/wiki/Rembrandt|Rembrandt van Rijn] paints Night Watch

sera affiché comme :

en.wikipedia.org/..

Utilisation de liens interwikis

Une tentative d'utilisation du style de lien interwiki :

  text:[[en:Main Page]]

et similaire avec nl: et m: donne :

m:Main Page

Le troisième vers Meta-Wikipedia fonctionne correctement, sauf à partir de Meta lui-même, les autres liens fonctionnent comme MainPage (page interne, le préfixe est ignoré) ou par ex.//www.mediawiki.org/w/Main_Page (donne File not found), en fonction de l'URL de la page de référence (par exemple différente pour une page d'aperçu et une page de diff).

Caractères spéciaux

  • #, #>, <# (hash, hash + "supérieur à", "inférieur à" + hash): voir Commentaires
  • ~ (tilde) dans les textes signifie : saut de ligne
  • ^ (caret) dans les textes signifie : tabulation
  • _ (trait de soulignement) dans les textes signifie : espace
  • $ (signe dollar) précède toute constante définie par l'utilisateur

Les espaces vides et les traits de soulignement dans une URL doivent être écrits sous la forme %20.

Le caractère tilde (~) est normalement interprété comme un saut de ligne. Lorsqu'un tilde fait partie d'une URL, écrivez-le comme deux tildes.
Par exemple, créez un lien vers www.site.com/~mysite comme suit :

  text:[www.site.com/~~mysite|My site]

Le signe dièse (#) est normalement interprété comme le début du commentaire. Lorsqu'un signe dièse fait partie d'une URL, assurez-vous que le texte est incorporé entre guillemets doubles comme suit :

  text:"More at [www.site.com/~~mysite#section2|My site]"

En fait, il peut être judicieux de toujours mettre les textes entre guillemets.

Référence de commande

Pour chaque commande, les attributs valides sont répertoriés. Certaines commandes sont obligatoires et certains attributs des commandes sont facultatifs.

Pour certaines commandes, certains attributs sont mutuellement exclusifs (seront expliqués le cas échéant).

AlignBars

Les barres seront toujours dessinées à des distances égales. Cette commande spécifie si les barres doivent être espacées autant que possible, ou si un espace blanc doit être réservé entre le côté gauche/supérieur du graphique et la première barre ou entre la dernière barre et le côté droit/inférieur du graphique.

early (par défaut)
La première barre sera placée sur la position la plus à gauche/la plus haute du graphique ('collée' à l'axe), laissant un espace entre la dernière barre et le côté droit/inférieur du graphique.
late
À l'opposé de early : la dernière barre sera placée aussi loin que possible du côté droit/inférieur du graphique, laissant un espace entre la ligne de l'axe (côté gauche/supérieur du graphique) et la première barre.
justify
Les première et dernière barres seront placées aussi loin que possible, ne laissant aucun espace vide de chaque côté du graphique. Lorsqu'une seule mesure est présente, la justification sera interprétée comme "centrée".

L'alignement exact dépend du paramètre d'orientation dans la commande obligatoire TimeAxis.

Exemples :

Alignbars = early late justify (default)
TimeAxis = orientation:horizontal
TimeAxis = orientation:vertical

BackgroundColors

Cette commande permet de spécifier les couleurs d'arrière-plan pour différentes parties du graphique. Tout « color-id » spécifié doit être défini en premier en utilisant Colors.

canvas : color-id (facultatif)

Spécifie une couleur d'arrière-plan pour toute l'image.
bars: color-id (facultatif)
Spécifie une couleur d'arrière-plan pour toutes les barres.

Exemples :

BackgroundColors = bars:darkgrey

BackgroundColors = canvas:lightgrey bars:darkgrey

BackgroundColors = canvas:lightgrey

BarData

Il s'agit d'une commande facultative qui, si elle est présente, détermine quelles barres seront dessinées sur le graphique et dans quel ordre. S'il est omis, les barres seront dessinées dans l'ordre de leur apparition dans la commande PlotData.

Pour les chronologies complexes avec de nombreuses barres, l'utilisation de cette commande est recommandée :

  • Cela facilitera la réorganisation des données affichées.
  • Les noms de barres spécifiés dans PlotData peuvent être validés par rapport à cette liste, évitant ainsi les erreurs de frappe.
bar : bar-id
Définit l'identifiant de la barre. D'autres commandes (notamment PlotData) attendront cet identifiant pour référence. Ce sera également l'étiquette à afficher le long de l'axe, à moins que l'attribut « texte » ne soit présent. L'identifiant de la barre ne doit contenir aucun espace : utilisez plutôt des traits de soulignement (_), ceux-ci seront convertis en espaces, comme pour les titres d'articles.
bar:barset-id (optional)
Specifies the barset id to be used for other commands. Like the bar id, underscores should be used as opposed to spaces.
text : some_text (facultatif)
Lorsque spécifié, cela indique le texte à présenter le long de l'axe, au lieu de l'ID de la barre. Voir aussi les règles pour saisie de texte. Le texte peut inclure un lien intégré (voir Note 1).
link (lien) : URL-local (facultatif)
Spécifier un lien Web (voir Note 1) (URL). L'étiquette le long de l'axe sera affichée sous la forme d'un lien cliquable bleu.

Notes

  1. Utilisez l'attribut « link », ou un lien incorporé dans l'attribut « text », pas les deux.

Exemples :

BarData =
  bar:Japan
  bar:US       text:"United States"  # refer in PlotData to bar "US" but show "United States"
  bar:China    text:[[China]]        # label China will be shown as blue clickable link to the English Wikipedia article about China

Les lignes suivantes produisent le même résultat (référence uniquement dans les modifications PlotData) :

bar:US            text:[[United_States]]

bar:US            text:"United States" link:http://www.wikipedia.org/wiki/United_States

bar:United_States                      link:http://www.wikipedia.org/wiki/United_States

Colors

Cette commande permet de définir des couleurs et de les coupler à un identifiant (étiquette d'identification). D'autres commandes feront référence aux couleurs avec l'identifiant spécifié ici. Cette commande attend une ou plusieurs définitions de couleur, chacune sur une ligne en retrait distincte.

id : color-id
D'autres commandes utiliseront cet identifiant pour spécifier les couleurs du texte, de la barre ou de l'arrière-plan.
value (valeur) : color-space (coordonnées)
Définition réelle de la couleur. Les valeurs de couleur peuvent être soit spécifiées comme :
  • predefined-color-name : 32 constantes de couleur sont prédéfinies et reconnues (voir la page couleur de Ploticus où toutes ces constantes sont définies).
  • rgb(rouge,vert,bleu): spécifiez 3 chiffres entre 0 (minimum) et 1 (maximum)
  • hsb(teinte,saturation,luminosité) : spécifiez 3 chiffres entre 0 et 1.
  • gray(value): spécifie un nombre entre 0 (noir) et 1 (blanc).
Notes
  1. Les coordonnées des espaces colorimétriques 0 et 1 doivent être spécifiées sous forme d'entiers uniquement, les coordonnées intermédiaires nécessitent un point comme séparateur décimal après 0.
  1. Pour créer des couleurs RVB ou HSV, veuillez consulter le convertisseur de couleurs RVB/HSB
Hexadécimal vers rgb()
Pour convertir de l'hexadécimal (#D09916) en rgb (rgb(0.816,0.600,0.086)) :
  1. Visitez ColorHexa et recherchez votre couleur hexadécimale.
  1. Lisez la ligne de texte au début le long des lignes de "Dans un espace colorimétrique RVB, hex ... est composé de RR.R% rouge, GG.G% vert et BB.B% bleu".
  2. Divisez les trois nombres (RR.R, GG.G et BB.B) par 100 et utilisez le nombre résultant (entre 0 et 1) comme valeurs pour rgb().
légende : texte à saisir (facultatif)
spécifie le texte qui doit être affiché dans la légende pour cette couleur. Si cet attribut est omis, aucune entrée n'apparaîtra dans la légende.
Notes :
  1. Voir Saisie de texte pour les règles.
  1. Les liens intégrés sont pris en charge dans les textes de légende, voir Cartes cliquables.

Exemple :

Colors =
  id:war       value:red   legend:War_Period
  id:peace     value:blue  legend:Peace_Time
  id:treaty    value:rgb(0.6,0,0.6)
  id:lightgrey value:gray(0.9)
  id:darkgrey  value:gray(0.1)

Predefined colors

Référence aux couleurs en HTML

#000000 #b29999 #e5d3c9 #ffffff      
#ffcccc #ff9999 #ff4c7f #b24c4c #ff0000 #dc143c  
#ff7f00 #ff9e23 #ffcc99 #ffd800 #eaea00 #ffff00 #ffe599
#00ff00 #00b200 #4c994c #007f33 #99cc99 #99e599 #ccffb2
#b2ccff #007fcc #0066cc #0000ff      
#770077 #aa4caa #9999ff #b2b2ff #ccb2cc    

DateFormat

Cette commande définit la façon dont les dates, spécifiées dans d'autres commandes, doivent être interprétées.

Les formats de date valides sont :

dd/mm/yyyy (dates dans la plupart des pays anglophones)
Les dates sont interprétées comme jour / mois / année
Remarque: ce format n'est autorisé que pour les dates à partir du 01/01/1800
mm/dd/yyyy (dates aux États-Unis)
Les dates sont interprétées comme mois / jour / année
'Remarque' : ce format n'est autorisé que pour les dates à partir du 01/01/1800
yyyy (c'est le format par défaut)
Cela concerne les integers de -9999 à 9999 sans zéros non significatifs

Notes les formats suivants ne sont toujours pas pris en charge :

  • le format standard ISO 8601 : yyyy-mm-dd (standard au Canada).
  • l'autre format standard d'Europe centrale : yyyy.mm.dd.
  • les formats de date avec mois mais sans jour: mm/yyyy ou ISO 8601 yyyy-mm.
  • les formats de date avec trimestres: qq/yyyy ou ISO 8601 yyyy-Qq.
  • autres séparateurs d'éléments de date, noms de mois abrégés multilingues ...

Exemple :

DateFormat = mm/dd/yyyy

Définir

Cette commande permet de définir des constantes de texte, c'est-à-dire des raccourcis pour des morceaux de code de script qui se produisent plusieurs fois. Les constantes de texte doivent toujours commencer par un '$' (signe dollar).

Exemple :

Define $broad       = width:30
Define $narrow      = width:10
Define $bardefaults = $broad fontsize:S

ImageSize (obligatoire)

Cette commande définit la taille globale de l'image finale. Spécifiez les valeurs dans mesures absolues.

largeur: pixels/auto
Largeur de l'image finale en pixels : le maximum est de 1600 pixels, le minimum est de 25
(peut également être réglé sur auto si la direction TimeAxis est réglée sur vertical).
height:pixels/auto
Hauteur de l'image finale en pixels : le maximum est de 1200 pixels, le minimum est de 25
(peut également être réglé sur 'auto' si la direction TimeAxis est réglée sur horizontal).
barincrement:pixels
Quantité en pixels à ajouter à la taille de l'image pour chaque barre spécifiée
(autorisé uniquement en combinaison avec width:auto ou height:auto, puis obligatoire).

Pour une flexibilité maximale, vous pouvez laisser le script calculer la hauteur ou la largeur de l'image, en fonction du nombre de barres et de la quantité en pixels à ajouter par barre. Spécifiez height:auto (pour l'axe du temps horizontal) ou width:auto (pour l'axe du temps vertical).

Ceci est particulièrement utile lorsque le nombre de mesures dans une chronologie est susceptible de changer encore et encore. Ou pour assurer des distances égales entre les barres dans les images avec de nombreuses barres étroites où des différences de quantité d'espace blanc seraient bientôt remarquées (voir pour un exemple réel :en:Template:Vocal and instrumental pitch ranges). Ou pour s'assurer que plusieurs chronologies liées utilisent toujours la même distance entre les barres, quel que soit le nombre de barres que chacune contient (voir pour un exemple réel Liste des papes (graphique). Bref c'est une bonne idée la plupart du temps.

Exemples :

ImageSize = width:800 height:600

ImageSize = width:800 height:auto barincrement:30

Légende

Une légende ne sera affichée que lorsque cette commande est présente et qu'au moins une des couleurs a l'attribut legend: spécifié. Il existe plusieurs façons de définir l'apparence et la position de la légende. Certains attributs sont mutuellement exclusifs (voir ci-dessous).

orientation : hor / ver (facultatif)
Spécifiez hor[izontal] ou ver [tical] (par défaut).
restriction:orientation = 'horizontal' et position='right' s'excluent mutuellement
position: top (en haut)/bottom (en bas)/right (à droite) (facultatif)
définit le placement de la légende par rapport à la zone du graphique. Spécifiez top, bottom (par défaut) ou right (à droite).
restriction: orientation = 'horizontal' et position = 'right' s'excluent mutuellement
columns (colonnes): entier (facultatif)
Précisez 1, 2, 3 ou 4.
Lorsque cet attribut est omis, le nombre de colonnes est déterminé comme suit :
  • orientation horizontal : Les colonnes d'attributs ne s'appliquent pas ici. Toutes les entrées seront sur la même ligne.
  • orientation vertical:
    • position right : toutes les entrées seront dans une colonne
    • position top or bottom : Le nombre de colonnes dépend du nombre d'entrées à afficher :
      1-5 entrées : 1 colonne, 6-10 entrées : 2 colonnes, 11 entrées ou plus : 3 colonnes.

Tip: vous pouvez envisager d'omettre les paramètres suivants dans un premier temps et de ne les ajouter que lorsque les paramètres par défaut ne sont pas satisfaisants.

columnwidth: distance (facultatif)
Définit la distance entre les colonnes. Vous pouvez spécifier une distance absolue ou une distance relative (en pourcentage de la largeur de l'image).
restriction : ce paramètre est ignoré lorsque colonnes = 1 est défini ou implicite.
left: distance (facultatif)
définit la distance entre le côté gauche de la légende et le côté gauche de l'image. Vous pouvez spécifier une distance absolue ou une distance relative (en pourcentage de la largeur de la page).
top: distance (facultatif)
Définit la distance entre le haut de la légende et le bas de l'image. Vous pouvez spécifier une distance absolue ou une distance relative (en pourcentage de la hauteur de la page).

Exemples :

Legend = orientation:vertical position:bottom columns:3 columnwidth:140

Legend = orientation:horizontal position:bottom

Legend = left:100 top:120 columns:3

LineData

Certaines chronologies s'étendent sur plusieurs périodes bien distinctes. Une ligne délimitant ces périodes peut servir d'aide visuelle.

at: temps
Trace une ligne perpendiculaire à l'axe du temps (entre les positions minimale et maximale, voir également ci-dessous).
Spécifiez la date/année où la ligne doit être tracée, conformément au DateFormat spécifié.
color: color-id (facultatif)
Spécifiez la couleur dans laquelle la ligne doit être tracée.
Remarque : L'identifiant de couleur spécifié doit être défini en premier avec la commande Colors.
layer:front/back (avant/arrière) (facultatif)
Spécifiez le recto ou le verso (par défaut). Définit si la ligne doit apparaître devant ou derrière toutes les barres de segment de temps.
width: distance (facultatif)
Spécifiez une valeur comprise entre 0.1 (très fin) et 10 (très épais) ; la valeur par défaut est 1

Options de positionnement avancées

Vous pouvez tracer des lignes dans n'importe quelle direction. Ce n'est que dans de rares cas que les attributs supplémentaires suivants peuvent être nécessaires pour une flexibilité totale :

  1. Parallèle à l'axe du temps avec des heures de démarrage et d'arrêt arbitraires :
  1.  ; atpos: position
  1. from: temps (facultatif)
  1. till: temps (facultatif)
  1. Specify the position absolue ou relative sur l'axe orthogonal à TimeAxis.
  1.  : spécifiez les dates/années entre lesquelles la ligne doit être tracée, conformément au DateFormat spécifié (la valeur par défaut est la plage de temps complète définie dans la commande Période, voir également ci-dessous).
  1. Orthogonal à l'axe du temps avec des positions de départ et d'arrêt arbitraires :
    at: temps
    frompos:position (facultatif)
    tillpos:position (facultatif)
  1.  : spécifiez la date/année où la ligne doit être tracée, conformément à DateFormat.
  1.  : spécifiez le début et l'arrêt positions absolues ou relatives sur l'axe orthogonal au TimeAxis (la valeur par défaut est la longueur totale du DrawArea ).
  1.  : dessine une ligne orthogonale à l'axe du temps (par défaut pour toute la plage de temps définie dans la commande obligatoire Period, voir également ci-dessous).
  1. Dans n'importe quelle direction avec des points de départ et d'arrêt arbitraires :
    points:(x1,y1)(x2,y2)
  1.  : spécifiez les positions absolues ou relatives comme coordonnées, indépendamment de la direction de l'axe du temps.

Exemple :

LineData =
  layer:front                                            # all lines in front of bars unless stated otherwise
  at:1                         color:yellow              # perpendicular to time axis full length
  at:2                         color:orange  layer:back  # perpendicular to time axis full length but behind bars
  at:4  frompos:50 tillpos:105 color:green               # perpendicular to time axis, with specified start and stop points
  from:5 till:8 atpos:50       color:red                 # parallel to time axis
  points:(100,20)(170,105)     color:blue    width:3     # from one arbitrary absolute position to another, extra thick

Période (obligatoire)

Définit la période de temps qui sera affichée dans le graphique. Les deux paramètres sont obligatoires. Spécifie les dates conformément au format de date spécifié.

from:time
La chronologie commence ici. La valeur spécifiée peut être référencée comme start dans des commandes telles que PlotData et TextData.
till:time
Le temps s'arrête ici. La valeur spécifiée peut être référencée comme end dans d'autres commandes.

Exemple :

Period = from:01/09/1939 till:02/09/1945

PlotArea (obligatoire)

left:distance
Marge entre le côté gauche de l'image et le côté gauche de la zone de tracé. Spécifiez la valeur en mesures absolues ou relatives.
top:distance
Marge entre le haut de l'image et le haut de la zone de tracé. Spécifiez la valeur en mesures absolues ou relatives.
right:distance (conseillé)
Marge entre le côté droit de l'image et le côté droit de la zone de tracé. Spécifiez la valeur en mesures absolues ou relatives.
cet attribut et l'attribut obsolète width s'excluent mutuellement.
bottom:distance (conseillé)
Marge entre le bas de l'image et le bas de la zone de tracé. Spécifiez la valeur en mesures absolues ou relatives.
cet attribut et l'attribut hauteur déconseillé s'excluent mutuellement.
La valeur minimale de cet attribut est de 20 pixels si vous avez spécifié des libellés de légende (voir Legend).
width:distance

(obsolète)

spécifiez la valeur dans mesures absolues ou relatives.
ne plus utiliser, voir l'attribut right ci-dessus.
height:distance (obsolète)
Spécifier la valeur en mesures absolues ou relatives.
ne plus utiliser, voir l'attribut bottom ci-dessus.

Remarques :

  1. Les attributs width et height ne sont conservés que pour une compatibilité descendante. Auparavant, une zone de tracé ne pouvait être définie que par ses marges totales width et height, et left et bottom.
  2. Maintenant, vous pouvez spécifier les quatre marges, et il est conseillé de le faire, et de ne plus utiliser les attributs width et height.
  3. L'avantage est une flexibilité supplémentaire : lorsque vous modifiez la taille globale de l'image, vous n'avez pas besoin d'ajuster également la définition de la zone de tracé. Ceci est encore plus important lorsque la taille de l'image est calculée automatiquement (voir Taille de l'image).

Exemple :

PlotArea = left:40 bottom:60 top:10 right:10 # e.g. extra space to the left and below the plot area for axis labels and legend

PlotData

Utilisé pour définir des barres (symbolisant une période) et ajouter du texte à côté de ces barres sur une position spécifique.

Pour les textes qui ne sont pas liés à une certaine période ou date/année ou qui nécessitent un formatage étendu, utilisez la commande TextData.

Les attributs text, at, from et till s'appliquent toujours uniquement à la ligne sur laquelle ils apparaissent. Tous les autres attributs, lorsqu'ils ne sont pas combinés avec l'un de ces quatre, agissent par défaut pour le reste du bloc de commande ou jusqu'à ce qu'une nouvelle valeur par défaut soit spécifiée, et peuvent être annulés pour une seule ligne. Voir Parameters vs data items pour plus d'informations et un exemple.

PlotData accepte de nombreux attributs, dont certains s'excluent mutuellement. Ces attributs peuvent être regroupés comme suit :

  • Attributs de position
  • Attributs liés à la barre
  • Attributs de texte
  • Attribut de marqueur

Attributs positionnels

at:time (s'applique uniquement à la ligne actuelle dans le bloc de données)
Spécifie à quelle date/année un texte ou marker doit être positionné. Selon l'attribut align, le texte commence, se termine ou est centré à cette position. Utilisez le format date/année comme spécifié dans DateFormat ou spécifiez start ou end qui fait référence à la période définie par la commande Period.
Note : Cet attribut ne peut pas être combiné avec les attributs from et till.
from:time (s'applique uniquement à la ligne actuelle dans le bloc de données)
till:time (s'applique uniquement à la ligne actuelle dans le bloc de données)
Spécifie à quelle date/année une barre doit commencer et se terminer. Utilisez le format date/année comme spécifié dans Format de date ou spécifie start qui fait référence à la période définie par la commande Period.
Remarque : Ces deux attributs doivent être utilisés en combinaison et ne peuvent pas être combinés avec l'attribut at.
shift:(x,y) (facultatif)
spécifie un déplacement horizontal et vertical dans mesures absolues pour un texte. Ceci permet :
  • Textes à décaler pour éviter les chevauchements entre les barres successives ;
  • Placement du texte à côté d'une barre, plutôt qu'au dessus.

Exemples :

PlotData=
  bar:Japan from:start      till:19/02/1945 color:JT
  bar:Japan from:19/02/1945 till:14/03/1945 color:AI
  bar:Japan from:02/09/1945 till:end        color:AO

  at:07/12/1941 shift:(0,-15) text:"<-- WW2 reaches Asia"

Attributs liés à la barre

bar:bar-id
spécifie à quelle barre tous les autres attributs s'appliquent (y compris les attributs de marqueur facultatifs et les attributs de texte).
Le bar-id spécifié ici sera également le texte présenté le long de l'axe, à côté de la barre.
  • Lorsque la commande BarData n'a pas été utilisée, les barres seront dessinées dans l'ordre dans lequel elles apparaissent dans n'importe quel bloc de données PlotData.
  • Lorsque la commande BarData a été utilisée, les barres seront présentées dans l'ordre spécifié ici, également le bar-id spécifié ici sera validé par rapport à cette liste. Le texte présenté le long de l'axe dépendra également de la définition dans BarData.
barset:barset-id (facultatif)
Redémarre l'affichage des barres "par le haut", permettant plusieurs barres sur la même ligne.
Le bar-id spécifié doit avoir été déclaré dans BarData.
Le jeu de barres par défaut est anonyme et n'a pas besoin d'être spécifié s'il n'y a pas de BarData.
des lignes vides peuvent être ajoutées pour sauter les lignes que vous ne souhaitez pas ajouter avec des déclarations telles que at:1234 sans autres attributs. Plusieurs barres peuvent alors être spécifiées après cet attribut.
color:color-id (facultatif)
Spécifie la couleur avec laquelle la barre doit être dessinée.
L'identifiant de couleur spécifié doit être défini en premier avec la commande Colors.
La valeur par défaut sera de la même couleur que la barre précédemment spécifiée.
width:distance (facultatif)
spécifie la largeur de la barre dans mesures absolues ou relatives.
La valeur par défaut sera calculée en fonction de la taille totale du PlotArea, et du nombre maximum de barres dans tous les jeux de barres (y compris le jeu de barres anonyme par défaut).

Exemple :

BarData=
  bar:US text:United States
  bar:SB text:Sea Battles

Colors=
  id:US value:blue legend:United_States
  id:SB value:rgb(0.8,0,0.7) legend:Sea_Battles

PlotData=
  width:0.3                                                            # see note 1
  bar:SB     from:07/08/1942 till:09/02/1943 text:Guadalcanal color:SB # see note 2
  bar:US     from:start      till:end color:US                         # see note 3
  bar:Midway from:start      till:end color:US                         # see note 4
  bar:US     at:07/12/1941   text:7/12 Pearl Harbour                   # see note 5

Notes:

  1. this line establishes a default bar width for the remainder of the data block
  2. this line specifies a bar to be drawn and a text to placed on it at the same time
  3. bar US will be drawn before bar SB, even when specified after it, because command BarData determines the sequence
  4. bar Midway will be rejected because it is not declared with command BarData

the last line will not result in a bar being plotted, it merely specifies on which bar the text should be placed

Attributs de texte (facultatif)

text:some_text (s'applique uniquement à la ligne actuelle dans le bloc de données)
définit un texte qui doit être tracé sur ou à proximité d'une barre.
Remarques
  1. Voir aussi Saisie de texte pour les règles.
  2. Le texte peut inclure des liens intégrés (voir Notes 1 & 2) à utiliser dans les cartes cliquables.
  3. Voir Cartes cliquables pour plus d'informations sur les textes avec des liens intégrés et des limitations.
textcolor:color-id (facultatif)
Définit la couleur du texte. L'identifiant de couleur spécifié doit être défini en premier avec la commande Colors. Lorsqu'il n'est pas spécifié, la couleur noire sera supposée.
fontsize:entier/tag (facultatif)
spécifier une taille de point comprise entre 6 et 30, ou (de préférence) l'une des balises XS, S (par défaut), M, L ou XL. Voir Prise en charge des polices pour plus de détails.
anchor:middle/from/till (facultatif)
spécifier la position de l'ancrage. Si elle n'est pas définie, la position de l'ancre est soit explicitement définie avec l'attribut at, soit implicitement avec les attributs from et till. Dans ce dernier cas, le texte sera positionné au milieu du segment de barre défini.
align:center/left/right' (facultatif)
Spécifier le centre (par défaut), la gauche ou la droite.
link:URL (facultatif, s'applique uniquement à la ligne actuelle dans le bloc de données)
Spécifiez un lien Web (voir Note 1) (URL) à utiliser dans les cartes cliquables. Le texte sera affiché sous la forme d'un lien cliquable bleu.
Remarques
  1. Cet attribut ne peut être utilisé qu'avec l'attribut text.
  1. Utiliser soit un lien d'attribut, soit un lien intégré dans le texte d'attribut, pas les deux.
  2. Sur les images PNG rendues sous forme de cartes cliquables, un seul lien cliquable sera affiché par segment de texte : le texte avec des sauts de ligne (~) constitue plusieurs segments.
  1. Voir Cartes cliquables pour plus d'informations sur les textes avec des liens intégrés et des limitations.

Exemple :

PlotData=
   bar:US at:07/12/1941 align:left textcolor:black fontsize:XS text:7/12 [[Pearl Harbour]]

produit le même résultat que :

PlotData=
   bar:US at:07/12/1941 align:left textcolor:black fontsize:XS text:"7/12 Pearl Harbour" link:http://www.wikipedia.org/wiki/Pearl_Harbour

Attribut de marqueur (facultatif)

mark:(symbol,color-id)
Place un marqueur dans une barre à la position spécifiée.
  • La seule valeur de symbol supportée à ce jour est line.
  • Le color-id spécifié doit être défini en premier avec la commande Colors. Lorsqu'il n'est pas spécifié, la couleur noire sera supposée.

Exemple :

PlotData=
  bar:test width:15 color:red
  from:1900 till:2000
  at:1990 mark:(line,white)

sera affiché comme :

ScaleMajor (Échelle majeure)

Cette commande divise la chronologie en périodes plus petites, soit

  • Graphiquement, à travers de fines lignes verticales ou horizontales dans le graphique
  • Textuellement, à travers des stubs dans l'axe du temps, en dessous ou à gauche du graphique
  • À la fois graphiquement et textuellement
gridcolorgridcolor:color-id (facultatif)
définir la couleur des lignes de la grille.
Lorsque cet attribut est omis, aucune ligne de quadrillage ne sera tracée.
Le color-id spécifié doit être défini en premier avec la commande Colors.
unitunit:time-unit (facultatif)
spécifie l'unité de temps par laquelle l'espacement de la grille est incrémenté.
Spécifier jour, mois ou année (par défaut).
Lorsque DateFormat = yyyy est spécifié, seule l'unité year est autorisée.
incrementincrement:integer (facultatif)
spécifie le nombre (non nul) d'unités par lequel l'espacement de la grille est incrémenté.
L'incrément par défaut est 1.
startstart:time (facultatif)
spécifie où la première ligne de quadrillage et/ou le premier stub doivent être affichés.
Par défaut au début de la Période définie.

Remarque : l'orientation des lignes et/ou le placement des stubs dépend de l'orientation du TimeAxis.

Exemples :

ScaleMajor = gridcolor:red start:1940

ScaleMajor = gridcolor:red unit:month increment:3 start:01/09/1939

ScaleMinor (Échelle mineure)

Cette commande définit une subdivision supplémentaire de l'échelle de temps (voir ScaleMajor pour la syntaxe des attributs).

Exemple :

ScaleMajor = grid:red  unit:year  increment:1 start:01/01/1940
ScaleMinor = grid:blue unit:month increment:3 start:01/10/1939

TextData (Données de texte)

Utilisé pour définir un bloc de texte pouvant être positionné n'importe où sur le graphique.

texttext:du_texte
Le texte réel.
Voir aussi Saisie de texte pour les règles.
Le texte peut inclure des liens intégrés (voir aussi Notes 1 & 2).
pos:(x,y)
définit le coin supérieur gauche du bloc de texte dans mesures absolues ou relatives.
link:URL (facultatif)
Spécifie un lien Web (voir Note 1) à utiliser dans les cartes cliquables.
L'étiquette le long de l'axe s'affichera sous la forme d'un lien bleu cliquable.
textcolor:color-id (facultatif)
Définit la couleur du texte à dessiner.
Le color-id spécifié doit être défini en premier à l'aide de Colors.
Lorsqu'elle n'est pas spécifiée, la couleur est noire.
fontsize:integer/tag (facultatif)
Spécifie une taille de point entre 6 et 30, ou (de préférence) l'une des balises XS, S (par défaut), M, L ou XL (voir Prise en charge de la police pour plus de détails).
tabs:(x1-alignement1,x2-alignement2...) (facultatif)
Définit la position et l'alignement du caractère de tabulation : ^ (caret).
spécifie plusieurs paramètres d'onglet sous forme de liste séparée par des virgules de xn-alignn
  • xn est le déplacement horizontal en mesures absolues à partir du côté gauche du texte ;
  • alignmentn est l'alignement du segment de texte (précisez center, left ou right).
lineheight:distance (facultatif)
définit l'espacement entre les lignes consécutives dans mesures absolues.
spécifie une valeur jusqu'à 40 pixels (ou 0,4 pouces).
Lorsqu'elle n'est pas spécifiée, une hauteur de ligne par défaut sera basée sur la taille de police actuellement utilisée.

Remarques :

  1. Utilise soit l'attribut link, soit un lien intégré dans l'attribut text, pas les deux.
  2. Sur les images PNG, un seul lien cliquable sera affiché par segment de texte (le texte avec des tabulations (^) constitue plusieurs segments).

Exemple :

TextData =
  pos:(20,67) textcolor:black fontsize:S
  tabs:(10-right,14-left,50-left,90-left,230-left)
  text:^1^1940^27/9^Germany,Italy and Japan sign [[Tripartite Pact]]
  text:^10^1944^1-22/7^Bretton Woods 44 nations establish
  text:^^^^^IMF and World Bank

sera affiché comme :

Tripartite Pact

TimeAxis (obligatoire)

Définit l'orientation de l'axe du temps et la représentation textuelle des stubs le long de cet axe.

format :time-format (facultatif)
Spécifiez dans quel format les dates doivent être présentées le long de l'axe du temps.
Actuellement, seul le format aaaa (par défaut) est pris en charge. Cela signifie que si l'attribut unit: pour ScaleMajor est défini sur autre chose que year, les lignes principales de la grille ne seront pas synchronisées avec les étiquettes des axes. Par exemple, définir unit:month et increment:6 entraînera des quadrillages majeurs tous les 6 mois, mais des étiquettes d'axe tous les 6 ans. La prise en charge d'autres formats pourrait suivre.
orientation:hor/ver'
Spécifiez hor[izontal] ou ver[tical].
L'orientation par défaut de l'axe du temps est horizontale.
order:reverse (optionnel)
Spécifiez reverse comme option pour inverser le flux temporel.
La valeur par défaut est le flux horaire direct.

Exemple :

TimeAxis = orientation:horizontal format:yyyy

Préréglages

Les préréglages sont un raccourci pour les paramètres souvent utilisés. Ils économisent quelques lignes de code et favorisent la normalisation, mais peuvent prêter à confusion, car le script de la chronologie devient moins auto-documenté.

Pour le moment, deux préréglages sont disponibles :

  • Preset = TimeVertical_OneBar_UnitYear, qui s'étend à
PlotArea   = left:45 right:10 top:10 bottom:10
TimeAxis   = orientation:vertical format:yyyy
DateFormat = yyyy
AlignBars  = early
ScaleMajor = unit:year
ScaleMinor = unit:year
PlotData   =
   mark:(line,white) align:left fontsize:S width:20 shift:(20,0)
  • Preset = TimeHorizontal_AutoPlaceBars_UnitYear, qui s'étend à
ImageSize  = height:auto barincrement:20
PlotArea   = left:25 right:25 top:15 bottom:30
TimeAxis   = orientation:horizontal format:yyyy
Colors = 
  id:canvas value:gray(0.7)
  id:grid1  value:gray(0.4)
  id:grid2  value:gray(0.2)
BackgroundColors = canvas:canvas
DateFormat = yyyy
AlignBars  = justify
ScaleMajor = unit:year grid:grid1
ScaleMinor = unit:year
Legend = orientation:vertical left:35 top:130
PlotData =
   align:left anchor:from fontsize:M width:15 shift:(4,-6) textcolor:black

Limites d'implémentation et d'intégration

Prise en charge des polices

Timeline a un support Unicode quelque peu limité :

  • il utilise la police FreeSans.ttf, qui supporte un sous-ensemble de tous les glyphes possibles ;
  • par exemple, il prend en charge les diacritiques d'Europe occidentale et orientale pour l'alphabet latin, ainsi que les alphabets cyrillique, grec et arménien, l'hébreu abjad (mais sans réorganisation visuelle), le devanagari, le bengali, le gurmukhi, le gujarati, le tamoul et Kannara abugidas pour les langues indiennes, les alphasyllabaires Kanas (pour le japonais de base uniquement) et un bon sous-ensemble de ponctuation générale étendue, symboles d'unités monétaires, chiffres en indice/exposant, symboles en forme de lettre, fractions et nombres romains, quelques flèches et opérateurs mathématiques ;
  • mais il manque les alphabets géorgiens, l'arabe abjad, l'alphabet et les syllabes Hangul, les abugidas oriya, télougou thaï, lao et tibétain, les idéogrammes kanji et han (donc le chinois, le coréen, le géorgien, l'arabe et le thaï ne sont pas pris en charge, et le japonais doit encore être translittéré en kanas de base ou en latin) ;
  • De plus, il ne prend pas en charge les Dingbats, ainsi que les symboles non linguistiques tels que les caractères de dessin de boîte qui doivent être dessinés à l'aide des commandes de dessin de ligne prises en charge.
  • Différentes polices peuvent être définies dans LocalSettings.php qui peut avoir un meilleur support Unicode. Par exemple, Malayalam Wikipedia utilise une police différente qui prend mieux en charge la langue malayalam.

En tant qu'héritage de l'utilisation des polices bitmap, seules cinq balises de police sont prédéfinies. Ils seront rendus à des tailles légèrement différentes dans les images PNG et SVG pour produire une lisibilité optimale pour les deux plates-formes. Il est conseillé d'utiliser ces balises au lieu de chiffres dans la mesure du possible. Ce sont : XS=eXtra Small, S=Small (par défaut), M=Medium, L=Large, XL=eXtra Large

EasyTimeline code avec paramètre de modèle ou mots magiques

Si vous souhaitez utiliser une chronologie simple avec des paramètres de modèle ou des éléments tels que {{CURRENTDAY2}}, vous pouvez utiliser la syntaxe #tag :

{{#tag:timeline|
Timeline code here
}}

Cependant, il faut remplacer tous les | par {{!}} (qui devrait être un modèle contenant uniquement |). Voir la section sur #tag à Mots magiques pour plus de détails

Bogues connus et limitations des liens intégrés

  • Vous ne pouvez actuellement spécifier qu'un seul lien par segment de texte.
  • Les bandes-annonces de liens ne sont pas reconnues, vous devez mettre le texte intégral qui fait partie du lien dans " [[]]".
  • Les liens qui ne sont pas spécifiés au début du texte (ou au début d'une nouvelle ligne après un saut de ligne spécifié par un tilde) sont mal positionnés (la couleur normale du texte est utilisée à la bonne position, et le texte avec la couleur du lien bleu est superposée au-dessus avec la mauvaise position horizontale). Voir le premier exemple essayant d'afficher "Help:Link" ci-dessus dans cette section.
  • Si le texte affiché dans les légendes des barres d'un PlotData contient des retours à la ligne (représentés par un ~), l'URL cible est cassée, ne conservant que le premier mot.

    Par exemple le code suivant dans les données de la barre :

      from:1935 till:2004 text:"[[Françoise Sagan|Françoise Quoirez,~alias Françoise Sagan]]" color:writer
    

    s'affiche actuellement comme

    où la cible est liée à Françoise au lieu de Françoise Sagan, et affiche le texte d'info-bulle incorrect "Françoise Sagan/.." avec des caractères supplémentaires. Ce bogue ne se produit pas si le lien cible contient un seul mot. Entourer le texte intégral (avec le lien lui-même) de guillemets ne résout pas le problème. De plus, cela provoque fréquemment l'échec de la chronologie sans afficher l'erreur lors de son rendu (aucune image rendue sur le navigateur).

  • De plus la cible est supposée appartenir à la même page parente que la sous-page courante même si le lien cible ne commence pas par un "/" (avec la syntaxe wiki), donc les timelines contenant des liens ne sont pas utilisables dans les sous-pages (comme celle-ci ).