feat(helpdesk): add tooltip on trend arrow explaining backlog direction

Hover over ↑/↓ shows a data-tooltip explaining the delta in plain
language: 'More tickets received than resolved — backlog is growing.'

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-04-05 21:11:28 +02:00
parent f2aa45dd2c
commit be58cb4426
4 changed files with 16 additions and 3 deletions

View File

@@ -301,5 +301,7 @@
"Current": "Aktuell",
"Performance": "Leistung",
"Historical": "Historisch",
"Queue": "Warteschlange"
"Queue": "Warteschlange",
"trend_tooltip_up": "Mehr Tickets erhalten als gelöst im Zeitraum — Rückstau wächst.",
"trend_tooltip_down": "Mehr Tickets gelöst als erhalten im Zeitraum — Rückstau wird abgebaut."
}

View File

@@ -301,5 +301,7 @@
"Current": "Current",
"Performance": "Performance",
"Historical": "Historical",
"Queue": "Queue"
"Queue": "Queue",
"trend_tooltip_up": "More tickets received than resolved in the period — backlog is growing.",
"trend_tooltip_down": "More tickets resolved than received in the period — backlog is shrinking."
}

View File

@@ -32,6 +32,8 @@ $periodLabels = [
data-label-resolution-time="<?php e(t('Resolution time')); ?>"
data-label-top-customers="<?php e(t('Top customers')); ?>"
data-label-top-categories="<?php e(t('Top categories')); ?>"
data-label-trend-up="<?php e(t('trend_tooltip_up')); ?>"
data-label-trend-down="<?php e(t('trend_tooltip_down')); ?>"
>
<section>
<?php

View File

@@ -12,6 +12,8 @@ if (container) {
const labelCritical = container.dataset.labelCritical || 'Critical (>48h open)';
const ticketBaseUrl = container.dataset.ticketBaseUrl || '';
const debitorBaseUrl = container.dataset.debitorBaseUrl || '';
const labelTrendUp = container.dataset.labelTrendUp || 'Backlog growing';
const labelTrendDown = container.dataset.labelTrendDown || 'Backlog shrinking';
const elLoading = document.getElementById('team-loading');
const elError = document.getElementById('team-error');
@@ -116,7 +118,12 @@ if (container) {
if (delta !== 0) {
const arrow = delta > 0 ? '↑' : '↓';
const cls = delta > 0 ? 'helpdesk-team-trend-up' : 'helpdesk-team-trend-down';
title.appendChild(h('span', cls, arrow + Math.abs(delta)));
const tooltip = delta > 0 ? labelTrendUp : labelTrendDown;
const trendEl = h('span', cls, arrow + Math.abs(delta));
trendEl.setAttribute('data-tooltip', tooltip);
trendEl.setAttribute('data-tooltip-pos', 'top');
trendEl.tabIndex = 0;
title.appendChild(trendEl);
}
section.appendChild(title);