Heatmap Component Documentation
🚀 Overview
The Heatmap is a reusable, interactive UI component to visually represent data intensity using a color-gradient grid combined with bubble overlays. It transforms complex datasets into an intuitive visual format, enabling users to quickly identify patterns, trends, correlations, and high-risk areas without deep data analysis.
The component uses a structured grid (typically 30×30) where each cell represents a calculated intensity based on input values. On top of this grid, bubbles are rendered to represent individual or grouped data points, with size and color indicating additional dimensions such as velocity and risk type.
🚀 Usage
1. Pass Your Data
Provide input data through the PointsJson parameter in JSON format. Each record should include:
X value
Y value
Group data
This data is used to:
Position bubbles on the grid
Calculate risk scores
Display tooltip information
2. Configure Axes & Labels
Set axis titles using:
XAxisTitle
YAxisTitle
The component automatically renders:
X-axis (left to right)
Y-axis (bottom to top)
Ensure your data aligns with the expected scale (commonly 0–5).
3. Enable Required Features
Control visibility of features using parameters:
ShowTooltip → Enables hover-based tooltips
ShowLegend → Displays legend for bubble categories
These options allow flexible usage depending on the use case.
4. Customize Visual Appearance
You can customize:
Heatmap gradient colors (via CSS or JS logic)
Bubble colors (e.g., Inherent vs Residual)
Tooltip styling
Grid size and spacing
This ensures alignment with your application’s branding and UX needs.
🔧 Features
🎨 Color Gradient Visualization
Uses a smooth gradient scale:
Green → Low intensity
Yellow → Medium
Orange → High
Red → Critical
This helps users instantly understand data distribution.
🔵 Bubble Overlay System
Displays data points on top of the heatmap
Bubble size varies based on velocity
Multiple points in the same cell are arranged in a circular pattern
💬 Interactive Tooltips
Appear on hover
Include delay for smooth UX
Persist when hovered
Only one tooltip visible at a time (no overlap)
📏 Axis Rendering
X-axis: Horizontal scale
Y-axis: Vertical scale (bottom to top)
Supports dynamic titles
🧩 Legend Support
Displays category indicators
Fully customizable via input parameters.
🔄 Reusability
Built as a UI Pattern
Can be reused across multiple screens
Easily configurable via inputs
⚡ Performance Optimization
Efficient DOM rendering
Grouped data reduces clutter
Smooth hover interactions
📱 Consistent Layout
Fixed grid ensures alignment
Structured spacing for readability
Clean and professional UI
🎯 Use Cases
Risk Management Dashboards
Compliance Tracking
Business Performance Monitoring
Operational Analytics
Data Density Visualization
✅ Best Practices
Keep data within defined scale (e.g., 0–5)
Use meaningful axis titles
Avoid excessive data points for better clarity
Customize colors to match your design system
Test tooltip behavior on different screen sizes
📌 Summary
This Heatmap component provides a powerful and flexible way to visualize complex datasets through a combination of gradient-based grids and interactive bubble overlays. It enhances decision-making by presenting both high-level patterns and detailed insights in a single, easy-to-understand interface. Designed for reusability and seamless integration, it is an ideal solution for modern data-driven applications in OutSystems ODC.