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:
@@ -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."
|
||||
}
|
||||
|
||||
@@ -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."
|
||||
}
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user