Panel component
A panel is a titled container within a panels grid that holds related content and data visualisations.
When to use
Use a panel for one titled section of data inside a panels grid. Use a Group when the components need no title or panel frame.
Parameters
| Parameter | Type | Required | Default | Description |
|---|---|---|---|---|
class |
string | No | None | Style variant of the panel body. sunken is the only variant that Profinity defines |
title |
string | Yes | None | Title text in the panel header, at the top of the panel |
menu |
object | No | None | When present, the panel header shows a static menu icon. The menu items are not displayed |
width |
string | No | None | Width in CSS format, for example 100px, 50% or auto, applied to the panel |
height |
string | No | None | Height in CSS format, for example 100px, 50vh or auto, applied to the body area of the panel |
minHeight |
string | No | None | Minimum height of the panel body in CSS format. The body grows with its content and never shrinks below this value. The value does not stretch the panel to fill space |
items |
array | Yes | None | Components displayed in the body of the panel |
id is accepted but has no effect.
The sunken variant suits charts and state diagrams, and it applies to the panel body and not to the whole panel.
A panel accepts these components in items:
Place any other component inside a group.
A panel with a menu shows a static menu icon in its header, and the icon is not interactive, so a panel menu does not provide navigation, actions, or dialogs.
Use the Titlebar menu or an Action component for navigation and actions.
Example
Basic example
dashboard:
items:
- row:
items:
- panels:
items:
- panel:
title: "Temperature Sensors"
height: "auto"
items:
- readouts:
items:
- readout:
label: "Sensor 1"
value: 22.5
unit: "°C"
precision: 1
- readout:
label: "Sensor 2"
value: 24.2
unit: "°C"
precision: 1
Height variations
Panels support different height configurations for flexible layouts.
dashboard:
items:
- row:
items:
- panels:
items:
- panel:
title: "Fixed Height Panel"
height: "200px"
items:
- chart:
type: "line"
value:
labels: ["Jan", "Feb", "Mar"]
datasets:
- label: "Data"
data: [10, 20, 30]
- panel:
title: "Viewport Height Panel"
height: "50vh"
items:
- table:
tableHeaders:
- header:
accessorKey: name
value: Name
value: []
- panel:
title: "Auto Height Panel"
height: "auto"
items:
- readouts:
items:
- readout:
label: "Value"
value: 42
Width example
Panels also support explicit width values to control horizontal sizing within layouts.
dashboard:
items:
- row:
items:
- panels:
items:
- panel:
title: "Half Width Panel"
width: "50%"
height: "auto"
items:
- readouts:
items:
- readout:
label: "Value"
value: 42
- panel:
title: "Fixed Width Panel"
width: "480px"
height: "auto"
items:
- html:
content: "<p>Fixed width content area</p>"
Complex nested structures
Panels can contain complex nested component structures, in which a group holds the components that the panel does not accept directly.
dashboard:
items:
- row:
items:
- panels:
items:
- panel:
title: "Motor Controller Overview"
height: "auto"
items:
- group:
direction: "horizontal"
items:
- icon:
image: nav_motorcontrollers_active.svg
- readouts:
items:
- readout:
label: "Bus Voltage"
precision: 1
bind:
- target: value
source: 'DBC/BusMeasurement/BusVoltage'
- readout:
label: "Bus Current"
precision: 1
bind:
- target: value
source: 'DBC/BusMeasurement/BusCurrent'
- chart:
type: "line"
legend: false
refreshInterval: 1000
bind:
- target: value
source: 'DBC/BusMeasurement/BusVoltage'
seriesMode: timeSeries
timeRangeStart: "-5m"
timeRangeStop: "0m"
- lamps:
items:
- lampgroup:
items:
- lamp:
color: "green"
label: "Online"
value: 1
bind:
- target: enabled
source: 'DBC/Status/Online'
toType: boolean
- lamp:
color: "red"
label: "Error"
value: 1
bind:
- target: enabled
source: 'DBC/Status/Error'
toType: boolean
Complete example
dashboard:
items:
- row:
items:
- panels:
items:
- panel:
class: "sunken"
title: "System Status"
height: "60vh"
minHeight: "200px"
items:
- group:
direction: "vertical"
items:
- lamps:
items:
- lampgroup:
items:
- lamp:
color: "green"
label: "Online"
value: 1
bind:
- target: enabled
source: 'DBC/Status/Online'
toType: boolean
- readouts:
items:
- readout:
label: "Temperature"
bind:
- target: value
source: 'DBC/Temperature/Value'
- chart:
type: "line"
bind:
- target: value
source: 'DBC/Temperature/Value'
seriesMode: timeSeries
timeRangeStart: "-5m"
timeRangeStop: "0m"