Jump to content

Extension:Chart

Suivi des problèmes : #Chart
From mediawiki.org
This page is a translated version of the page Extension:Chart and the translation is 90% complete.
Languages:
Manuel des extensions MediaWiki
Chart
État de la version : stable
Implémentation Balise
Description Génère des graphiques
Auteur(s) Brooke Vibber, Katie Filbert, Roan Kattouw
Politique de compatibilité Le master conserve la compatibilité arrière.
MediaWiki >= 1.46
Modifie la base
de données 		Non
Paramètres
  • $wgChartRequestSizeLimit
  • $wgChartProgressiveEnhancement
  • $wgChartTransformsEnabled
  • $wgChartServiceUrl
  • $wgChartCliPath
Accroches utilisées
Licence Licence publique générale GNU v3.0 ou ultérieur
Téléchargement
Télécharger l'extension
Git [?]:

README
Traduire l’extension Chart sur translatewiki.net si elle y est disponible
Problèmes Tâches ouvertes · Signaler un bogue

L'extension Chart fournit des capacités de visualisation de données interactives de base conçues pour remplacer certains aspects, mais pas tous, de l'extension Graph . Cette extension est actuellement en développement pour les wikis Wikimedia. Voir Extension:Chart/Projet pour plus de détails sur le processus de développement.

Cette extension prend en charge les types de graphiques suivants :

Installation

L'extension Chart nécessite l'installation de l'extension JsonConfig ainsi que le téléchargement de la bibliothèque JavaScript Chart Renderer (actuellement la bibliothèque TypeScript).

Voir le fichier README.md dans le dépôt pour les instructions de configuration complètes.

Wikimedia production

