esdras/sistema-de-chamados
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refina espaçamento e tooltip do gráfico de horas

Browse source
This commit is contained in:
codex-bot 2025-10-21 15:44:00 -03:00
parent c4620102ae
commit 3e5e1c759e
1 changed files with 18 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

24
src/components/reports/hours-report.tsx
View file

@ -29,6 +29,15 @@ type HoursItem = {
contractedHoursPerMonth?: number | null
}
const topClientsChartConfig = {
internas: {
label: "Horas internas",
},
externas: {
label: "Horas externas",
},
}
export function HoursReport() {
const [timeRange, setTimeRange] = useState("90d")
const [query, setQuery] = useState("")
@ -98,26 +107,29 @@ export function HoursReport() {
{!filteredWithComputed || filteredWithComputed.length === 0 ? (
<p className="rounded-lg border border-dashed border-slate-200 p-6 text-sm text-neutral-500">Sem dados para o período.</p>
) : (
<ChartContainer config={{}} className="aspect-auto h-[260px] w-full">
<ChartContainer config={topClientsChartConfig} className="aspect-auto h-[260px] w-full">
<BarChart
data={filteredWithComputed
.slice()
.sort((a, b) => b.total - a.total)
.slice(0, 10)
.map((r) => ({ name: r.name, internas: r.internal, externas: r.external }))}
margin={{ left: 12, right: 12, bottom: 28 }}
margin={{ top: 8, left: 20, right: 20, bottom: 56 }}
barCategoryGap={32}
>
<CartesianGrid vertical={false} />
<XAxis dataKey="name" tickLine={false} axisLine={false} tickMargin={14} interval={0} angle={-30} height={68} />
<Bar dataKey="internas" stackId="a" fill="var(--chart-1)" radius={[4, 4, 0, 0]} />
<Bar dataKey="externas" stackId="a" fill="var(--chart-2)" radius={[4, 4, 0, 0]} />
<XAxis dataKey="name" tickLine={false} axisLine={false} tickMargin={24} interval={0} angle={-30} height={80} />
<Bar dataKey="internas" stackId="a" fill="var(--chart-1)" radius={[4, 4, 0, 0]} barSize={28} />
<Bar dataKey="externas" stackId="a" fill="var(--chart-2)" radius={[4, 4, 0, 0]} barSize={28} />
<ChartTooltip
content={
<ChartTooltipContent
className="w-[200px]"
formatter={(value, name) => (
<>
<span className="text-muted-foreground">{name}</span>
<span className="text-muted-foreground">
{name === "internas" ? "Horas internas" : "Horas externas"}
</span>
<span className="text-foreground font-mono font-medium tabular-nums">{formatHoursCompact(Number(value))}</span>
</>
)}