Extension:Graph/Guide/fr

Cette page est destinée à la communauté pour partager le mode d'utilisation de l'extension. Voir aussi le .

Séparez les graphiques des articles
Même si les graphiques peuvent être placés à l'intérieur de l'article, il est de loin préférable de les intégrer sous forme de modèles séparés, comme par exemple Template:Graph:&lt;yourgraphname&gt; qui peut être inséré avec

Personnaliser les graphiques
Même si vous pouvez intégrer les paramètres du graphique directement dans le graph, généralement ce n'est pas une bonne idée de faire ainsi. Les graphiques doivent être conçus comme des modèles flexibles qui peuvent être réutilisés dans plusieurs articles avec des ensembles de données et un style différents. Par exemple, même si la largeur et la hauteur du graphique peuvent être codées en dur :

il devrait être écrit comme un modèle de paramètres avec des valeurs par défaut, permettant une personnalisation facile :

Séparez les données du graphique

 * Tout comme pour le style ci-dessus, les données elles-mêmes ne doivent pas être stockées dans le graphique. Considérons une page avec un grand tableau qui peut être présentées dans un graphique, par exemple le liste des toiles les plus chères. La page contient un tableau assez complexe avec des données :

L'approche la plus simple pour construire un graphique consiste à extraire les données utiles et à placer le graphique avec ces données à côté du tableau. Même si cela fonctionne, cette approche n'est pas très bonne car il y a deux copies des mêmes données qui devront  être mises à jour  après chaque  changement. De plus, si le graph se trouve à l'intérieur du texte, l'article s'allonge et cumule du texte, du code et des données - moins de personnes pourront le modifier. Si le graphique est placé dans un modèle séparé, les rédacteurs sont plus susceptibles d'oublier de le mettre à jour lorsqu'ils modifient les données.

La solution adéquate, même si elle est un peu plus difficile à mettre en place au début, offrira un cheminement beaucoup plus sûr et plus facile à gérer, et pourra être réutilisée pour ce genre de liste.


 * 1) Créer une page séparée avec les données brutes, de préférence au format JSON. La structure de ce fichier est déterminée par les données nécessaires à la liste.
 * 2) Créer un module Lua avec une fonction qui convertit ces données brutes en une table wiki bien formatée.
 * 3) Dans le même module Lua, créez une autre fonction qui extrait les données nécessaires au graphique et les affiche sous forme de données au format JSON.
 * 4) Créer le modèle de graphique qui peut utiliser les données ci-dessus et le tracer.
 * 5) Enfin, insérez ces deux éléments dans la page de la liste :

Insérer un tableau bien formaté avec des données :

Insérer un graphique avec les mêmes données :

Données externes
Les données du graphique peuvent être intégrées dans la définition du graphique, ou fournies via un lien. Contrairement à la balise Vega standard, la balise du graphique nécessite que tous les liens externes utilisent l'un des protocoles personnalisés du wiki :


 * - Gets tabular dataset from Commons. Should be used with  (or "meta" or "fields"). The data given to the graph is already localized to the wiki language.

For example, this dataset would be given to the graph in this format:


 * - Gets map dataset from Commons. Should be used with  (can also use "meta" to get the same information as for tabular). The data given to the graph is already localized to the wiki language.
 * - Gets File:Einstein_1921.jpg image from Commons for an image mark. It is always recommended to add  (and/or height) to make the image the right size and reduce server load.
 * OBSOLETE, use wikifile: instead  - Get an image for the graph, e.g. from commons. This tag specifies any content from the uploads.* domain, without query params.  Use filepath magic keyword to get file path and optional size of the image.
 * - Donne le contenu brut d'une page de wiki, où le chemin d'accès est le titre de la page. Le domaine est facultatif et, s'il est spécifié, peut être n'importe quel hôte Wikimedia tel que fr.wikipedia.org, commons.wikimedia.org, ...
 * - Donne les données à partir de l'API API MediaWiki. Le domaine est facultatif.
 * - Appelez le RESTbase API. Le domaine est facultatif.
 * or  - Get geoshapes (as topojson) of the given regions, using Wikidata IDs, or a URL-encoded query (in SPARQL), with "id" column specifying geoshapes to get.
 * - Makes a link to the map snapshot service, so that a static map can be drawn for a given location/zoom/size. Parameters are converted it into a snapshot image request for Kartotherian - https://maps.wikimedia.org/img/{style},{zoom},{lat},{lon},{width}x{height}@2x.png

Reminder about nested template parameters
Templates require you to separate nested template parameters by at least one character, otherwise the graph with simply not display and you will get a syntax error. Be careful!

"values": // will not render "values": // will render, notice the whitespace in the closing braces

Using double curly braces in the graphs
Vega 2 supports template parameters, such as, but MediaWiki will attempt to find "indexDate" template and transclude it. To avoid this, use \u007b instead of the first curly brace, \u007d instead of the last closing curly brace, and the | instead of the pipe symbol " ":

Debugging

 * The best place to develop and debug is in the Graph Sandbox. Copy JSON code to see the graph change in real time as you type. Graph sandbox understands json comments and expands wiki markup.  See the bottom right panel for the converted JSON.
 * To get the graph JSON from a template, click edit / page preview, and use browser's debugger to inspect the graph (even if it is not showing) - you should see the .  Copy the hash value, hit escape (in Chrome), and use this oneliner to show the JSON. Remove first and last quote, ad copy/paste to the Vega editor above.