fix(frontend): Inconsistent Grid Lines in Analytics Dashboard Charts

[mmabrouk]

Issue Description

The charts on the Overview and Home pages (Requests, Latency, etc.) displayed an inconsistent number of horizontal grid lines. Users observed that sometimes 4 lines were shown, while other times only 3 were visible. Specifically, intermediate grid lines (e.g., the 21ms mark in a 0-28ms scale) were being skipped, creating a confusing and non-uniform visual experience.

Root Cause

The issue stemmed from the AreaChart component from the @tremor/react library, which was previously used for these plots.

1. Black Box Configuration: Tremor abstracts away the underlying Recharts configuration and does not expose key properties like tickCount or interval.
2. Aggressive Collision Detection: By default, the underlying Recharts logic detects potential text overlaps on the Y-axis and hides ticks (and their associated grid lines) to save space. Without access to the interval prop via Tremor, we could not disable this behavior.

Solution

We replaced the rigid Tremor AreaChart with a new, flexible CustomAreaChart component built directly on top of Recharts.
This custom implementation allows us to:

1. Enforce Tick Count: We explicitly set tickCount={5} to ensure exactly 4 intervals (5 ticks including 0) are always generated.
2. Disable Collision Hiding: We passed interval={0} to the Y-Axis configuration. This strictly instructs the library to render all generated ticks and grid lines, regardless of vertical spacing or collision detection.
3. Preserve Aesthetics: The new component reproduces the original Tremor design, including gradients, color mapping (cyan-600, rose, etc.), and tooltips.

Tech Stack Changes

• New Component: src/components/pages/observability/dashboard/CustomAreaChart.tsx
• Modified: src/components/pages/observability/dashboard/AnalyticsDashboard.tsx (swapped Tremor chart for Custom chart).

Before

After

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
agenta-documentation	Ready	Preview, Comment	Jan 2, 2026 3:43pm