Barras de progreso en Notion para principiantes

Barras de progreso en Notion para principiantes

11 de agosto de 2021 · Daniel Somoza

image

Servicios Plantillas Blog Nosotros

Volvemos a la carga con un nuevo post en el blog y hoy os traemos algo que nos lleváis pidiendo hace algún tiempo y que, al fin, hemos tenido algo de tiempo para sacarlo adelante: las barras de progreso en Notion. Antes de entrar en materia, queremos avisar que se trata de un artículo para principiantes en el cual no entramos a analizar en profundidad cada una de las fórmulas. Si queréis un post más avanzado, nos lo podéis pedir por Twitter que estaremos más que encantados.

Volviendo al tema que nos ocupa, tanto para usos profesionales como personales, las barras de progreso son una de esas cosas que, a parte de ser estéticamente bonitas, nos ayudan mucho para conocer cuál es nuestro progreso respecto a un proyecto, el porcentaje de ejecución de un presupuesto o nuestro progreso respecto a la lectura de un libro.

En definitiva, se trata de algo que si queremos elevar nuestro nivel usando Notion, lo tenemos que saber hacer. Así que, sin más dilación, vamos con el tutorial paso a paso para crear barras de progreso en Notion.

Paso 1: Crear una tabla

Escribe "/" y selecciona la tabla que más te guste, ya sea "table", "Gallery" o la que mejor se adapte a lo que busques.

image

Paso 2: Añadir las dos propiedades numéricas

Una vez creada la tabla, tendrás que añadir dos columnas, las cuales serán propiedades numéricas "#" (Ver ejemplo "Progreso 1"). La primera deberá corresponder al estado actual de tu progreso (por eso, me gusta titular la columna como "Actual"). La segunda deberá corresponder al objetivo final que quieres cumplir, la cual suele llevar como título "Objetivo".

Cuando hayas creado las dos columnas numéricas antes mencionadas, será el momento de crear una tercera columna que llamaremos "Progreso" por ejemplo. Dicha columna deberá ser de tipo Fórmula

Una vez hayamos creado esta tercer columna será el momento de pasar al paso número 3.

Captura de pantalla de cómo añadir la propiedad numérica.
Captura de pantalla de cómo añadir la propiedad numérica.

Paso 3: Añadir la fórmula

Para crear barras de progreso en Notion hay muchas fórmulas posibles. Algunas serán más largas y más complicadas mientras que otras serán mucho más cortas y más sencillas. A continuación, os vamos a dar 3 fórmulas diferentes para que las podáis usar y adaptar a lo que podáis necesitar. Tanto desde el punto de vista estético como funcional.

1. Primera fórmula para crear barras de progreso en Notion

Dicho esto, esta es la primera fórmula que podéis añadir y que os va a funcionar perfectamente para un ejemplo como el que tenéis más abajo.

Sin entrar mucho en detalle sobre esta fórmula, podemos ver como el primer paso es hacer la división entre los días transcurridos y los días totales para obtener el porcentaje. Una vez obtenemos el porcentaje, creamos una función "if" en virtud de la cual si este porcentaje 0 y 10% se añade un cuadrado a la barra de progreso y así sucesivamente.

Fórmula nº 1 ↓

