Panels component
A panels component is a grid that lays out several panel containers, where each panel holds its own content and data visualisations. The panels sit side by side and wrap onto the next line when the row has no room left.
When to use
Use panels to divide a section of a dashboard into several titled areas that each show a different data view. Use a Row or a Group when the components need no titles or panel frames.
Parameters
| Parameter | Type | Required | Default | Description |
|---|---|---|---|---|
class |
string | No | None | CSS class added to the panel grid, for use with a profile style sheet |
height |
string | No | None | Height in CSS format, applied directly to the grid and overriding any height the grid would otherwise take |
minHeight |
string | No | None | Minimum height in CSS format. The grid grows with its content and never shrinks below this value. The value does not stretch the grid to fill space |
items |
array | Yes | None | Array of objects that each contain a single panel. The grid displays the panels in the order listed |
id is accepted but has no effect.
Example
dashboard:
items:
- row:
items:
- panels:
items:
- panel:
title: "System Status"
items:
- lamps:
items:
- lampgroup:
items:
- lamp:
color: "green"
label: "CPU"
value: 1
enabled: true
- panel:
title: "Performance"
items:
- chart:
type: "bar"
value:
labels: ["CPU", "Memory", "Disk"]
datasets:
- label: "Usage %"
data: [45, 67, 23]