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

feat(ui): improve chart spacing and labels; format hours <1h as minutes; unify date format to dd/MM (ticks) and dd/MM/yyyy (tooltips); fix tooltips labels ('Total', 'Resolvidos')

Browse source
This commit is contained in:
codex-bot 2025-10-21 14:52:57 -03:00
parent 4b4c0d8e69
commit f255a4c780
6 changed files with 133 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

48
src/components/reports/sla-report.tsx
View file

@ -17,6 +17,7 @@ import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
import { usePersistentCompanyFilter } from "@/lib/use-company-filter"
import { Area, AreaChart, Bar, BarChart, CartesianGrid, XAxis } from "recharts"
import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart"
import { formatDateDM, formatDateDMY, formatHoursCompact } from "@/lib/utils"
function formatMinutes(value: number | null) {
if (value === null) return "—"
@ -214,8 +215,22 @@ export function SlaReport() {
</linearGradient>
</defs>
<CartesianGrid vertical={false} />
<XAxis dataKey="date" tickLine={false} axisLine={false} tickMargin={8} minTickGap={24} />
<ChartTooltip content={<ChartTooltipContent className="w-[180px]" />} />
<XAxis
dataKey="date"
tickLine={false}
axisLine={false}
tickMargin={8}
minTickGap={24}
tickFormatter={(v) => formatDateDM(new Date(v))}
/>
<ChartTooltip
content={
<ChartTooltipContent
className="w-[180px]"
labelFormatter={(value) => formatDateDMY(new Date(value as string))}
/>
}
/>
<Area dataKey="opened" type="natural" fill="url(#fillOpened)" stroke="var(--chart-1)" name="Abertos" />
<Area dataKey="resolved" type="natural" fill="url(#fillResolved)" stroke="var(--chart-2)" name="Resolvidos" />
</AreaChart>
@ -240,8 +255,22 @@ export function SlaReport() {
<ChartContainer config={{}} className="aspect-auto h-[260px] w-full">
<AreaChart data={channelsSeries.points.map((p) => ({ date: p.date, ...p.values }))}>
<CartesianGrid vertical={false} />
<XAxis dataKey="date" tickLine={false} axisLine={false} tickMargin={8} minTickGap={24} />
<ChartTooltip content={<ChartTooltipContent className="w-[220px]" />} />
<XAxis
dataKey="date"
tickLine={false}
axisLine={false}
tickMargin={8}
minTickGap={24}
tickFormatter={(v) => formatDateDM(new Date(v))}
/>
<ChartTooltip
content={
<ChartTooltipContent
className="w-[220px]"
labelFormatter={(value) => formatDateDMY(new Date(value as string))}
/>
}
/>
{channelsSeries.channels.map((ch, idx) => (
<Area key={ch} dataKey={ch} type="natural" stackId="a" stroke={`var(--chart-${(idx % 5) + 1})`} fill={`var(--chart-${(idx % 5) + 1})`} />
))}
@ -272,11 +301,14 @@ export function SlaReport() {
<div className="space-y-3">
<p className="text-xs text-neutral-500">Resolvidos por agente</p>
<ChartContainer config={{}} className="aspect-auto h-[260px] w-full">
<BarChart data={agents.items.slice(0, 10).map((a) => ({ name: a.name || a.email || 'Agente', resolved: a.resolved }))} margin={{ left: 12, right: 12 }}>
<BarChart
data={agents.items.slice(0, 10).map((a) => ({ name: a.name || a.email || 'Agente', resolved: a.resolved }))}
margin={{ left: 12, right: 12, bottom: 28 }}
>
<CartesianGrid vertical={false} />
<XAxis dataKey="name" tickLine={false} axisLine={false} tickMargin={8} interval={0} angle={-30} height={60} />
<XAxis dataKey="name" tickLine={false} axisLine={false} tickMargin={14} interval={0} angle={-30} height={68} />
<Bar dataKey="resolved" fill="var(--chart-1)" radius={[4, 4, 0, 0]} />
<ChartTooltip content={<ChartTooltipContent className="w-[180px]" nameKey="resolved" />} />
<ChartTooltip content={<ChartTooltipContent className="w-[180px]" nameKey="Resolvidos" />} />
</BarChart>
</ChartContainer>
</div>
@ -286,7 +318,7 @@ export function SlaReport() {
{agents.items.slice(0, 10).map((a) => (
<li key={a.agentId} className="flex items-center justify-between px-3 py-2 text-sm">
<span className="truncate">{a.name || a.email || 'Agente'}</span>
<span className="text-neutral-700">{a.workedHours.toFixed(1)} h</span>
<span className="text-neutral-700">{formatHoursCompact(a.workedHours)}</span>
</li>
))}
</ul>