# Berichterstattungsdiagramm

Zeigen Sie Diagramme in Ihren verbundenen Konten an.

„Berichtstabelle“ stellt eine UI-Komponente für verbundene Konten bereit, um Diagramme ähnlich denen im Stripe-Dashboard anzuzeigen, wie z. B. die Diagramme „Nettovolumen“ und „Bruttovolumen“.

Both reports display amounts in the connected account’s default currency. Amounts in other currencies are converted into that currency.

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.

## Kontositzung erstellen

Wenn Sie [eine Kontositzung erstellen](https://docs.stripe.com/api/account_sessions/create.md), aktivieren Sie die Reporting-Chart-Komponente, indem Sie `reporting_chart` im Parameter `Komponenten` angeben.

```curl
curl https://api.stripe.com/v1/account_sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "account={{CONNECTEDACCOUNT_ID}}" \
  -d "components[reporting_chart][enabled]=true"
```

## Komponente rendern

Legen Sie eine optionale Höhe in CSS-Pixeln fest, beispielsweise `320px`, um die Größe der gesamten Komponente anzupassen. Die Komponente füllt weiterhin die verfügbare Breite aus. Wenn Sie die Höhe weglassen, wird ihre proportionale Größenanpassung beibehalten. Die Mindesthöhe beträgt `200px`.

`intervalStart` and `intervalEnd` accept JavaScript `Date` objects. Reporting data is grouped into UTC days, weeks, or months. A date constructed using local time can fall on a different calendar date in UTC. To select a specific UTC calendar date, construct the value using `new Date(Date.UTC(year, monthIndex, day))`.

Nachdem Sie die Kontositzung erstellt und [ConnectJS initialisiert haben](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#account-sessions), können Sie die Reporting-Chart-Komponente im Frontend rendern:

#### 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");
reportingChart.setHeight("320px");
container.appendChild(reportingChart);
```

#### HTML + JS

| Methode | Typ | Beschreibung | Standard | Erforderlich oder optional |
| --- | --- | --- | --- | --- |
| `setReportName` | `'net_volume' |  'gross_volume'` | Der Name des Berichts, der als Diagramm dargestellt werden soll. |  | erforderlich |
| `setIntervalStart` | `Date` | Die Startzeit zum Abfragen von Daten. Zurückgegebene Daten beginnen möglicherweise nach diesem Zeitstempel, wenn Daten spärlich sind. | Der Zeitpunkt des ersten Datenpunkts des verbundenen Kontos für den angegebenen Bericht. | optional |
| `setIntervalEnd` | `Date` | Die Endzeit zum Abfragen von Daten. Zurückgegebene Daten können vor diesem Zeitstempel enden, wenn Daten spärlich sind. | Der Zeitpunkt des letzten Datenpunkts des verbundenen Kontos für den angegebenen Bericht. | optional |
| `setIntervalType` | `„Tag“ | „Woche“ | „Monat“` | Wird verwendet, um die Granularität der Daten zu bestimmen. | Basierend auf der Dauer zwischen `intervalStart` und `intervalEnd`. Bei einem längeren Zeitrahmen werden standardmäßig weniger detaillierte Daten angezeigt. | optional |
| `setHeight` | `string` | Legt die Höhe der gesamten Komponente in CSS-Pixeln fest. Das Minimum beträgt `200px`. | Höhe proportional zur verfügbaren Breite. | optional |

#### React

| React-Eigenschaft | Typ | Beschreibung | Standard | Erforderlich oder optional |
| --- | --- | --- | --- | --- |
| `reportName` | `'net_volume' |  'gross_volume'` | Der Name des Berichts, der als Diagramm dargestellt werden soll. |  | erforderlich |
| `intervalStart` | `Date` | Die Startzeit zum Abfragen von Daten. Zurückgegebene Daten beginnen möglicherweise nach diesem Zeitstempel, wenn Daten spärlich sind. | Der Zeitpunkt des ersten Datenpunkts des verbundenen Kontos für den angegebenen Bericht. | optional |
| `intervalEnd` | `Date` | Die Endzeit zum Abfragen von Daten. Zurückgegebene Daten können vor diesem Zeitstempel enden, wenn Daten spärlich sind. | Der Zeitpunkt des letzten Datenpunkts des verbundenen Kontos für den angegebenen Bericht. | optional |
| `intervalType` | `„Tag“ | „Woche“ | „Monat“` | Wird verwendet, um die Granularität der Daten zu bestimmen. | Basierend auf der Dauer zwischen `intervalStart` und `intervalEnd`. Bei einem längeren Zeitrahmen werden standardmäßig weniger detaillierte Daten angezeigt. | optional |
| `height` | `string` | Legt die Höhe der gesamten Komponente in CSS-Pixeln fest. Das Minimum beträgt `200px`. | Höhe proportional zur verfügbaren Breite. | optional |