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