Configurer l'application Chronologie

Les exemples de ce cours s'appuient sur l'Annuaire de l'éducation, un jeu de données de référence : une ligne par établissement scolaire, avec son type, sa commune, son académie et sa date d'ouverture.

Pour afficher vos propres événements, importez-les d'abord : depuis un fichier (cours Import de données avec un fichier), ou depuis une API comme celle d'OpenAgenda, avec une mise à jour automatique (cours Configurer un traitement Import depuis une API JSON).

La section Données désigne les événements de la frise :

• [1] Jeu de données : seuls les jeux qui ont une colonne de date portant le concept Date d'évènement, Date de début ou Date de fin sont proposés. Si votre jeu n'apparaît pas, ajoutez le concept sur sa colonne de date, dans le schéma du jeu (voir le cours Ajout de métadonnées, de concepts et demande de publication) ;
• [2] Filtres prédéfinis : ici, les établissements publics dont la nature est Collège ou un type de lycée, ouverts depuis le 1er janvier 2024. Les filtres sont communs à la plupart des visualisations et décrits dans le cours Créer et gérer une visualisation.

La frise affiche au plus 100 événements : les 100 premiers dans l'ordre du tri (voir 2). Filtrez les données pour que la frise reste lisible et complète.

La section Options générales règle l'ordre et la disposition de la frise :

• [1] Tri : Chronologique, du plus ancien au plus récent (par défaut), ou Chronologique inverse, les plus récents en haut ;
• [2] Position des éléments : les vignettes Alternées de part et d'autre de l'axe (par défaut), toutes À droite ou toutes À gauche de l'axe, les dates de l'autre côté ;
• [3] Couverture temporelle : Complète (par défaut), Passé ou Futur. Passé ne garde que les événements dont la date est déjà passée, Futur ceux dont la date est à venir, par rapport au moment où le visiteur ouvre la page : une frise Futur avec un tri Chronologique montre toujours les prochains événements en premier, sans aucune mise à jour.

Les positions alternées se lisent comme une frise historique et tiennent plus d'événements en hauteur. Sur un écran étroit, ou quand les vignettes ont beaucoup de texte, préférez une position à droite ou à gauche : chaque vignette a plus de largeur.

La section Éléments a trois onglets. L'onglet Date règle la date écrite face à chaque point de la frise :

• [1] Champ de temporalité : la colonne de date qui place les événements sur la frise et les trie ; toutes les colonnes de type date ou date et heure du jeu sont proposées ;
• [2] Formatage de la date : la façon d'écrire la date, en syntaxe Day.js ; par défaut LLL, la date et l'heure (1 septembre 2025 00:00). Pour une date sans heure, utilisez LL (1 septembre 2025) ;
• [3] Taille du texte : de 0 à 9 ;
• [4] Valeur en gras et [5] Texte en majuscules.

Quelques formats utiles : LL pour 1 septembre 2025, dddd D MMMM YYYY pour lundi 1 septembre 2025, MMMM YYYY pour le mois seul, DD/MM/YYYY pour 01/09/2025, YYYY pour l'année seule. Les noms de jours et de mois suivent la langue du visiteur.

L'onglet Détails choisit le contenu des Vignettes, en trois styles :

• Style par défaut : aucun réglage. La vignette montre la colonne qui porte le concept Libellé comme titre, dans la couleur de l'événement (voir 5.2), puis l'image de la colonne au concept Image et le texte de la colonne au concept Description (5 lignes au plus). L'Annuaire de l'éducation n'a ni image ni description : la vignette se réduit au nom de l'établissement ;
• Rendu dense : une ligne de liste, avec un titre et un sous-titre (voir 4.1) ;
• Réglage manuel : une vignette composée élément par élément (voir 4.2).

Le [1] Rendu dense a quatre réglages [2], chacun dans son panneau : Hauteur (de 0 à 2 : une, deux ou trois lignes de hauteur), Style des éléments (Texte, sans fond, Flat, Élevé, Tonal, Bordure ou Clair), la colonne du Titre et celle du Sous-titre. Les valeurs sont écrites telles quelles, sans mise en forme : choisissez des colonnes de texte.

Le [1] Réglage manuel compose la vignette :

• [2] Champ dans la barre d'outils : la colonne écrite en titre, sur un bandeau de la couleur de l'événement ; sans elle, la vignette n'a pas de bandeau ;
• [3] Sections : les blocs de la vignette, de haut en bas (voir 4.3). Ajouter un élément crée une section ; le menu de chaque section la modifie, la duplique, la déplace ou la supprime.

Chaque section a :

• [1] un type : Une colonne, les éléments les uns sous les autres ; Deux colonnes, deux listes d'éléments côte à côte, avec la Taille de la colonne de gauche (en douzièmes de la largeur, 6 par défaut) ; Flux, les éléments les uns à côté des autres, à la ligne quand la place manque, pratique pour une suite de badges ;
• [2] Alignement : à gauche, centré ou à droite ;
• [3] Éléments : le contenu de la section (voir 4.4 et 4.5) ;
• [4] Padding : la marge intérieure de la section, de 0 à 6.

L'élément le plus courant est la [1] Valeur d'un champ :

• [2] Champ : la colonne à afficher ;
• [3] Afficher le libellé : le libellé de la colonne devant sa valeur (Académie : Toulouse) ;
• [4] Caché si la valeur est non renseigné : sans valeur, l'élément disparaît, libellé compris ;
• [5] Taille du libellé, [6] Libellé en gras et [7] Disposition du libellé : À gauche de la valeur ou Au dessus de la valeur.

