Visual Components
Visual components allow dashboards to display decorative, informative, and utility elements like icons, images, shapes, or report previews β enhancing readability, layout, and interaction within dashboards.
π¨ Widget Customizations
All visual components share these customization sections:
Group | Description |
---|---|
General | Modify the chartβs general appearance, including the background color, borders, shadows, and drill-out choices. |
Title | Enable and customize chart title text, alignment, font, and color. |
π Report List
A configurable, interactive list of reports that can be styled with colors, gradients, and icons, allowing users to download reports directly from a dashboard.
Key Features:
- Select and display multiple reports.
- Customize tile height, gaps, margins, colors, and gradient backgrounds.
- Choose between report icons, name initials, or custom icons.
- Optionally display the creatorβs name below each report.
- Supports linear or radial gradient backgrounds.
- Automatically enables download-on-click functionality in runtime mode.
π’ Shape
A versatile vector shape component that can render rectangles, circles, ellipses, triangles, or custom polygons on a dashboard. Useful for visual grouping, decoration, or interaction areas.
Key Features:
- Choose from Rectangle, Circle, Ellipse, Triangle, or custom Polygon shapes.
- Customize fill color, stroke color, and stroke width.
- Set rotation and scale for dynamic visual adjustments.
- Define number of sides for Polygons (3 to 20).
- Supports click actions through the Action Control system.
- Fully resizable and themeable via widget options.
πΌοΈ Icon
A simple, scalable vector icon component to display symbolic or decorative icons within a dashboard.
Key Features:
- Supports all icons from the Infoveave icon library.
- Customizable color and scale.
- Optional animations: Beat, BeatFade, Bounce, Fade, Shake, Spin, SpinPulse.
- Click actions via the Action Control system.
- Respects global theme and dashboard interactions.
π Button
A configurable button component supporting labels, icons, and interactive actions within a dashboard.
Key Features:
- Customizable label using rich text.
- Supports left and right icons with adjustable sizes, colors, and spacing.
- Multiple variants: Filled, Outline, Subtle, Light, Default, and White.
- Configurable background color (when using the βfilledβ variant).
- Optional disabling of the button.
- Click actions via the Action Control system.
- Respects global theme and board interactions.
πΌοΈ Image
A versatile image display component for dashboards, supporting filters, effects, and interactive actions.
Key Features:
- Supports background image display via uploaded or linked images.
- Customizable background position, repeat, and sizing options.
- Opacity control and a range of image filters:
- Blur, Brightness, Contrast, Grayscale, Hue Rotation, Invert, Saturation, and Sepia.
- Click actions via the Action Control system.
- Fully respects dashboard theme and styling.
π Text
A rich text display and editing component for adding formatted text content within dashboards.
Key Features:
- Supports rich text formatting including paragraphs, headings, bold, italic, links, lists, and more.
- Uses an integrated rich text editor overlay for in-place content editing.
- Click actions via the Action Control system.
- Respects dashboard theme, sizing, and board interaction modes.
- Full content persistence and variable-based content management.
πΊοΈ Diagram
An interactive diagram component for displaying custom freehand diagrams, flowcharts, or sketches within dashboards.
Key Features:
- Supports shapes, connectors, text, and freehand drawing via an integrated diagram editor.
- Editable directly within the dashboard when selected.
- Diagram content is persisted as JSON, storing elements, positions, and styles.
- View-only mode when not selected; editor modal appears when editing.
- Full support for dashboard sizing, layout, and responsiveness.
π Clock Chart
A dynamic clock-style gauge chart that visualizes the current time in hours, minutes, and seconds using animated gauge series.
Key Features:
- Displays three synchronized gauges representing hours, minutes, and seconds.
- Fully customizable gauge series styles, positions, and gauge options via configuration panels.
- Smooth animation updates every second to reflect real-time timekeeping.
- Supports configurable gauge centers, split numbers, easing animations, and theming via ECharts options.
- Dashboard sizing and responsiveness respected.
π Divider
A simple, structural element used to visually separate sections within a dashboard layout.
Key Features:
- Supports both horizontal and vertical orientations.
- Customizable line thickness, color, and style variant.
- Responsive β automatically fills available width or height based on orientation.