## Metric List Widget

The Metric List widget displays multiple metrics in a compact list format. Perfect for showing related KPIs together in one widget instead of creating separate metric cards.

### When to Use

- Display multiple related metrics in one space-efficient widget
- Create compact dashboards with many metrics
- Group related KPIs together (all cost metrics, all revenue metrics)
- Show detailed metric breakdowns with sub-values

#### Configuration Options

### Content Settings

#### Title (Required)

Examples: "Revenue Breakdown", "Cost Summary", "Performance Metrics"

### Configure Metrics (Required)

What it is: Array of metrics to display in the list

How to configure:

1. Click Add Metric
2. Configure each metric:
   - Metric: Select from available metrics (Revenue, Profit, Orders, etc.)
   - Label: Custom label for this metric (optional, uses default if empty)
   - Icon: Optional icon to display next to metric
   - Color: Color theme for this metric
3. Click Add Metric again to add more
4. Drag to reorder metrics in the list

Recommended: 3-8 metrics per list widget

### Change Indicator

Options:

- Previous Period: Show % change vs previous equivalent period
- Previous Year: Show % change vs same period last year
- None: Don't show comparisons

Note: Applied to all metrics in the list

#### Design Settings

### Responsive Width

Desktop/Tablet/Mobile Columns (1-12):

- Full width: 12 columns
- Half width: 6 columns
- Third width: 4 columns

Recommended: 4-6 columns on desktop for sidebar-style metric lists

#### Advanced Settings

### Enable Real-Time Data

Options: On/Off

When enabled: Metrics auto-refresh every 30 seconds

### Visual Layout

    	┌─────────────────────────────────┐
    │      Revenue Breakdown          │
    ├─────────────────────────────────┤
    │ [attach_money] Total Revenue    │
    │             $45,230    ↑ 12.5%  │
    ├─────────────────────────────────┤
    │ [bar_chart] Gross Profit        │
    │             $18,092    ↑ 8.3%   │
    ├─────────────────────────────────┤
    │ [trending_up] Net Profit        │
    │             $12,450    ↑ 15.2%  │
    ├─────────────────────────────────┤
    │ [percent] Profit Margin         │
    │             27.5%      ↑ 2.1%   │
    └─────────────────────────────────┘

#### Example Configurations

#### Example 1: Revenue Breakdown

Title: "Revenue Breakdown"

Metrics configured:

1. Total Revenue (icon: attach_money, color: blue)
2. Tax Collected (icon: receipt, color: gray)
3. Revenue Excl. Tax (icon: shopping_cart, color: blue)
4. Shipping Revenue (icon: local_shipping, color: purple)

#### Example 2: Cost Summary

Title: "Cost Summary"

Metrics:

1. Total Costs (icon: account_balance_wallet, color: red)
2. Product Costs (icon: inventory_2, color: orange)
3. Shipping Costs (icon: local_shipping, color: orange)
4. Payment Fees (icon: receipt, color: orange)
5. Ad Spend (icon: activity, color: red)
6. Operating Expenses (icon: receipt, color: red)

#### Example 3: Customer Metrics

Title: "Customer Analytics"

Metrics:

1. Total Customers (icon: people, color: purple)
2. New Customers (icon: people, color: green)
3. Returning Customers (icon: repeat, color: blue)
4. Average LTV (icon: trending_up, color: green)
5. Repeat Purchase Rate (icon: percent, color: purple)

### Best Practices

### Metric Selection

- Group related metrics together (all revenue, all costs, all customer metrics)
- Order by importance (most important at top)
- Limit to 6-8 metrics maximum for readability
- Use consistent color coding (costs = red/orange, revenue = blue, profit = green)

#### Layout Tips

- Use in sidebar alongside main chart (6 cols metric list + 6 cols chart)
- Place at top of report for overview
- Full width (12 cols) if displaying many metrics

### When to Use Metric List vs Multiple Metric Cards

Use Metric List when:

- Showing 4+ related metrics
- Space is limited
- Metrics are supplementary to main visualization

Use Multiple Metric Cards when:

- Showing 2-4 primary KPIs
- Each metric equally important
- Want prominent display at report top

#### Common Use Cases

### Dashboard Sidebar

6-column metric list on left, 6-column chart on right:

- Metrics: Revenue, Profit, Orders, AOV, Margin, ROAS
- Chart: Revenue trend line chart

#### Cost Breakdown Panel

All cost components in one list:

- Product Costs, Shipping, Fees, Ad Spend, Expenses, Total Costs

### Performance Scorecard

Key performance indicators:

- Conversion Rate, AOV, CLV, Repeat Rate, Cart Abandonment, Refund Rate

### Related Widgets

- Metric Card Widget - Single metric display
- Simple Table Widget - Tabular metric display