From c7ef9e9461fdb21fc0b786cca156f8064f4dc9fd Mon Sep 17 00:00:00 2001
From: Armaan Jain <84474476+Developing-Gamer@users.noreply.github.com>
Date: Mon, 15 Jun 2026 19:37:01 -0700
Subject: [PATCH] Dashboard Bar chart UI fix (#1602)

<!--

Make sure you've read the CONTRIBUTING.md guidelines:
https://github.com/hexclave/hexclave/blob/dev/CONTRIBUTING.md

-->


<!-- This is an auto-generated description by cubic. -->
---
## Summary by cubic
Fixes the page views bar hover highlight in the analytics chart by
replacing the clip-path overlay with per-bar `Cell` opacity. This
removes flicker and highlights only the hovered bar.

- **Bug Fixes**
  - Removed `page-views-highlight-clip` and the extra hover `Bar`.
- Use `Cell` per bar to set `fillOpacity` (0.5 on hover, 0.18 otherwise;
0 when hidden).
- Keeps a single `Bar`, reducing DOM and avoiding clipping/offset
issues.

<sup>Written for commit f3e659bb505fab5cf852a318b7e50402b8852a7e.
Summary will update on new commits.</sup>

<a
href="https://cubic.dev/pr/hexclave/hexclave/pull/1602?utm_source=github"
target="_blank" rel="noopener noreferrer"
data-no-image-dialog="true"><picture><source
media="(prefers-color-scheme: dark)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"><source
media="(prefers-color-scheme: light)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-light.svg"><img
alt="Review in cubic"
src="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"></picture></a>

<!-- End of auto-generated description by cubic. -->



<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Refactor**
* Improved the rendering mechanism for analytics chart interactions in
the dashboard.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../[projectId]/(overview)/line-chart.tsx     | 25 ++++++-------------
 1 file changed, 8 insertions(+), 17 deletions(-)

diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/(overview)/line-chart.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/(overview)/line-chart.tsx
index 3e408c802..e9df73e4d 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/(overview)/line-chart.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/(overview)/line-chart.tsx
@@ -847,9 +847,6 @@ export function ComposedAnalyticsChart({
               <clipPath id={`visitors-highlight-clip-${id}`}>
                 <rect x={hoveredX - 56} y={-1000} width={112} height={3000} />
               </clipPath>
-              <clipPath id={`page-views-highlight-clip-${id}`}>
-                <rect x={hoveredX - 56} y={-1000} width={112} height={3000} />
-              </clipPath>
               <clipPath id={`dau-highlight-clip-${id}`}>
                 <rect x={hoveredX - 56} y={-1000} width={112} height={3000} />
               </clipPath>
@@ -877,22 +874,16 @@ export function ComposedAnalyticsChart({
           dataKey="page_views"
           yAxisId="visitors"
           fill="var(--color-page_views)"
-          fillOpacity={showPageViews ? (hoveredIndex == null ? 0.18 : 0.08) : 0}
           radius={[4, 4, 0, 0]}
           {...chartMotion}
-        />
-        {showPageViews && hoveredIndex != null && hoveredX != null && (
-          <Bar
-            dataKey="page_views"
-            yAxisId="visitors"
-            fill="var(--color-page_views)"
-            fillOpacity={0.5}
-            radius={[4, 4, 0, 0]}
-            isAnimationActive={false}
-            style={{ clipPath: `url(#page-views-highlight-clip-${id})` }}
-            legendType="none"
-          />
-        )}
+        >
+          {taggedDatapoints.map((_, index) => (
+            <Cell
+              key={`page-views-${index}`}
+              fillOpacity={showPageViews ? (hoveredIndex === index ? 0.5 : 0.18) : 0}
+            />
+          ))}
+        </Bar>
         <Area
           type="monotone"
           dataKey="visitors"