Cómo crear un mini dashboard con reduce en JavaScript

Curso de Manipulación Avanzada de Datos con JavaScript

Contenido del curso

No sé dónde empezar

Grabacion

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0014:02

Cómo crear un mini dashboard con reduce en JavaScript

Curso de Manipulación Avanzada de Datos con JavaScript

Clase 14 de 24

Clase 14 / 24

Recursos

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.

Resumen

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

¿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?

¿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?

¿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.

Grabacion

Transformar, filtrar y agrupar arrays en JavaScript

Clona y ejecuta FreeHabits localmente

Map avanzado: item, index y array completo

Exportar CSV desde el navegador con map

Mutabilidad vs inmutabilidad en arrays de JavaScript

Cómo filter elimina elementos sin mutar arrays

Filtros dinámicos con FormData en JavaScript

Observer Pattern para filtros reactivos en JS

Filtros reactivos con Observer Pattern en JS

Persistencia con local storage y repository pattern

Cómo calcular promedios con reduce en JavaScript

Cómo crear un histograma con reduce

Object.groupBy vs reduce en JavaScript

Cómo crear un mini dashboard con reduce en JavaScript

flat y flatMap para arrays anidados en JS

flatMap y reduce para agrupar hábitos por día

Gráfica de barras con Chart.js en Vanilla JS

some, every e includes para validar arrays

Cómo convertir arrays y strings con join y split

Fusionar arrays sin mutar datos con spread

Inmutabilidad en arrays con spread y slice

Map vs Array: cuándo usar cada uno

Map + array de IDs para acelerar búsquedas

Cierre del curso de arrays avanzados en JS

Cómo crear un mini dashboard con reduce en JavaScript

Progreso del curso

Grabacion

Recursos

Recursos