Extension:Graph/fr

L'extension Graph permet, au moyen de la balise, la description de graphiques comme les diagrammes en barre, les camemberts, les frises chronologiques et les histogrammes (voir les démonstration), dans un format JSON utilisé pour afficher un graphique basé sur la grammaire de visualisation Vega.



Informations générales
L'extension Graph donne la possibilité d'intégrer dans une page wiki des graphiques construits avec le puissant outil Vega. Ces graphiques peuvent tout aussi bien être statiques qu'interactifs.

Le moyen le plus simple pour intégrer un graphique est d'utiliser un modèle tout prêt comme. Ces modèles dissimulent toutes les complexités de Vega. Les utilisateurs avancés peuvent utiliser le bac à sable de Graph pour développer leurs graphiques. Le bac à sable de Graph permet d'utiliser la syntaxe du modèle wiki et JSON. L'extension s'intègre avec VisualEditor et fournit ainsi un outil et un assistant simple pour générer les graphiques de base, en entrant les valeurs directement dans l'éditeur.



Liens utiles

 * Documentation Vega 2 - pages de documentation Vega 2 restaurées.
 * - Recommandations générales sur la façon d'utiliser les graphiques dans un Wiki.
 * -Instructions étape par étape pour construire un graphique interactif complexe à partir de zéro.
 * - pour de nombreux exemples et astuces d'utilisation.
 * TechTalk Video - une discussion technique de la WMF à propos de l'extension Graph, comprenant une grande démonstration de l'éditeur Lyra (également installé sur labs).
 * Pour découvrir quelques fonctionnalités à venir de Vega (Keynote de Jeffrey Heer).
 * Vega pour les développeurs - meilleur emplacement des ressources Vega
 * Vidéo d'introduction à Vega interactif
 * Vidéo d'introduction à Vega interactif

Installation


Paramètres de configuration supplémentaires
Si vous envisagez de répliquer un environnement de production tel que en.wiki vous devrez réaliser les étapes suivantes :

