Skip to main content

​
Dashboards

Dashboards let you visualize your events and metrics with customizable widgets. Build real-time views of your application’s behavior.

​
Creating a Dashboard

  1. Go to Flux > Dashboards
  2. Click New Dashboard
  3. Enter a name and optional description
  4. Add widgets

​
Via API

curl -X POST "https://flux.brainzlab.ai/api/v1/dashboards" \
  -H "Authorization: Bearer $API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "name": "Sales Overview",
    "description": "Real-time sales metrics"
  }'

​
Widget Types

Number

Display a single metric value with optional comparison

Graph

Time series line or area chart

Bar

Categorical comparison bar chart

Pie

Distribution breakdown

Table

Tabular data display

Heatmap

Time-based activity patterns

​
Number Widget

Display a single value, ideal for KPIs: 
{
  "type": "number",
  "title": "Active Users",
  "query": {
    "metric": "users.online",
    "aggregation": "last"
  },
  "comparison": {
    "type": "previous_period"
  },
  "format": {
    "suffix": " users"
  }
}
Options:
  • Aggregation: last, avg, sum, min, max, count
  • Comparison: previous_period, previous_day, previous_week
  • Format: prefix, suffix, decimal places

​
Graph Widget

Time series visualization: 
{
  "type": "graph",
  "title": "Request Latency",
  "query": {
    "metric": "response_time",
    "aggregation": "p95"
  },
  "style": "line",
  "interval": "5m"
}
Options:
  • Style: line, area, stacked_area
  • Interval: 1m, 5m, 15m, 1h, 1d
  • Multiple metrics: Overlay multiple series

​
Multiple Metrics

{
  "type": "graph",
  "title": "Latency Percentiles",
  "queries": [
    { "metric": "response_time", "aggregation": "p50", "label": "P50" },
    { "metric": "response_time", "aggregation": "p95", "label": "P95" },
    { "metric": "response_time", "aggregation": "p99", "label": "P99" }
  ]
}

​
Bar Widget

Compare values across categories: 
{
  "type": "bar",
  "title": "Requests by Endpoint",
  "query": {
    "metric": "api.requests",
    "aggregation": "sum",
    "group_by": "tags.endpoint"
  },
  "limit": 10
}
Options:
  • Orientation: horizontal, vertical
  • Group by: Tag key for categorization
  • Limit: Max bars to display

​
Pie Widget

Show distribution: 
{
  "type": "pie",
  "title": "Users by Plan",
  "query": {
    "event": "user.active",
    "group_by": "tags.plan"
  },
  "show_legend": true
}

​
Table Widget

Display tabular data: 
{
  "type": "table",
  "title": "Top Customers",
  "query": {
    "event": "order.placed",
    "group_by": "user_id",
    "aggregation": "sum",
    "field": "value"
  },
  "columns": ["user_id", "sum", "count"],
  "limit": 20,
  "sort": { "field": "sum", "order": "desc" }
}

​
Heatmap Widget

Visualize patterns over time: 
{
  "type": "heatmap",
  "title": "Request Activity",
  "query": {
    "metric": "api.requests",
    "aggregation": "count"
  },
  "x_axis": "hour_of_day",
  "y_axis": "day_of_week"
}
Ideal for:
  • Activity patterns (busiest hours)
  • Day-of-week trends
  • Seasonal variations

​
Widget Configuration

​
Time Range

{
  "time_range": {
    "type": "relative",
    "value": "24h"
  }
}
Options: 1h, 6h, 24h, 7d, 30d, or absolute range.

​
Filtering

{
  "filters": {
    "tags.environment": "production",
    "tags.region": ["us-east", "us-west"]
  }
}

​
Thresholds

Add visual thresholds to number and graph widgets: 
{
  "thresholds": [
    { "value": 100, "color": "green", "label": "Good" },
    { "value": 500, "color": "yellow", "label": "Warning" },
    { "value": 1000, "color": "red", "label": "Critical" }
  ]
}

​
Dashboard Layout

Widgets are arranged in a responsive grid: 
{
  "layout": [
    { "widget_id": "w1", "x": 0, "y": 0, "width": 3, "height": 2 },
    { "widget_id": "w2", "x": 3, "y": 0, "width": 3, "height": 2 },
    { "widget_id": "w3", "x": 0, "y": 2, "width": 6, "height": 3 }
  ]
}
Grid is 6 columns wide. Drag and resize widgets in the UI.

​
Real-Time Updates

Dashboards update automatically via WebSocket. Configure refresh interval: 
{
  "refresh_interval": 30
}
Set to 0 to disable auto-refresh.

​
Dashboard Templates

Start with pre-built templates:

​
API Performance

Monitors request rates, latency, and errors:
  • Request rate (counter)
  • P95 latency (distribution)
  • Error rate (counter/gauge)
  • Top slow endpoints (table)

​
User Activity

Tracks user engagement:
  • Active users (set cardinality)
  • Signups (events count)
  • User actions (events by type)
  • Retention heatmap

​
Business Metrics

Business KPIs:
  • Revenue (distribution sum)
  • Orders (counter)
  • Average order value (distribution avg)
  • Top products (table)

​
Sharing

Generate a read-only public URL: 
POST /api/v1/dashboards/:id/share

​
Embed

Embed dashboards in your own app: 
<iframe
  src="https://flux.brainzlab.ai/embed/dashboards/abc123?theme=dark"
  width="100%"
  height="600"
></iframe>

​
Example Dashboard

Create a complete dashboard via API: 
# Create dashboard
curl -X POST "https://flux.brainzlab.ai/api/v1/dashboards" \
  -H "Authorization: Bearer $API_KEY" \
  -d '{"name": "API Monitoring"}'

# Add widgets
curl -X POST "https://flux.brainzlab.ai/api/v1/dashboards/:id/widgets" \
  -H "Authorization: Bearer $API_KEY" \
  -d '{
    "type": "number",
    "title": "Requests/min",
    "query": {"metric": "api.requests", "aggregation": "rate"}
  }'

curl -X POST "https://flux.brainzlab.ai/api/v1/dashboards/:id/widgets" \
  -d '{
    "type": "graph",
    "title": "Latency",
    "query": {"metric": "response_time", "aggregation": "p95"}
  }'