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.

Note

Use Report Lists to quickly showcase key downloadable reports inside your dashboards with rich visual styling.

---

🟢 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.

Note

Shapes can serve as visual markers, background elements, separators, or interactive hotspots within a dashboard layout.

---

🖼️ 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.

Note

Icons are great for drawing attention to status indicators, alerts, actions, or decorative visuals on a board.

---

🔘 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.

Note

Use buttons for triggering actions like navigation, data refresh, or custom workflows within dashboards.

---

🖼️ 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.

Note

Use image components for banners, logos, icons, or visual decorations within dashboards — with the flexibility of CSS-style filters and interactions.

---

📝 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.

Note

Ideal for adding annotations, instructions, section headers, or descriptive content directly into your dashboards.

---

🗺️ 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.

Note

Perfect for visualizing processes, wireframes, simple org charts, or illustrating dashboard annotations.

---

🕒 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.

Note

Ideal for adding real-time clocks, time indicators, or visually engaging dashboard elements.

---

📏 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.

Note

Use this component to create visual breaks or separators between other board elements, enhancing readability and layout clarity.

---