---
title: "Créer et éditer des composants"
description: "Dans ce tutoriel, vous apprendrez à créer et éditer vos premiers graphiques, et à les ajouter à vos dashboards"
url: https://docs.ovhcloud.com/fr/guides/public-cloud/data-platform/tutorials-app-development-components
lang: fr
lastUpdated: 2026-09-14
---
> For AI agents: the complete documentation index is available at https://docs.ovhcloud.com/fr/llms.txt, the full documentation bundle is available at https://docs.ovhcloud.com/fr/llms-full.txt.

# Créer et éditer des composants

## Objectif

Dans ce tutoriel, vous apprendrez à créer et éditer vos premiers graphiques, et à les ajouter à vos dashboards.

## Créer et éditer un composant de graphique

### Ajouter un composant

Vous pouvez facilement ajouter un nouveau composant à votre dashboard Rides Analytics.
Pour cela, ajoutez cet objet json à l'array _items_ dans `rides-analytics.json`

```json
{
  "type": "panel",
  "id": "rides-holidays-container",
  "sizeX": 37,
  "sizeY": 64,
  "row": 191,
  "col": 38,
  "items": [
    {
      "type": "chart",
      "chart": {
        "id": "chart-6930201",
        "component": "recharts.bar",
        "request": {
          "data": {
            "fields": {
              "avg_rides_per_day_per_station": ["select"]
            }
          },
          "scale": {
            "fields": ["cat_holiday"]
          }
        },
        "options": {}
      },
      "sizeX": 100,
      "sizeY": 54,
      "row": 6,
      "col": 0
    },
    {
      "type": "html",
      "content": "Rides variability on Holidays",
      "customclass": "chart-title",
      "sizeX": 100,
      "sizeY": 5,
      "row": 0,
      "col": 0
    }
  ]
}
```

Ce json définit un panel qui contient 2 items, le **graphique** lui-même et **son titre**.

