[ [UI.121] Credits ] Credit Usage Chart

Credit Usage Chart

> Bar chart visualization of daily AI credit consumption over the past 14 days. Includes hover tooltips showing exact values.

Import

[ [0x5B] IMPORT ]

1import { UsageChart } from "@/components/credits"

Preview

[ [0x00] CREDIT USAGE CHART ]

14 days agoToday

1<UsageChart data={usageStats} />

Variants

[ [0x00] HIGH USAGE SPIKES ]

14 days agoToday

1// Bars scale relative to max value

[ [0x00] LOW USAGE ]

14 days agoToday

1// Minimum bar height ensures visibility

[ [0x00] NO USAGE ]

14 days agoToday

1// Zero-usage days shown as muted bars

API Reference

[ [0x00] API REFERENCE ]

Prop	Type	Default	Description
data*	`{ date: string; credits: number }[]`	-	Array of daily usage data with ISO date strings and credit counts.
className	`string`	-	Additional CSS classes to apply.

Usage

[ [0xF8] DASHBOARD INTEGRATION ]

Fetch 14-day usage history from API and display as bar chart:

1'use client';
2
3import { useEffect, useState } from 'react';
4import { UsageChart } from '@/components/credits';
5
6export function UsageDashboard() {
7  const [usageData, setUsageData] = useState([]);
8
9  useEffect(() => {
10    // Fetch usage stats from API
11    fetch('/api/credits/history?stats=true&days=14')
12      .then(r => r.json())
13      .then(data => setUsageData(data.stats));
14  }, []);
15
16  if (usageData.length === 0) {
17    return <div>Loading chart...</div>;
18  }
19
20  return (
21    <div className="space-y-4">
22      <h3>Credit Usage (Last 14 Days)</h3>
23      <UsageChart data={usageData} />
24    </div>
25  );
26}

[ [0xD3] DATA FORMAT ]

Expected data structure from GET /api/credits/history?stats=true:

1// GET /api/credits/history?stats=true&days=14 response
2{
3  "stats": [
4    { "date": "2024-11-25", "credits": 15 },
5    { "date": "2024-11-26", "credits": 22 },
6    { "date": "2024-11-27", "credits": 8 },
7    ...  // 14 days total
8    { "date": "2024-12-08", "credits": 20 }
9  ],
10  "totalUsage": 245,
11  "transactions": [...]
12}
13
14// Component automatically:
15// - Shows last 14 days
16// - Scales bars relative to max value
17// - Shows tooltips on hover with exact counts
18// - Displays date labels (day of month)

[ [0x36] STATIC DATA (NO API) ]

Use with hardcoded data for landing pages or demos:

1import { UsageChart } from '@/components/credits';
2
3const demoData = [
4  { date: '2024-11-25', credits: 15 },
5  { date: '2024-11-26', credits: 22 },
6  { date: '2024-11-27', credits: 8 },
7  { date: '2024-11-28', credits: 31 },
8  { date: '2024-11-29', credits: 12 },
9  { date: '2024-11-30', credits: 25 },
10  { date: '2024-12-01', credits: 18 },
11  { date: '2024-12-02', credits: 5 },
12  { date: '2024-12-03', credits: 28 },
13  { date: '2024-12-04', credits: 14 },
14  { date: '2024-12-05', credits: 20 },
15  { date: '2024-12-06', credits: 9 },
16  { date: '2024-12-07', credits: 33 },
17  { date: '2024-12-08', credits: 16 },
18];
19
20export function DemoSection() {
21  return <UsageChart data={demoData} />;
22}

Accessibility

[ [0x58] A11Y ]

Hover tooltips show exact credit values
Color-coded bars (primary for usage, muted for zero)
Date labels on x-axis for orientation
Relative bar heights for visual comparison

Variants

[ [0x00] HIGH USAGE SPIKES ]

14 days agoToday

1// Bars scale relative to max value

[ [0x00] LOW USAGE ]

14 days agoToday

1// Minimum bar height ensures visibility

[ [0x00] NO USAGE ]

14 days agoToday

1// Zero-usage days shown as muted bars

Prop

Type

Default

Description

data*

{ date: string; credits: number }[]

Array of daily usage data with ISO date strings and credit counts.

className

string

Additional CSS classes to apply.

Usage

[ [0xF8] DASHBOARD INTEGRATION ]

Fetch 14-day usage history from API and display as bar chart:

1'use client';
2
3import { useEffect, useState } from 'react';
4import { UsageChart } from '@/components/credits';
5
6export function UsageDashboard() {
7  const [usageData, setUsageData] = useState([]);
8
9  useEffect(() => {
10    // Fetch usage stats from API
11    fetch('/api/credits/history?stats=true&days=14')
12      .then(r => r.json())
13      .then(data => setUsageData(data.stats));
14  }, []);
15
16  if (usageData.length === 0) {
17    return <div>Loading chart...</div>;
18  }
19
20  return (
21    <div className="space-y-4">
22      <h3>Credit Usage (Last 14 Days)</h3>
23      <UsageChart data={usageData} />
24    </div>
25  );
26}

[ [0xD3] DATA FORMAT ]

Expected data structure from GET /api/credits/history?stats=true:

1// GET /api/credits/history?stats=true&days=14 response
2{
3  "stats": [
4    { "date": "2024-11-25", "credits": 15 },
5    { "date": "2024-11-26", "credits": 22 },
6    { "date": "2024-11-27", "credits": 8 },
7    ...  // 14 days total
8    { "date": "2024-12-08", "credits": 20 }
9  ],
10  "totalUsage": 245,
11  "transactions": [...]
12}
13
14// Component automatically:
15// - Shows last 14 days
16// - Scales bars relative to max value
17// - Shows tooltips on hover with exact counts
18// - Displays date labels (day of month)

[ [0x36] STATIC DATA (NO API) ]

Use with hardcoded data for landing pages or demos:

1import { UsageChart } from '@/components/credits';
2
3const demoData = [
4  { date: '2024-11-25', credits: 15 },
5  { date: '2024-11-26', credits: 22 },
6  { date: '2024-11-27', credits: 8 },
7  { date: '2024-11-28', credits: 31 },
8  { date: '2024-11-29', credits: 12 },
9  { date: '2024-11-30', credits: 25 },
10  { date: '2024-12-01', credits: 18 },
11  { date: '2024-12-02', credits: 5 },
12  { date: '2024-12-03', credits: 28 },
13  { date: '2024-12-04', credits: 14 },
14  { date: '2024-12-05', credits: 20 },
15  { date: '2024-12-06', credits: 9 },
16  { date: '2024-12-07', credits: 33 },
17  { date: '2024-12-08', credits: 16 },
18];
19
20export function DemoSection() {
21  return <UsageChart data={demoData} />;
22}