PI Dashboard Development - Responsiveness & Interactivity - Breakpoints, Data States, Responsiveness and Interactivity

[jimmysway]

Motivation

Users will be accessing this dashboard from various screen sizes. The chart needs to adapt dynamically to its container. Furthermore, simply showing a line isn't enough; users need context. We need to implement interactive elements that explain the data, especially when that data has been interpolated with something like a hover tooltip.

Completion Criteria

• The chart resizes fluidly when the browser window changes size (both shrinking and growing).
• Users can interact with the chart to see precise values.
• The UI clearly communicates when a data point is an estimate (interpolated) versus a real value.

Description

• Optimize Responsiveness: Configure the chart layout to fill its parent container dynamically and handle window resize events without distortion.
• Refine Axis & Scaling: Ensure the time-series axis remains readable on smaller screens (e.g., decluttering labels).
• Adapting charts for low-data/no-data states - Ensure there is a UI for states where data is none, data is scarce and gracefully transitioning them to the normal state.
• Implement Advanced Tooltips: Create custom hover interactions that display detailed metrics and warnings for interpolated data points and other anomalies.
• Visual Feedback: Style the chart lines (e.g., using colors or grayscale or dashed patterns) to visually differentiate between real data and outages.

Completion dates

Desired - 12-12-2025

[jimmysway]

This PR is independent