57 lines
3.0 KiB
Plaintext
57 lines
3.0 KiB
Plaintext
<%# locals: a, b (Analytics::OperacaoMetricas), label_a, label_b %>
|
||
<%
|
||
linhas_cmp = [
|
||
{ nome: 'Total de Entregas', a: a.total, b: b.total, maior_melhor: true, suf: '' },
|
||
{ nome: 'Sucesso', a: a.sucesso, b: b.sucesso, maior_melhor: true, suf: '' },
|
||
{ nome: 'Recusas', a: a.recusas, b: b.recusas, maior_melhor: false, suf: '' },
|
||
{ nome: 'Pendentes', a: a.pendentes, b: b.pendentes, maior_melhor: false, suf: '' },
|
||
{ nome: 'Taxa de Sucesso', a: a.taxa_sucesso, b: b.taxa_sucesso, maior_melhor: true, suf: '%' },
|
||
{ nome: 'Taxa de Insucesso', a: a.taxa_insucesso, b: b.taxa_insucesso, maior_melhor: false, suf: '%' }
|
||
]
|
||
%>
|
||
<div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-6 space-y-6">
|
||
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-2">
|
||
<h2 class="text-lg font-bold text-white">Comparativo</h2>
|
||
<div class="flex flex-wrap items-center gap-4 text-xs">
|
||
<span class="text-orange-400">● A · <%= label_a %> <span class="text-gray-500">(<%= a.total %>)</span></span>
|
||
<span class="text-blue-400">● B · <%= label_b %> <span class="text-gray-500">(<%= b.total %>)</span></span>
|
||
</div>
|
||
</div>
|
||
|
||
<%# Tabela comparativa (verde = melhor desempenho na linha) %>
|
||
<div class="overflow-x-auto">
|
||
<table class="w-full text-sm">
|
||
<thead>
|
||
<tr class="text-gray-400 text-left border-b border-white/5">
|
||
<th class="pb-2 font-medium pr-3">Métrica</th>
|
||
<th class="pb-2 font-medium pl-4 text-right text-orange-400">A</th>
|
||
<th class="pb-2 font-medium pl-4 text-right text-blue-400">B</th>
|
||
<th class="pb-2 font-medium pl-4 text-right">Δ (A−B)</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<% linhas_cmp.each do |l| %>
|
||
<% delta = (l[:a] - l[:b]).round(2) %>
|
||
<% melhor_a = l[:maior_melhor] ? l[:a] > l[:b] : l[:a] < l[:b] %>
|
||
<% melhor_b = l[:maior_melhor] ? l[:b] > l[:a] : l[:b] < l[:a] %>
|
||
<tr class="border-b border-white/5">
|
||
<td class="py-2 pr-3 text-gray-300"><%= l[:nome] %></td>
|
||
<td class="py-2 pl-4 text-right whitespace-nowrap font-semibold <%= melhor_a ? 'text-green-400' : 'text-white' %>"><%= l[:a] %><%= l[:suf] %></td>
|
||
<td class="py-2 pl-4 text-right whitespace-nowrap font-semibold <%= melhor_b ? 'text-green-400' : 'text-white' %>"><%= l[:b] %><%= l[:suf] %></td>
|
||
<td class="py-2 pl-4 text-right whitespace-nowrap text-gray-400"><%= delta > 0 ? "+#{delta}" : delta %><%= l[:suf] %></td>
|
||
</tr>
|
||
<% end %>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<%# Barras agrupadas A x B %>
|
||
<div class="relative h-72">
|
||
<canvas class="cmp-bars"
|
||
data-label-a="<%= label_a %>"
|
||
data-label-b="<%= label_b %>"
|
||
data-a="<%= [a.total, a.sucesso, a.recusas, a.pendentes].to_json %>"
|
||
data-b="<%= [b.total, b.sucesso, b.recusas, b.pendentes].to_json %>"></canvas>
|
||
</div>
|
||
</div>
|