Extension:Graph/fr

This page is a translated version of the page Extension:Graph and the translation is 96% complete.
Manuel des extensions MediaWiki
OOjs UI icon advanced-invert.svg
Graph
État de la version : stable
Implémentation Balise , ContentHandler
Description Graphes contrôlés par les données
Auteur(s) Yuri Astrakhan (Yurik discussion), Dan Andreescu, Frédéric Bolduc
MediaWiki 1.35+
Licence Licence MIT
Téléchargement
  • $wgGraphDefaultVegaVer
  • $wgGraphImgServiceUrl
  • $wgGraphAllowedDomains
Traduire l’extension Graph sur translatewiki.net si elle y est disponible

Vérifier la matrice des utilisations et des versions.

Problèmes Tâches ouvertes · Signaler un bogue

L'extension Graph permet au moyen de la balise ‎<graph> la description de graphiques comme les diagrammes en barre, les camemberts, les frises chronologiques et les histogrammes (démonstration), 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 prêt comme {{Graph:Chart}}. 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.

Liens utiles

Installation

  • Si vous utilisez Vagrant , installez avec vagrant roles enable graph --provision
Installation manuelle
  • Requiert l'extension JsonConfig
  • Téléchargez et placez le(s) fichiers (s) dans un répertoire appelé Graph dans votre dossier extensions/.
  • Ajoutez le code suivant à la fin de votre fichier LocalSettings.php :
    wfLoadExtension( 'Graph' );
    
  •   Fait – Accédez à Special:Version sur votre wiki pour vérifier que l'extension a bien été installée.

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 (only if you decided to use Vagrant)

  • Activez le rôle graphs
  • Activez le rôle scribunto
  • Activez le rôle imagemap

Modèles et modules Lua

Exemples de diagrammes

Voir la page de démonstration 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 noscript. Ceci est une solution temporaire le temps qu'un nouveau service soit mis en place pour fournir la génération côté serveur afin de remplacer le service Graphoid condamné à disparaître bientôt.

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

Les images de repli ont deux variables fallback et fallbackWidth.

fallback est relatif à un nom de fichier de Wikimedia Commons.

fallbackWidth est la largeur de repli des images, en pixels.

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

<graph fallback="Graph test seddon.png" fallbackWidth=450>

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 Template:Graph:Chart , cela ressemblerait à :

{{safesubst:#tag:graph|{{safesubst:#invoke:Graph|chartWrapper}} | fallback = {{{fallback|''}}} |  fallbackWidth= {{{fallbackWidth|''}}} }}

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

{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y
 |type=rect|x=1,2,3,4,5,6,7,8|y=10,12,6,14,2,10,7,9|fallback=Graph test seddon.png|fallbackWidth=450}}

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.

{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y
 |type=rect|x=1,2,3,4,5,6,7,8|y=10,12,6,14,2,10,7,9|fallback=Graph test seddon.png}}

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 wikiraw:, wikiapi:, et autres.

Le service Graphoid et l'extension Graph utilisent le paramètre GraphAllowedDomains 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 phab:T168601).

$wgGraphAllowedDomains = [
    # clés http et https; liste tous les domaines autorisés pour l'accès aux données externes.
    # Tout domaine listé ici autorise aussi automatiquement tous les sous-domaines.
    # Protocoles personnalisés tels que 'wikiraw' ; définit le protocole à utiliser.
    # De cette manière, wikiraw://en.wikipedia.org/Page devient une requête d'API pour https://en.wikipedia.org/w/api.php?action=query&titles=Page&...
    'https' => [ 'wikipedia.org', 'wikimedia.org', ... ],
    'http' => [ 'wmflabs.org', ... ],
    
    # liste des domaines autorisés pour le wikirawupload : protocole d'accès.
    # Correspondance exacte seulement, sans les sous-domaines.
    'wikirawupload' => [ 'upload.wikimedia.org' ],
    
    # même chose que wikirawupload mais pour les requêtes Sparql de Wikidata
    'wikidatasparql' => [ 'query.wikidata.org' ],
];

Problèmes connus et limites

  • phab:tag/graph - Bogues de l'extension Graph
  • phab:tag/graphoid/ - bogues du service Graphoid
  • Echecs pour implémenter les dates ISO 8601 donc uniquement les calendriers grégoriens peuvent être utilisés pour les échelles de temps
  • Le redimensionnement des images sur la plupart des navigateurs peut devenir flou par défaut. Définir la propriété image-rendering appropriée pour résoudre.

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 graph_specs en utilisant le hachage des graphes pour ID. Cela signife que vous pouvez facilement localiser les graphiques d'un wiki avec soit Special:PageWithProps ou l'API action.

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

<div class="mw-wiki-graph-container">
  <img class="mw-wiki-graph-img"
    src="/api/rest_v1/page/graph/png/Extension%3AGraph%2FDemo/1686336/d243aa924db2f82926e0f317217fcce591fe8cd4.png" />
