# レポートのチャート

連結アカウントにチャートを表示します。

レポートのチャートでは連結アカウントの UI コンポーネントが表示されます。純売上高や総売上高のチャートなど、Stripe ダッシュボードのチャートに類似したチャートが表示されます。

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.

## アカウントセッションを作成する

[アカウントセッション](https://docs.stripe.com/api/account_sessions/create.md)の作成時に、`components` パラメーターで `reporting_chart` を指定して、Reporting chart を有効にします。

> Reporting chart コンポーネントは非公開プレビュー段階のため、Stripe SDK にはまだ含まれていません。アカウントセッションの作成時にこれを有効にするには、Stripe ベータ 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}
  }
})

```

アカウントセッションを作成し、[ConnectJS を初期化](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#account-sessions)すると、フロントエンドに Reporting chart コンポーネントが表示されます。

## コンポーネントをレンダリングする

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

| メソッド               | タイプ                                    | 説明                                                        | デフォルト                                                                          | 必須またはオプション |
| ------------------ | -------------------------------------- | --------------------------------------------------------- | ------------------------------------------------------------------------------ | ---------- |
| `setReportName`    | `'net_volume' |  'gross_volume'`       | チャートとして表示するレポートの名前。                                       |                                                                                | 必須         |
| `setIntervalStart` | `Date`                                 | データクエリの開始時間。データがまばらな場合、返されるデータがこのタイムスタンプよりも後に開始することがあります。 | 指定レポートにおける、連結アカウントの最初のデータポイントの記録時間。                                            | オプション      |
| `setIntervalEnd`   | `Date`                                 | データクエリの終了時間。データがまばらな場合、返されるデータがこのタイムスタンプよりも早く終了することがあります。 | 指定レポートにおける、連結アカウントの最後のデータポイントの記録時間。                                            | オプション      |
| `setIntervalType`  | `'day' | 'month' | 'quarter' | 'year'` | これは、データの粒度を判断するために使用されます。                                 | `intervalStart` から `intervalEnd` までの期間に基づきます。期間を長くすると、デフォルトで表示されるデータの粒度が低下します。 | オプション      |

#### React

| React プロパティ     | タイプ                                    | 説明                                                        | デフォルト                                                                          | 必須またはオプション |
| --------------- | -------------------------------------- | --------------------------------------------------------- | ------------------------------------------------------------------------------ | ---------- |
| `reportName`    | `'net_volume' |  'gross_volume'`       | チャートとして表示するレポートの名前。                                       |                                                                                | 必須         |
| `intervalStart` | `Date`                                 | データクエリの開始時間。データがまばらな場合、返されるデータがこのタイムスタンプよりも後に開始することがあります。 | 指定レポートにおける、連結アカウントの最初のデータポイントの記録時間。                                            | オプション      |
| `intervalEnd`   | `Date`                                 | データクエリの終了時間。データがまばらな場合、返されるデータがこのタイムスタンプよりも早く終了することがあります。 | 指定レポートにおける、連結アカウントの最後のデータポイントの記録時間。                                            | オプション      |
| `intervalType`  | `'day' | 'month' | 'quarter' | 'year'` | これは、データの粒度を判断するために使用されます。                                 | `intervalStart` から `intervalEnd` までの期間に基づきます。期間を長くすると、デフォルトで表示されるデータの粒度が低下します。 | オプション      |

## アクセスをリクエストする  (プライベートベータ版)

サインインして、プライベートベータ版の Connect 埋め込みコンポーネントへのアクセスをリクエストします。

Stripe アカウントがない場合は、[こちらから登録](https://dashboard.stripe.com/register)できます。