docs(usage): cover a closed period and a project filter

Two states nobody could see: a previous billing period, where the curve
is complete rather than still being drawn, and a project filter, where
the meter holds on the organisation while the chart, the breakdown and
the note follow the project.

The selects carry the real option lists too, so the menus behave like the
page rather than showing one value.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: talissoncosta

frontend/documentation/components/UsageDashboard.stories.tsx

@@ -9,21 +9,36 @@ import {
 } from 'common/theme/tokens'
 import { Res } from 'common/types/responses'
 
-const select = (label: string, ariaLabel: string) => (
+const PROJECTS = [
+  'All Projects',
+  'Checkout',
+  'Mobile app',
+  'Internal tools',
+  'Marketing site',
+]
+
+const select = (label: string, ariaLabel: string, options: string[]) => (
   <div style={{ minWidth: 210 }}>
     <Select
       aria-label={ariaLabel}
       value={{ label, value: label }}
-      options={[{ label, value: label }]}
+      options={options.map((option) => ({ label: option, value: option }))}
       onChange={() => {}}
     />
   </div>
 )
 
-const filters = (period: string) => (
+const PERIODS = [
+  'Current billing period',
+  'Previous billing period',
+  'Last 90 days',
+  'Last 30 days',
+]
+
+const filters = (period: string, project = 'All Projects') => (
   <Row className='gap-2'>
-    {select(period, 'Period')}
-    {select('All Projects', 'Project')}
+    {select(period, 'Period', PERIODS)}
+    {select(project, 'Project', PROJECTS)}
   </Row>
 )
 
@@ -44,11 +59,17 @@ const BREAKDOWN_ROWS = [
   },
 ]
 
-const breakdown = (scope: string) => (
+const scaleRows = (factor: number) =>
+  BREAKDOWN_ROWS.map((row) => ({
+    ...row,
+    value: Math.round(row.value * factor),
+  }))
+
+const breakdown = (scope: string, factor = 1) => (
   <UsageBreakdown
     dimension='request-type'
     onChangeDimension={() => {}}
-    rows={BREAKDOWN_ROWS}
+    rows={scaleRows(factor)}
     scope={scope}
   />
 )
@@ -192,6 +213,42 @@ export const WithoutAPlanLimit: Story = {
   },
 }
 
+/**
+ * A closed period, so the chart is a complete curve rather than one still
+ * being drawn. The meter stays on the current period, which is the only one
+ * that can still be acted on.
+ */
+export const PreviousBillingPeriod: Story = {
+  args: {
+    breakdown: breakdown('All projects · Previous billing period', 1.34),
+    data: usage(31, 61000),
+    filters: filters('Previous billing period'),
+    hasBillingPeriod: true,
+    limit: 2000000,
+    periodLabel: 'Previous billing period',
+    showPlanCeiling: false,
+    total: paid.totals.total,
+  },
+}
+
+/**
+ * The meter keeps answering for the organisation while the chart, the
+ * breakdown and the note below the bar follow the chosen project.
+ */
+export const FilteredToAProject: Story = {
+  args: {
+    breakdown: breakdown('Checkout · Current billing period', 0.38),
+    data: usage(18, 26600),
+    filters: filters('Current billing period', 'Checkout'),
+    hasBillingPeriod: true,
+    limit: 2000000,
+    meterNote: 'Checkout accounts for 38% of that usage.',
+    periodLabel: 'Current billing period',
+    showPlanCeiling: false,
+    total: paid.totals.total,
+  },
+}
+
 export const NoUsageYet: Story = {
   args: {
     data: usage(0, 0),