Cómo crear un mini dashboard con reduce en JavaScript

Convierte una lista de hábitos y sus logs en métricas claras con un mini dashboard en JavaScript. Aquí verás cómo aplicar reduce para condensar datos en un diccionario de estadísticas, usar un estado inicial sólido, y renderizar resultados que reaccionan a filtros y a datos persistidos en local storage. Además, incorpora apoyo de Gemini sin perder control del código.

¿Cómo crear un mini dashboard con reduce en JavaScript?

La función get dashboard stats procesa todos los hábitos y sus logs para devolver un único objeto con estadísticas. La idea es recorrer la lista y acumular, con un acumulador, los conteos y rachas relevantes en un solo lugar.

¿Cómo estructurar el estado inicial y el acumulador?

• Define un diccionario con valores base: totales y rachas en cero.
• Aplica reduce sobre la lista de hábitos para condensar todo en un único estado.
• Usa split operation para mantener referencia previa y sumar cambios sin perder datos.

function getDashboardStats(habits) {
  const initValue = {
    totalHabits: 0,
    totalChecks: 0,
    maxStreak: 0,
    currentStreakTotal: 0,
    activeHabits: 0,
  };

  return habits.reduce((acc, habit) => {
    return {
      ...acc, // split operation para migrar datos previos.
      // totalHabits: acc.totalHabits + 1,
      // totalChecks: acc.totalChecks + habit.logs.length, // si existen logs.
      // currentStreakTotal: acc.currentStreakTotal + calcularRacha(habit),
      // activeHabits: acc.activeHabits + (estaActivo(habit) ? 1 : 0),
      // maxStreak: MadMax(acc.maxStreak, rachaDe(habit)),
    };
  }, initValue);
}

¿Cómo calcular rachas y máximos con Mad Max?

La función Mad Max elige el número mayor entre dos valores. Así, en cada iteración te quedas con el máximo de rachas visto hasta ahora.

// Ejemplo conceptual de uso en el acumulador:
acc.maxStreak = MadMax(acc.maxStreak, nuevaRachaCalculada);

• Compara rachas calculadas por hábito contra el acumulado.
• Garantiza que el máximo refleje el valor más alto al procesar toda la lista.
• Mantiene el estado limpio y fácil de extender.

¿Cómo aplicar filtros y reactividad para estadísticas correctas?

Para que las estadísticas respeten el contexto visible, calcula sobre la lista filtrada. Si el filtro cambia, vuelve a ejecutar get dashboard stats y renderiza de nuevo. Con local storage, los datos de hábitos persisten tras recargar y el cálculo se rehace con los valores guardados.

¿Cómo filtrar antes de reducir?

• Toma la lista actual de hábitos según el filtro activo.
• Pásala a reduce para obtener estadísticas coherentes.
• Evita calcular con hábitos fuera del filtro.

const source = filteredHabits ?? habits;
const stats = getDashboardStats(source);

¿Cómo integrar local storage y suscripciones?

• Persiste hábitos en local storage para mantener estado entre sesiones.
• Recalcula estadísticas al iniciar y tras cada cambio de filtro.
• Suscribe el render para reaccionar a eventos del estado global.

Resultados observados al ejecutar y filtrar:

• Tres hábitos activos.
• Máximo de rachas: cuatro.
• Ocho checks totales.
• Total de hábitos: tres.

¿Cómo renderizar el dashboard y colaborar con AI sin perder control?

Se crea un método render dashboard stats para imprimir resultados y, luego, Gemini ayuda a proponer HTML y estilos del mini dashboard. Si el render de Canvas falla al enlazar estilos, copia el HTML y CSS sugeridos a index.html y styles.css, y ajusta el JS local para insertar las cards dinámicamente.

¿Cómo insertar HTML y estilos generados?

• Integra la nueva sección en index.html antes del registro principal.
• Copia los estilos marcados por comentarios en styles.css.
• Evita sobreescribir estructuras existentes al pegar fragmentos.

¿Cómo renderizar dinámicamente en app.js?

• Selecciona el contenedor por id.
• Construye el HTML con los valores de stats.
• Re-renderiza tras cambios de filtro o estado.

function renderDashboardStats(stats) {
  const el = document.getElementById('dashboard-stats');
  if (!el) return;
  el.innerHTML = `
    <div class="card">Total de hábitos: <strong>${stats.totalHabits}</strong></div>
    <div class="card">Checks: <strong>${stats.totalChecks}</strong></div>
    <div class="card">Máximo de rachas: <strong>${stats.maxStreak}</strong></div>
    <div class="card">Hábitos activos: <strong>${stats.activeHabits}</strong></div>
  `;
}

¿Qué prácticas y herramientas potencian la productividad?

• Usa Gemini o ChatGPT para esbozar UI, pero valida y ajusta el código.
• Prefiere IDEs con AI como Cursor o VSCode con capa gratuita.
• Reserva presupuesto para herramientas que aumentan productividad.
• Enfócate más en arquitectura, patrones y buenas prácticas.
• Delega escritura repetitiva y guía a la AI con prompts claros.

¿Te gustaría compartir cómo calculas tus métricas o cómo integras AI en tu flujo de trabajo? Escribe tus preguntas o mejoras y seguimos iterando juntos.