Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/GouvernementFR/dsfr-chart

🇫🇷 Data visualization library supported by french government's design system (Système de Design de l'État)
https://github.com/GouvernementFR/dsfr-chart

css data-visualization dsfr government html js vuejs webcomponents

Last synced: 3 months ago
JSON representation

🇫🇷 Data visualization library supported by french government's design system (Système de Design de l'État)

Host: GitHub
URL: https://github.com/GouvernementFR/dsfr-chart
Owner: GouvernementFR
License: mit
Created: 2022-06-07T15:45:19.000Z (over 2 years ago)
Default Branch: main
Last Pushed: 2024-03-19T08:32:10.000Z (9 months ago)
Last Synced: 2024-07-31T02:00:11.685Z (5 months ago)
Topics: css, data-visualization, dsfr, government, html, js, vuejs, webcomponents
Language: Vue
Homepage: https://gouvernementfr.github.io/dsfr-chart/
Size: 7.95 MB
Stars: 16
Watchers: 9
Forks: 5
Open Issues: 3
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE

Awesome Lists containing this project

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](https://vuejs.org/), 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](https://gouvernementfr.github.io/dsfr-chart/).

## 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](https://github.com/GouvernementFR/dsfr-chart/releases), 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](https://nodejs.org), 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 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 :

- **Charts** : contient les fichiers js et css à importer pour utiliser toutes les représentations disponibles.

- **Un dossier par type de représentation** (ex : LineChart) contenant les fichiers js et css à importer pour l'utilisation d'un seul type de graphique.

### Configuration de votre projet

#### Prérequis

**DSFR Chart** doit être utilisé dans un projet utilisant le [DSFR](https://www.systeme-de-design.gouv.fr/comment-utiliser-le-dsfr/developpeurs/prise-en-main-du-dsfr/). Le projet doit à minima importer les feuilles css :

- dsfr.min.css
- icons-system.min.css (dans _utility/icons/icons-system_)

Il est également nécessaire de charger [l'API Javascript](https://www.systeme-de-design.gouv.fr/comment-utiliser-le-dsfr/developpeurs/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 :

- Charger tous les composants :

```html

```

- Charger uniquement un ou plusieurs composants nécessaires (ex : ScatterChart) :

```html

```

## 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 : ``.

Les paramètres obligatoires sont :

- **x** : les valeurs sur l'axe des abscisses sous forme d'une liste de listes entre crochets

- **y** : les valeurs sur l'axe des ordonnées sous forme d'une liste de listes entre crochets

**Exemple :**

### 1. Nuage de points simple

```html

```

### Exemple:

ScatterChart

### Options ScatterChart:

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

**Exemple** :

### 2. Nuage de points reliés

```html

```

OptionScatter

---

# II. Graphique en lignes (ou LineChart)

Les graphiques en lignes (ou LineChart) sont accessibles à travers la balise : ` `

Les paramètres obligatoires sont :

- **x** : les valeurs sur l'axe des abscisses sous la forme d'une liste entre crochets

- **y** : les valeurs sur l'axe des ordonnées sous la forme d'une liste entre crochets

**Exemple**:

### 1. Graphique en ligne simple.

```html

```

### Exemple

LineChart

### 2. Graphique en multilignes (ou LineChart multiples).

Les graphiques en multilignes (ou LineChart multiples) sont accessibles à travers la balise : ``.

Les paramètres obligatoires sont :

- **x** : les valeurs sur l'axe des abscisses sous forme d'une liste de listes entre crochets
- **y** : les valeurs sur l'axe des ordonnées sous forme d'une liste de listes entre crochets

**Exemple :**

```html

```

### Exemple

MultiLineChart

---

# III. Diagramme en barres (ou BarChart)

Les graphiques en barres (ou BarChart) sont accessibles à travers la balise : ``.

Les paramètres obligatoires sont :

- **x** : les valeurs sur l’axe des abscisses sous forme d’une liste de listes entre crochets

- **y** : les valeurs sur l’axe des ordonnées sous forme d’une liste de listes entre crochets

**Exemple :**

### 1. Barres verticales

```html

```

BarChart

#### Options BarChart

### 2. Barres horizontales

- Pour tracer un **barchart horizontal**, il faut renseigner l’option **horizontal = true**

```html

```

ColorName

- Pour tracer un **barchart empilé**, il faut renseigner l’option **stacked = true**

```html

```

OptionsBar

---

# IV. Graphique en barres combinés avec une ligne (ou BarLineChart)

Les graphiques en barres combinés avec une ligne (ou BarLineChart) sont accessibles à travers la balise : ``.

Les paramètres obligatoires sont :

- **x** : les valeurs sur l’axe des abscisses sous forme d’une liste entre crochets

- **y** : les valeurs sur l’axe des ordonnées de la ligne sous forme d’une liste entre crochets

- **ybar** : les valeurs sur l’axe des ordonnées des barres sous forme d’une liste entre crochets

**Exemple :**

```html

```

### Exemple

BarLineChart

---

# V. Options de lignes verticales et horizontales

Sur tous les graphiques présentés ci-dessuss, il est possible d'ajouter des lignes verticales et horizontales.

Les paramètres obligatoires sont :

- **x** : les valeurs sur l’axe des abscisses sous forme d’une liste entre crochets

- **y** : les valeurs sur l’axe des ordonnées de la ligne sous forme d’une liste entre crochets

**Exemple :**

```html

```

### Exemple

hline_vline

---

# VI. Diagramme circulaire (ou PieChart)

Les diagrammes circulaires (ou PieChart) sont accessibles à travers la balise : ``.

Les paramètres obligatoires sont :

- **x** : les noms de chaque groupe sous la forme d’une liste entre crochets

- **y** : les valeurs de chaque groupe sous la forme d’une liste entre crochets

**Exemple :**

### 1. Diagramme circulaire plein

L’option **fill = True**, permet de remplir l’intérieur du graphique.

```html

```

PieChart

#### Options PieChart

### 2. Diagramme circulaire creux (donut)

**Exemple** :

```html

```

OptionPieChart

---

# VII. Diagramme en étoile

Les diagrammes en étoile (ou RadarChart) sont accessibles à travers la balise : ``.

Les paramètres obligatoires sont :

- **x** : les noms de chaque groupe sous la forme d’une liste entre crochets

- **y** : les valeurs de chaque groupe sous la forme d’une liste entre crochets

**Exemple** :

```html

```

RadarChart

---

# VIII. Jauges (ou GaugeChart)

Ce graphique est généré avec la balise ` `

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**:

```html

```

GaugeChart

---

# IX. Cartes (ou MapChart)

Les cartes (ou MapChart) sont accessibles à travers la balise : ``.

Les paramètres obligatoires sont :

- **data :** Un dictionnaire qui pour chaque numéro de département associe la valeur de l’indicateur dans le département
- **valuenat** : La valeur de l'indicateur à l'échelle natonale. Cette valeur sera affichée dans la sidebar.
- **name** : Nom de l'indicateur

### Exemples:

```html

```

#### 1. Découpage par département

MapChart_dep

### Options MapChart:

#### 2. Découpage par région

Les paramètres obligatoires sont :

```html

```

MapChart_reg

#### 3. Région

Les cartes (ou MapChart) par région sont accessibles à travers la balise : ``.

Les paramètres obligatoires sont :

- **data :** Un dictionnaire qui pour chaque numéro de département associe la valeur de l’indicateur dans le département
- **valuereg** : La valeur de l'indicateur à l'échelle regionale. Cette valeur sera affichée dans la sidebar.
- **name** : Nom de l'indicateur
- **region :** choix de la région

```html

```

MapChart_reg2

---

# X. Couleurs

Par défaut les noms des indicateurs sont : Série1, Série2, … et les couleurs associés sont #000091, #007c3a, #A558A0. Ils peuvent être modifiés à la convenance de l’utilisateur par les paramètres color et name.

Les couleurs choisis doivent impérativement choisis parmi les [couleurs du dsfr](https://www.systeme-de-design.gouv.fr/elements-d-interface/fondamentaux-identite-de-l-etat/couleurs-palette) de la liste suivante :

Les couleurs apparaîtront dans leur variante **sun** en thème claire et dans leur variante **moon** en thème sombre.

couleur

---

### Exemples:

#### 1. Line-Chart avec option color = 'orange-terre-battue'

```html

```

LineChartColor

---

#### 2. Multiline-Chart et BarLine-Chart avec option color (plusieurs couleurs)

Pour les graphiques avec plusieurs séries (barchart, piechart, multilinechart, scatterchart), **color** et **name** doivent être fournis sous la forme d'une liste entre crochets et non d'une simple chaîne de caractère

```html

```

MultiLineColor

---

Pour le cas du **BarLineChart,** les paramètres **color** et **name** sont associés à la ligne. Pour changer la couleur et le nom des barres, il faut utiliser les paramètre **colorbar** et **namebar**

```html

```

BarLineChartColor

---

Enfin dans le cas de **MapChart**, la modification du nom se fait également par l’intermédiaire de la variable **name**. En revanche pour gérer la couleur de la légende, il faut renseigner le paramètre **color** . Un gradient de couleur sera produit entre deux couleurs : le blanc comme valeur minimale et la couleur choisie comme valeur maximale.

**Exemple :**

```html

```

MapChartColor

---

# 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 :

- **x** : les noms de chaque groupe sous la forme d’une liste entre crochets

- **y** : les valeurs de chaque groupe sous la forme d’une liste entre crochets

Tableaux

---

# XII. Options

### Barre verticale

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

- **vline** : La ou les valeur(s) sur l’axe des abscisses sous la forme d’une liste entre crochets

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

- **vlinecolor** : La ou les couleur(s) sous forme d’une liste entre crochets

- **vlinename** : Le ou les nom(s) sous la forme d’une liste entre crochets

**Exemple :**

```html

```

HlineColorpng

### Barre horizontale

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

- **hline** : La ou les valeur(s) sur l’axe des ordonnées sous la forme d’une liste entre crochets

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

- **hlinecolor** : La ou les couleur(s) sous forme d’une liste entre crochets

- **hlinename** : Le ou les nom(s) sous la forme d’une liste entre crochets

**Exemple :**

```html

```

VlineColorpng

## Contribution

Le processus de contribution est détaillé sur la page [CONTRIBUTING.md](CONTRIBUTING.md).