Split agent workload chart on /stats into one chart per status

Previously showed a single combined bar chart across all ticket
statuses; now renders a separate sorted bar chart per status
(new/open/pending/closed), each scaled to its own max.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_012o9j9RezxbZVKQMrB7oRLY
This commit is contained in:
ogrechkoandClaude Sonnet 5 committed 2026-08-08 12:27:54 +00:00
1 parent fcf8511ac7
commit bae653b7a9
2 files changed
+57 -32

No files matched your search

+31 -18
View File
@@ -28,7 +28,9 @@ export default async function StatsPage() {
const stats = await getStatsOverview();
const maxChannelCount = Math.max(...Object.values(stats.channelCounts), 1);
const maxAgentWorkload = Math.max(...stats.agentWorkload.map((a) => a.ticketCount), 1);
const statusesWithWorkload = (Object.keys(STATUS_META) as (keyof typeof STATUS_META)[]).filter(
(status) => stats.agentWorkloadByStatus[status].length > 0,
);
return (
<div>
@@ -88,24 +90,35 @@ export default async function StatsPage() {
<DailyBarChart data={stats.ticketsPerDay} />
</div>
<div className="card p-4 lg:col-span-2">
<h2 className="mb-3 text-sm font-semibold text-text-muted">Заявки по агентам (все статусы)</h2>
{stats.agentWorkload.length === 0 ? (
{statusesWithWorkload.length === 0 ? (
<div className="card p-4 lg:col-span-2">
<h2 className="mb-3 text-sm font-semibold text-text-muted">Заявки по агентам</h2>
<p className="text-sm text-text-faint">Пока нет данных.</p>
) : (
<div className="flex flex-col gap-2">
{stats.agentWorkload.map((agent) => (
<HorizontalBar
key={agent.name}
label={agent.name}
value={agent.ticketCount}
max={maxAgentWorkload}
colorClass="bg-chart-1"
/>
))}
</div>
)}
</div>
</div>
) : (
statusesWithWorkload.map((status) => {
const workload = stats.agentWorkloadByStatus[status];
const max = Math.max(...workload.map((a) => a.count), 1);
return (
<div key={status} className="card p-4">
<h2 className="mb-3 text-sm font-semibold text-text-muted">
Заявки по агентам — {STATUS_META[status].label}
</h2>
<div className="flex flex-col gap-2">
{workload.map((agent) => (
<HorizontalBar
key={agent.name}
label={agent.name}
value={agent.count}
max={max}
colorClass="bg-chart-1"
/>
))}
</div>
</div>
);
})
)}
</div>
</div>
);
+26 -14
View File
@@ -705,7 +705,7 @@ export interface StatsOverview {
statusCounts: Record<TicketStatus, number>;
channelCounts: Record<TicketChannel, number>;
ticketsPerDay: { label: string; count: number }[];
agentWorkload: { name: string; ticketCount: number }[];
agentWorkloadByStatus: Record<TicketStatus, { name: string; count: number }[]>;
}
/**
@@ -771,20 +771,32 @@ export async function getStatsOverview(): Promise<StatsOverview> {
: null;
const agents = await listAgents();
const ticketCountByAgent = new Map<string, number>();
let unassignedCount = 0;
for (const t of allTickets) {
if (t.assigneeId) {
ticketCountByAgent.set(t.assigneeId, (ticketCountByAgent.get(t.assigneeId) ?? 0) + 1);
} else {
unassignedCount += 1;
/** Per-agent ticket count for one status, sorted busiest-first. */
function workloadForStatus(status: TicketStatus): { name: string; count: number }[] {
const countByAgent = new Map<string, number>();
let unassignedCount = 0;
for (const t of allTickets) {
if (t.status !== status) continue;
if (t.assigneeId) {
countByAgent.set(t.assigneeId, (countByAgent.get(t.assigneeId) ?? 0) + 1);
} else {
unassignedCount += 1;
}
}
const workload = agents.map((a) => ({ name: a.name, count: countByAgent.get(a.id) ?? 0 }));
if (unassignedCount > 0) {
workload.push({ name: "Не назначено", count: unassignedCount });
}
return workload.sort((a, b) => b.count - a.count);
}
const agentWorkload = agents.map((a) => ({ name: a.name, ticketCount: ticketCountByAgent.get(a.id) ?? 0 }));
if (unassignedCount > 0) {
agentWorkload.push({ name: "Не назначено", ticketCount: unassignedCount });
}
agentWorkload.sort((a, b) => b.ticketCount - a.ticketCount);
const agentWorkloadByStatus: Record<TicketStatus, { name: string; count: number }[]> = {
new: workloadForStatus("new"),
open: workloadForStatus("open"),
pending: workloadForStatus("pending"),
closed: workloadForStatus("closed"),
};
return {
totalTickets: allTickets.length,
@@ -794,6 +806,6 @@ export async function getStatsOverview(): Promise<StatsOverview> {
statusCounts,
channelCounts,
ticketsPerDay,
agentWorkload,
agentWorkloadByStatus,
};
}