Canvas (drag + resize)

Canvas

The dashboard view at /bi/{dashboard_id}. Built on react-grid-layout — 12 columns, responsive width.

Drag

Click and hold the widget header bar (the row with the title) to drag. Other widgets reflow to make room. Drop to commit.

The drag handle is the header only — clicking inside a chart or table doesn’t initiate a drag, so interactive chart elements (tooltip hover, series highlight) keep working.

Resize

Drag the bottom-right corner to resize. The widget grows or shrinks in 12-col grid units; charts re-render to the new dimensions (ChartView height="100%" so Recharts ResponsiveContainer fills the cell).

Auto-reflow

Widgets reflow up + left into empty space. To preserve a deliberate gap (e.g., a wide markdown header above two narrow KPIs), put a markdown widget there.

Per-breakpoint layouts

react-grid-layout supports per-breakpoint layouts (lg / md / sm / xs / xxs). In v0.3 we save a single layout; the grid auto-collapses on narrower screens but you can’t yet author breakpoint-specific positions.

Chart resize bug fix (commit c33bcec)

Worth noting: Recharts’ ResponsiveContainer doesn’t observe its parent’s resize. We fire a synthetic window.resize event on every RGL drag / resize end so charts re-measure. If a chart looks wrong- sized after a layout change, refresh the page.

Keyboard

Shortcut	Action
R (focused widget)	Refresh widget
D (focused widget)	Duplicate widget
Del (focused widget)	Delete widget (with confirm)
Ctrl+S / ⌘S	Save layout (auto-saved anyway, but explicit)

Performance

Up to ~20 widgets per dashboard is comfortable. Beyond that, consider splitting into multiple dashboards by topic — the per-widget refresh in parallel hits warehouse rate limits at scale.