# FlowFuse Dashboard Layout Notes (EVOLV Reference)

Primary sources:
- https://dashboard.flowfuse.com/
- https://dashboard.flowfuse.com/nodes/widgets/ui-chart.html

## Compact Screen Guidelines

- Use a 12-column page grid and place charts in 4-column blocks for 3-up rows.
- Disable legends for single-series charts to reduce visual noise.
- Prefer concise text widgets under charts for state/timing/snapshot summaries.
- Use compact theme spacing:
  - lower page padding
  - lower group gap
  - lower widget gap

## Time Window Guidelines

- For live demos, default chart history to 10-15 minutes.
- Keep axis labels short and unit-specific.
- Use one chart per KPI unless comparison is intentionally needed.

## Message Hygiene For Widgets

- Chart widgets: send minimal `{ topic, payload, timestamp }`.
- Text widgets: send plain string in `msg.payload`.
- Separate chart and text outputs by Function-node output index.

## Gauge Sizing in Groups

- **Tank gauge**: `width: 2, height: 4` — tall vertical fill indicator.
- **3/4 arc gauge**: `width: 2, height: 3` — fits beside tank in same group row.
- **Status text**: `width: 4, height: 1` — full group width, below gauges.
- In a 4-column group, two `width: 2` gauges sit side by side, text below spans full width.
- Set `order` on widgets: tank=2, arc=3, text=1 (text first = top, gauges below; or tank=1, arc=2, text=3 for gauges on top).

## Group Height Auto-sizing

- Set `height: "1"` on groups to auto-grow with content.
- A group with a `height: 4` tank + `height: 1` text will auto-expand to ~5 rows.

## References

- FlowFuse Dashboard docs root: https://dashboard.flowfuse.com/
- FlowFuse `ui-chart` docs: https://dashboard.flowfuse.com/nodes/widgets/ui-chart.html
- FlowFuse Widget catalog: [flowfuse-widgets-catalog.md](flowfuse-widgets-catalog.md)
- FlowFuse Config nodes: [flowfuse-ui-config-manual.md](flowfuse-ui-config-manual.md)