Heatmap Component

The Heatmap is a reusable and interactive UI component designed to visually represent data intensity using a color-gradient grid combined with bubble overlays. It simplifies complex datasets by mapping values to a gradient scale (green to red), enabling users to quickly identify patterns, trends, and high-risk areas.

The component uses a structured grid where each cell reflects data intensity, while bubbles represent individual or grouped data points. Bubble size varies based on velocity, and multiple points within the same cell are intelligently arranged to avoid overlap, ensuring clarity.

It supports dynamic configuration through parameters such as `PointsJson` for data input, axis titles for labeling, and toggles like `ShowTooltip` and `ShowLegend` for enabling interactivity and contextual information. Interactive tooltips provide detailed insights on hover, including risk score, impact, likelihood, and related data points, with optimized behavior to prevent overlap.

The heatmap is highly customizable, allowing adjustments to colors, styling, and layout to match application requirements. Built as a reusable UI Pattern, it integrates seamlessly across different screens and modules.

With efficient rendering, structured layout, and responsive interactions, the component ensures a clean and professional user experience. It is well-suited for use cases such as risk management, performance monitoring, and data analysis, helping users make informed decisions through clear and intuitive visualization.