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

fix: update layout and styling in Chart component for improved readability and alignment

Browse Source
This commit is contained in:
Usman Baig
2026-02-11 21:27:23 +01:00
parent 9a2b3da8fd
commit d25910ffc3
1 changed files with 6 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
components/dashboard/Chart.tsx
View File

@@ -570,26 +570,13 @@ export default function Chart({
<p className="text-xs text-neutral-400 dark:text-neutral-500">Try selecting another metric or date range</p> <p className="text-xs text-neutral-400 dark:text-neutral-500">Try selecting another metric or date range</p>
</div> </div>
) : ( ) : (
<div className="h-[360px] w-full flex flex-row items-stretch"> <div className="h-[360px] w-full flex flex-col">
{/* * Vertical Y-axis label (text reads bottom-to-top) */} <div className="text-xs font-medium mb-1 flex-shrink-0" style={{ color: colors.axis }}>
<div {metricLabel}
className="flex items-center justify-center flex-shrink-0"
style={{ width: 14 }}
>
<span
className="text-xs font-medium whitespace-nowrap"
style={{
color: colors.axis,
transform: 'rotate(-90deg)',
transformOrigin: 'center center',
}}
>
{metricLabel}
</span>
</div> </div>
<div className="flex-1 min-h-0 min-w-0"> <div className="flex-1 min-h-0 w-full">
<ResponsiveContainer width="100%" height="100%"> <ResponsiveContainer width="100%" height="100%">
<AreaChart data={chartData} margin={{ top: 4, right: 8, left: 20, bottom: 0 }}> <AreaChart data={chartData} margin={{ top: 4, right: 8, left: 24, bottom: 24 }}>
<defs> <defs>
<linearGradient id={`gradient-${metric}`} x1="0" y1="0" x2="0" y2="1"> <linearGradient id={`gradient-${metric}`} x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stopColor={activeMetric.color} stopOpacity={0.35} /> <stop offset="0%" stopColor={activeMetric.color} stopOpacity={0.35} />
@@ -613,7 +600,7 @@ export default function Chart({
tickLine={false} tickLine={false}
axisLine={false} axisLine={false}
domain={[0, 'auto']} domain={[0, 'auto']}
width={28} width={24}
tickFormatter={(val) => { tickFormatter={(val) => {
if (metric === 'bounce_rate') return `${val}%` if (metric === 'bounce_rate') return `${val}%`
if (metric === 'avg_duration') return formatAxisDuration(val) if (metric === 'avg_duration') return formatAxisDuration(val)