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 (démo), dans un format JSON utilisé pour afficher un graphique basé sur  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 fait 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 des graphiques. Le Bac à sable de Graph permet d'associer la syntaxe wiki à JSON.

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).
 * You may also be interested in some of the Vega future capabilities (Keynote by Jeffrey Heer).
 * Vega pour les développeurs - meilleur emplacement des ressources Vega
 * Vidéo d'introduction à Vega interactif
 * Vidéo d'introduction à Vega interactif

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


 * 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 Module:Chart localement
 * Copiez Module:Plotter/DefaultColors localement

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

Replis définis par l'utilisateur
When using client side rendering, it is possible to use Wikimedia Commons to provide a static fallback image to  users. This is a temporary solution until a new service is put in place to provide server side rendering to replace the soon to be decomissioned Graphoid service.

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 graphiques. À la place, utilisez un des protocoles wiki personnalisés comme ,  , et d'autres.

Le service Graphoid et l'extension Graph utilisent 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. In these cases the graph will end up empty (see T168601).

Problèmes connus et limites
Définir la propriété image-rendering appropriée pour résoudre.
 * Graph extension bugs
 * Graphoid service bugs
 * Fails to implement ISO 8601 timescales so only Gregorian calendars can be used in timelines
 * Image upscaling on most browsers can be blurry by default.

Fonctionnement interne
When parsing, the Graph extension expands all template parameters/expressions, and stores the complete graph definitions in the  page property, using graph hashes for IDs. This means you can easily locate a wiki's graphs with either Special:PageWithProps or [//www.mediawiki.org/w/api.php?action=query&list=pageswithprop&continue=&formatversion=2&pwppropname=graph_specs the action API].

L'extension graph ajoute du HTML à la page où il y a des graphes : un contenant une balise. Exemple :

The tag's   attribute points to the #Graphoid service, which provides a [//www.mediawiki.org/api/rest_v1/page/graph/png/Extension%3AGraph%2FDemo/1686336/d243aa924db2f82926e0f317217fcce591fe8cd4.png static image of the graph].

If the Graph extension is configured for interactivity, and if the client browser has JavaScript enabled and is not a legacy browser to which ResourceLoader does not ship JavaScript, then the client browser renders graphs on the fly. The Graph extension adds an  ResourceLoader JavaScript module to the page that includes the Vega library, and puts the JSON of graph definitions into a JavaScript   variable named. Once the client has loaded this module, the Vega JavaScript library populates each with an HTML canvas and draws the graph in it, replacing the static image. , Wikimedia wikis only enable this interactive rendering for edit preview.

You can configure the Graph extension to always use just the tag, and not add the Vega libraries or graph definition JSON. Ce mode ne fonctionnera pas pendant la modification car  n'est pas mis à jour tant que l'enregistrement n'est pas fait. Une fois enregistré, le service Graphoid pourra accéder à la nouvelle définition du graphique via l'API action.

Fonctions de sécurité
can be configured to disallow referencing untrusted data sources (e.g. Wikimedia only allows data from the Wikimedia sites). It can also send extra headers whenever accessing external data, e.g.  header that MediaWiki uses to prevent CSRF attacks.

Licence
Vega library is distributed under a modified BSD license acceptable under for us to use.

This appears to be a copy of the BSD license, with some minor (acceptable) modifications. It's not a problem for us to use it, although ideally they would not make changes like this to the license. It's better if people do not make these changes to their license, to avoid confusion (like this) about whether the license is safe for open-source use.

wgGraphIsTrusted
If  (default), passes Treat-as-Untrusted:1 header with all graph data requests

wgGraphImgServiceUrl
Une chaîne de format pour construire l'URL de la requête de service au coeur, pour la balise &lt;img>. Par exemple :

Produirait cet URL :

//graphoid.wikimedia.org/mediawiki.org/v1/png/Extension:Graph/0/be66c7016b9de3188ef6a585950f10dc83239837.png /{domain}/v1/png/{title}/{revid}/{hash}.png

Les paramètres seront passés dans l'ordre suivant : 1=serveur, 2=titre, 3=Id de révision, 4=ID du hash du graphe. Tous les paramètres seront échappés avec rawurlencode. Si la valeur est  (valeur par défaut), aucune url  ne sera générée

Autres variables
La variable wgGraphUrlBlacklist a été supprimée de 787d64a11 (7 décembre 2015).

wgGraphDataDomains a été supprimé de e0813f85a (28 janvier 2016). Utiliser un wgGraphAllowedDomains à la place.

la variable wgGraphUserServiceAlways a été supprimée de b735f63ff4b (30 septembre 2015).

Activer l'espace de nom Graph
Pour enregistrer les définitions des graphiques en tant que pages séparées dans leur propre espace de noms, vous devez définir.

Service Graphoid
Graphoid is a node.js  service that converts a graph definition into a static PNG image using the same Vega library code that runs in advanced browsers. The reason Graphoid was initially developed was to provide a static image so we wouldn't have to bundle Vega and d3 resource loader modules with every page response. Voir T211881 pour plus d'informations. Le service est disponible sur la grappe (cluster) Wikimedia sur https://www.mediawiki.org/api/rest_v1/#/Page%20content/get_page_graph_png__title___revision___graph_id_.

Vous pouvez l'installer personnellement :

The service URLs contain the domain of the page (for example mediawiki.org), service version (v1), the title of the page with the graph (PageTitle), revision ID of the page (12345, but could be 0 for current), and a hash ID of the graph itself (also used in HTML page to identify graph definition), for example:

http://localhost:6927/mediawiki.org/v1/PageTitle/12345/a64b022a8fa5b7fc5e40a2c95cd0a114b2ae1174.png (deprecated url)

https://www.mediawiki.org/api/rest_v1/page/graph/png/Extension%3AGraph/3420825/72edc224f0a10b343c1e84f63dbfc97cac9bc957.png

Pour déclarer que l'extension Graph utilise le service Graphoid, ajoutez une ligne similaire dans le fichier LocalSettings.php :

Configuration des services graphoid


Vous pouvez ensuite configurer le service au travers de son fichier de configuration.

Module de l'Éditeur Visuel
Depuis l'été 2015, l'extension Graph est également associée au module (ext.graph.VisualEditor) qu permet l'édition d'un 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 et ses données. L'interface utilisateur offre aussi un moyen d'éditer les paramètres bruts JSON dans l'éditeur visuel, sans passer par l'éditeur de wikitexte, 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.

Voir aussi

 * Extension:GraphViz — for displaying graphs of sets of vertices connected by edges (i.e. not charts, like this extension)
 * Plotly — The open source JavaScript graphing library (with 3d charting capabilities)
 * D3 — Data-Driven Documents