search

GouvernementFR / dsfr-chart

🇫🇷 Data visualization library supported by french government's design system (Système de Design de l'État)
https://gouvernementfr.github.io/dsfr-chart/
MIT License
19 stars 7 forks source link
css data-visualization dsfr government html js vuejs webcomponents

readme

DSFR Chart

DSFR Chart est un module complémentaire au Système de design de l’État (DSFR) pour la visualisation de données. Il s'agit d'une bibliothèque de composants Vue.js, sous la forme de web-components, à destination des développeurs ayant besoin de graphiques pour représenter des données.

Demo

L'ensemble des graphiques disponibles sont mis en situation sur la page de demo.

Installation

L'installation de DSFR Chart peut se faire de manières différentes. En téléchargeant l'ensemble des fichiers nécessaires à son utilisation ou en utilisant le gestionnaire de paquets NPM.

Fichiers statiques

Il est possible de télécharger l'ensemble du DSFR au format zip ci-dessous. Le zip contient un ensemble de fichiers CSS et Javascript permettant l'utilisation des différents graphiques.

Vous trouverez sur la page Release de Github, toutes les sources des versions précédentes et la dernière en date.

NPM

DSFR Chart est disponible sur NPM via un ensemble de packages qu'il est possible d'ajouter directement à votre projet. Il est de ce fait nécessaire d'installer NodeJS, et d'avoir un fichier package.json à la racine de votre projet. (Il est possible d'en créer un directement via la commande npm init).

Une fois en place, il suffit d'installer le package dsfr-chart contenant l’ensemble des composants:

npm install @gouvfr/dsfr-chart

Une fois terminé dsfr-chart sera alors installé dans le dossier node_modules/dsfr-chart/

Structure de DSFR-Chart

La structure mise à disposition, sur le zip ou npm est la suivante :

Configuration de votre projet

Prérequis

DSFR Chart doit être utilisé dans un projet utilisant le DSFR. Le projet doit à minima importer les feuilles css :

Il est également nécessaire de charger l'API Javascript : dsfr.module.min.js

Importation des web-components

Pour pouvoir utiliser une représentation graphique dans votre projet, il est nécessaire de charger le fichier javascript correspondant ainsi que sa feuille css associée.

Il existe deux possibilités :

<script src="https://github.com/GouvernementFR/dsfr-chart/raw/dev/Charts/dsfr-chart.umd.js"></script>
<link rel="stylesheet" href="https://github.com/GouvernementFR/dsfr-chart/blob/dev/Charts/dsfr-chart.css" />
<script src="https://github.com/GouvernementFR/dsfr-chart/raw/dev/ScatterChart/scatter-chart.umd.js"></script>
<link rel="stylesheet" href="https://github.com/GouvernementFR/dsfr-chart/blob/dev/ScatterChart/scatter-chart.css" />

Fonctionnement

Les différentes représentations graphiques

Introduction DSFR Chart

Ce catalogue présente l'ensemble des graphiques disponibles dans le module complémentaire au Système de design de l'État (DSFR) pour la visualisation de données. Les différents types de graphiques sont disponibles en thème clair et thème sombre. Par ailleurs, les options de chacun des graphiques sont également présentés dans ce document.

I. Nuage de points / ScatterChart

Les nuages de points sont accessibles à travers la balise : <scatter-chart>.

Paramètres

Obligatoires :

Optionnels :

Exemples

1. Nuage de points simple

Exemple:

<scatter-chart x="[[1, 5, 8]]" y="[[30, 10, 20]]"></scatter-chart>

2. Nuage de points reliés

On peut choisir de relier les points d'un ScatterChart avec l'option showline. On lui affecte la valeur true dans le cas où l’on veut relier les points.

Exemple:

<scatter-chart
  x="[[1, 5, 8]]"
  y="[[30, 10, 20]]"
  showline="true"
></scatter-chart>

3. Nuage de points avec palette divergente ascendante

Vous pouvez spécifier une palette de couleurs pour le graphique en utilisant le paramètre selectedPalette.

Exemple:

<scatter-chart
  x="[[1, 5, 8], [2, 6, 9]]"
  y="[[30, 10, 20], [15, 25, 35]]"
  selectedPalette="divergentAscending"
></scatter-chart>

4. Nuage de points avec mise en avant de points spécifiques

Pour mettre en avant des points spécifiques, utilisez la palette 'neutral' et spécifiez les index des points à mettre en avant avec highlightIndex.

Exemple:

<scatter-chart
  x="[[1, 5, 8]]"
  y="[[30, 10, 20]]"
  selectedPalette="neutral"
  highlightIndex="[1, 2]"
></scatter-chart>

5. Nuage de points avec lignes et mise en avant

Il est possible de combiner plusieurs options pour personnaliser davantage votre graphique.

Exemple:

<scatter-chart
  x="[[1, 3, 5, 7]]"
  y="[[10, 20, 15, 25]]"
  showline="true"
  selectedPalette="neutral"
  highlightIndex="[2]"
></scatter-chart>

Notes supplémentaires

II. Graphique en lignes (LineChart)

Les graphiques en lignes sont accessibles à travers la balise : <line-chart>.

Paramètres

Obligatoires :

Optionnels :

1. Graphique en lignes simple

Exemple:

<line-chart x="[1, 2, 3, 4]" y="[10, 20, 30, 40]" unit-tooltip="%"></line-chart>

2. Graphique en lignes avec palette divergente ascendante

Exemple:

<line-chart
  x="[1, 2, 3, 4]"
  y="[10, 20, 30, 40]"
  selectedPalette="divergentAscending"
></line-chart>

3. Graphique en lignes avec mise en avant de points spécifiques

Exemple:

<line-chart
  x="[1, 2, 3, 4]"
  y="[10, 20, 30, 40]"
  selectedPalette="neutral"
  highlightIndex="[2]"
></line-chart>

4. Graphique en lignes avec unité personnalisée dans l'infobulle

Exemple:

<line-chart
  x="[1, 2, 3, 4]"
  y="[1000, 2000, 3000, 4000]"
  unit-tooltip="€"
></line-chart>

Notes supplémentaires

Conseils d'utilisation

Exemple combinant plusieurs options

Exemple:

<line-chart
  x="[1, 2, 3, 4, 5]"
  y="[15, 25, 35, 45, 55]"
  selectedPalette="neutral"
  highlightIndex="[2, 4]"
  unit-tooltip="kWh"
></line-chart>

II. Graphique en multilignes (ou LineChart multiples)

Les graphiques en multilignes (ou LineChart multiples) sont accessibles à travers la balise : <multi-line-chart>.

Paramètres

Obligatoires :

Optionnels :

Exemple:

<multiline-chart
  x="[[1, 2, 3], [1, 2, 3]]"
  y="[[30, 10, 20], [10, 20, 30]]"
  selectedPalette="divergentAscending"
  unit-tooltip="%"
></multiline-chart>

Notes supplémentaires

Autres exemples

1. Multilignes avec palette séquentielle ascendante et unité personnalisée

Exemple:

<multiline-chart
  x="[[1, 2, 3], [1, 2, 3]]"
  y="[[100, 200, 300], [150, 250, 350]]"
  selectedPalette="sequentialAscending"
  unit-tooltip="€"
></multiline-chart>

2. Multilignes avec palette neutre

Exemple:

<multiline-chart
  x="[[1, 2, 3], [1, 2, 3]]"
  y="[[5, 15, 25], [10, 20, 30]]"
  selectedPalette="neutral"
></multiline-chart>

Conseils d'utilisation

III. Diagramme en barres (BarChart)

Les graphiques en barres sont accessibles à travers la balise : <bar-chart>.

Paramètres

Obligatoires :

Optionnels :

1. Barres verticales simples

Exemple:

<bar-chart
  x='[["2025", "2030", "2035", "2040", "2050", "2060", "2070"]]'
  y="[[69.1, 70.3, 71.4, 72.5, 74, 75.2, 76.4]]"
  name='["Population en millions"]'
  selected-palette="defaultColor"
  unit-tooltip="millions"
></bar-chart>

2. Barres horizontales

Pour tracer un BarChart horizontal, il faut renseigner l’option horizontal="true".

Exemple:

<bar-chart
  x='[["2025", "2030", "2035", "2040"]]'
  y="[[10, 20, 30, 40]]"
  horizontal="true"
  selected-palette="categorical"
></bar-chart>

3. Barres empilées

Pour tracer un BarChart empilé, il faut renseigner l’option stacked="true".

Exemple:

<bar-chart
  x='[["Catégorie A", "Catégorie B", "Catégorie C", "Catégorie D"]]'
  y="[[15, 19, 15, 13], [45, 40, 47, 41], [36, 32, 34, 44], [4, 9, 4, 2]]"
  name='["Série 1", "Série 2", "Série 3", "Série 4"]'
  stacked="true"
  selected-palette="divergentDescending"
  :isDescendingOrder="true"
  unit-tooltip="%"
></bar-chart>

4. Barres avec mise en avant de certaines catégories

Utilisez highlightIndex pour mettre en avant certaines barres, en combinaison avec selectedPalette="neutral".

Exemple:

<bar-chart
  x='[["Jan", "Feb", "Mar", "Apr", "May", "Jun"]]'
  y="[[5, 10, 15, 20, 25, 30]]"
  selected-palette="neutral"
  :highlightIndex="[2, 4]"
  unit-tooltip="k€"
></bar-chart>

5. Barres avec palette séquentielle ascendante

Exemple:

<bar-chart
  x='[["Q1", "Q2", "Q3", "Q4"]]'
  y="[[200, 400, 600, 800]]"
  selected-palette="sequentialAscending"
  unit-tooltip="units"
></bar-chart>

Notes supplémentaires

Conseils d'utilisation

Exemple combinant plusieurs options

Exemple:

<bar-chart
  x='[["Produit A", "Produit B", "Produit C", "Produit D"]]'
  y="[[50, 70, 30, 90]]"
  name='["Ventes"]'
  selected-palette="neutral"
  :highlightIndex="[3]"
  horizontal="true"
  unit-tooltip="k€"
></bar-chart>

V. Options de lignes verticales et horizontales

Sur tous les graphiques présentés ci-dessus, il est possible d'ajouter des lignes verticales et horizontales pour mettre en évidence des seuils ou des valeurs spécifiques.

Paramètres

Optionnels :

Exemple :

<line-chart
  x="[1, 2, 3]"
  y="[10, 20, 30]"
  hline="[15, 25]"
  hlinename='["hmin", "hmax"]'
  vline="[1.6, 2.3]"
  vlinename='["vmin","vmax"]'
  vlinecolor='["green-archipel", "orange-terre-battue"]'
  hlinecolor='["blue-ecume", "red-marianne"]'
  selectedPalette="categorical"
  unit-tooltip="units"
></line-chart>

Notes supplémentaires

Conseils d'utilisation

Exemple combinant plusieurs options

Exemple :

<bar-line-chart
  x="[1, 2, 3, 4, 5]"
  y="[20, 25, 30, 35, 40]"
  ybar="[15, 18, 22, 28, 33]"
  hline="[25]"
  hlinename='["Moyenne"]'
  hlinecolor='["#FF0000"]'
  vline="[3]"
  vlinename='["Point Milieu"]'
  vlinecolor='["#0000FF"]'
  selectedPalette="sequentialAscending"
  unit-tooltip="kW"
></bar-line-chart>

VI. Diagramme circulaire (PieChart)

Les diagrammes circulaires (ou PieChart) sont accessibles à travers la balise : <pie-chart>.

Paramètres

Obligatoires :

Optionnels :

1. Diagramme circulaire creux (donut)

Exemple :

<pie-chart
  x='["Non-salariés", "Emplois à durée indéterminée", "Contrats à durée déterminée", "Apprentis", "Intérimaires"]'
  y="[11.7, 74.8, 9.3, 1.6, 2.6]"
  name='["Non-salariés", "Emplois à durée indéterminée", "Contrats à durée déterminée", "Apprentis", "Intérimaires"]'
  unit-tooltip="%"
  selectedPalette="categorical"
></pie-chart>

2. Diagramme circulaire plein

L’option fill="true" permet de remplir l’intérieur du graphique pour obtenir un diagramme circulaire plein.

Exemple :

<pie-chart
  x='["Groupe A", "Groupe B", "Groupe C"]'
  y="[10, 20, 30]"
  fill="true"
  unit-tooltip="%"
  selectedPalette="divergentAscending"
></pie-chart>

Notes supplémentaires

Conseils d'utilisation

Exemple combinant plusieurs options

<pie-chart
  x='["Catégorie 1", "Catégorie 2", "Catégorie 3"]'
  y="[40, 35, 25]"
  fill="true"
  unit-tooltip="€"
  selectedPalette="sequentialDescending"
></pie-chart>

VII. Diagramme en étoile (RadarChart)

Les diagrammes en étoile (ou RadarChart) sont accessibles à travers la balise : <radar-chart>.

Paramètres

Obligatoires :

Optionnels :

Exemple :

<radar-chart
  x='[["Non-salariés", "Emplois à durée indéterminée", "Contrats à durée déterminée", "Apprentis", "Intérimaires"]]'
  y="[[2.4, 43.9, 28.5, 17.2, 8.0],
      [10.6, 77.8, 8.8, 0.2, 2.6],
      [16.5, 77.3, 4.9, 0.0, 1.3]]"
  name='["15-24 ans", "25-49 ans", "50-64 ans"]'
  selectedPalette="categorical"
  unit-tooltip="%"
