[Frontend] Enhance Stock Chart Zoom/Scroll Performance & Smoothness (TradingView-style)

[Edge-Explorer]

Summary

The stock chart's zoom and pan interactions currently feel stepped and static. We want to implement a smooth, fluid, high-performance charting interaction layer mimicking premium charting interfaces like TradingView or Binance.

Relevant Code

The zoom and scroll logic is handled entirely inside the frontend chart component:

• File: frontend/src/components/StockChart.tsx
• Target Handlers:
  • Mouse wheel/zoom listener: Around lines 248–270 (onWheel and native event listener).
  • Mouse drag/panning handlers: Around lines 434–456 (handleMouseDown, handleMouseMove, handleMouseUp).

Proposed Enhancements

1. Fluid Zooming & Panning:
   • Allow panning/scrolling the chart even when not zoomed (isZoomed is false), dynamically shifting the active view window.
   • Smooth out the scroll delta with a smaller step size and an interpolation/inertia helper.
2. Velocity-based Momentum Scrolling:
   • Track mouse drag velocity on mouseup/mouseleave.
   • If a drag is completed with velocity, apply an animation frame loop (requestAnimationFrame) to decay the movement with friction, allowing the chart to glide to a stop smoothly.
3. Touch Support:
   • Map wheel and touch pinch-to-zoom/drag gestures for mobile and trackpad users.