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

fix: refine layout and styling in Chart component for better visual alignment and consistency

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

8
components/dashboard/Chart.tsx
View File

@@ -570,11 +570,11 @@ 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 gap-1"> <div className="h-[360px] w-full flex flex-row items-stretch">
{/* * Vertical Y-axis label (text reads bottom-to-top) */} {/* * Vertical Y-axis label (text reads bottom-to-top) */}
<div <div
className="flex items-center justify-center flex-shrink-0" className="flex items-center justify-center flex-shrink-0"
style={{ width: 20 }} style={{ width: 14 }}
> >
<span <span
className="text-xs font-medium whitespace-nowrap" className="text-xs font-medium whitespace-nowrap"
@@ -589,7 +589,7 @@ export default function Chart({
</div> </div>
<div className="flex-1 min-h-0 min-w-0"> <div className="flex-1 min-h-0 min-w-0">
<ResponsiveContainer width="100%" height="100%"> <ResponsiveContainer width="100%" height="100%">
<AreaChart data={chartData} margin={{ top: 4, right: 8, left: 32, bottom: 0 }}> <AreaChart data={chartData} margin={{ top: 4, right: 8, left: 20, bottom: 0 }}>
<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 +613,7 @@ export default function Chart({
tickLine={false} tickLine={false}
axisLine={false} axisLine={false}
domain={[0, 'auto']} domain={[0, 'auto']}
width={36} width={28}
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)