From ca60379e5e131b801c0d3e49c30976a8283bba98 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 11 Mar 2026 22:36:55 +0100
Subject: [PATCH] feat: replace radar with clean bar chart for scroll depth

---
 components/dashboard/ScrollDepth.tsx | 83 ++++++++++++++--------------
 1 file changed, 43 insertions(+), 40 deletions(-)

diff --git a/components/dashboard/ScrollDepth.tsx b/components/dashboard/ScrollDepth.tsx
index fa53586..531bc3d 100644
--- a/components/dashboard/ScrollDepth.tsx
+++ b/components/dashboard/ScrollDepth.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { PolarAngleAxis, PolarGrid, Radar, RadarChart, Tooltip } from 'recharts'
+import { Bar, BarChart, CartesianGrid, LabelList, XAxis, ResponsiveContainer, Tooltip } from 'recharts'
 import { BarChartIcon } from '@ciphera-net/ui'
 import type { GoalCountStat } from '@/lib/api/stats'
 
@@ -22,54 +22,57 @@ export default function ScrollDepth({ goalCounts, totalPageviews }: ScrollDepthP
 
   const hasData = scrollCounts.size > 0 && totalPageviews > 0
 
-  const chartData = [
-    { label: '0%', value: 100 },
-    ...THRESHOLDS.map((threshold) => ({
-      label: `${threshold}%`,
-      value: totalPageviews > 0 ? Math.round(((scrollCounts.get(threshold) ?? 0) / totalPageviews) * 100) : 0,
-    })),
-  ]
+  const chartData = THRESHOLDS.map((threshold) => ({
+    label: `${threshold}%`,
+    value: totalPageviews > 0 ? Math.round(((scrollCounts.get(threshold) ?? 0) / totalPageviews) * 100) : 0,
+  }))
 
   return (
     <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 h-full flex flex-col">
-      <div className="flex items-center justify-between mb-4">
+      <div className="flex items-center justify-between mb-1">
         <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
           Scroll Depth
         </h3>
       </div>
+      <p className="text-sm text-neutral-500 dark:text-neutral-400 mb-4">
+        % of visitors who scrolled this far
+      </p>
 
       {hasData ? (
-        <div className="flex-1 min-h-[200px] flex items-center justify-center">
-          <RadarChart
-            width={340}
-            height={300}
-            data={chartData}
-            margin={{ top: 16, right: 32, bottom: 16, left: 32 }}
-          >
-            <PolarGrid stroke="#404040" />
-            <PolarAngleAxis
-              dataKey="label"
-              tick={{ fill: '#a3a3a3', fontSize: 12, fontWeight: 500 }}
-            />
-            <Tooltip
-              cursor={false}
-              contentStyle={{
-                backgroundColor: '#171717',
-                border: '1px solid #404040',
-                borderRadius: 8,
-                fontSize: 12,
-                color: '#fff',
-              }}
-              formatter={(value: number) => [`${value}%`, 'Reached']}
-            />
-            <Radar
-              dataKey="value"
-              stroke="#FD5E0F"
-              fill="#FD5E0F"
-              fillOpacity={0.25}
-              dot={{ r: 4, fill: '#FD5E0F', fillOpacity: 1, strokeWidth: 0 }}
-            />
-          </RadarChart>
+        <div className="flex-1 min-h-[200px]">
+          <ResponsiveContainer width="100%" height="100%">
+            <BarChart data={chartData} margin={{ top: 24, right: 0, bottom: 0, left: 0 }}>
+              <CartesianGrid vertical={false} stroke="#262626" />
+              <XAxis
+                dataKey="label"
+                tickLine={false}
+                tickMargin={10}
+                axisLine={false}
+                tick={{ fill: '#a3a3a3', fontSize: 12 }}
+              />
+              <Tooltip
+                cursor={false}
+                contentStyle={{
+                  backgroundColor: '#171717',
+                  border: '1px solid #404040',
+                  borderRadius: 8,
+                  fontSize: 12,
+                  color: '#fff',
+                }}
+                formatter={(value: number) => [`${value}%`, 'Reached']}
+              />
+              <Bar dataKey="value" fill="#FD5E0F" radius={8}>
+                <LabelList
+                  dataKey="value"
+                  position="top"
+                  offset={10}
+                  fontSize={12}
+                  fill="#a3a3a3"
+                  formatter={(v: number) => `${v}%`}
+                />
+              </Bar>
+            </BarChart>
+          </ResponsiveContainer>
         </div>
       ) : (
         <div className="flex-1 min-h-[200px] flex flex-col items-center justify-center text-center px-6 py-8 gap-4">