>
</radar-chart>

Notes supplémentaires

Conseils d'utilisation

Autres exemples

1. Diagramme en étoile avec palette divergente ascendante

Exemple :

<radar-chart
  x='[["Critère 1", "Critère 2", "Critère 3", "Critère 4", "Critère 5"]]'
  y="[[80, 90, 70, 60, 50], [60, 70, 80, 90, 100]]"
  name='["Série A", "Série B"]'
  selectedPalette="divergentAscending"
  unit-tooltip="%"
>
</radar-chart>

2. Diagramme en étoile avec unité personnalisée

Exemple :

<radar-chart
  x='[["Vitesse", "Puissance", "Agilité", "Endurance", "Précision"]]'
  y="[[85, 90, 75, 80, 70]]"
  name='["Athlète 1"]'
  unit-tooltip="points"
>
</radar-chart>

VIII. Jauges (ou GaugeChart)

Ce graphique est généré avec la balise <gauge-chart>

Les paramètres obligatoires sont :

· value : la valeur actuelle de la jauge sous la forme d’une un nombre

· init : la valeur de départ de la jauge

· target : la valeur cible de la jauge

Exemple :

<gauge-chart value="16" init="10" target="20" color="blue-france"></gauge-chart>

IX. Cartes (MapChart)

Les cartes sont accessibles à travers la balise : <map-chart>.

