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