187 lines
8.2 KiB
Markdown
187 lines
8.2 KiB
Markdown
# Dashboard - Rendered Example
|
|
|
|
This shows the actual dashboard with realistic metrics and activity data.
|
|
|
|
## Loaded State (Default)
|
|
|
|
```
|
|
╭──────────────────────────────────────────────────────────────────────────────╮
|
|
│ Dashboard Sarah Johnson ▼ │
|
|
├──────────────────────────────────────────────────────────────────────────────┤
|
|
│ │
|
|
│ Welcome back, Sarah! Here's what's happening today. │
|
|
│ │
|
|
│ ╭───────────────────╮ ╭───────────────────╮ ╭──────────────────────╮ │
|
|
│ │ Revenue │ │ Active Users │ │ Growth │ │
|
|
│ │ ───────────────── │ │ ───────────────── │ │ ─────────────────── │ │
|
|
│ │ $24,567 │ │ 1,234 │ │ +12.5% │ │
|
|
│ │ +8.3% ↗ │ │ +45 today │ │ MoM │ │
|
|
│ ╰───────────────────╯ ╰───────────────────╯ ╰──────────────────────╯ │
|
|
│ │
|
|
│ Recent Activity │
|
|
│ ╭────────────────────────────────────────────────────────────────────────╮ │
|
|
│ │ • John Doe signed up 2 minutes ago │ │
|
|
│ │ • New order #1234 received 5 minutes ago │ │
|
|
│ │ • Sarah Johnson updated profile 8 minutes ago │ │
|
|
│ │ • Mike Smith completed onboarding 15 minutes ago │ │
|
|
│ │ • System backup completed successfully 22 minutes ago │ │
|
|
│ ╰────────────────────────────────────────────────────────────────────────╯ │
|
|
│ │
|
|
╰──────────────────────────────────────────────────────────────────────────────╯
|
|
```
|
|
|
|
## Loading State
|
|
|
|
```
|
|
╭──────────────────────────────────────────────────────────────────────────────╮
|
|
│ Dashboard Sarah Johnson ▼ │
|
|
├──────────────────────────────────────────────────────────────────────────────┤
|
|
│ │
|
|
│ │
|
|
│ ⠋ Loading dashboard... │
|
|
│ │
|
|
│ │
|
|
╰──────────────────────────────────────────────────────────────────────────────╯
|
|
```
|
|
|
|
## Data Context
|
|
|
|
This example demonstrates:
|
|
|
|
### User Information
|
|
- **User**: Sarah Johnson (logged in)
|
|
- **Time**: October 11, 2024, 3:45 PM
|
|
- **Greeting**: Personalized with name and time-appropriate message
|
|
|
|
### Metric Cards
|
|
|
|
**Card 1: Revenue**
|
|
- Value: $24,567 (monthly revenue)
|
|
- Trend: +8.3% ↗ (positive growth from last month)
|
|
- Visual: Green trend indicator
|
|
|
|
**Card 2: Active Users**
|
|
- Value: 1,234 (total active users)
|
|
- Change: +45 today (new users today)
|
|
- Visual: User count with daily change
|
|
|
|
**Card 3: Growth**
|
|
- Value: +12.5% (percentage growth)
|
|
- Period: MoM (month over month)
|
|
- Visual: Growth percentage
|
|
|
|
### Recent Activity
|
|
|
|
Real activity entries with timestamps:
|
|
1. **John Doe signed up** - 2 minutes ago
|
|
2. **New order #1234 received** - 5 minutes ago
|
|
3. **Sarah Johnson updated profile** - 8 minutes ago
|
|
4. **Mike Smith completed onboarding** - 15 minutes ago
|
|
5. **System backup completed successfully** - 22 minutes ago
|
|
|
|
## User Flow Demonstration
|
|
|
|
### Step 1: Login Complete
|
|
User successfully authenticates
|
|
→ Dashboard loads
|
|
|
|
### Step 2: Data Fetch
|
|
System retrieves:
|
|
- Latest metrics
|
|
- Recent activity
|
|
- User preferences
|
|
|
|
### Step 3: Display
|
|
Dashboard renders with:
|
|
- Personalized greeting
|
|
- Current metrics with trends
|
|
- Real-time activity feed
|
|
|
|
### Step 4: Interaction
|
|
User can:
|
|
- Click metric cards for details
|
|
- Click activity items for context
|
|
- Access user menu via dropdown
|
|
- Navigate to other sections
|
|
|
|
## Components Breakdown
|
|
|
|
This screen composition includes:
|
|
|
|
1. **Top Bar**
|
|
- Dashboard title (left)
|
|
- User dropdown menu (right): "Sarah Johnson ▼"
|
|
|
|
2. **Greeting Section**
|
|
- Personalized message: "Welcome back, Sarah!"
|
|
- Context: "Here's what's happening today."
|
|
|
|
3. **Metric Cards (3x)** (component: card)
|
|
- **Revenue Card**
|
|
- Title: "Revenue"
|
|
- Value: "$24,567"
|
|
- Trend: "+8.3% ↗" (badge with arrow)
|
|
|
|
- **Users Card**
|
|
- Title: "Active Users"
|
|
- Value: "1,234"
|
|
- Change: "+45 today"
|
|
|
|
- **Growth Card**
|
|
- Title: "Growth"
|
|
- Value: "+12.5%"
|
|
- Period: "MoM"
|
|
|
|
4. **Activity Section**
|
|
- Header: "Recent Activity"
|
|
- List (component: list)
|
|
- 5 recent items
|
|
- Each with description and timestamp
|
|
- Bullet formatting for clarity
|
|
|
|
## Design Notes
|
|
|
|
- **Information Hierarchy**: Most important metrics (revenue) comes first
|
|
- **Visual Grouping**: Cards use consistent styling and spacing
|
|
- **Real-time Feel**: Recent timestamps show system is live
|
|
- **Scanability**: Bullet points and clear labels make scanning easy
|
|
- **Trend Indicators**: Arrows (↗) and percentages show direction quickly
|
|
- **Whitespace**: Generous padding prevents cramped feeling
|
|
|
|
## Trend Indicators Explained
|
|
|
|
- **↗** (up-right arrow): Positive trend, growth
|
|
- **→** (right arrow): Flat, no change
|
|
- **↘** (down-right arrow): Negative trend, decline
|
|
- **+X%**: Positive percentage change (green context)
|
|
- **-X%**: Negative percentage change (red context)
|
|
|
|
## Time-based Data
|
|
|
|
All timestamps are relative:
|
|
- "2 minutes ago" - Very recent
|
|
- "5 minutes ago" - Recent
|
|
- "15 minutes ago" - Somewhat recent
|
|
- "22 minutes ago" - Less recent
|
|
|
|
This creates a sense of real-time activity.
|
|
|
|
## Accessibility Features
|
|
|
|
- Clear heading hierarchy (Dashboard → sections)
|
|
- Metric values announced with context
|
|
- Activity items in semantic list
|
|
- Keyboard navigation: Tab through cards and items
|
|
- Screen reader: Trends and timestamps properly announced
|
|
- High contrast for trend indicators
|
|
|
|
## State Transitions
|
|
|
|
1. **Initial Load** → Loading spinner shown
|
|
2. **Data Fetched** → Transition to loaded state
|
|
3. **Error Occurs** → Show error message, retry button
|
|
4. **User Clicks Card** → Navigate to detail view
|
|
5. **New Activity** → Update activity list (real-time)
|
|
|
|
This rendered example shows exactly how a production dashboard appears with real data!
|