# 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“.

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

Aktivieren Sie [beim Erstellen einer Kontositzung](https://docs.stripe.com/api/account_sessions/create.md) Reporting chart, indem Sie `reporting_chart` im `components`-Parameter angeben.

> Die Reporting chart-Komponente befindet sich in der privaten Vorschau und ist daher noch nicht in den Stripe-SDKs enthalten. Um sie beim Erstellen einer Kontositzung zu aktivieren, verwenden Sie diesen Code-Ausschnitt mit dem Stripe Beta SDK:

#### 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}
  }
})

```

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

## Komponente 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");
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`  | `'day' | 'month' | 'quarter' | 'year'` | 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                   |

#### 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`    | `'day' | 'month' | 'quarter' | 'year'` | 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                   |

## Zugriff anfordern (Private Vorschau)

Melden Sie sich an, um Zugriff auf diese eingebettete Connect-Komponente in der privaten Vorschau anzufordern.

Wenn Sie kein Stripe-Konto haben, können Sie sich [hier registrieren](https://dashboard.stripe.com/register).