Dashboards Overview

Define and deploy dashboards from TypeScript files

Dashboards live in analytics/dashboards/*.ts and are compiled byrealanalytics build into JSON for deployment.

Minimum dashboard config

import { defineDashboard, controls, widget } from '@realanalytics/sdk'

export default defineDashboard({
  id: 'overview',
  title: 'Overview',
  defaultDateRange: 'last_30_days',
  controls: [
    controls.dateRange({ editable: true }),
  ],
  widgets: [
    widget.metric({
      id: 'pageviews',
      label: 'Pageviews',
      event: '$pageview',
      aggregation: 'count',
    }),
  ],
})

DashboardConfig fields

FieldTypeDescription
idstringDashboard slug/identifier
titlestringDisplay title
defaultDateRangeDateRangePresetInitial date preset
controlsControlConfig[]Top-level UI controls
widgetsWidgetConfig[]Rendered cards/charts

Date range presets

'today' | 'yesterday' | 'last_7_days' | 'last_30_days' | 'last_90_days'
| 'this_month' | 'last_month' | 'this_quarter' | 'this_year'

Controls

controls: [
  controls.dateRange({ editable: true }),
  controls.compare({ editable: true, enabled: true }),
  controls.filter({ editable: true }),
]

Project structure

analytics/
├── events.ts
└── dashboards/
    ├── overview.ts
    ├── marketing.ts
    └── product.ts

Deploy changes

npx realanalytics build
npx realanalytics deploy

Next Steps