Pour l'utilisation pour Wikimedia, voir wikitech:Kubernetes/Deployments#Cheatsheet pour les instructions générales sur les déploiements de services. Key bits here:

  • find your commit's build image id from chart-renderer's CI, eg "2025-06-24-201619-production"
    • edit deployment-charts's helmfile.d/services/chart-renderer/values.yaml to reference the new version
    • get it +2'd by a deployer
  • (as a deployer) log into deployment.codfw.wmnet or deployment.eqiad.wmnet depending on the active data center
    • $ cd /srv/deployment-charts/helmfile.d/services/chart-renderer
      • latest service config should appear within a couple minutes (there's a regular update job)
    • $ helmfile -e staging -i apply --context 5
      • confirm the changes and let it deploy to staging
  • test rendering on beta cluster
    • TODO: add a specific page with our planned live test charts
    • TODO: add directions on checking pixel rendering results
  • once confirmed good, deploy to main clusters:
    • $ helmfile -e codfw -i apply --context 5
      • confirm the changes and let it deploy to codfw
    • $ helmfile -e eqiad -i apply --context 5
      • confirm the changes and let it deploy to eqiad

Comment l'utiliser

Pour générer un graphique, une définition de graphique à associer à la source des données que vous souhaitez utiliser doit être réalisée. Une définition de graphique est structurée comme un fichier JSON relativement simple; voir Extension:Chart/Spécification pour les détails de syntaxe.

Syntaxe des données tabulaires .tab

Tous les graphiques de cet exemple peuvent être générés à partir de la même source de données : Data:Chart Example Data.tab, un ensemble de données fictif. Les exemples de contenu de ces pages sont disponibles dans le répertoire sample.

Data:Example.chart
{
    "license": "CC0-1.0",
    "version": 1,
    "source": "Chart Example Data.tab",
    "type": "line",
    "title": {
        "en": "Example Chart Title"
    },
    "subtitle": {
        "en": "Example Subtitle"
    },
    "xAxis": {
        "title": {
        	"en": "Example X Axis Title"
        },
        "format": "none"
    },
    "yAxis": {
        "title": {
            "en": "Example Y Axis Title"
        },
        "format": "none"
    },
    "mediawikiCategories": [
        {
            "name": "Example category",
            "sort": "Its sortkey"
        }
    ],
    "transform": {
        "module": "Optional lua module for data transforms",
        "function": "transform_func",
        "args": {
            "arg_name": "arg_value"
        }
    }
}

Une fois un graphique défini, vous pouvez le générer facilement en utilisant la fonction d'analyse syntaxique #chart. Dans ce cas, les données du graphique sont définies en Data:Chart Example Data.tab, et le graphique lui-même est défini en Data:Example.Line.chart :

Wikipedia article title
{{#chart:Example.Line.chart}}

Notez qu'un graphique peut être générique et réutilisé avec différentes données sources, comme ci-dessous : 

{{#chart:Population through years.chart
|data=Population of USA.tab
}}

{{#chart:Population through years.chart
|data=Population of UK.tab
}}

{{#chart:Population through years.chart
|data=Population of Poland.tab
}}

Date formats in tabular data

When creating charts with dates on the x-axis, dates in tabular data should be formatted as strings that are exactly 10 characters long in the format:

  • YYYY-MM-DD, e.g., 2025-10-20

Other 10 character strings that are parseable by JavaScript's Date.parse() function may also work, though not officially supported.

When dates are detected in the first column of the tabular data, they will be automatically localized based on the wiki's content language. 

{
    "license": "CC0-1.0",
    "description": {
        "en": "1993 Canadian federal election"
    },
    "mediawikiCategories": [
        {
            "name": "Data:.tab",
            "sort": ""
        },
        {
            "name": "Data:Examples.tab",
            "sort": ""
        }
    ],
    "schema": {
        "fields": [
            {
                "name": "date",
                "type": "string",
                "title": {
                    "en": "Date",
                    "fr": "Date"
                }
            },
            {
                "name": "pc",
                "type": "number",
                "title": {
                    "en": "PC",
                    "fr": "PC"
                }
            },
            {
                "name": "liberal",
                "type": "number",
                "title": {
                    "en": "Liberal",
                    "fr": "Libéral"
                }
            },
            {
                "name": "ndp",
                "type": "number",
                "title": {
                    "en": "NDP",
                    "fr": "NPD"
                }
            },
            {
                "name": "bq",
                "type": "number",
                "title": {
                    "en": "BQ",
                    "fr": "BQ"
                }
            },
            {
                "name": "reform",
                "type": "number",
                "title": {
                    "en": "Reform",
                    "fr": "Réform"
                }
            }
        ]
    },
    "data": [
        [
            "1993-09-09",
            35,
            37,
            8,
            8,
            10
        ],
        [
            "1993-09-14",
            36,
            33,
            8,
            10,
            11
        ],
        [
            "1993-09-20",
            35,
            35,
            6,
            11,
            11
        ]
    ]
}

See examples on Commons:

For years, the dates should be numbers: 

{
    "license": "CC0-1.0",
    "description": {
        "en": "New Zealand annual wine production, in millions of litres"
    },
    "sources": "Statistics from New Zealand Winegrowers 1998–2024 annual reports",
    "schema": {
        "fields": [
            {
                "name": "year",
                "type": "number",
                "title": {
                    "en": "Year"
                }
            },
            {
                "name": "production",
                "type": "number",
                "title": {
                    "en": "Wine produced (million litres)"
                }
            }
        ]
    },
    "data": [
        [
            1990,
            54.4
        ],
        [
            1991,
            49.9
        ],
        [
            1992,
            41.6
        ],
        [
            1993,
            32.5
        ],
        [
            1994,
            41.1
        ],
        [
            1995,
            56.4
        ]
    ]
}

Example of charts and tabular data with years on the x axis:

See Support for dates ADR in gerrit for more details on date support.

Personnalisation

Y axisColor number0200400600800100012001PCLibéralNPDBQRéform#b0c1f0#9182c2#d9b4cd#b0832b#a2a9b1#4b77d6Color Données brutes
Les dix couleurs hexadécimales disponibles.

La personnalisation des graphiques est actuellement limitée. L'espoir est qu'après les tests, les discussions et les évaluations, des solutions de personnalisation puissent être trouvées qui ne compromettent pas l'accessibilité, le rendu spécifique à l'appareil ou la sécurité.

Taille

Actuellement, les graphiques occupent toute la largeur du conteneur où vous les placez.

L'objectif final est de s'assurer que les graphiques peuvent être rendus lisibles, peu importe l'appareil sur lequel ils sont lus; voir T376845 pour plus de détails.

Thématisation

Actuellement, les graphiques sont limités à une seule palette de couleurs par défaut. Cette palette a été soigneusement conçue en tenant compte de l'accessibilité. Les raisons de ces choix de couleurs peuvent être vues dans T369863.

Certains graphiques exigent des thèmes de couleur spécifiques, par exemple, pour représenter des données relatives aux partis politiques. Il reste une question ouverte de savoir comment mieux soutenir ce type de personnalisation sans compromettre la capacité des lecteurs ayant des besoins d'accessibilité (par exemple, la cécité) pour les utiliser.

Note de précaution

Notez que les graphiques actuellement génèrent des sorties SVG pouvant être mises en forme via TemplateStyles et que la mise en forme des éléments SVG ne doit pas être considérée comme stable car elle peut changer à tout instant. Veuillez ne pas vous appuyer sur le CSS pour modifier l'apparence du graphique car cela peut produire des graphiques qui ne seront plus fonctionnels à l'avenir ou qui pourraient interférer avec les fonctions d'accessibilité qui modifient la taille de la police et des fonctionnalités comme le mode sombre.


Internationalisation

Les graphiques ne peuvent être intégrés que dans le langage du contenu du wiki; par exemple, la chaîne de requête "uselang" (par exemple ?uselang=es) n'aura pas d'impact sur le graphique.

Le format du graphique prend en charge la définition de texte comme le titre et les étiquettes dans différentes langues, de sorte que le même graphique peut être utilisé dans les wikis de différentes langues. Voir cet exemple d'un graphique avec support pour plusieurs langues affiché dans un wiki en espagnol.

Problèmes connus

Voir cette vue filtrée du tableau Phabricator de Charts.

Types de graphiques

Pour tous les graphiques, les données doivent être disposées en colonnes, la première colonne représentant le x-axis et les colonnes suivantes représentant les séries ou courbes sur le y-axis.

Linéaire

%supportDate0102030405009/09/199326/09/199319/10/1993ElfesEntsOrcsHobbitsTrollsExemple de graphique linéaireExemple de sous-titre Données brutes
Voici un exemple de graphique linéaire.

Dans l'exemple suivant, le {{#chart: }} est enveloppé dans un conteneur de {{Image frame }} pour définir la largeur du graphique et inclure une légende. Un lien est également fourni vers les données tabulaires brutes, où des informations sur les sources des données peuvent être trouvées :

Wikipedia article title
{{image frame
|content={{#chart:Example.Line.chart}} [[commons:Data:Chart Example Data.tab|'''Raw data''']]
|width = 340
|caption = This is an example of a line chart.
}}

Voir le résultat dans cette section.

En barres

Le graphique couvre ici la largeur complète de la zone de contenu de la page :

Wikipedia article title
{{#chart:Example.Bar.chart}} <div align="center">[[commons:Data:Chart Example Data.tab|'''Raw data''']]</div>

Ce qui donne :

%supportDate0102030405009/09/199326/09/199319/10/1993ElfesEntsOrcsHobbitsTrollsExemple de diagramme en barsExemple de sous-titre


En aires

%supportDate02040608010009/09/199326/09/199319/10/1993ElfesEntsOrcsHobbitsTrollsExemple de graphique en airesExemple de sous-titre

Circulaire

Les graphiques circulaires sont un type de graphique spécial et les sources de données peuvent nécessiter une modification pour être générées de manière appropriée.

Lors de la lecture des données, toutes les colonnes non numériques (par exemple, l'axe x) seront rejetées et la somme de toutes les lignes sera représentée sur le graphique.

Par exemple, lorsque plusieurs rangées représentent des valeurs pour A, B et C à de nombreuses dates, par exemple le 1er janvier et le 2 janvier, la partie du graphique circulaire pour A représentera la somme de toutes les valeurs de rangées de A à travers ces dates.

ElfesEntsOrcsHobbitsTrollsElfesEntsOrcsHobbitsTrollsExemple de diagramme circulaireExemple de sous-titre


Retrouver les graphiques existants

Les graphiques qui peuvent être utilisés dans les articles sont disponibles sur Wikimedia Commons et peuvent être suivis en utilisant les catégories MediaWiki.

Cette requête peut être utilisée comme proxy pour trouver des graphiques que d'autres ont créés et contribuent à des traductions, et ceci pour trouver des pages tab qui peuvent être utilisées pour produire des graphiques.

L'ensemble des pages wiki qui utilisent des graphiques sur un wiki particulier peut être trouvé dans la catégorie dont le nom est défini à MediaWiki:chart-render-category et MediaWiki:Chart-error-category (Category:Pages using the Chart extension et Category:Pages using the Chart extension with rendering errors sur ce wiki). Veuillez vous assurer de connecter les catégories de votre wiki à d:Q131382738 et d:Q131406605 pour faciliter la recherche entre les wikis.

Migration depuis l'extension Graph

Veuillez consulter la catégorie des Pages Wikipédia avec graphiques désactivés dans différentes langues pour les anciens graphiques qui doivent être migrés vers l'extension Charts. Certains ont toutefois déjà été supprimés sans être remplacés par de nouveaux graphiques. La liste peut être comparée à une liste archivée des 200 premières pages sur 23 811 de Wikipédia en anglais avec les graphiques désactivés datant de 2023, peu après l'ajout des modèles à cette catégorie, et à des listes correspondantes dans d'autres langues.


Documentation technique

Compte tenu des problèmes liés à Extension:Graph , toutes les décisions concernant la nouvelle extension ont été examinées avec soin, dans l'espoir de renforcer la confiance dans son remplacement.

Jusqu'à présent, les décisions techniques sont documentées dans le référentiel de code du dossier /doc/adr.

Gestion des erreurs

Les pages de .chart qui ne sont pas disponibles sont automatiquement stockées dans commons:Category:Pages using the Chart extension with rendering errors. Les pages de Wiki avec des graphiques défectueux sont automatiquement stockées dans Catégorie:Pages utilisant l'extension Chart avec erreurs de rendu dans différentes versions linguistiques.

Les erreurs de rendu du graphique côté client seront enregistrées sur logstash. (Seulement pour les développeurs.)

Outils pour produire les graphiques

Il existe plusieurs méthodes envisageables pour produire et modifier de manière semi-automatique les graphiques et leurs données tabulaires :

  • Le script graphDataImport peut être utilisé dans le navigateur web pour extraire des données à partir d'un graphique en wikitexte existant ou similaire, et le convertir en une page .tab, une page de définition .chart et un nouveau wikitexte.
  • L'IA générative peut être sollicitée pour extraire des données à partir du wikicode et des tableaux graphiques existants, les convertir en pages .tab et .chart et générer un nouveau wikicode, selon les spécifications données. Elle peut également fournir une traduction de titres, et être utilisée pour étendre et mettre à jour la page .tab avec de nouvelles données.
  • Le gadget TabularImportExport peut convertir les fichiers Excel et .csv vers et depuis les pages .tab . Vous pouvez l'activer via vos préférences sur Commons.
  • L'interface utilisateur JSON Modifier en tant que tableau (qui fait partie de l'extension Jsonconfig ) est disponible à partir de la page d'édition .tab.
  • Certains bots peuvent importer périodiquement des statistiques provenant du Web ou de graphiques Wikipédia existants vers des pages .tab ou .chart, sur demande. Ces robots comprennent DPLA bot et SLiuBot.
  • GraphBot pour convertir les graphiques de Wikipédia anglais en tableaux.


Voir aussi

Retrieved from "https://www.mediawiki.org/w/index.php?title=Extension:Chart/fr&oldid=8186652"