Dashboard

Comprehensive examples showing how to build data dashboards using Metrics components.

Key Metrics Overview

Display key performance indicators in a responsive grid layout.

Total Revenue

$124,532.89

20.1%

Total Orders

2,543

12.5%

Conversion Rate

4.8%

2.1%

Active Sessions

542

KPI Progress Tracking

Track progress towards targets with visual progress indicators.

Q4 Sales Target

95000

Target: 100000 $ 95%

Customer Acquisition

750

Target: 1000 75%

Sales Trends

Visualize sales performance across multiple products over time.

Monthly Sales by Product

Product A

Product B

Product C

Website Traffic Analysis

Track traffic sources and device types with stacked area charts.

Traffic by Device Type (Stacked)

Desktop

Mobile

Tablet

Conversion Sources

Understand where your conversions come from with a donut chart breakdown.

Conversion Sources

Direct (17.4%)

Organic (14.7%)

Referral (20.1%)

Social (15.8%)

Email (13.5%)

Paid (18.5%)

Performance Metrics

Monitor system and business performance with gauges and progress bars.

Performance Score

Success Rate

Error Rate

Resource Utilization

Track resource usage with progress metrics.

CPU Usage 65%

0 100

Memory Usage 78%

0 100

Disk Usage 45%

0 100

Network Bandwidth 92%

0 100

Implementation Example

Here's how to build a dashboard with Metrics components:

<script lang="ts">
  import { MetricGrid, BarChart, DonutChart } from '$lib';

  const statsCards = [
    {
      label: 'Total Revenue',
      value: '$124,532.89',
      trend: 'up',
      trendValue: '20.1%',
      color: 'primary'
    },
    // ... more cards
  ];

  const salesData = {
    series: [
      {
        label: 'Product A',
        data: [45, 52, 48, 61, 55, 67],
        color: '#3b82f6'
      }
    ],
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
  };
</script>

<!-- Key Metrics -->
<MetricGrid columns={4} gap="md" items={statsCards} />

<!-- Sales Chart -->
<BarChart
  series={salesData.series}
  labels={salesData.labels}
  title="Monthly Sales"
  yAxisLabel="Sales ($K)"
  showGrid={true}
  showLegend={true}
/>

<!-- Conversion Breakdown -->
<DonutChart
  data={[45, 38, 52, 41]}
  labels={['Direct', 'Organic', 'Referral', 'Social']}
  title="Conversion Sources"
  showLegend={true}
/>

Best Practices

Responsive Design

Use responsive grid layouts with MetricGrid to adapt to different screen sizes. Adjust columns based on viewport width.

Color Consistency

Use consistent colors across related metrics. Leverage the color themes (primary, success, warning, danger) for visual hierarchy.

Data Accuracy

Ensure data is up-to-date and accurate. Use real-time data sources when possible and clearly indicate data refresh times.

Accessibility

All Metrics components include ARIA labels and keyboard navigation. Ensure sufficient color contrast and provide text alternatives for visual data.