Paramètres

Obligatoires :

Optionnels :

Exemples

1. Carte avec découpage par départements

Exemple :

<map-chart
  data='{
    "01": 72, "02": 83, "03": 67, "04": 36, "05": 47, "06": 96, "07": 77, "08": 75, "09": 57, "10": 58,
    "11": 38, "12": 33, "13": 89, "14": 24, "15": 52, "16": 41, "17": 79, "18": 38, "19": 42, "21": 25,
    "22": 26, "23": 37, "24": 65, "25": 88, "26": 48, "27": 61, "28": 80, "29": 12, "30": 6, "31": 5,
    "32": 22, "33": 40, "34": 19, "35": 13, "36": 32, "37": 0, "38": 82, "39": 13, "40": 78, "41": 92,
    "42": 10, "43": 22, "44": 70, "45": 85, "46": 58, "47": 72, "48": 61, "49": 27, "50": 47, "51": 41,
    "52": 44, "53": 29, "54": 22, "55": 4, "56": 57, "57": 94, "58": 46, "59": 33, "60": 0, "61": 15,
    "62": 60, "63": 71, "64": 0, "65": 91, "66": 51, "67": 56, "68": 19, "69": 44, "70": 92, "71": 96,
    "72": 51, "73": 32, "74": 19, "75": 96, "76": 91, "77": 21, "78": 48, "79": 72, "80": 52, "81": 48,
    "82": 57, "83": 38, "84": 23, "85": 46, "86": 37, "87": 64, "88": 78, "89": 100, "90": 85, "91": 87,
    "92": 46, "93": 89, "94": 18, "95": 72, "971": 48, "972": 28, "973": 35, "974": 70, "976": 38, "2A": 63,
    "2B": 16
  }'
  valuenat="10"
  name="Nom de l'indicateur"
  selected-palette="sequentialAscending"
  :highlightIndex='["75", "13"]'