if(prop("Días transcurridos") / prop("Días totales") == 0, "0%", if(smallerEq(prop("Días transcurridos") / prop("Días totales"), 0.1), "■ " + format(round(prop("Días transcurridos") / prop("Días totales") * 100)) + "%", if(smallerEq(prop("Días transcurridos") / prop("Días totales"), 0.2), "■■ " + format(round(prop("Días transcurridos") / prop("Días totales") * 100)) + "%", if(smallerEq(prop("Días transcurridos") / prop("Días totales"), 0.3), "■■■ " + format(round(prop("Días transcurridos") / prop("Días totales") * 100)) + "%", if(smallerEq(prop("Días transcurridos") / prop("Días totales"), 0.4), "■■■■ " + format(round(prop("Días transcurridos") / prop("Días totales") * 100)) + "%", if(smallerEq(prop("Días totales") / prop("Días transcurridos"), 0.5), "■■■■■ " + format(round(prop("Días transcurridos") / prop("Días totales") * 100)) + "%", if(smallerEq(prop("Días transcurridos") / prop("Días totales"), 0.6), "■■■■■■ " + format(round(prop("Días transcurridos") / prop("Días totales") * 100)) + "%", if(smallerEq(prop("Días transcurridos") / prop("Días totales"), 0.7), "■■■■■■■ " + format(round(prop("Días transcurridos") / prop("Días totales") * 100)) + "%", if(smallerEq(prop("Días transcurridos") / prop("Días totales"), 0.8), "■■■■■■■■ " + format(round(prop("Días transcurridos") / prop("Días totales") * 100)) + "%", if(smallerEq(prop("Días transcurridos") / prop("Días totales"), 0.9), "■■■■■■■■■ " + format(round(prop("Días transcurridos") / prop("Días totales") * 100)) + "%", if(smallerEq(prop("Días transcurridos") / prop("Días totales"), 0.99), "■■■■■■■■■■ " + format(round(prop("Días transcurridos") / prop("Días totales") * 100)) + "%", if(prop("Días transcurridos") / prop("Días totales") == 1, " ✅", ""))))))))))))

Copy of Ejemplo 1

AñoDías transcurridosDías totalesProgreso
2020
365
365
2021
128
365
■ %
2022
0
365
0%

Fórmula más corta para crear barras de progreso en Notion

En este segundo ejemplo, vemos como la fórmula para crear la barra de progreso es mucho más corta y puede ser más sencilla para configurar. Además de lo anterior, hemos utilizado

Fórmula nº 2 ↓

(prop("Actual") / prop("Objetivo") >= 1) ? "Completado✅" : format(slice("✦✦✦✦✦✦✦✦✦✦", 0, floor(prop("Actual") / prop("Objetivo") * 10)) + format(slice("✧✧✧✧✧✧✧✧✧✧", 0, ceil(10 - prop("Actual") / prop("Objetivo") * 10)) + " " + format(round(prop("Actual") / prop("Objetivo") * 100)) + "%"))

Copy of Ejemplo 2

NameActualObjetivoProgreso
Libros leídos 2021
10
24
✧✧✧✧✧✧✧✧✧✧ %
Películas vistas 2021
4
50
✧✧✧✧✧✧✧✧✧✧ %
Podcasts escuchados 2021
32
32
Completado✅

Slider de progreso

Esta pedazo de fórmula sencilla y efectiva es de la gran Red Gregory. Si no la conocéis, os recomiendo mucho su canal de YouTube (en inglés) ya que es un genio con todo lo relacionado con las fórmulas.

Como podemos observar, se trata de una fórmula muy parecida a la que os propusimos en el ejemplo 2 utilizando las funciones "slice" y "floor" para crear una fórmula limpia y efectiva.

Fórmula nº3↓

slice("‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒", 0, floor(20 * prop("Capítulos Vistos") / prop("Total Capítulos"))) + "⬤" + slice("‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒", 0, 20 - floor(20 * prop("Capítulos Vistos") / prop("Total Capítulos"))) + " " + format(floor(100 * prop("Capítulos Vistos") / prop("Total Capítulos"))) + "%"

Copy of Ejemplo 3

SerieCapítulos VistosTotal CapítulosProgreso
Casa de Papel
22
30
‒‒⬤‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒ 24%
The Wire
23
50
‒‒‒‒‒‒‒‒⬤‒‒‒‒‒‒‒‒‒‒‒‒ 16%
Friends
240
240
⬤ %

Hasta aquí el artículo de hoy sobre cómo crear barras de progreso en Notion. Si queréis que hagamos un artículo con más barras de progresos y diferentes tipos de fórmulas, solo tenéis que decírnoslo por Twitter y estaremos más que encantados. Para acabar, comentaros que, a parte de las barras de progreso, otra buena manera de darle ese plus a vuestras páginas de Notion es mediante los iconos. Así que, aquí os dejamos 5 packs de iconos para Notion. Con esto nos despedimos y...

¡Hasta un próximo artículo!

Artículos relacionados

📦
✍️

© Diseñado y desarrollado con mucho 💙 en 🇦🇩 y 🇸🇻 usando Notion y ⚡️Super.