Le barre di avanzamento visive offrono un’istantanea rapida dello stato di un processo, migliorano l’estetica e sono una sottile fonte di motivazione. Non sono una funzione nativa di Notion, ma possiamo ottenerle combinando caratteri speciali con alcune funzioni di Notion e il risultato è davvero accattivante.
Funzioni necessarie
Per creare le barre di avanzamento, utilizzeremo queste tre funzioni.
slice(testo, numero, numero)
La funzione slice() ci restituisce un segmento o una parte del testo che le abbiamo fornito. Questa funzione richiede almeno due parametri, anche se opzionalmente possiamo usarne tre:
- Testo originale da cui otterremo una parte.
- Punto di inizio, dove il primo carattere è
0. - Punto finale (opzionale)
Esempio 1: slice("La Colmena Tecnológica.", 3, 10) → «Colmena»
Esempio 2: slice("La Colmena Tecnológica.", 11, 22) → «Tecnológica»
Anche gli spazi bianchi contano come un carattere. Il parametro punto finale, a differenza del punto di inizio, non include il carattere, per questo per includere il carattere finale dovremo mettere la posizione subito dopo di esso.
round(numero)
La funzione round() arrotonda un numero decimale fornito all’intero più vicino.
Esempio 1: round( 3.2 ) → 3
Esempio 2: round( 3.5 ) → 4
format(valore)
La funzione format() converte un numero o una data fornita in una stringa di testo.
Esempio: format( 20 ) → "20"
Proprietà percentuale
Per visualizzare i tuoi progressi, devi prima calcolarli come percentuale all’interno di una proprietà indipendente.
Per ogni progetto nel tuo database, potresti avere una proprietà per le unità totali richieste per il completamento, e poi un’altra proprietà per le unità attualmente completate.
In una proprietà Progresso %, dividiamo le unità completate per le unità totali:
prop("Unidades completadas") / prop("Unidades totales")
Qui puoi vedere come eliminare i decimali antiestetici in una formula che ci dia come risultato una percentuale.
round(100 * prop("Unidades completadas") / prop("Unidades totales")) / 100
Caratteri speciali per creare la nostra barra di avanzamento
La barra di avanzamento includerà caratteri speciali per rappresentare i segmenti completi e incompleti. Anche se puoi sceglierli a tuo piacimento, qui ti lascio alcuni suggerimenti:
- Sfumati → ▓░
- Stelle → ★☆
- Cerchi → ●○
Con la proprietà Progresso % creata e i caratteri speciali determinati, possiamo già creare la barra di avanzamento. Crea una nuova proprietà Formula, assegnale il nome Progresso e poi aggiungi questa formula:
Codice con caratteri sfumati
slice("▓▓▓▓▓▓▓▓▓▓", 0, round(prop("Progreso %") * 10)) + slice("░░░░░░░░░░", 0, 10 - round(prop("Progreso %") * 10)) + " " + format(round(prop("Progreso %") * 100)) + "%"
Codice con caratteri Stelle
slice("★★★★★★★★★★", 0, round(prop("Progreso %") * 10)) + slice("☆☆☆☆☆☆☆☆☆☆", 0, 10 - round(prop("Progreso %") * 10)) + " " + format(round(prop("Progreso %") * 100)) + "%"
Codice con caratteri Cerchi
slice("●●●●●●●●●●", 0, round(prop("Progreso %") * 10)) + slice("○○○○○○○○○○", 0, 10 - round(prop("Progreso %") * 10)) + " " + format(round(prop("Progreso %") * 100)) + "%"
Devi solo sostituire i simboli nella formula con quelli che preferisci.