¿Qué día de la semana completas más hábitos? Con flatMap y reduce en JavaScript puedes procesar los registros de un habit tracker y descubrir tu día más productivo antes de graficarlo. Esta guía muestra cómo transformar arrays anidados en estadísticas útiles para tu proyecto.
Cómo preparar los datos de un habit tracker antes de calcular
Antes de calcular nada, necesitas la lista completa de hábitos, no la filtrada. La idea es que la gráfica refleje el histórico total, aunque el usuario aplique filtros en la interfaz. Si prefieres que reaccione al filtro, puedes usar listFiltered, pero lo estándar es trabajar con listHabits.
El primer paso es definir un arreglo con los nombres de los días de la semana en el orden que usarás para mapear posiciones. En Latinoamérica lo natural es empezar por lunes y cerrar con domingo [02:15].
Por qué el orden de los días importa en el array
Cada posición del arreglo funciona como un índice directo. Si consultas la posición 0 obtienes lunes, en la 1 martes, y así hasta domingo. Esto te permite después mapear cualquier fecha a su día correspondiente sin lógica adicional.
¿Qué hace flatMap en JavaScript? Aplica una función a cada elemento de un array y aplana el resultado un nivel. Si tienes un array de arrays, te devuelve todos los elementos en una sola dimensión.
Cómo usar flatMap para unir los logs de todos los hábitos
Cada hábito tiene su propio arreglo de logs con los registros diarios. El problema es que necesitas una sola dimensión para procesar todo junto. Aquí entra flatMap.
Al aplicar flatMap sobre la lista de hábitos y devolver habit.logs, obtienes un único array con todos los registros de todos los hábitos combinados [04:20]. Es la diferencia clave entre map, que te dejaría un array de arrays, y flatMap, que aplana automáticamente.
map: retorna un array de arrays cuando cada elemento es una colección.flatMap: aplica la transformación y aplana un nivel en el mismo paso.- El resultado queda listo para pasar al siguiente método sin bucles anidados.
Con ese array plano ya puedes empezar a agrupar por día de la semana.
Cómo agrupar logs por día usando reduce
El objetivo es un diccionario donde cada clave sea un día (lunes, martes, etc.) y el valor sea la cantidad de hábitos completados ese día. Este patrón de agrupamiento ya lo has visto antes, y reduce es la herramienta indicada.
El acumulador arranca vacío. En cada iteración tomas el log, identificas su día de la semana usando el índice del array de nombres, y sumas al grupo correspondiente. Al final tienes las estadísticas agrupadas listas para graficar.
¿Cuándo usar reduce en lugar de filter y map? Cuando necesitas transformar una lista en un objeto, un número o cualquier estructura que no sea otro array del mismo tamaño. Agrupar y contar son casos clásicos de reduce.
Qué hacer cuando aparece un error de naming en el método
Durante la implementación es fácil equivocarse llamando a un método inexistente. En el ejemplo, la función correcta era listHabits y no otro nombre similar [06:45]. TypeScript ayuda a detectar estos errores antes de ejecutar el código, algo que apreciarás más adelante cuando tu proyecto crezca.
Si ves un error en consola tras un hard reload, revisa primero los nombres en tu archivo de servicio. Ahí suelen estar definidas las funciones como crear hábito, removerlos y listar.
Cómo renderizar las estadísticas del día más productivo
Una vez que la función devuelve el diccionario agrupado, creas un nuevo renderer dedicado a esas estadísticas. Por ahora basta con imprimir el resultado en consola para validar que el agrupamiento funciona.
Este render se suma a los que ya tienes en el proyecto: el del quote, el de la tabla de hábitos y ahora el del histograma. Cada uno se ejecuta de forma independiente cuando cambia el estado.
- Renderer del quote motivacional.
- Renderer de la tabla con el tracker actual, la racha y las estadísticas.
- Renderer nuevo para el histograma de días productivos.
Al revisar la salida verás qué días concentran más hábitos completados. En el ejemplo, domingo y jueves aparecen como los más activos según los registros existentes [08:10].
Qué sigue después de tener el histograma en consola
El siguiente paso es visualizarlo. En vez de armar el gráfico con HTML plano, usarás un motor de gráficas que renderice un bar chart con los datos ya procesados. La lógica de cálculo queda intacta; solo cambia la capa de presentación.
Cuéntame en los comentarios qué día crees que será tu más productivo antes de correr el cálculo y cuál terminó siendo en realidad.
