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:
1 parent
fcf8511ac7
commit
bae653b7a9
2 files changed
+57
-32
No files matched your search
@@ -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
@@ -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,
|
||||
};
|
||||
}
|
||||
Reference in new issue
Block a user