Component Reference

This reference provides detailed information about all available dashboard components in Profinity. Components are organized into three main categories: Layout Components, Data Components, and Interactive Components.

How to Use This Reference

• Layout Components - Containers and structural elements for organizing your dashboard
• Data Components - Display and visualize data from your CAN bus and system properties
• Interactive Components - User interface elements for interaction and control

Each component entry includes: - Description - What the component does and when to use it - Parameters - All available configuration options in table format - Example - Working YAML code showing the component in action

Component Categories

Layout Components

Essential building blocks for dashboard structure:

Component	Description
Row	Basic layout container
Group	Organizes related components
Panels	Grid layout system
Panel	Individual panel within a grid
Pill	Status pill component with grouped readouts and icon
Accordion	Collapsible content sections
Titlebar	Dashboard header
Footer	Dashboard footer

Data Components

Display and visualize information:

Component	Description
Lamps	Status indicators
Readouts	Numerical and text displays
Charts	Data visualization
Tables	Tabular data display
State	State machine visualization

Interactive Components

User interface and control elements:

Component	Description
Tabs	Tabbed interface
Actions	Buttons and controls
Toggles	Switch components
Icon	Icon display component
HTML	HTML content display
Image	Interactive image with regions, icons, and data values

Next Steps

Now that you understand the available components, you can: - Learn about Data Binding to connect components to your data - Explore Core Elements to understand dashboard structure - See Conditional Styling for dynamic visual effects - Review Examples for complete dashboard implementations