Dashboard layout component

[rolfsmeds]

Description

A component for responsive, grid-based dashboards.

Acceptance criteria

• Automatically placed widgets (no API for setting widget in specific column and row)
• Responsive
  • Number of columns vary depending on component width and minimum column width
  • Widgets automatically wrap to new lines as needed
• Items can span multiple columns
  • Actual column span is capped to currently available columns
• Row height determined by tallest widget in the row
• Built-in scroll container
• Configuration options (can be CSS properties)
  • Minimum column width (defaults to something like 15rem)
  • Max column count (defaults to null)
  • Max column width (defaults to something like 30rem)
  • Gap size (defaults to something like 1rem / --lumo-space-m)

Future additions / Nice-to-haves

(excluded from acceptance criteria)

• Row span
• Configurable, fixed row height
• "Dense" layout that attempts to fill gaps
• Auto-colspan/rowspan based on widget content size
• Dashboard sections for grouping together widgets (optionally with titles)
• Databindable dashboard (for loading and storing widgets through an items API) with
  • Drag & drop widget reordering, with keyboard support
  • Drag & drop widget resizing (colspan/rowspan), with keyboard support
  • Mechanism for enabling live regions for screen reader announcements of these operations
  • An easy way to serialize the current dashboard configuration into a string, for persisting in a DB, local storage, or whatever you like.

General criteria

• APIs reviewed

• Design (as this is just a layout, there is no design per se)

• Performance

• UX/DX tests in Alpha

• Documentation:

• How to test?

• Limitations:

Security

• Security implications have been taken into account (elaborate or link to product security requirement specification if there are implications)