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 contractedHoursPerMonth?: number | null
} }
const topClientsChartConfig = {
internas: {
label: "Horas internas",
},
externas: {
label: "Horas externas",
},
}
export function HoursReport() { export function HoursReport() {
const [timeRange, setTimeRange] = useState("90d") const [timeRange, setTimeRange] = useState("90d")
const [query, setQuery] = useState("") const [query, setQuery] = useState("")
@ -98,26 +107,29 @@ export function HoursReport() {
{!filteredWithComputed || filteredWithComputed.length === 0 ? ( {!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> <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 <BarChart
data={filteredWithComputed data={filteredWithComputed
.slice() .slice()
.sort((a, b) => b.total - a.total) .sort((a, b) => b.total - a.total)
.slice(0, 10) .slice(0, 10)
.map((r) => ({ name: r.name, internas: r.internal, externas: r.external }))} .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} /> <CartesianGrid vertical={false} />
<XAxis dataKey="name" tickLine={false} axisLine={false} tickMargin={14} interval={0} angle={-30} height={68} /> <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]} /> <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]} /> <Bar dataKey="externas" stackId="a" fill="var(--chart-2)" radius={[4, 4, 0, 0]} barSize={28} />
<ChartTooltip <ChartTooltip
content={ content={
<ChartTooltipContent <ChartTooltipContent
className="w-[200px]" className="w-[200px]"
formatter={(value, name) => ( 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> <span className="text-foreground font-mono font-medium tabular-nums">{formatHoursCompact(Number(value))}</span>
</> </>
)} )}