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

feat: replace radar with clean bar chart for scroll depth

Browse Source
This commit is contained in:
Usman Baig
2026-03-11 22:36:55 +01:00
parent b30619e6b4
commit ca60379e5e
1 changed files with 43 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
components/dashboard/ScrollDepth.tsx
View File

@@ -1,6 +1,6 @@
'use client' '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 { BarChartIcon } from '@ciphera-net/ui'
import type { GoalCountStat } from '@/lib/api/stats' import type { GoalCountStat } from '@/lib/api/stats'
@@ -22,34 +22,33 @@ export default function ScrollDepth({ goalCounts, totalPageviews }: ScrollDepthP
const hasData = scrollCounts.size > 0 && totalPageviews > 0 const hasData = scrollCounts.size > 0 && totalPageviews > 0
const chartData = [ const chartData = THRESHOLDS.map((threshold) => ({
{ label: '0%', value: 100 },
...THRESHOLDS.map((threshold) => ({
label: `${threshold}%`, label: `${threshold}%`,
value: totalPageviews > 0 ? Math.round(((scrollCounts.get(threshold) ?? 0) / totalPageviews) * 100) : 0, value: totalPageviews > 0 ? Math.round(((scrollCounts.get(threshold) ?? 0) / totalPageviews) * 100) : 0,
})), }))
]
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-4"> <div className="flex items-center justify-between mb-1">
<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] 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 }}
>
<PolarGrid stroke="#404040" />
<PolarAngleAxis
dataKey="label" dataKey="label"
tick={{ fill: '#a3a3a3', fontSize: 12, fontWeight: 500 }} tickLine={false}
tickMargin={10}
axisLine={false}
tick={{ fill: '#a3a3a3', fontSize: 12 }}
/> />
<Tooltip <Tooltip
cursor={false} cursor={false}
@@ -62,14 +61,18 @@ export default function ScrollDepth({ goalCounts, totalPageviews }: ScrollDepthP
}} }}
formatter={(value: number) => [`${value}%`, 'Reached']} formatter={(value: number) => [`${value}%`, 'Reached']}
/> />
<Radar <Bar dataKey="value" fill="#FD5E0F" radius={8}>
<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>
) : ( ) : (
<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">