Le libellé est le titre de la colonne dans le schéma du jeu : une colonne sans titre montre son nom technique (latitude).

La suite de l'élément règle la valeur elle-même, selon son [1] formatage :

• Formatage texte : [2] Taille du texte, [3] Valeur en gras, [4] Texte en majuscules, [5] couleur (du thème ou personnalisée), [6] Tronquer le texte au-delà d'un [7] Nombre de lignes ;
• Formatage badge : la valeur dans une pastille, avec son style, sa taille et sa couleur, unique ou différente selon la valeur ;
• Formatage nombre : taille, gras, Unité, Diviseur (1000 pour écrire des milliers) et Nombre maximal de décimales ;
• Formatage date : taille, gras, majuscules et Chaîne de formatage en syntaxe Day.js (LL par défaut, voir 3) ;
• Formatage icône : une icône et une couleur par valeur de la colonne, par exemple pour une colonne oui / non.

Pour tous les éléments, [8] Écart à l'élément précédent (de 0 à 4) ajoute de l'air au-dessus de l'élément.

Certaines colonnes sont mises en forme d'elles-mêmes : une adresse web (concept Page Web) devient un lien, un téléphone et un courriel deviennent cliquables, une description en markdown est rendue avec sa mise en page. Une colonne à valeurs multiples (avec un séparateur) affiche chacune de ses valeurs, triées, ce qui convient bien aux badges.

Dans cet exemple, la commune est en texte, en gras et en majuscules ; l'académie en badge ; la date d'ouverture en date longue ; la latitude en nombre, arrondi à deux décimales avec l'unité ° ; l'internat en icône, un lit vert quand l'établissement en a un, gris sinon.

Cinq autres éléments complètent les vignettes :

• Valeurs de plusieurs champs : plusieurs colonnes à la suite, en Formatage texte avec un Séparateur (une espace par défaut), ou en Formatage badge. Ici, le code postal et la commune, puis le département et la région en badges ;
• Texte libre et valeurs de champs : un texte dans lequel {nom_de_la_colonne} est remplacé par la valeur de la colonne, comme {nom_commune} ({libelle_departement}) pour Coufouleux (Tarn). La valeur est écrite brute, sans mise en forme : une date y apparaît au format technique, préférez alors une Valeur d'un champ en formatage date. Le nom technique d'une colonne se lit dans le schéma du jeu ;
• Image : une Image depuis un lien, lue dans une colonne d'adresses d'images (par défaut celle au concept Image), une Image en fonction d'une catégorie, choisie selon la valeur d'une colonne, ou Une seule image pour toutes les vignettes. Ces deux dernières sont des pièces jointes de la visualisation, à ajouter dans l'onglet Pièces jointes de sa page. Le Rapport de forme (largeur sur hauteur, de 1 à 5) fixe la hauteur de l'image, et son Rendu l'Étend pour remplir le cadre, quitte à la rogner, ou la Redimensionne pour la montrer entière ;
• Icône : une icône de la taille voulue (de 16 à 64), unique ou choisie selon une colonne, comme l'icône de la frise (voir 5.1), à droite de la vignette dans l'exemple à deux colonnes plus haut ;
• Division horizontale : un trait, avec son Épaisseur, sa couleur et son Opacité.

Le dernier onglet règle le point de chaque événement sur l'axe : sa taille, son icône et sa couleur. La couleur s'applique aussi au bandeau de titre des vignettes.

• [1] Taille : le diamètre du point, de 6 à 16 (10 par défaut) ;
• [2] Icône : Aucune, un point plein, ou une Icône dessinée dans le point ;
• [3] Réglage des icônes : Une seule icône pour tous les événements, ou Plusieurs icônes selon la valeur d'un [4] Champ de catégorie : une colonne de 12 valeurs différentes au plus, sans séparateur. Chaque valeur reçoit son icône [5] ; les valeurs sans icône prennent l'[6] Icône par défaut.

Les icônes viennent de la bibliothèque Material Design Icons : cherchez-les par leur nom anglais (school, calendar, map-marker).

Le [1] Réglage des couleurs donne Une seule couleur à tous les événements, une couleur du thème du portail (primaire, secondaire, accent) ou une couleur personnalisée, ou Plusieurs couleurs selon la valeur d'un [2] Champ de catégorie (12 valeurs au plus) :

• [3] Couleurs : une Palette précalculée, choisie dans la liste [4] Palette (Accent, Foncé, Paires, Ensemble 1 à 3, Pastel 1 et 2), avec un [5] Décalage pour commencer plus loin dans la palette ; ou une Palette personnalisée, une couleur choisie pour chaque valeur de la colonne ;
• [6] Couleur par défaut : pour les valeurs sans couleur.

Une couleur par catégorie n'a de sens que si le lecteur peut la comprendre : dites-le dans le titre ou le texte qui accompagne la frise, puisque la Chronologie n'a pas de légende. La couleur du thème reste le meilleur choix quand la couleur ne porte pas d'information. Dans l'exemple des collèges et lycées, une palette personnalisée donne un vert aux collèges et un violet aux lycées, deux couleurs sombres sur lesquelles le titre blanc des vignettes reste lisible.

Si vous avez des remarques sur ce cours, n'hésitez pas à nous les communiquer.