Dashboards

The model

A dashboard is a grid of widgets over one project. Widgets bind to datasets and metrics, emit events, and accept actions. Nothing is a screenshot: values come from the server on a refresh interval, and every widget carries an as-of stamp.

{
  variant: "dark",     // light · dark · ops
  refreshSec: 60,      // 0 turns polling off
  cols: 24,
  rowHeight: 36,
  gap: 12,
  showAsOf: true
}

Authoring

234567

1. 2Widgets: drag any of them onto the grid.
2. 3Grid: 24 columns by default, 36 px rows, 12 px gap. Drag to move, drag an edge to resize; blocks snap.
3. 4Map widget: as many as you like, each bound to its own beat.
4. 5KPI: selected here, so the inspector shows its binding.
5. 6Inspector: Data (dataset, metric, field) and Visualisation (encodings, sort, top-N, ramp) for the selected widget.
6. 7Save map view: a dashboard's map widget saves a beat like any other map.

Every widget

The gallery below is a real published dashboard holding one of each, bound to a live sample dataset.

1234

1. 1Map: the spatial widget; every other widget can filter it and be filtered by it.
2. 2KPI · gauge · sparkline: the single-number family.
3. 3Bar and pie: categorical breakdowns, clickable.
4. 4Time series · histogram · scatter: the distribution family.

Data binding

A widget binds to a metric or straight to a dataset field.

{
  "name": "Events in view",
  "datasetId": "<datasetId>",
  "aggregation": "count",
  "field": null,
  "groupBy": null,
  "filter": [">=", ["get", "mag"], 5],
  "spatialScope": "viewport",
  "timeseries": { "timeField": "time_iso", "bucket": "month" },
  "format": { "decimals": 0, "compact": true, "prefix": "", "unit": "" }
}

Values come from /api/live/metrics/:id with an ETag; the viewer polls every refreshSec and a 304 costs nothing. Metrics with spatialScope: "viewport" recompute server-side against the current bounding box.

The inspector's Data section builds all of that with pickers. They are typed, so a numeric-only field never appears where a number is required, and there is a filter expression escape hatch for the cases the pickers do not cover.

The actions graph

"When A happens, do B." Every widget emits events; every widget accepts effects.

123456

1. 1Add action: pick a source widget, an event, a target and an effect.
2. 2Extent → recompute: the map's extentChange re-scopes every viewport metric.
3. 3Bar → filter all: clicking a bar writes a category filter that every widget honours.
4. 4Map select → filter: clicking a feature filters the rest of the dashboard.
5. 5Table row → fly + flash: selecting a row flies the map and flashes the feature.
6. 6Enabled: every rule can be switched off without deleting it.

The target is a widget id, map for the first map, or * for every widget.

A new dashboard is wired for free. Without a single explicit action you already get: map extent → recompute viewport metrics; bar / category filter / range / search / toggle → filter everything; map select → filter; scatter brush → select. Add rules only when you want something other than the obvious.

Spatial filters: draw an area

The map widget carries a glass toolbar: pointer · rectangle · circle · polygon · lasso · clear.

123456

1. 1Draw toolbar: pick a shape, then draw on the map.
2. 2Filter chip: Circle · r 3330 km · N features, with an × to clear it.
3. 3Clear all: removes every active filter at once.
4. 4Feature count: N of 995 features under the map title.
5. 5Spatial filter widget: the same area, with a zoom to action and a live count.
6. 6Filtered badge: every widget the area is narrowing says so in its header.

• Circle: click and drag from the centre; a live r 872 km readout follows the cursor, and two handles (centre to move, rim to resize) stay on the shape.
• Polygon: click vertices, double-click or Enter to finish, Esc to cancel.
• Lasso: freehand; the path is simplified before it becomes a ring.
• Everything outside the selection is dimmed by a mask layer, so the shape reads as a selection rather than decoration.

The result is stored as a GeoJSON polygon (a circle becomes a 64-gon) with the drawing intent kept in properties (shape, center, radiusM), so the toolbar can reopen it. Client-side widgets intersect it directly; server-side metrics receive it as the aoi parameter, validated (Polygon or MultiPolygon, closed rings, ≤ 20,000 vertices) before it reaches PostGIS.

Attribute filters

Filters compose with AND. Every widget that is being narrowed shows a filtered badge, the header carries one removable chip per active filter plus Clear all, and the whole state is mirrored into ?f=<compact JSON> and restored on load, so a filtered view is a link.

Refresh, as-of and stale

refreshSec on the dashboard sets the poll interval (60 s by default; 0 stops polling). Each widget shows as of HH:MM:SS. After three consecutive failures on the underlying connection the widget goes hatched and reports last success N minutes ago. Nothing is quietly wrong. See Data & live sources.

The published dashboard

1234567

1. 1Map: pan, zoom, click a feature; the draw toolbar is top-left.
2. 2Bar: clicking a bar filters everything else.
3. 3Category filter: chips with live counts.
4. 4Draw an area: the spatial filter widget, when you would rather not draw on the map itself.
5. 5KPI: recomputed for whatever is in view.
6. 6Table: sortable, filterable, CSV-exportable; a row click flies the map.
7. 7As-of: when this data was last fetched, and a manual refresh.

Breakpoints

Each widget carries a grid rectangle per breakpoint: wall, desktop, tablet, phone. Placing a widget sets desktop and wall together; tablet and phone fall back to full width unless you place them. Switch breakpoint with the Preview width control and drag. You are editing that breakpoint's layout, not the others.

The ops theme

variant: "ops" is pure black, high contrast, 17 px base type and tighter radii, built for a wall display read from across the room. night is a softer dark for a room with people in it. See Theming.

Alerts

Any metric on the dashboard can carry an alert rule: a comparison, a threshold, an optional area or time scope, recipients and a cooldown. Rules are evaluated after every refresh of the underlying source.

Performance notes

• Under about 5,000 features filtering happens client-side against the cached features; above that, metrics keep going to the server with bbox, where and aoi, memoised per key.
• Search debounces and only touches the filter store, so no keystroke causes a refetch.
• The table windows above 1,000 rows; the scatter caps at 6,000 points.
• Drawing an area re-serialises only the mask and the ring, never the dataset.