Un **graphique** est un item spécial qui a besoin d'une requête pour fonctionner. Une fois le composant de graphique chargé, la requête est exécutée et le résultat est affiché différemment selon le type du graphique.\
La requête a le même format que les [requêtes de l'Analytics Manager](https://docs.ovhcloud.com/fr/guides/public-cloud/data-platform/analytics-manager-queries-visual-builder.md). Vous pouvez aussi créer votre requête dans l'Analytics Manager et indiquer l'id de la requête à la place de la requête elle-même. Dans ce cas, vous devrez remplacer `request` par `requestId` dans le json ci-dessus.

Le type du graphique est défini par la clé `component`. De nombreux types de graphiques sont disponibles nativement dans Data Platform, mais vous pouvez aussi créer vos propres composants, nous vous montrerons comment y parvenir dans la prochaine partie de ce guide.\
Dans cet exemple, nous avons défini un nouveau graphique en barres à l'aide de la librairie [recharts](https://recharts.org/en-US/). La requête calcule le nombre moyen de trajets par jour pour chaque jour férié.

Au départ, votre graphique ressemble à ceci :

![alt text](/images/public-cloud/data-platform/getting-further/app-dev/picts/recharts-bar-example.png)
### Personnaliser un graphique

Comme ce graphique est réalisé avec la librairie recharts, il existe de nombreuses propriétés que vous pouvez modifier.

:::info
La liste complète est disponible sur la [page de documentation Recharts Bar](https://recharts.org/en-US/api/BarChart).
:::

Pour transmettre ces propriétés depuis le json de configuration de votre graphique, il vous suffit d'éditer la clé `options` relative à ce graphique.\
Par exemple, pour modifier la taille des barres, ajoutez une propriété `barSize` dans `options` comme ci-dessous :

```json
"options": {
  "barSize": 20
}
```

Vous pouvez aussi personnaliser les axes en ajoutant la propriété `xAxis` ou  `yAxis`. Vous pouvez ensuite transmettre les propriétés disponibles sur la [page de documentation Recharts Axis](https://recharts.org/en-US/api/XAxis)\
Par exemple, changez le domaine et l'échelle de votre YAxis :

```json
"options": {
  "barSize": 20,
  "yAxis": {
    "domain": [
      2000,
      3800
    ],
    "scale": "linear"
  }
}
```

Après ces quelques changements, votre graphique ressemble désormais à ceci :

![alt text](/images/public-cloud/data-platform/getting-further/app-dev/picts/recharts-bar-example-2.png)
Revenons un instant au fichier de configuration du graphique afin d'expliquer la **configuration du titre**.\
Ce composant est également nativement disponible avec Data Platform. Il vous permet d'écrire du code HTML dans la propriété `content`. Il sera encapsulé dans une div. Vous pouvez associer une classe personnalisée à cette div à l'aide de la propriété `customclass`.

Le code html associé au json défini ci-dessus est :

```html
<div class="html chart-title">Rides variability on Holidays</div>
```

:::info
En savoir plus sur les graphiques personnalisés dans le [**Guide technique**](https://docs.dataplatform.ovh.net/#/en/technical/sdk/app/custom-chart) !
:::

## Créer et éditer un paramètre dynamique

Un paramètre dynamique permet à l'utilisateur d'interagir avec un ou plusieurs graphiques en modifiant leurs requêtes à la volée.

Pour créer un nouveau paramètre dynamique, ouvrez `config/menus/sidebar.json` et ajoutez l'objet json suivant à l'objet _containers_, juste au-dessus de l'item _footer_.

```json
  {
    "id": "dyn-weekday",
    "items": [
      {
        "type": "html",
        "content": "Weekday",
        "customclass": "dyn-title"
      },
      {
        "type": "dynamic-parameter",
        "dynamic-parameter": {
          "type": "filter",
          "id": "dynamic-weekday",
          "dictionary": "week_day_label",
          "component": "selectbox",
          "placeholder": "Select Weekday",
          "multi": true
        },
        "style": {
          "paddingBottom": "10px"
        }
      }
    ]
  }
```

Ce json définit un paramètre dynamique qui vous permet de filtrer les requêtes de graphiques par un ou plusieurs jours de la semaine.

Il suit la même logique que celle suivie par les graphiques.

Voici le détail de cette configuration :

- `type` : indique comment le paramètre dynamique sera utilisé, ici comme un filtre. Cela signifie que tout graphique associé à ce paramètre dynamique verra ses résultats filtrés pour n'afficher que ceux correspondant aux jours de la semaine sélectionnés.
- `dictionary` : définit le champ lié à ce dynamic-parameter.
- `component` : définit le composant auquel ce dynamic-parameter est associé, ici, le composant _selectbox_.
- `id` : sert à référencer cet objet au sein de la platform et est couramment utilisé pour lier ce paramètre dynamique à des graphiques.
- `placeholder` : spécifique au composant _selectbox_, précise le texte affiché par défaut dans la selectbox.
- `multi` : spécifique au composant _selectbox_, c'est une propriété booléenne qui permet de sélectionner plusieurs options lorsqu'elle est définie sur true.

Après avoir copié-collé l'objet json ci-dessus définissant ce paramètre dynamique, votre nouveau composant doit maintenant apparaître dans la sidebar :

![alt text](/images/public-cloud/data-platform/getting-further/app-dev/picts/weekdays-selectbox.png)
Pour utiliser ce dynamic-parameter que vous venez de créer, vous devez le lier à un graphique.
Vous pouvez le faire en éditant la configuration des graphiques.

- Ouvrez `config/dashboards/rides-analytics.json`
- Dans l'objet json définissant le **graphique d'historique des trajets**, ajoutez `"dynamic-weekday"` au tableau dynamic-parameters.
- Rechargez votre page, votre paramètre dynamique est maintenant lié au graphique d'historique des trajets.
- Sélectionnez un jour pour filtrer le graphique par jour de la semaine et observez son rafraîchissement avec les nouvelles données.

:::info
En savoir plus sur les paramètres dynamiques dans le [**Guide technique**](https://docs.dataplatform.ovh.net/#/en/technical/sdk/app/dynamic_parameters/index) !
:::

Vous avez appris à utiliser des composants existants. Vous êtes maintenant prêt à découvrir la [création de vos propres composants personnalisés et leur utilisation pour créer des paramètres dynamiques et des graphiques uniques !](https://docs.ovhcloud.com/fr/guides/public-cloud/data-platform/tutorials-app-development-custom-components.md)

## Aller plus loin

Si vous avez besoin d'une formation ou d'une assistance technique pour la mise en oeuvre de nos solutions, contactez votre commercial ou cliquez sur [ce lien](https://www.ovhcloud.com/fr/professional-services/) pour obtenir un devis et demander une analyse personnalisée de votre projet à nos experts de l’équipe Professional Services.

Posez vos questions, faites-nous part de vos commentaires et interagissez directement avec l’équipe qui développe la Data Platform sur le [canal Discord](https://discord.gg/ovhcloud) dédié.

Si vous avez besoin d'une assistance concernant vos services OVHcloud, créez une demande depuis notre [centre d'aide](https://help.ovhcloud.com/csm?id=csm_get_help).

Rejoignez notre [communauté d'utilisateurs](https://community.ovhcloud.com/).