Ajustes de UX

This commit is contained in:
2026-06-30 18:05:20 -03:00
parent 96d01aa52a
commit 8d0d262bf8
4 changed files with 63 additions and 21 deletions

View File

@@ -110,7 +110,7 @@
<span class="text-xs text-gray-500 uppercase tracking-wider">Filtros ativos:</span>
<% @chips.each do |chip| %>
<span class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-orange-500/15 border border-orange-500/30 text-orange-300 text-xs">
<%= chip[:rotulo] %>: <strong class="text-white"><%= chip[:valor] %></strong>
<%= chip[:rotulo] %>: <strong class="text-white"><%= chip[:display] || chip[:valor] %></strong>
<%= link_to '✕', operacoes_dashboard_path(request.query_parameters.except(chip[:param])),
data: { turbo: false }, class: 'hover:text-white font-bold', title: 'Remover filtro' %>
</span>
@@ -269,6 +269,19 @@
const COR_A = '#f97316'; // comparativo: A = laranja da marca
const COR_B = '#3b82f6'; // comparativo: B = azul (contraste)
// Cross-filter por clique nos gráficos: recarrega a página com o filtro,
// preservando os demais parâmetros (mesma lógica dos links das tabelas).
function aplicarFiltroDash(novos) {
const url = new URL(window.location.href);
Object.keys(novos).forEach(function (k) {
const v = novos[k];
if (v === null || v === '') url.searchParams.delete(k);
else url.searchParams.set(k, v);
});
window.location.assign(url.toString());
}
function cursorPonteiro(e, els) { e.native.target.style.cursor = els.length ? 'pointer' : 'default'; }
// ── Charts (donut + barras + comparativo) ──
function initCharts() {
if (typeof Chart === 'undefined') return;
@@ -285,7 +298,15 @@
borderColor: '#1a1a1a', borderWidth: 2
}]
},
options: { responsive: true, maintainAspectRatio: false, cutout: '62%', plugins: { legend: { display: false } } }
options: {
responsive: true, maintainAspectRatio: false, cutout: '62%',
plugins: { legend: { display: false } },
onHover: cursorPonteiro,
onClick: function (e, els) {
if (!els.length) return;
aplicarFiltroDash({ f_resultado: els[0].index === 0 ? 'completed' : 'failed' });
}
}
});
});
@@ -302,6 +323,13 @@
},
options: {
responsive: true, maintainAspectRatio: false,
onHover: cursorPonteiro,
onClick: function (e, els) {
if (!els.length) return;
const el = els[0];
const iso = String(this.data.labels[el.index]).split('/').reverse().join('-');
aplicarFiltroDash({ f_data: iso, f_resultado: el.datasetIndex === 0 ? 'completed' : 'failed' });
},
scales: {
x: { stacked: true, ticks: { color: '#6b7280', maxTicksLimit: 12 }, grid: { color: 'rgba(255,255,255,0.04)' } },
y: { stacked: true, beginAtZero: true, ticks: { color: '#6b7280' }, grid: { color: 'rgba(255,255,255,0.04)' } }