@@ -280,3 +292,114 @@ function renderHistorySection() {
backgroundColor: chartsManager.personColor(p), borderRadius: 3
})), { plugins:{ legend:{ position:'bottom'} }, scales:{ x:{stacked:true,grid:{display:false}}, y:{stacked:true} } });
}
+
+// ── QA SECTION ─────────────────────────────────────────────────────────────
+function renderQASection() {
+ const data = api.data;
+ if (!data || !data.qaData) return;
+
+ const qa = data.qaData;
+
+ // ── KPIs ──────────────────────────────────────────────────────────────────
+ document.getElementById('kpi-qa-tickets').textContent = qa.tickets ?? '—';
+ document.getElementById('kpi-qa-avg').textContent = qa.avgTimeQa != null ? qa.avgTimeQa + 'hs' : '—';
+ document.getElementById('kpi-qa-rtqa').textContent = qa.avgTimeRtqa != null ? qa.avgTimeRtqa + 'hs' : '—';
+ document.getElementById('kpi-qa-returned').textContent = qa.ticketsReturned ?? '—';
+
+ const pctRet = qa.tickets > 0 ? ((qa.ticketsReturned / qa.tickets) * 100).toFixed(1) : 0;
+ document.getElementById('kpi-qa-returned-pct').textContent =
+ `${pctRet}% del total pasó por QA más de una vez`;
+
+ // ── GRÁFICO 1: Distribución de tiempos en QA (doughnut) ───────────────────
+ const buckets = { '<30min': 0, '30min–2hs': 0, '2–8hs': 0, '>8hs': 0 };
+ (qa.issues || []).forEach(i => {
+ const hs = i.timeQa;
+ if (hs < 0.5) buckets['<30min']++;
+ else if (hs < 2) buckets['30min–2hs']++;
+ else if (hs < 8) buckets['2–8hs']++;
+ else buckets['>8hs']++;
+ });
+ chartsManager.drawDoughnutChart(
+ 'qaDist', 'chartQaDist',
+ Object.keys(buckets),
+ Object.values(buckets),
+ ['#36b37e', '#00b8d9', '#ff8b00', '#ff5630']
+ );
+
+ // ── GRÁFICO 2: Devueltos vs Aprobados (doughnut) ──────────────────────────
+ const aprobados = qa.tickets - qa.ticketsReturned;
+ chartsManager.drawDoughnutChart(
+ 'qaReturned', 'chartQaReturned',
+ ['✅ Aprobados directo', '🔄 Devueltos (>1 vez en curso)'],
+ [aprobados, qa.ticketsReturned],
+ ['#36b37e', '#ff5630']
+ );
+
+ // ── GRÁFICO 3: Tiempo promedio QA mes a mes (line) ────────────────────────
+ const qaMonths = Object.keys(qa.monthlyAvgQa || {}).sort();
+ chartsManager.drawLineChart(
+ 'qaMonthly', 'chartQaMonthly',
+ qaMonths,
+ [{
+ label: 'Prom. tiempo en QA (hs)',
+ data: qaMonths.map(m => qa.monthlyAvgQa[m] || 0),
+ borderColor: '#6554c0',
+ backgroundColor: 'rgba(101,84,192,.12)',
+ fill: true,
+ pointBackgroundColor: '#6554c0',
+ borderWidth: 2,
+ }],
+ { plugins:{ legend:{ display:false } }, scales:{ x:{grid:{display:false}}, y:{ beginAtZero:true } } }
+ );
+
+ // ── GRÁFICO 4: Tiempo en cola RTQA mes a mes (bar) ────────────────────────
+ const rtqaMonths = Object.keys(qa.monthlyAvgRtqa || {}).sort();
+ chartsManager.drawBarChart(
+ 'rtqaMonthly', 'chartRtqaMonthly',
+ rtqaMonths,
+ [{
+ label: 'Prom. tiempo en cola RTQA (hs)',
+ data: rtqaMonths.map(m => qa.monthlyAvgRtqa[m] || 0),
+ backgroundColor: '#00b8d9',
+ borderRadius: 4,
+ }],
+ { plugins:{ legend:{ display:false } }, scales:{ x:{grid:{display:false}}, y:{ beginAtZero:true } } }
+ );
+
+ // ── TABLA de tickets QA ───────────────────────────────────────────────────
+ const host = api.data?.config?.host || 'invera.atlassian.net';
+ const tbody = document.getElementById('tableQA');
+ tbody.innerHTML = '';
+
+ const sorted = [...(qa.issues || [])].sort((a, b) => b.timeQa - a.timeQa);
+
+ if (sorted.length === 0) {
+ tbody.innerHTML = '
| No hay tickets con datos de QA en este período |
';
+ return;
+ }
+
+ sorted.forEach(i => {
+ const isCritical = i.timeQa > 4;
+ const isReturned = i.timesReturned > 1;
+ const jiraUrl = `https://${host}/browse/${i.key}`;
+
+ const statusLabel = i.status === 'done'
+ ? '
✅ Done'
+ : i.status === 'indeterminate'
+ ? '
🔵 En curso'
+ : '
⏳ Pendiente';
+
+ const returnBadge = isReturned
+ ? `
🔄 ${i.timesReturned}x`
+ : `
1x`;
+
+ tbody.innerHTML += `
+ | ${i.key} |
+ ${i.summary} |
+ ${i.timeQa}hs${isCritical ? ' ⚠️' : ''} |
+ ${i.timeRtqa > 0 ? i.timeRtqa + 'hs' : '—'} |
+ ${returnBadge} |
+ ${statusLabel} |
+
`;
+ });
+}
diff --git a/js/charts.js b/js/charts.js
index e58ba85..ed6f4e0 100644
--- a/js/charts.js
+++ b/js/charts.js
@@ -43,5 +43,42 @@ export const chartsManager = {
...options,
}
});
- }
+ },
+
+ drawDoughnutChart(id, canvasId, labels, data, backgroundColors, options = {}) {
+ this.destroyChart(id);
+ const ctx = document.getElementById(canvasId);
+ if (!ctx) return;
+
+ this.instances[id] = new Chart(ctx, {
+ type: 'doughnut',
+ data: {
+ labels,
+ datasets: [{ data, backgroundColor: backgroundColors, borderWidth: 2, borderColor: '#fff' }],
+ },
+ options: {
+ responsive: true,
+ maintainAspectRatio: false,
+ plugins: { legend: { position: 'bottom', labels: { font: { size: 11 } } } },
+ ...options,
+ }
+ });
+ },
+
+ drawLineChart(id, canvasId, labels, datasets, options = {}) {
+ this.destroyChart(id);
+ const ctx = document.getElementById(canvasId);
+ if (!ctx) return;
+
+ this.instances[id] = new Chart(ctx, {
+ type: 'line',
+ data: { labels, datasets },
+ options: {
+ responsive: true,
+ maintainAspectRatio: false,
+ tension: 0.4,
+ ...options,
+ }
+ });
+ },
};