></map-chart>

2. Carte avec découpage par régions

Exemple :

<map-chart
  data='{
    "84": 1, "32": 10, "93": 20, "44": 30, "76": 40, "28": 50, "75": 60, "24": 70, "53": 80, "94": 90,
    "52": 100, "01": 95, "02": 85, "03": 75, "04": 65, "06": 55, "27": 100, "11": 35
  }'
  valuenat="10"
  name="Nom de l'indicateur"
  level="reg"
  selected-palette="divergentDescending"
  :highlightIndex='["84", "93"]'
></map-chart>

3. Carte régionale détaillée (MapChart-reg)

Les cartes par région sont accessibles à travers la balise : <map-chart-reg>.

Paramètres spécifiques :

Exemple :

<map-chart-reg
  data='{
    "01": 72, "02": 83, "03": 67, "04": 36, "05": 47, "06": 96, "07": 77, "08": 75, "09": 57, "10": 58,
    "11": 38, "12": 33, "13": 89, "14": 24, "15": 52, "16": 41, "17": 79, "18": 38, "19": 42, "21": 25,
    "22": 26, "23": 37, "24": 65, "25": 88, "26": 48, "27": 61, "28": 80, "29": 12, "30": 6, "31": 5,
    "32": 22, "33": 40, "34": 19, "35": 13, "36": 32, "37": 0, "38": 82, "39": 13, "40": 78, "41": 92,
    "42": 10, "43": 22, "44": 70, "45": 85, "46": 58, "47": 72, "48": 61, "49": 27, "50": 47, "51": 41,
    "52": 44, "53": 29, "54": 22, "55": 4, "56": 57, "57": 94, "58": 46, "59": 33, "60": 0, "61": 15,
    "62": 60, "63": 71, "64": 0, "65": 91, "66": 51, "67": 56, "68": 19, "69": 44, "70": 92, "71": 96,
    "72": 51, "73": 32, "74": 19, "75": 96, "76": 91, "77": 21, "78": 48, "79": 72, "80": 52, "81": 48,
    "82": 57, "83": 38, "84": 23, "85": 46, "86": 37, "87": 64, "88": 78, "89": 100, "90": 85, "91": 87,
    "92": 46, "93": 89, "94": 18, "95": 72, "971": 48, "972": 28, "973": 35, "974": 70, "976": 38, "2A": 63,
    "2B": 16
  }'
  valuereg="10"
  name="Nom de l'indicateur"
  region="93"
  selected-palette="categorical"
  :highlightIndex='["93", "84"]'
