gabriel/beetask
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(dashboard): center donut chart text dead-center inside donut hole

Browse source
This commit is contained in:
Gabriel Menezes 2026-11-02 13:17:00 -04:00
parent 4dda0e0445
commit 8adcd6c417
1 changed files with 91 additions and 86 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
frontend/src/components/dashboard/CategoryTimePieChart.tsx
View file

@ -103,10 +103,10 @@ export const CategoryTimePieChart: React.FC<CategoryTimePieChartProps> = ({
}, [tasks, startDate, endDate, isAllPeriod, activeTaskId, activeSeconds])
// SVG Donut geometry
const size = 180
const size = 190
const center = size / 2
const radius = 64
const strokeWidth = 22
const radius = 68
const strokeWidth = 24
const circumference = 2 * Math.PI * radius
const hoveredItem = categoryList.find((c) => c.id === hoveredId) || null
@ -156,12 +156,16 @@ export const CategoryTimePieChart: React.FC<CategoryTimePieChartProps> = ({
) : (
<div className="grid grid-cols-1 md:grid-cols-12 gap-6 items-center">
{/* Donut Chart (Left 5 cols) */}
<div className="md:col-span-5 flex flex-col items-center justify-center relative select-none">
<div className="md:col-span-5 flex items-center justify-center py-2">
<div
className="relative shrink-0 flex items-center justify-center select-none"
style={{ width: size, height: size }}
>
<svg
width={size}
height={size}
viewBox={`0 0 ${size} ${size}`}
className="transform -rotate-90"
className="transform -rotate-90 block"
>
{/* Background Track Circle */}
<circle
@ -209,41 +213,42 @@ export const CategoryTimePieChart: React.FC<CategoryTimePieChartProps> = ({
})}
</svg>
{/* Donut Hole Center Content (Absolute) */}
{/* Donut Hole Center Content (Absolute & Dead Centered) */}
<div
className="absolute inset-0 flex flex-col items-center justify-center text-center pointer-events-none p-3"
style={{ width: size, height: size }}
className="absolute inset-0 flex flex-col items-center justify-center text-center pointer-events-none px-2"
>
{hoveredItem ? (
<div className="space-y-0.5 animate-in fade-in zoom-in-95 duration-150">
<div className="flex flex-col items-center justify-center space-y-0.5 max-w-[105px] animate-in fade-in zoom-in-95 duration-150">
<span
className="text-[10px] font-bold uppercase tracking-wider truncate max-w-[90px] block"
className="text-[10px] font-bold uppercase tracking-wider truncate w-full text-center block"
style={{ color: hoveredItem.color }}
title={hoveredItem.name}
>
{hoveredItem.name}
</span>
<p className="text-base font-extrabold font-mono text-foreground leading-tight">
<p className="text-sm sm:text-base font-extrabold font-mono text-foreground leading-none">
{formatSecondsToTimer(hoveredItem.seconds)}
</p>
<span className="text-[10px] font-semibold text-muted block">
<span className="text-[10px] font-semibold text-muted block leading-none pt-0.5">
{hoveredItem.percentage.toFixed(1)}% do tempo
</span>
</div>
) : (
<div className="space-y-0.5 animate-in fade-in duration-150">
<span className="text-[9px] font-bold uppercase tracking-wider text-muted block">
<div className="flex flex-col items-center justify-center space-y-0.5 max-w-[105px] animate-in fade-in duration-150">
<span className="text-[9px] font-bold uppercase tracking-wider text-muted block leading-none">
Total Auditado
</span>
<p className="text-base font-extrabold font-mono text-foreground leading-tight">
<p className="text-sm sm:text-base font-extrabold font-mono text-foreground leading-none">
{formatSecondsToTimer(totalSeconds)}
</p>
<span className="text-[10px] font-semibold text-muted block">
<span className="text-[10px] font-semibold text-muted block leading-none pt-0.5">
{categoryList.length} {categoryList.length === 1 ? 'categoria' : 'categorias'}
</span>
</div>
)}
</div>
</div>
</div>
{/* Interactive Legend & Bars (Right 7 cols) */}
<div className="md:col-span-7 space-y-2.5">