feat: replace radar with clean bar chart for scroll depth

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 = [
+  const chartData = THRESHOLDS.map((threshold) => ({
-    { label: '0%', value: 100 },
+    label: `${threshold}%`,
-    ...THRESHOLDS.map((threshold) => ({
+    value: totalPageviews > 0 ? Math.round(((scrollCounts.get(threshold) ?? 0) / totalPageviews) * 100) : 0,
-      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">
+        <div className="flex-1 min-h-[200px]">
-          <RadarChart
+          <ResponsiveContainer width="100%" height="100%">
-            width={340}
+            <BarChart data={chartData} margin={{ top: 24, right: 0, bottom: 0, left: 0 }}>
-            height={300}
+              <CartesianGrid vertical={false} stroke="#262626" />
-            data={chartData}
+              <XAxis
-            margin={{ top: 16, right: 32, bottom: 16, left: 32 }}
+                dataKey="label"
-          >
+                tickLine={false}
-            <PolarGrid stroke="#404040" />
+                tickMargin={10}
-            <PolarAngleAxis
+                axisLine={false}
-              dataKey="label"
+                tick={{ fill: '#a3a3a3', fontSize: 12 }}
-              tick={{ fill: '#a3a3a3', fontSize: 12, fontWeight: 500 }}
+              />
-            />
+              <Tooltip
-            <Tooltip
+                cursor={false}
-              cursor={false}
+                contentStyle={{
-              contentStyle={{
+                  backgroundColor: '#171717',
-                backgroundColor: '#171717',
+                  border: '1px solid #404040',
-                border: '1px solid #404040',
+                  borderRadius: 8,
-                borderRadius: 8,
+                  fontSize: 12,
-                fontSize: 12,
+                  color: '#fff',
-                color: '#fff',
+                }}
-              }}
+                formatter={(value: number) => [`${value}%`, 'Reached']}
-              formatter={(value: number) => [`${value}%`, 'Reached']}
+              />
-            />
+              <Bar dataKey="value" fill="#FD5E0F" radius={8}>
-            <Radar
+                <LabelList
-              dataKey="value"
+                  dataKey="value"
-              stroke="#FD5E0F"
+                  position="top"
-              fill="#FD5E0F"
+                  offset={10}
-              fillOpacity={0.25}
+                  fontSize={12}
-              dot={{ r: 4, fill: '#FD5E0F', fillOpacity: 1, strokeWidth: 0 }}
+                  fill="#a3a3a3"
-            />
+                  formatter={(v: number) => `${v}%`}
-          </RadarChart>
+                />
+              </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">