></map-chart-reg>

Notes supplémentaires

Conseils d'utilisation

Exemple combinant plusieurs options

Exemple :

<map-chart
  data='{"01": 72, "02": 83, "03": 67, "04": 36, "05": 47}'
  valuenat="65"
  name="Taux de réussite"
  selected-palette="neutral"
  :highlightIndex='["01", "02"]'
  level="dep"
></map-chart>

Résumé des paramètres de MapChart

paramètre type obligatoire description
data string oui dictionnaire associant les codes des départements aux valeurs de l'indicateur
valuereg string ou number oui Valeur de l'indicateur à l'échelle nationale
name string oui nom de l'indicateur
level String ('dep' ou 'reg') Non Niveau de zoom de la carte ('dep' pour départements, 'reg' pour régions)
selectedpalette string non palette de couleurs utilisée pour la carte
highlightIndex Number, String ou Array non Code ou liste des codes géographiques à mettre en avant

Résumé des paramètres de MapChart-reg

paramètre type obligatoire description
data string oui dictionnaire associant les codes des départements aux valeurs de l'indicateur
valuereg string ou number oui valeur de l'indicateur à l'échelle régionale
name string oui nom de l'indicateur
region string oui code de la région à afficher
selectedpalette string non palette de couleurs utilisée pour la carte

X. Documentation du composant DataBox

Le composant DataBox est un composant polyvalent qui permet d'afficher des données sous différentes formes, notamment des indicateurs, des graphiques, des tableaux, etc. Il intègre également des fonctionnalités interactives telles que des sélecteurs de sources, des modales, et des menus déroulants pour des actions supplémentaires.

Importation du composant

Pour utiliser le composant DataBox, vous devez l'importer dans votre fichier Vue :

javascript

Copier le code

import DataBox from './DataBox.vue';

Utilisation de base

Exemple :

<data-box
  :dataBoxTitle="Votre titre"
  :dataBoxDescription="Votre description"
  :value="1500"
  :indicator="true"
  :trendValue="'5%'"
  :component="'PieChart'"
  :serieObj="serieObj"
  :source="'Source de données'"
  :dataBoxDate="'2024-04-22'"
