revert: restore radar chart for scroll depth (4 axes, no 0% anchor)

components/dashboard/ScrollDepth.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { Bar, BarChart, CartesianGrid, LabelList, XAxis, ResponsiveContainer, Tooltip } from 'recharts'
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart, Tooltip } from 'recharts'
 import { BarChartIcon } from '@ciphera-net/ui'
 import type { GoalCountStat } from '@/lib/api/stats'
 
@@ -29,50 +29,44 @@ export default function ScrollDepth({ goalCounts, totalPageviews }: ScrollDepthP
 
   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-1">
+      <div className="flex items-center justify-between mb-4">
         <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]">
+        <div className="flex-1 min-h-[200px] flex items-center justify-center">
-          <ResponsiveContainer width="100%" height="100%">
+          <RadarChart
-            <BarChart data={chartData} margin={{ top: 24, right: 0, bottom: 0, left: 0 }}>
+            width={340}
-              <CartesianGrid vertical={false} stroke="#262626" />
+            height={300}
-              <XAxis
+            data={chartData}
-                dataKey="label"
+            margin={{ top: 16, right: 32, bottom: 16, left: 32 }}
-                tickLine={false}
+          >
-                tickMargin={10}
+            <PolarGrid stroke="#404040" />
-                axisLine={false}
+            <PolarAngleAxis
-                tick={{ fill: '#a3a3a3', fontSize: 12 }}
+              dataKey="label"
-              />
+              tick={{ fill: '#a3a3a3', fontSize: 12, fontWeight: 500 }}
-              <Tooltip
+            />
-                cursor={false}
+            <Tooltip
-                contentStyle={{
+              cursor={false}
-                  backgroundColor: '#171717',
+              contentStyle={{
-                  border: '1px solid #404040',
+                backgroundColor: '#171717',
-                  borderRadius: 8,
+                border: '1px solid #404040',
-                  fontSize: 12,
+                borderRadius: 8,
-                  color: '#fff',
+                fontSize: 12,
-                }}
+                color: '#fff',
-                formatter={(value: number) => [`${value}%`, 'Reached']}
+              }}
-              />
+              formatter={(value: number) => [`${value}%`, 'Reached']}
-              <Bar dataKey="value" fill="#FD5E0F" radius={8}>
+            />
-                <LabelList
+            <Radar
-                  dataKey="value"
+              dataKey="value"
-                  position="top"
+              stroke="#FD5E0F"
-                  offset={10}
+              fill="#FD5E0F"
-                  fontSize={12}
+              fillOpacity={0.25}
-                  fill="#a3a3a3"
+              dot={{ r: 4, fill: '#FD5E0F', fillOpacity: 1, strokeWidth: 0 }}
-                  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">