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

views: substituir CSAT pizza por pizza de prioridade do backlog (com LabelList, tooltip, filtros de empresa e período)

Browse source
This commit is contained in:
Esdras Renan 2025-10-07 17:51:12 -03:00
parent 385e0fec11
commit e2a5b560b1
1 changed files with 51 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

77
src/components/charts/views-charts.tsx
View file

@ -17,58 +17,84 @@ import { Skeleton } from "@/components/ui/skeleton"
export function ViewsCharts() {
return (
<div className="grid gap-6 lg:grid-cols-2">
<CsatPie />
<BacklogPriorityPie />
<QueuesOpenBar />
</div>
)
}
function CsatPie() {
function BacklogPriorityPie() {
const [companyId, setCompanyId] = usePersistentCompanyFilter("all")
const [timeRange, setTimeRange] = React.useState("30d")
const { session, convexUserId } = useAuth()
const tenantId = session?.user.tenantId ?? DEFAULT_TENANT_ID
const data = useQuery(
api.reports.csatOverview,
api.reports.backlogOverview,
convexUserId
? ({ tenantId, viewerId: convexUserId as Id<"users">, companyId: companyId === "all" ? undefined : (companyId as Id<"companies">) })
? ({ tenantId, viewerId: convexUserId as Id<"users">, range: timeRange, companyId: companyId === "all" ? undefined : (companyId as Id<"companies">) })
: "skip"
) as { totalSurveys: number; distribution: { score: number; total: number }[] } | undefined
) as { priorityCounts: Record<string, number> } | undefined
const companies = useQuery(api.companies.list, convexUserId ? { tenantId, viewerId: convexUserId as Id<"users"> } : "skip") as Array<{ id: Id<"companies">; name: string }> | undefined
if (!data) return <Skeleton className="h-[300px] w-full" />
const chartData = (data.distribution ?? []).map((d) => ({ score: `Nota ${d.score}`, total: d.total }))
const chartConfig: any = { total: { label: "Respostas" } }
const PRIORITY_LABELS: Record<string, string> = { LOW: "Baixa", MEDIUM: "Média", HIGH: "Alta", URGENT: "Crítica" }
const keys = ["LOW", "MEDIUM", "HIGH", "URGENT"]
const fills = {
LOW: "var(--chart-1)",
MEDIUM: "var(--chart-2)",
HIGH: "var(--chart-3)",
URGENT: "var(--chart-4)",
} as const
const chartData = keys
.map((k) => ({ name: PRIORITY_LABELS[k] ?? k, value: data.priorityCounts?.[k] ?? 0, fill: fills[k as keyof typeof fills] }))
.filter((d) => d.value > 0)
const chartConfig: any = { value: { label: "Tickets" } }
return (
<Card className="flex flex-col">
<CardHeader className="pb-0">
<CardTitle>CSAT - Distribuição</CardTitle>
<CardDescription>Frequência de respostas por nota</CardDescription>
<CardTitle>Backlog por prioridade</CardTitle>
<CardDescription>Distribuição de tickets no período</CardDescription>
<CardAction>
<Select value={companyId} onValueChange={setCompanyId}>
<SelectTrigger className="w-56">
<SelectValue placeholder="Todas as empresas" />
</SelectTrigger>
<SelectContent className="rounded-xl">
<SelectItem value="all">Todas as empresas</SelectItem>
{(companies ?? []).map((c) => (
<SelectItem key={c.id} value={c.id}>{c.name}</SelectItem>
))}
</SelectContent>
</Select>
<div className="flex flex-wrap items-center justify-end gap-2 md:gap-3">
<Select value={companyId} onValueChange={setCompanyId}>
<SelectTrigger className="w-56">
<SelectValue placeholder="Todas as empresas" />
</SelectTrigger>
<SelectContent className="rounded-xl">
<SelectItem value="all">Todas as empresas</SelectItem>
{(companies ?? []).map((c) => (
<SelectItem key={c.id} value={c.id}>{c.name}</SelectItem>
))}
</SelectContent>
</Select>
<Select value={timeRange} onValueChange={setTimeRange}>
<SelectTrigger className="w-40">
<SelectValue placeholder="Período" />
</SelectTrigger>
<SelectContent className="rounded-xl">
<SelectItem value="90d">Últimos 90 dias</SelectItem>
<SelectItem value="30d">Últimos 30 dias</SelectItem>
<SelectItem value="7d">Últimos 7 dias</SelectItem>
</SelectContent>
</Select>
</div>
</CardAction>
</CardHeader>
<CardContent className="flex-1 pb-0">
{chartData.length === 0 ? (
<div className="flex h-[250px] items-center justify-center rounded-xl border border-dashed border-border/60 text-sm text-muted-foreground">
Sem respostas no período.
Sem dados no período selecionado.
</div>
) : (
<ChartContainer config={chartConfig} className="mx-auto aspect-square max-h-[250px] [&_.recharts-text]:fill-background">
<ChartContainer
config={chartConfig}
className="mx-auto aspect-square max-h-[250px] [&_.recharts-text]:fill-background"
>
<PieChart>
<ChartTooltip content={<ChartTooltipContent nameKey="total" hideLabel />} />
<Pie data={chartData} dataKey="total" nameKey="score">
<LabelList dataKey="score" className="fill-background" stroke="none" fontSize={12} />
<ChartTooltip content={<ChartTooltipContent nameKey="value" hideLabel />} />
<Pie data={chartData} dataKey="value" nameKey="name">
<LabelList dataKey="name" className="fill-background" stroke="none" fontSize={12} />
</Pie>
</PieChart>
</ChartContainer>
@ -132,4 +158,3 @@ function QueuesOpenBar() {
</Card>
)
}