Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

Add analytics page showing productivity trends 📊

Abierto Apto para principiantes
  • ¿Algo no está bien?
#627 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 2 días

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
2/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
85/100
Tipo de issue
Nueva funcionalidad
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
javascript, react
Área
frontend

Línea de trabajo

Empieza por la nueva página en client/src/pages/Analytics.jsx y lee los componentes existentes de tareas y tableros para confirmar cómo useBoard expone las tareas y sus campos de fecha. Después, revisa App.jsx para conocer las convenciones de rutas y añade la ruta protegida /analytics solicitada. El trabajo estará terminado cuando la página muestre el recuento semanal de tareas completadas y la ruta se renderice para un usuario autenticado.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

enhancement good first issue

Add analytics page showing productivity trends 📊

File: client/src/pages/Analytics.jsx (new file)

No way to see productivity over time 💀
How many tasks done per week? fr!!

Fix: create Analytics.jsx page:
const Analytics = () => {
const { tasks } = useBoard()

// group tasks completed by week:
const weeklyData = tasks
.filter(t => t.status === 'done')
.reduce((acc, task) => {
const week = new Date(task.updatedAt)
week.setDate(week.getDate() - week.getDay())
const key = week.toLocaleDateString()
acc[key] = (acc[key] || 0) + 1
return acc
}, {})

// avg completion time per priority:
const avgTime = ['high','medium','low'].map(p => ({
priority: p,
avg: tasks
.filter(t => t.priority === p
&& t.status === 'done')
.reduce((acc, t) => acc +
(new Date(t.updatedAt) - new Date(t.createdAt))
, 0) /
tasks.filter(t => t.priority === p
&& t.status === 'done').length
}))

return (



📊 Analytics


{/* render charts using CSS bars */}
{Object.entries(weeklyData).map(([week, count]) => (


{week}

<div className="h-4 bg-purple-500/30 rounded"
style={{ width: ${count * 20}px }}
/>

{count} tasks


))}

)
}

Add route in App.jsx:
<Route path="/analytics"
element={} />

~40 lines! No backend needed 🎯
No chart library needed — pure CSS bars!! 🔥

Lenguaje dominante
JavaScript
Estrellas
39
Forks
105
Merge medio
1 d 11 h
PR fusionados (30 d)
47

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de anoopcodehack/DevBoard

Todos los issues de anoopcodehack/DevBoard

Issues similares

Más issues de JavaScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.