Loading...
Loading...
Build custom dashboards with drag-and-drop widgets. Choose from stat cards, charts, tables, feeds, gauges, and calendars. Save and share layout configurations.
Display key metrics with trend indicators and comparisons.
Interactive charts for time-series data, distributions, and comparisons.
Sortable, filterable data tables for detailed resource views.
Real-time activity and event feeds with auto-refresh.
Visual gauges for health scores, utilization, and thresholds.
Calendar views for compliance deadlines and scheduled events.
Get started instantly with pre-built dashboards optimized for common workflows. Each template is fully customizable.
Real-time overview of all registered agents, trust scores, heartbeat status, and anomaly flags.
Monitor content ingestion, fingerprinting, watermarking, and review queue depth.
Trust score distribution, compliance audit results, and policy violation trends.
Active enforcement actions, resolution times, appeal rates, and DMCA tracking.
Stat cards display key metrics at a glance with optional trend indicators, sparklines, and threshold-based color coding.
// Stat card widget configuration
{
"type": "stat_card",
"title": "Active Agents",
"metric": "drd.agents.active",
"aggregation": "count",
"timeRange": "24h",
"trend": {
"enabled": true,
"compareRange": "7d",
"format": "percentage"
},
"thresholds": {
"warning": { "below": 100 },
"critical": { "below": 50 }
},
"sparkline": true,
"refreshIntervalMs": 30000
}Visualize trends with configurable chart types. All charts support real-time updates, drill-down, and data export.
| Chart Type | Best For | Features |
|---|---|---|
| Time Series | Trends over time (events, scans, scores) | Zoom, annotations, multi-axis |
| Bar Chart | Categorical comparisons (agents by tier, violations by policy) | Stacked, grouped, horizontal |
| Pie / Donut | Distribution breakdowns (actor types, scan results) | Legend, click-to-filter |
| Heatmap | Activity density (events by hour/day) | Color scale, cell tooltips |
| Gauge | Single metric vs. target (SLA, trust threshold) | Animated needle, color zones |
| Scatter Plot | Correlation analysis (latency vs. throughput) | Regression line, cluster detection |
// Time series chart configuration
{
"type": "time_series",
"title": "Content Scans Over Time",
"metrics": [
{
"name": "drd.content.scans",
"aggregation": "count",
"label": "Total Scans",
"color": "#93C5FD"
},
{
"name": "drd.content.flagged",
"aggregation": "count",
"label": "Flagged Items",
"color": "#F87171"
}
],
"timeRange": "7d",
"granularity": "1h",
"annotations": {
"enabled": true,
"types": ["deployment", "incident"]
}
}Display tabular data with sorting, filtering, pagination, and inline actions. Tables support real-time row updates via SSE.
// Table widget configuration
{
"type": "table",
"title": "Agent Fleet Status",
"dataSource": "drd.agents.list",
"columns": [
{ "key": "name", "label": "Agent", "sortable": true },
{ "key": "trustScore", "label": "Trust", "sortable": true, "format": "number" },
{ "key": "status", "label": "Status", "sortable": true, "format": "badge" },
{ "key": "lastHeartbeat", "label": "Last Heartbeat", "format": "relative_time" }
],
"defaultSort": { "key": "trustScore", "order": "desc" },
"pagination": { "pageSize": 25 },
"realtime": true,
"actions": ["view", "suspend", "inspect"]
}Create, update, and manage dashboard widgets programmatically. The Widget API supports full CRUD operations and layout management.
// Create a custom dashboard with widgets
POST /api/v1/dashboards
{
"name": "Production Overview",
"description": "Real-time production monitoring",
"layout": {
"columns": 12,
"rowHeight": 80,
"widgets": [
{
"id": "w1",
"type": "stat_card",
"position": { "x": 0, "y": 0, "w": 3, "h": 1 },
"config": { "metric": "drd.agents.active", "title": "Active Agents" }
},
{
"id": "w2",
"type": "time_series",
"position": { "x": 0, "y": 1, "w": 8, "h": 3 },
"config": {
"metrics": ["drd.content.scans", "drd.content.flagged"],
"timeRange": "24h"
}
},
{
"id": "w3",
"type": "table",
"position": { "x": 8, "y": 1, "w": 4, "h": 3 },
"config": { "dataSource": "drd.agents.list", "pageSize": 10 }
}
]
},
"refreshIntervalMs": 30000,
"sharing": {
"visibility": "workspace",
"editableBy": ["admin", "operator"]
}
}Build custom widgets using the DRD Widget SDK. Custom widgets receive the same real-time data feeds as built-in widgets. Publish your widgets to the workspace widget library for your team to reuse. See the TypeScript SDK docs for details.
import { DRD } from '@drd/sdk';
const drd = new DRD({ apiKey: process.env.DRD_API_KEY });
// Create a stat card widget
await drd.dashboard.createWidget({
widgetType: 'stat_card',
title: 'Active Agents',
config: { metric: 'agent_count', filter: { status: 'active' } },
position: { x: 0, y: 0, w: 4, h: 2 },
});
// Save a layout
await drd.dashboard.saveLayout({
name: 'Operations View',
isDefault: true,
layoutConfig: { columns: 12, rowHeight: 60 },
});