📝

9.10 progress bar 만들기

하루일과(1Step)
일과
시행(분)
목표치
%
30
30
1
30
60
0.5
30
60
0.5
 
만약 위와 같이 하루 일과를 만들었다고 생각해보도록 하겠습니다. table inline으로 만들었습니다. 이때 각각의 %는 ★★★☆☆☆☆☆☆☆를 사용하도록 하겠습니다. 별이 3개일 때에는 30%입니다. 을 누르고 한자 버튼을 누르면 나오는 특수문자입니다. (이것 말고도 ▓▓▓░░░░░░░를 사용하는 경우가 있습니다.)
notion imagenotion image
 
아래처럼 공식을 넣어주시면 해당 %가 별로 치환됩니다.
notion imagenotion image
 
하루일과(2 Step)
일과
시행(분)
목표치
%
Column
30
30
1
/ NaN%
30
60
0.5
/ NaN%
30
60
0.5
/ NaN%
 
👉
slice("★★★★★★★★★★", 0, round(prop("%") * 10)) + slice("☆☆☆☆☆☆☆☆☆☆", 0, round((1 - prop("%")) * 10)) + " / " + if(prop("목표치") == 0, "0", format(round(prop("%") * 100))) + "%"
 
여기서 사용한 수식을 하나씩 풀어보도록 하겠습니다.
slice("★★★★★★★★★★", 0, round(prop("%") * 10))
slice는 잘라내겠다는 것입니다. 최종적으로는 ★★★★★★★★★★에서 별점만큼, 나머지를 ☆로 채우면 되는 구조입니다. round는 반올림입니다. 위의 코드로 ★을 채웁니다. 곱하기 10을 한 이유는 총 10개의 별이기 때문에 그렇습니다.
 
slice("☆☆☆☆☆☆☆☆☆☆", 0, round((1 - prop("%")) * 10))
나머지 코드를 빈 별로 채웁니다. round((1 - prop("%")) * 10) 하게 되면 나머지 빈 별의 개수가 나오게 됩니다. 예를 들어 prop("%")가 0.53이라면 1- prop("%")는 0.47이 됩니다. 여기에 10을 곱했기 때문에 4.7이 되고 round를 했으니 5가 됩니다.
 
" / " + if(prop("목표치") == 0, "0", format(round(prop("%") * 100))) + "%"
뒤에 % 수치를 보여주기 위한 문자열입니다. 슬러쉬를 추가하고 if문으로 0인지 확인을 하고, 아니라면 format(round(prop("%") * 100))%와 붙여 출력합니다. format은 숫자를 문자로 바꿔주는 함수입니다.
 
영상으로도 찍어두었으니 Youtube 채널에서 확인 바랍니다.
 

 
참고한 포스팅 :
해당 글은 아래 2가지 포스팅을 참고하였습니다.