Skip to content

Dashboard Component

A Dashboard Component is a built-in profile component that renders a dashboard defined entirely in YAML. You can edit it in the visual dashboard editor.

Use it for human-machine interface (HMI) style screens that bind only to tags that already exist.

It is included in every edition. It differs from a Custom Component in that it has no CAN database (DBC), script, or pack files, so there is nothing to upload except the dashboard itself.

Add the component

Add the component from ADD COMPONENT (refer to How to add a component to your profile), where it is listed under Dashboards. Its only setting besides the name is Upload Dashboard (Optional), which takes a .yaml dashboard file. When no file is uploaded, Profinity creates a template dashboard that the dashboard editor opens for editing, as described in Using a custom component. A component name that matches an existing dashboard file in the profile is rejected with the message "There is already a component in this profile with that name".

Building the dashboard

Dashboards are written in YAML. You can edit them in the Visual Editor, with the same layout, data, and interactive components available as on any other dashboard.

flowchart LR
    subgraph Other["Other components"]
        Tags["Component tags"]
    end
    subgraph Dash["Dashboard Component"]
        Dashboard["YAML dashboard"]
    end
    Tags --> Dashboard
A YAML dashboard in a Dashboard Component shows the tags of other components, which it binds to by absolute path

Dashboard editor in Design mode, with an outline tree of rows, groups, panels and a chart on the left and an Inspector on the right showing Id, Description, CSS class, Width and Direction fields.

Dashboard visual editor

A relative tag path in a Dashboard Component starts at the Dashboard Component itself. The component has no DBC, so a path such as DBC/BusMeasurement/BusVoltage finds no tag there. Bind to the tags of another component with an absolute path that starts with /, such as /Prohelion BMU/DBC/PackStateOfCharge/SOCPercent, where Prohelion BMU is the name of the BMU component in the Example Profile. Use the name of your own component.

To connect the dashboard to tags, refer to Data binding. For each element, refer to the Component reference. Worked guides are How to create a custom dashboard and Profile Dashboard.