Skip to content

Commit

Permalink
add usage report images
Browse files Browse the repository at this point in the history
  • Loading branch information
@winkerVSbecks
winkerVSbecks committed Aug 21, 2024
1 parent ef6e253 commit 627422c
Show file tree
Hide file tree
Showing 5 changed files with 54 additions and 51 deletions.
103 changes: 53 additions & 50 deletions src/content/account/billing.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,11 +79,35 @@ For example, if you want to get a notification when you use 90% of the 35,000 sn

![Setup usage alerting](../../images/billing-usage-alert.png)

### Usage reports
## Usage reports

You can generate detailed usage reports for your own bookkeeping. Monthly and yearly reports are available for download as a CSV file. Contact us via our in-app chat or [email](mailto:[email protected]) if you'd like a custom date range or have the report formatted as JSON.
<div class="callout">

The downloaded CSV includes the following columns:
This a new feature that is rolling out in phases. If you don't see it yet, don't worry—it's coming soon. Meanwhile, you can access the [monthly and yearly CSV exports](#export-monthly-and-yearly-usage-data-as-csv).

</div>

Access usage reports for each billing period on the billing page. These reports offer a detailed breakdown of usage and display the invoice statement.

The **usage section** provides a per-project summary of Snapshots and TurboSnaps utilized (only available for billing periods after July 25, 2024).

The **invoice** includes details of the active plan for the billing period, the base number of snapshots included, any overage charges for additional snapshots, and a link to download a PDF copy of the invoice (available for all billing periods).

![Example of a usage report that shows a breakdown of snapshots by project and the invoice details](../../images/usage-report.png)

To access the current billing period's usage report, click on the "View usage" button in the Plan section.

![Access current billing period's usage report from the Plan section](../../images/usage-report-current-period.png)

To view previous billing periods, click on the card for the desired period in the Statements section.

![Access a previous billing period's usage report from the statements section](../../images/usage-report-past-periods.png)

### Export usage data as a CSV

You can generate a CSV file with a detailed list of every build within a build period. Click on a billing period to view the Usage Report, then click the "Download CSV" button to get a CSV file for that period.

The CSV file provides a granular breakdown of usage and includes the following columns:

<dl>
<dt>Date</dt>
Expand All @@ -96,47 +120,50 @@ The downloaded CSV includes the following columns:
<dd>Unique Chromatic build identifier</dd>

<dt>Repository slug</dt>
<dd>Owner and name of the Git repository linked to the project (<code><ownerName>:<repoName></code>)</dd>
<dd>

Owner and name of the Git repository linked to the project (`<ownerName>:<repoName>`)

</dd>

<dt>Branch name</dt>
<dd>Git branch name for which the build was created, prefixed with <code><ownerName>:</code> if the build originates from a fork</dd>
<dd>

Git branch name for which the build was created, prefixed with `<ownerName>:` if the build originates from a fork

</dd>

<dt>Build number</dt>
<dd>...</dd>
<dd>The incremental number for this build</dd>

<dt>TurboSnaps</dt>
<dd>...</dd>
<dd>

Number of snapshots identified by [TurboSnap](#snapshots-with-turbosnap-enabled-storybook-only) with no associated code changes. Billed at 1/5th the cost of a regular snapshot.

</dd>

<dt>Chrome snapshots</dt>
<dd>...</dd>
<dd>Number of billed snapshots captured in Chrome</dd>

<dt>Firefox snapshots</dt>
<dd>...</dd>
<dd>Number of billed snapshots captured in Firefox</dd>

<dt>Safari snapshots</dt>
<dd>...</dd>
<dd>Number of billed snapshots captured in Safari</dd>

<dt>Edge snapshots</dt>
<dd>...</dd>
<dd>Number of billed snapshots captured in Edge</dd>

<dt>Internet Explorer snapshots</dt>
<dd>...</dd>
<dd>Phased out in 2023. Number of billed snapshots captured in Internet Explorer.</dd>
</dl>

| Column | Description |
| --------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Date | Creation date and time of the build (ISO 8601) |
| App ID | Unique Chromatic project identifier |
| Build ID | Unique Chromatic build identifier |
| Repository slug | Owner and name of the Git repository linked to the project (`<ownerName>:<repoName>`) |
| Branch name | Git branch name for which the build was created, prefixed with `<ownerName>:` if the build originates from a fork |
| Build number | The incremental number for this build |
| TurboSnaps | Number of snapshots identified by [TurboSnap](#snapshots-with-turbosnap-enabled-storybook-only) with no associated code changes. Billed at 1/5th the cost of a regular snapshot. |
| Chrome snapshots | Number of billed snapshots captured in Chrome |
| Firefox snapshots | Number of billed snapshots captured in Firefox |
| Safari snapshots | Number of billed snapshots captured in Safari |
| Edge snapshots | Number of billed snapshots captured in Edge |
| Internet Explorer snapshots | Phasing out in 2023. Number of billed snapshots captured in Internet Explorer. |
### Export monthly and yearly usage data as CSV

Usage reports export your account's activity for the chosen billing period. You can also download a CSV of your monthly or yearly snapshot usage across all your projects' builds. Click the "Generate report" button and select a year and/or month, and then click "Generate CSV."

For a custom date range or to get the report in JSON format, contact us via in-app chat or [email](mailto:[email protected]).

![Setup usage report](../../images/billing-usage-report.png)

Expand Down Expand Up @@ -165,27 +192,3 @@ If you aren’t happy with Chromatic, we’ll refund your money. We want custome
If it’s not working out for you, contact us via our in-app chat or [email](mailto:[email protected]) to get a refund for your current month's usage.

Subsequent refunds will be credited to your account for use in future invoices.

## Usage reports

Breakdown by projects

- Snapshots
- TurboSnaps

Total:

- Snapshots
- TurboSnaps

Billing
Standard plan
Base snapshots
TurboSnaps
Extra snapshot (including TurboSnaps)

Does extra snapshot include TurboSnaps????

Current billing period usage
Previous period usage reports
Usage data is not available for billing periods prior to July 25, 2024. Have questions? Contact support
Binary file added src/images/usage-report-current-period.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/images/usage-report-past-periods.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/images/usage-report.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion src/styles/formatting.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -251,7 +251,7 @@ export const formatting = css`
}
dl {
padding-left: 30px;
padding-left: 15px;
margin: 0;
&:not(:last-of-type) {
Expand Down

0 comments on commit 627422c

Please sign in to comment.