feat(frontend): add zoom and pan controls to StreamMetricsChart (#166)

[Danielodingz]

Closes #166

Feature: Add Zoom and Pan Controls to StreamMetricsChart

📝 Description

The StreamMetricsChart component previously restricted users to viewing a static set of the most recent data points. This pull request introduces robust, comprehensive, and fully native panning and zooming controls to allow users to deeply explore the chart's history.

To remain lightweight and avoid injecting completely new dependencies (react-zoom-pan-pinch), this implementation natively extends Recharts state mapping while strictly utilizing <ReferenceArea /> for standard Drag-To-Zoom window selection.

Because ReferenceArea drag selections fundamentally conflict with the UI requirement to pan by click-and-dragging, a seamless "Mode Switch" (Pan Mode vs Zoom Mode) button was introduced to support both interactions simultaneously.

✨ Acceptance Criteria Met

• Zoom In/Out & Reset Buttons: Added explicitly to the chart's upper header alongside the active window UI.
• Pan by Drag: Handled locally via strict bounds mapped to standard pointer hooks.
• Dynamic Active View Label: Showing last X minutes updates accurately on any shift or resolution zoom execution.
• Mobile Friendly Pinch-to-Zoom: Enabled seamlessly via active touchstart/touchmove tracking on devices.
• Recharts ReferenceArea: Successfully leveraged using drag-to-draw selection windows directly extending Recharts native architecture.

🛠 Approach Details

• Minimal Diff Impact: Recharts configurations, existing data keys, gradients, and definitions have been preserved exactly.
• Array Slicing vs Full Rerender: The chart smartly shifts bounds iteratively across timestamp boundaries preventing memory overflow limits or SVG coordinate crashing when zooming heavily.
• Tested actively for mobile gesture compatibility ensuring no passive-event console warnings break React's strict bindings.

[vercel]

@Danielodingz is attempting to deploy a commit to the ritik4ever's projects Team on Vercel.

A member of the Team first needs to authorize it.

[drips-wave]

@Danielodingz Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

[Danielodingz]

Hey @ritik4ever please check PR and merge, Thanks