ciphera-net/pulse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 15 Wiki Activity

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

Browse Source
This commit is contained in:
Usman Baig
2026-03-11 22:42:32 +01:00
parent ca60379e5e
commit bf37add366
1 changed files with 33 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
components/dashboard/ScrollDepth.tsx
View File

@@ -1,6 +1,6 @@
'use client' '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 { BarChartIcon } from '@ciphera-net/ui'
import type { GoalCountStat } from '@/lib/api/stats' import type { GoalCountStat } from '@/lib/api/stats'
@@ -29,26 +29,24 @@ export default function ScrollDepth({ goalCounts, totalPageviews }: ScrollDepthP
return ( 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="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"> <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
Scroll Depth Scroll Depth
</h3> </h3>
</div> </div>
<p className="text-sm text-neutral-500 dark:text-neutral-400 mb-4">
% of visitors who scrolled this far
</p>
{hasData ? ( {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}
margin={{ top: 16, right: 32, bottom: 16, left: 32 }}
>
<PolarGrid stroke="#404040" />
<PolarAngleAxis
dataKey="label" dataKey="label"
tickLine={false} tick={{ fill: '#a3a3a3', fontSize: 12, fontWeight: 500 }}
tickMargin={10}
axisLine={false}
tick={{ fill: '#a3a3a3', fontSize: 12 }}
/> />
<Tooltip <Tooltip
cursor={false} cursor={false}
@@ -61,18 +59,14 @@ export default function ScrollDepth({ goalCounts, totalPageviews }: ScrollDepthP
}} }}
formatter={(value: number) => [`${value}%`, 'Reached']} formatter={(value: number) => [`${value}%`, 'Reached']}
/> />
<Bar dataKey="value" fill="#FD5E0F" radius={8}> <Radar
<LabelList
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}%`}
/> />
</Bar> </RadarChart>
</BarChart>
</ResponsiveContainer>
</div> </div>
) : ( ) : (
<div className="flex-1 min-h-[200px] flex flex-col items-center justify-center text-center px-6 py-8 gap-4"> <div className="flex-1 min-h-[200px] flex flex-col items-center justify-center text-center px-6 py-8 gap-4">