Rôles (uniquement si vous avez décidé d'utiliser Vagrant)


 * Activez le rôle graphs
 * Activez le rôle scribunto
 * Activez le rôle imagemap

Modèles et modules Lua


 * Copiez Module:Graph localement
 * Copiez Module:Graph/doc localement
 * Copiez Template:Nowrap localement
 * Copiez Template:Nowrap/styles.css localement
 * Copiez Module:Chart localement
 * Copiez Module:Chart/Default_colors localement
 * Copiez File:Circle_frame.svg localement



Exemples de diagrammes
Voir la pour plus d'exemples et d'astuces d'utilisation.



Replis définis par l'utilisateur
Lorsque le rendu se fait côté client, il est possible d'utiliser Wikimedia Commons pour fournir une image statique de repli aux utilisateurs. Ceci est une solution temporaire le temps qu'un nouveau service soit mis en place pour fournir la génération côté serveur.

L'utilisateur doit d'abord téléverser le graphe statique dans Wikimedia Commons.

Les images de repli ont deux variables  et.

est relatif à un nom de fichier de Wikimedia Commons.

est la largeur de repli des images, en pixels.

Ces variables sont passées au graphique de la manière suivante :

Là où les modules lua sont utilisés comme Module:Graph, ces variables peuvent être fournies par la fonction de la balise. Si on avait choisi, cela ressemblerait à :

Il peut être ensuite utilisé dans un modèle de la manière suivante :

Si la largeur de repli fallbackWidth n'est pas fournie, mais qu'une image est définie, alors l'extension dérive la largeur à partir de celle du graphe fourni. La raison de ceci est qu'il existe souvent une différence entre la largeur de l'image générée et la largeur actuelle de l'image.



Données externes
Le protocole HTTP(S) ne peut pas être utilisé pour obtenir les données du graphique. À la place, utilisez un des protocoles wiki personnalisés comme,  , et autres.

L'extension Graph utilise le paramètre  pour contrôler la résolution de ces protocoles : Note that because queries rely on the structure of wikibase items, they may suddenly stop working if the underlying data is edited and changes, as it may yield incomplete, empty or invalid data that can't be used to create a graph. Dans ces cas, le graphe sera vide en sortie (voir T168601).



Problèmes connus et limites

 * tag/graph - Bogues de l'extension Graph
 * Échecs pour implémenter les dates ISO 8601 donc uniquement les calendriers grégoriens peuvent être utilisés pour les échelles de temps

Fonctionnement interne
Lors de l'analyse syntaxique, l'extension Graph développe tous les paramètres et les expressions du modèle et range les définitions complètes du graphique dans la propriété de page ParserOutput en utilisant le hachage des graphes pour ID.

L'extension graph ajoute du code HTML à la page où il y a des graphes : un comportant l'attribut graph-id. Exemple :

L'extension Graph ajoute un module JavaScript ResourceLoader  à la page qui inclut la bibliothèque Vega, et place le JSON des définitions du graphique dans une variable   nommée. Une fois que le client a chargé ce module, la bibliothèque JavaScript Vega remplit chaque avec un canevas HTML et dessine le graphique à l'intérieur qui remplace l'image statique.



Fonctions de sécurité
peut être configuré pour interdire le référencement de sourcres de données non fiables (Wikimedia par exemple, n'autorise les données que de sites Wikimedia).

Licence
La bibliothèque Vega est distribuée sous une license BSD modifiée acceptable, ce qui nous permet de l'utiliser.

Ceci ressemble à une copie de la licence BSD, avec quelques modifications mineures (acceptables). Ce n'est pas gênant pour nous de l'utiliser bien que, idéalement, on ne doit pas faire de telles modifications dans la licence. C'est mieux lorsque l'on ne fait pas ce type de modification dans la licence que l'on utilise car cela évite toute confusion (comme ici) pour savoir si elle reste valable pour les sources libres.

wgGraphAllowedDomains
Voir la section sur les données externes.



Autres variables

 * 2015 - wgGraphUrlBlacklist a été supprimée dans 787d64a11.
 * 2016 - $var2 a été supprimé dans e0813f85a. Utiliser wgGraphAllowedDomains à la place.
 * 2015 - wgGraphUserServiceAlways a été supprimée dans b735f63ff4b
 * 2019 - wgGraphIsTrusted a été supprimée dans cf80f43e15
 * 2020 - $wgGraphImgServiceUrl est obsolète.



Module de l'Éditeur Visuel
Depuis l'été 2015, l'extension Graph est également associée au module ext.graph.VisualEditor qui permet l'édition de graphique dans l'Éditeur Visuel.

Ce module est le fruit d'un projet du Google Summer of Code 2015. Voir T89287 pour plus de détails.

Ce module permet aux utilisateurs de visualiser les graphiques dans l'Éditeur Visuel, contrairement à certaines extensions. De plus, les utilisateurs peuvent ouvrir une boîte de dialogue pour éditer le type de graphique, ses données et l'espacement. L'interface utilisateur offre aussi un moyen d'éditer les paramètres bruts JSON d'un graphe dans l'éditeur visuel, sans passer par l'éditeur de wikitexte classique, donnant la possibilité aux utilisateurs plus avancés d'ajuster les paramètres qui ne sont pas pris en compte par l'interface.

Cette première étape sert de tremplin au développement de l'édition de graphiques dans l'Éditeur Visuel, et les possibilités d'amélioration et d'extension du module sont nombreuses.



Dépannage des graphiques erronés
Les erreurs avec les graphiques seront consignées dans la console développeur.



Erreur : Arguments de constructeur incorrects (page : T277906)
Pour corriger : remplacez filepath:Earthmap1000x500compac.jpg par filepath:Earthmap1000x500.jpg

Exemple.

TypeError: undefined is not an object (evaluating 'datum.firstYear.value')
Correctif: assurez-vous de ne pas avoir intialisé la valeur par défaut à null

Exemple.



Voir aussi

 * — pour afficher le graphe d'ensembles de sommets connectés par des arêtes (par exemple de graphiques de notes, comme cette extension)
 * Plotly — la bibliothèque de graphes à source libre JavaScript (avec des possibilité de représentation en 3d)
 * D3 — documents sur le contrôle par les données