fix(helpdesk): default period to 30 days and show trend timeframe hint

Change default period from 90 to 30 days for a more current snapshot.
Add legend footnote: '↑↓ Trend basiert auf den letzten 30 Tagen'
so the user knows what the arrows refer to.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-04-05 21:15:05 +02:00
parent e659bd5bc5
commit daab2f4999
4 changed files with 20 additions and 9 deletions

View File

@@ -303,5 +303,6 @@
"Historical": "Historisch",
"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."
"trend_tooltip_down": "Mehr Tickets gelöst als erhalten im Zeitraum — Rückstau wird abgebaut.",
"Trend based on last {days} days": "Trend basiert auf den letzten {days} Tagen"
}

View File

@@ -303,5 +303,6 @@
"Historical": "Historical",
"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."
"trend_tooltip_down": "More tickets resolved than received in the period — backlog is shrinking.",
"Trend based on last {days} days": "Trend based on last {days} days"
}

View File

@@ -34,6 +34,7 @@ $periodLabels = [
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')); ?>"
data-label-trend-hint="<?php e(t('Trend based on last {days} days')); ?>"
>
<section>
<?php
@@ -100,7 +101,7 @@ $periodLabels = [
<div data-tab-panel="performance" class="helpdesk-team-performance-panel">
<div class="helpdesk-segment-control" id="team-period-selector">
<?php foreach ($periods as $p): ?>
<input type="radio" name="team-period" id="team-period-<?php e($p); ?>" value="<?php e($p); ?>"<?php if ($p === 90): ?> checked<?php endif; ?>>
<input type="radio" name="team-period" id="team-period-<?php e($p); ?>" value="<?php e($p); ?>"<?php if ($p === 30): ?> checked<?php endif; ?>>
<label for="team-period-<?php e($p); ?>"><?php e($periodLabels[$p]); ?></label>
<?php endforeach; ?>
</div>

View File

@@ -10,6 +10,7 @@ if (container) {
const labelQueue = container.dataset.labelQueue || 'Queue';
const labelTickets = container.dataset.labelTickets || 'Tickets';
const labelCritical = container.dataset.labelCritical || 'Critical (>48h open)';
const labelTrendHint = container.dataset.labelTrendHint || 'Trend based on last {days} days';
const ticketBaseUrl = container.dataset.ticketBaseUrl || '';
const debitorBaseUrl = container.dataset.debitorBaseUrl || '';
const labelTrendUp = container.dataset.labelTrendUp || 'Backlog growing';
@@ -24,7 +25,7 @@ if (container) {
const elRefresh = container.querySelector('button[name="team-refresh"]');
const periodSelector = document.getElementById('team-period-selector');
let currentPeriod = 90;
let currentPeriod = 30;
function showState(state) {
if (elLoading) elLoading.hidden = state !== 'loading';
@@ -323,12 +324,19 @@ if (container) {
// Legend
const hasCritical = members.some(m => m.critical_tickets > 0);
if (hasCritical) {
const hasTrend = visible.some(m => (m.trend_delta ?? 0) !== 0);
if (hasCritical || hasTrend) {
const legend = h('div', 'helpdesk-team-legend');
const item = h('span', 'helpdesk-team-legend-item');
item.appendChild(h('span', 'helpdesk-team-legend-dot helpdesk-team-legend-dot-warning'));
item.appendChild(h('span', '', labelCritical));
legend.appendChild(item);
if (hasCritical) {
const item = h('span', 'helpdesk-team-legend-item');
item.appendChild(h('span', 'helpdesk-team-legend-dot helpdesk-team-legend-dot-warning'));
item.appendChild(h('span', '', labelCritical));
legend.appendChild(item);
}
if (hasTrend) {
const hint = labelTrendHint.replace('{days}', String(currentPeriod));
legend.appendChild(h('span', 'helpdesk-team-legend-item', '↑↓ ' + hint));
}
elCurrentCards.appendChild(legend);
}
}