# Graphique de suivi

Affichez des graphiques pour vos comptes connectés.

La section Graphique de reporting affiche un composant d’interface utilisateur permettant aux comptes connectés de visualiser des graphiques similaires à ceux du Dashboard Stripe, tels que les graphiques de volume net et de volume brut.

Note: The following is a preview/demo component that behaves differently than live mode usage with real connected accounts. The actual component has more functionality than what might appear in this demo component. For example, for connected accounts without Stripe dashboard access (custom accounts), no user authentication is required in production.

## Créer une session de compte

Lorsque vous [créez une session de compte](https://docs.stripe.com/api/account_sessions/create.md), activez Reporting chart en spécifiant `reporting_chart` dans le paramètre `components`.

> Le composant Reporting chart est en version bêta privée ; les SDK Stripe ne l’incluent donc pas encore. Pour l’activer lorsque vous créez une session de compte, utilisez cet extrait de code avec la version bêta des SDK Stripe :

#### Ruby

```ruby
client = Stripe::StripeClient.new('{{sk_INSERT_YOUR_SECRET_KEY}}', stripe_version: '2023-10-16; embedded_connect_beta=v2;')
account_session = client.v1.account_sessions.create({
  account: ''{{CONNECTED_ACCOUNT_ID}}'',
  components: {
    reporting_chart: {enabled: true}
  }
})

```

Après avoir créé la session du compte et [initialisé ConnectJS](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#account-sessions), vous pouvez générer le rendu du composant Reporting chart dans le front-end :

## Rendu du composant

#### JavaScript

```js
// Include this element in your HTML
const container = document.getElementById("container");
const reportingChart = stripeConnectInstance.create("reporting-chart");
reportingChart.setReportName("net_volume");
reportingChart.setIntervalStart(new Date(Date.UTC(2023, 11, 17)));
reportingChart.setIntervalEnd(new Date(Date.UTC(2024, 08, 18)));
reportingChart.setIntervalType("day");
container.appendChild(reportingChart);
```

#### HTML + JS

| Moyen de paiement  | Type                                   | Description                                                                                                                                          | Par défaut                                                                                                                                           | Obligatoire ou facultatif |
| ------------------ | -------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------- |
| `setReportName`    | `'net_volume' |  'gross_volume'`       | Nom du rapport à afficher sous forme de graphique.                                                                                                   |                                                                                                                                                      | obligatoire               |
| `setIntervalStart` | `Date`                                 | L’heure de début de l’interrogation des données. Le retour des données peut débuter plus tard que cet horodatage si les données sont peu nombreuses. | L’heure du premier point de données du compte connecté pour le rapport indiqué.                                                                      | facultatif                |
| `setIntervalEnd`   | `Date`                                 | L’heure de fin de l’interrogation des données. Le retour des données peut se terminer avant cet horodatage si les données sont peu nombreuses.       | L’heure du dernier point de données du compte connecté pour le rapport indiqué.                                                                      | facultatif                |
| `setIntervalType`  | `'day' | 'month' | 'quarter' | 'year'` | Permet de déterminer le niveau de granularité des données.                                                                                           | En fonction de la durée entre `intervalStart` et `intervalEnd`. Une période plus longue entraîne par défaut l’affichage de données moins détaillées. | facultatif                |

#### React

| Propriété React | Type                                   | Description                                                                                                                                          | Par défaut                                                                                                                                           | Obligatoire ou facultatif |
| --------------- | -------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------- |
| `reportName`    | `'net_volume' |  'gross_volume'`       | Nom du rapport à afficher sous forme de graphique.                                                                                                   |                                                                                                                                                      | obligatoire               |
| `intervalStart` | `Date`                                 | L’heure de début de l’interrogation des données. Le retour des données peut débuter plus tard que cet horodatage si les données sont peu nombreuses. | L’heure du premier point de données du compte connecté pour le rapport indiqué.                                                                      | facultatif                |
| `intervalEnd`   | `Date`                                 | L’heure de fin de l’interrogation des données. Le retour des données peut se terminer avant cet horodatage si les données sont peu nombreuses.       | L’heure du dernier point de données du compte connecté pour le rapport indiqué.                                                                      | facultatif                |
| `intervalType`  | `'day' | 'month' | 'quarter' | 'year'` | Permet de déterminer le niveau de granularité des données.                                                                                           | En fonction de la durée entre `intervalStart` et `intervalEnd`. Une période plus longue entraîne par défaut l’affichage de données moins détaillées. | facultatif                |

## Demander l’accès (Private preview)

Connectez-vous pour demander l’accès à ce composant intégré Connect en version bêta privée.

Vous pouvez [créer un compte](https://dashboard.stripe.com/register) Stripe si vous n’en avez pas.