Custom Dashboards

What are Custom Dashboards?

Custom dashboards let you create personalized views of your data with drag-and-drop widgets. Combine metrics, charts, tables, and funnels to build comprehensive reporting dashboards for your team or stakeholders.

Widget Types

Metric Widget

Display a single metric value with optional trend indicator. Perfect for KPIs like MRR, active users, or conversion rates.

Chart Widget

Visualize metric trends over time with line, bar, or area charts. Choose time ranges and intervals for time-series analysis.

Table Widget

Display recent events in a table format. Filter by event names and customize which properties to show.

Funnel Widget

Show conversion funnel visualization with drop-off rates at each step.

Comparison Metric Widget

Display a metric with comparison to previous period, week, month, or year. Shows percentage change with trend indicators. Great for tracking growth metrics like MRR, user count, or revenue.

Goal Progress Widget

Track progress toward a specific goal with a progress bar. Shows current value, target value, percentage complete, and remaining amount. Supports pageviews, unique visitors, events, and revenue metrics.

Breakdown Widget

Visualize data breakdowns by dimension (country, device, browser, OS, etc.) using pie or bar charts. Perfect for understanding your audience composition and traffic sources.

Map Widget

Geographic visualization showing visitor distribution by country with country flags and progress bars. Data is automatically captured from IP addresses on every event.

Realtime Widget

Live active visitor count with optional visitor list showing current pages, countries, devices, and browsers. Updates in real-time via Server-Sent Events (SSE).

Automatic Data Enrichment

All events are automatically enriched with metadata - you do not need to send this data manually:

Geographic Data (IP Geolocation)

• •Country: ISO country code (e.g., US, GB, CA)
• •City & Region: City name and state/province
• •Coordinates: Latitude and longitude
• •Timezone: User timezone

Device & Browser (User-Agent Parsing)

• •Device Type: Desktop, mobile, or tablet
• •Browser: Chrome, Safari, Firefox, Edge, etc.
• •Operating System: Windows, macOS, iOS, Android, Linux

UTM Campaign Tracking

• •utm_source: Traffic source (google, facebook, newsletter)
• •utm_medium: Marketing medium (cpc, email, social)
• •utm_campaign: Campaign name
• •utm_content & utm_term: Ad content and keywords

Session Tracking

• •Session ID: Automatically generated for each visitor session
• •Pageviews: Counted per session
• •Bounce Rate: True if only 1 pageview in session
• •Entry Page & Referrer: First page and traffic source

Creating a Dashboard

• •Navigate to Dashboard → Dashboards → Create Dashboard
• •Give your dashboard a name and optional description
• •Click Add Widget to start adding visualizations
• •Configure each widget's data source, time range, and display options
• •Drag and resize widgets to customize the layout

Widget Configuration

Metric Widget

{
  "type": "metric",
  "title": "Monthly Recurring Revenue",
  "config": {
    "metricId": "metric_abc123",
    "showTrend": true,
    "timeRange": "30d"
  }
}

Chart Widget

{
  "type": "chart",
  "title": "Revenue Trend",
  "config": {
    "metricId": "metric_abc123",
    "chartType": "line",  // "line", "bar", or "area"
    "timeRange": "90d",
    "interval": "day"     // "hour", "day", "week", "month"
  }
}

Table Widget

{
  "type": "table",
  "title": "Recent Purchases",
  "config": {
    "eventNames": ["purchase_completed"],
    "limit": 50,
    "properties": ["userId", "metadata.amount", "timestamp"]
  }
}

Dashboard Layouts

Dashboards use a responsive grid layout. Each widget occupies a position defined by:

• •x: Horizontal position (0-11)
• •y: Vertical position
• •w: Width in grid units (1-12)
• •h: Height in grid units

{
  "position": {
    "x": 0,
    "y": 0,
    "w": 6,  // Half width
    "h": 4   // 4 units tall
  }
}

Public Dashboards

Share dashboards with external stakeholders by making them public:

• •Open dashboard settings
• •Toggle Public Access
• •Copy the generated public URL
• •Share the URL with anyone - no login required

Managing Dashboards via API

Create Dashboard

curl -X POST https://serla.dev/api/dashboards \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "name": "Executive Dashboard",
    "description": "Key metrics for leadership team",
    "isDefault": false,
    "isPublic": false
  }'

Add Widget to Dashboard

curl -X POST https://serla.dev/api/dashboards/dash_123/widgets \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "type": "metric",
    "title": "Total Revenue",
    "config": {
      "metricId": "metric_xyz789",
      "showTrend": true,
      "timeRange": "30d"
    },
    "position": {
      "x": 0,
      "y": 0,
      "w": 6,
      "h": 3
    }
  }'

Best Practices

• •Start with key metrics: Place the most important KPIs at the top of the dashboard
• •Use consistent time ranges: Align all widgets to the same time period for accurate comparisons
• •Group related widgets: Organize widgets by category (revenue, users, engagement, etc.)
• •Keep it simple: Too many widgets can be overwhelming - focus on actionable insights
• •Set up refresh intervals: Dashboards auto-refresh to keep data current
• •Create role-specific dashboards: Different teams need different views (engineering, sales, support)

Example Dashboard Layouts

Executive Dashboard

• •Row 1: MRR (metric), New Customers (metric), Churn Rate (metric)
• •Row 2: Revenue Trend (line chart, full width)
• •Row 3: Top Events (table, left), Funnel Performance (funnel, right)

Product Analytics Dashboard

• •Row 1: Daily Active Users (metric), Session Duration (metric), Feature Adoption (metric)
• •Row 2: User Activity Trend (area chart, full width)
• •Row 3: Recent Events (table, full width)