></data-box>

Props

Voici la liste des props disponibles pour le composant DataBox :

Principales :

Options supplémentaires :

Structure de serieObj

L'objet serieObj contient les données nécessaires pour alimenter le graphique ou le tableau. Voici sa structure par défaut :

javascript

serieObj: { showGraph: true, unitTooltip: "%", serie_values: { x: ["Serie 1", "Serie 2", "Serie 3"], y: [100, 200, 300], name: ["Nom Serie 1", "Nom Serie 2", "Nom Serie 3"], color: ["#FF0000", "#00FF00", "#0000FF"], // Autres propriétés spécifiques au type de graphique }, table: [ ["Serie 1", "100"], ["Serie 2", "200"], ["Serie 3", "300"], ], istable: false, // Indique si le tableau doit être affiché id_accordion: "uniqueId", // Identifiant pour les contrôles segmentés }

Notes sur serieObj :

Méthodes

Le composant DataBox expose plusieurs méthodes internes :

Événements émis

Slots

Le composant DataBox ne définit pas de slots.

Computed Properties

Styles

Le composant utilise des styles spécifiques définis dans dataBox.scss. Il importe également des composants et styles de l'application (par exemple, les styles des boutons, infobulles, etc.).

Exemples d'utilisation

DataBox avec indicateur et tendance

<data-box
  dataBoxTitle="Nombre de visiteurs"
  dataBoxDescription="Nombre total de visiteurs sur le site en 2023"
  value="1500"
  indicator="true"
  trendValue="-5%"
  source="Google Analytics"
  dataBoxDate="2023-10-01"
></data-box>

DataBox avec graphique en secteurs (PieChart)

<data-box
  dataBoxTitle="Répartition des ventes par produit"
  component="PieChart"
  :serieObj="{
    showGraph: true,
    serie_values: {
      x: ['Produit A', 'Produit B', 'Produit C'],
      y: [30, 50, 20],
    },
    table: [
      ['Produit A', '30'],
      ['Produit B', '50'],
      ['Produit C', '20'],
    ],
  }"
  source="Base de données interne"
  dataBoxDate="2023-09-15"
></data-box>

DataBox avec tableau uniquement

<data-box
  dataBoxTitle="Liste des utilisateurs inscrits"
  :serieObj="{
    showGraph: false,
    istable: true,
    table: [
      ['Nom', 'Email'],
      ['Alice', 'alice@example.com'],
      ['Bob', 'bob@example.com'],
      ['Charlie', 'charlie@example.com'],
    ],
  }"
  source="Système d'inscription"
  dataBoxDate="2023-08-20"
></data-box>

Interactivité et personnalisation

Le composant DataBox est conçu pour être hautement personnalisable et interactif. Vous pouvez :

Remarques

Accessibilité

Le composant inclut des considérations pour l'accessibilité, comme l'utilisation d'aria-label, aria-describedby, et des rôles appropriés pour les infobulles et les modales.

XI. Accessibilité

Tableaux

Les résultats peuvent également être présenté sous la forme d'un tableau. Ceci permet dans certaines situations d'offrir une alternative à la visualisation des données et ainsi s'adapter au public concerné.

Les paramètres obligatoires sont :

XII. Options

Barre verticale

Il est possible d’ajouter une ou plusieurs barres verticales par l’intermédiaire du paramètre :

Par défaut la couleur de la ligne sera #161616 et son nom V1, V2, … Cela peut être modifié en renseignant les paramètres :

Exemple :

<line-chart
  x="[1, 2, 3]"
  y="[10, 20, 30]"
  vline="[1.5, 2.5]"
  vlinename='["min", "max"]'
  vlinecolor='["green-archipel", "blue-ecume"]'
></line-chart>

Barre horizontale

Il est possible d’ajouter une ou plusieurs barre(s) verticale(s) par l’intermédiaire du paramètre :

Par défaut la couleur de la ligne sera #009081 et son nom H1, H2, … Cela peut être modifié en renseignant les paramètres :

Exemple :

<line-chart
  x="[1, 2, 3]"
  y="[10, 20, 30]"
  hline="[15, 25]"
  hlinename='["min", "max"]'
  hlinecolor='["green-archipel", "blue-ecume"]'
></line-chart>

Contribution

Le processus de contribution est détaillé sur la page CONTRIBUTING.md.