← Tu primera app
Lección 5 de 8 · 15 min

Gráficos y un panel de progreso

Qué gráfico usar para cada pregunta, cómo pedirlos sin librerías externas y cómo montar un panel que te motive a seguir apuntando.

Generado con IA15 min

Un gráfico, una pregunta

Un gráfico es útil si responde a una pregunta concreta de un vistazo. Si no sabes qué pregunta responde, sobra.

PreguntaGráfico
¿Voy mejorando con el tiempo?Línea por días, con la media de 7 días por encima
¿En qué se me va?Barras horizontales por categoría, de mayor a menor
¿Soy constante?Calendario con un cuadrado por día, más oscuro cuanto más hiciste
¿Llego a mi objetivo?Barra de progreso o línea con el objetivo marcado

La media de 7 días es tu mejor aliada: los días sueltos suben y bajan, pero la media enseña la tendencia real.

El prompt del panel

Prompt para el panelAñade a mi app una pestaña "Progreso" con dos gráficos dibujados con SVG, sin librerías externas: 1. [gráfico 1 y la pregunta que responde] 2. [gráfico 2 y la pregunta que responde] Requisitos: - Ejes con unidades y fechas legibles en el móvil. - Las barras empiezan en cero. - Selector de periodo: 7 días, 30 días y todo. - Colores que se lean bien en tema claro y oscuro. - Si no hay datos suficientes, un mensaje en lugar de un gráfico vacío. No cambies nada más y no toques cómo se guardan los datos.

Un panel que motive

  • Compara contigo, no con un ideal. «Mejor que el mes pasado» motiva más que «lejos del objetivo».
  • Enseña lo conseguido. Tu racha, tu récord, el total del año.
  • Pocas cosas. Dos gráficos que miras valen más que seis que no entiendes.
Prueba finalAbre el panel en el móvil, en tema oscuro, con el brillo bajo. Si no entiendes un gráfico en cinco segundos, simplifícalo o quítalo.
Practica · unos 9 min

Ahora tú

Hazlo sobre tu propia web y marca cada paso. Se guarda solo.

0 de 5 tareas hechas

Texto generado con inteligencia artificial (Claude, de Anthropic) a partir de la experiencia de Esclusa en proyectos. Comprueba la información antes de tomar decisiones. Cómo usamos la IA

@esclusa.ia