Admin

Estado: Beta

Actividad de la semana

La gráfica del panel del admin con las reglas del skill de dataviz: una serie sin leyenda, la barra de hoy en el acento y el resto en un gris de baja énfasis derivado del propio acento, barras de 24px con remate de 4px, etiquetas solo donde importan y un tooltip por barra al pasar o enfocar. "Ver tabla" muestra la misma información en una tabla, sin JS.

Actividad de la semana 488 reservas en total
Ver tabla
Actividad de la semana (tabla)
Día Reservas Clases
Viernes 9 92 8 clases
Sábado 10 81 8 clases
Domingo 11 94 8 clases
Lunes 12 83 8 clases
Martes 13 54 6 clases
Miércoles 14 52 3 clases
Jueves 15 hoy 32 2 clases

app/views/… (la demo de arriba)

<%# Los últimos 7 días, como los arma Admin::DashboardController (@weekly_classes). %>
<% week = (0..6).map { |i| Date.current - 6 + i } %>
<% bookings = [ 92, 81, 94, 83, 54, 52, 32 ] %>
<% classes = [ 8, 8, 8, 8, 6, 3, 2 ] %>
<div class="w-full max-w-xl">
  <%= render Ui::BarChartComponent.new(
        title: "Actividad de la semana", unit: "reservas", unit_one: "reserva", sublabel_header: "Clases",
        data: week.each_with_index.map { |day, i|
          { label: I18n.l(day, format: "%a").capitalize, long_label: I18n.l(day, format: "%A %-d").capitalize,
            value: bookings[i], sublabel: "#{classes[i]} #{classes[i] == 1 ? 'clase' : 'clases'}", current: day == Date.current }
        }) %>
</div>

Qué hace

  • Énfasis: hoy en el acento; el resto en gris derivado del acento (se adapta a cualquier marca).
  • Escala con tope «limpio» (1, 2, 2.5, 5 × 10ⁿ) y tres líneas finas de referencia.
  • Etiquetas selectivas — la barra de hoy y la más alta; el resto vive en el tooltip y la tabla.
  • Las barras crecen con resorte la primera vez que se ven; con movimiento reducido aparecen de golpe.
  • Colores validados con el script de dataviz contra las tarjetas de carbon, eclipse y umbra en claro y oscuro.

Props

Nombre Tipo Default Descripción
data Array<{ label:, value:, sublabel:, current:, long_label: }> — Una barra por elemento; current: la que va en el acento (hoy). long_label se lee en el tooltip y la tabla.
title / subtitle String subtitle: total + unit El título nombra la serie (no hay leyenda).
unit / unit_one String "" / unit sin "s" Unidad del valor en plural y singular: «32 reservas», «1 reserva».
label_header / sublabel_header String "Día" / "Detalle" Encabezados de la tabla equivalente.

Accesibilidad