</div>

L'attribut href des balises de ‎<img> pointe vers le service Graphoid, qui fournit une image statique du graphique.

Si l'extension Graph est configurée pour être interactive et que JavaScript est activé sur le navigateur client (navigateur récent sinon le ResourceLoader ne lui envoie pas le JavaScript), alors le navigateur client affiche les graphiques à la volée. L'extension Graph ajoute un module JavaScript ResourceLoader ext.graph à la page qui inclut la bibliothèque Vega, et place le JSON des définitions du graphique dans une variable mediawiki.config nommée wgGraphSpecs. Une fois que le client a chargé ce module, la bibliothèque JavaScript Vega remplit chaque ‎<div> avec un canevas HTML et dessine le graphique à l'intérieur qui remplace l'image statique. Comme depuis novembre 2015, les wikis Wikimedia ne permettent cette génération interactive que pour l'affichage de l'aperçu des modifications.

Vous pouvez configurer l'extension Graph pour utiliser toujours la balise ‎<img> uniquement, sans ajouter les bibliothèques Vega ni la définition JSON du graphique. Ce mode ne fonctionnera pas pendant la modification car page_props 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é

‎<graph> 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). Il peut également envoyer des entêtes supplémentaires lors de l'accès aux données externes, comme par exemple l'entête Treat-as-Untrusted que MediaWiki utilise pour empêcher les attaques CSRF.

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.

—Stephen LaPorte

Configuration

wgGraphIsTrusted

Si la valeur est false (par défaut), on place l'entête Treat-as-Untrusted:1 dans toutes les requêtes de données de graphe

wgGraphImgServiceUrl

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

$wgGraphImgServiceUrl = "//graphoid.wikimedia.org/%1\$s/v1/png/%2\$s/%3\$s/%4\$s.png";

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 de hachage du graphe. Tous les paramètres seront échappés avec rawurlencode(). Si la valeur est false (valeur par défaut), aucune url ‎<noscript> ne sera générée

Autres variables

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

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

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

Activer l'espace de noms 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 JsonConfig .

// See https://www.mediawiki.org/wiki/Extension:JsonConfig
$wgJsonConfigModels['graph.jsonconfig'] = 'graph\Content';
$wgJsonConfigs['graph.jsonconfig'] = array(
	'namespace' => <PICK-A-NS-NUMBER>,
	'nsName' => 'Graph',
	'isLocal' => true,
);

Service Graphoid

  Avertissement : La WMF ne maintient plus Graphoid et à l'avenir, Graphoid ne sera plus déployé sur les wikis Wikimedia.
Cette section doit référencer ou se synchroniser avec wikitech:Graphoid

Graphoid (dépôt Git) est un service de node.js qui convertit une définition de graphique en une image PNG statique qui utilise le même code de bibliothèque Vega qui s'exécute dans les navigateurs récents. La raison pour laquelle Graphoid a été initialement développé était de fournir une image statique pour ne pas avoir à transférer les modules Vega et le chargeur de ressources d3, avec chaque page répondue. Voir phab: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 :

$ sudo apt-get install libcairo2-dev libjpeg8-dev libpango1.0-dev libgif-dev build-essential g++
$ git clone https://gerrit.wikimedia.org/r/mediawiki/services/graphoid
$ cd graphoid
$ npm install
$ npm start
Ce paquet ne sera plus maintenu (phab:T211881), et l'installation peut échouer, voir phab:T196001 et phab:T239100. npm i --build-from-source peut vous aider.

Les URLs du service contiennent le domaine de la page (par exemple mediawiki.org), la version du service (v1), le titre de la page avec le graphe (PageTitle), l'ID de la version de la page (12345, mais peut être 0 s'il s'agit de l'actuelle), et un Id de hachage du graphe lui-même (aussi utilisé dans la page HTML pour identifier la définition du graphe), par exemple :

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 :

$wgGraphImgServiceUrl = "//localhost:6927/%1\$s/v1/%2\$s/%3\$s/%4\$s.png"; //deprecated path, older versions only
$wgGraphImgServiceUrl = "//graphoid.wikimedia.org/%1\$s/v1/png/%2\$s/%3\$s/%4\$s.png"; //deprecated path, older versions only

Configuration des services graphoid

 
Flux de travail de l'extension Graph

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 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 phab: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.

Troubleshooting broken graphs

Errors with graphs will be logged in the developer console.

Error: Bad constructor arguments (phab:T277906)

To fix: Replace filepath:Earthmap1000x500compac.jpg with filepath:Earthmap1000x500.jpg

TypeError: undefined is not an object (evaluating 'datum.firstYear.value')

To fix: Make sure you have not set default as null

Example.

Voir aussi

  • Extension:GraphViz — 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