All components (244)

Dashboard

Management · DashboardBuilder

What it is and when to use it

A dashboard each person arranges: widgets in a grid that move, resize, get removed and added.

When to use it

The home page of a management application, with the figures and charts each person wants to see.
widgets are the widgets, with their place in the grid (x, y, w, h in cells); renderWidget paints each one with the application's data.
kinds are the widgets that can be added, with their size on placing them and their minimums and maximums.
With "Edit the dashboard", each widget moves by dragging its handle or with the arrows, resizes from the corner or with Shift and the arrows, and is removed with Delete or its button. When one moves, the others make room and everything moves up so no gaps are left.

When not to

A fixed layout designed once: Grid or Stack.
Saving the order, its versions and who can change it is the application's job: this component hands out the widgets through onChange; readOnly removes the edit mode.

Keyboard: in edit mode, each widget's handle receives focus; the arrows move it and Shift with the arrows resize it.

Accessibility: each widget is a named article; the handle carries the explanation of its keyboard and each move announces where it ends up and how big it is.

Fine appearance: in edit mode the widgets carry a dashed accent border and a corner to resize.

What it looks like

Arrows to move, Shift and arrows to resize, Delete to remove.

Today's sales

1.240 €

Pending orders

Low stock

3 products

<DashboardBuilder
  label="Shop dashboard"
  widgets={widgets}
  onChange={setWidgets}
  kinds={tipos}
  rowHeight={64}
  renderWidget={(widget) => <p>{cifras[widget.type]}</p>}
/>

Props

Import it with import { DashboardBuilder } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`label`required	`string`	Which dashboard it is («Sales overview»). Required.
`onChange`required	`(widgets: readonly DashboardWidget[]) => void`	—
`renderWidget`required	`(widget: DashboardWidget) => ReactNode`	What each widget paints: the chart, the figure, the table. It receives the whole widget.
`widgets`required	`readonly DashboardWidget[]`	—
`className`	`string`	Merged with the library classes; it does not replace them.
`columns`	`number`	Columns of the grid. 12 by default.
`editing`	`boolean`	Editing: the widgets move and resize. If passed, whoever uses it controls the mode.
`kinds`	`readonly WidgetKind[]`	The widgets that can be added. Without this, nothing is added; only what is there is arranged.
`onEditingChange`	`(editing: boolean) => void`	—
`readOnly`	`boolean`	Without the edit button: a dashboard that is only looked at.
`rowHeight`	`number`	The height of each row, in pixels. 80 by default.

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: