はじめに

Notion Formula の第36回目は、「プログレスバーを表示するには?」を解説します。プログレスバー自体は数値プロパティに用意されましたが、いまだに文字で作成するプログレスバーは人気です。この例については、こちらの逆引きで紹介しています。

プログレスバーを表示するには?

○と●

最も簡単な○と●のプログレスバーは以下のようになります。rate を10倍して floor で切り捨てることで、99% でも全てが黒にならないようにしています。Formula 2.0 から追加された repeat メソッドのおかげで、substring を使う必要がなくなりました。

/* rate の値を10段階の数値に変換し、変数 x に代入 */
let(x, floor(prop("rate") * 10), 
 /* x 個の黒丸と 10-x 個の白丸を連結 */
 "●".repeat(x) + "○".repeat(10 - x)
)

rate	rate * 10	x	"●".repeat(x)	"○".repeat(10 - x)	最終
0	0	0		○○○○○○○○○○	○○○○○○○○○○
0.09	0.9	0		○○○○○○○○○○	○○○○○○○○○○
0.1	1	1	●	○○○○○○○○○	●○○○○○○○○○
0.2	2	2	●●	○○○○○○○○	●●○○○○○○○○
0.3	3	3	●●●	○○○○○○○	●●●○○○○○○○
0.4	4	4	●●●●	○○○○○○	●●●●○○○○○○
0.5	5	5	●●●●●	○○○○○	●●●●●○○○○○
0.6	6	6	●●●●●●	○○○○	●●●●●●○○○○
0.7	7	7	●●●●●●●	○○○	●●●●●●●○○○
0.8	8	8	●●●●●●●●	○○	●●●●●●●●○○
0.9	9	9	●●●●●●●●●	○	●●●●●●●●●○
0.99	9.9	9	●●●●●●●●●	○	●●●●●●●●●○
1	10	10	●●●●●●●●●●		●●●●●●●●●●

色付け

レベルに応じて●の色を変えた例です。7以上で緑、5以上で黄色、それ以下は赤になります。

lets(
 /* rate の値を10段階の数値に変換し、変数 x に代入 */
 x, floor(prop("rate") * 10),
 /* x の値に従って丸の色を選択し、変数 s に代入 */
 s, ifs(x >= 7, "🟢", x >= 5, "🟡", "🔴"),
   /* x 個の s と 10-x 個の白丸を連結 */
   s.repeat(x) + "○".repeat(10 - x)
)

rate	rate * 10	x	最終
0	0	0	○○○○○○○○○○
0.09	0.9	0	○○○○○○○○○○
0.1	1	1	🔴○○○○○○○○○
0.2	2	2	🔴🔴○○○○○○○○
0.3	3	3	🔴🔴🔴○○○○○○○
0.4	4	4	🔴🔴🔴🔴○○○○○○
0.5	5	5	🟡🟡🟡🟡🟡○○○○○
0.6	6	6	🟡🟡🟡🟡🟡🟡○○○○
0.7	7	7	🟢🟢🟢🟢🟢🟢🟢○○○
0.8	8	8	🟢🟢🟢🟢🟢🟢🟢🟢○○
0.9	9	9	🟢🟢🟢🟢🟢🟢🟢🟢🟢○
0.99	9.9	9	🟢🟢🟢🟢🟢🟢🟢🟢🟢○
1	10	10	🟢🟢🟢🟢🟢🟢🟢🟢🟢🟢

月の満ち欠け

こちらは色ではなく、月の満ち欠けの絵文字に変えたものです。

lets(
 /* rate の値を10段階の数値に変換し、変数 x に代入 */
 x, floor(prop("rate") * 10),
 /* x の値に従って丸の色を選択し、変数 s に代入 */
 s, ifs(x == 10, "🌕", x >= 7, "🌔", x >= 4, "🌓", "🌒"),
   /* x 個の s と 10-x 個の新月を連結 */
   s.repeat(x) + "🌑".repeat(10 - x)
)

rate	rate * 10	x	最終
0	0	0	🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑
0.09	0.9	0	🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑
0.1	1	1	🌒🌑🌑🌑🌑🌑🌑🌑🌑🌑
0.2	2	2	🌒🌒🌑🌑🌑🌑🌑🌑🌑🌑
0.3	3	3	🌒🌒🌒🌑🌑🌑🌑🌑🌑🌑
0.4	4	4	🌓🌓🌓🌓🌑🌑🌑🌑🌑🌑
0.5	5	5	🌓🌓🌓🌓🌓🌑🌑🌑🌑🌑
0.6	6	6	🌓🌓🌓🌓🌓🌓🌑🌑🌑🌑
0.7	7	7	🌔🌔🌔🌔🌔🌔🌔🌑🌑🌑
0.8	8	8	🌔🌔🌔🌔🌔🌔🌔🌔🌑🌑
0.9	9	9	🌔🌔🌔🌔🌔🌔🌔🌔🌔🌑
0.99	9.9	9	🌔🌔🌔🌔🌔🌔🌔🌔🌔🌑
1	10	10	🌕🌕🌕🌕🌕🌕🌕🌕🌕🌕

月の満ち欠け(グラデーション)

月のグラデーションに合わせて、20文字の文字列を作成しています。計算した x の場所から10文字ぶんだけ取得することで、グラデーションを示す10文字の数値列を得ます。その後、それぞれの数値に対応する月の絵文字に変換します。これは絵文字の文字列に対して substring がうまく切り出しができないためです。

/* rate の値を10段階の数値に変換し、変数 x に代入 */
let(x, floor(prop("rate") * 10),
 /* 連結した文字列から該当する部分を切り出し */
 "00000000001112223334".substring(x, x + 10)
 /* 各数値を月の状態に置き換え */
 .replaceAll("0", "🌑")
 .replaceAll("1", "🌒")
 .replaceAll("2", "🌓")
 .replaceAll("3", "🌔")
 .replaceAll("4", "🌕")
)

rate	rate * 10	x	切り出した数値	最終
0	0	0	0000000000	🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑
0.09	0.9	0	0000000000	🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑
0.1	1	1	0000000001	🌑🌑🌑🌑🌑🌑🌑🌑🌑🌒
0.2	2	2	0000000011	🌑🌑🌑🌑🌑🌑🌑🌑🌒🌒
0.3	3	3	0000000111	🌑🌑🌑🌑🌑🌑🌑🌒🌒🌒
0.4	4	4	0000001112	🌑🌑🌑🌑🌑🌑🌒🌒🌒🌓
0.5	5	5	0000011122	🌑🌑🌑🌑🌑🌒🌒🌒🌓🌓
0.6	6	6	0000111222	🌑🌑🌑🌑🌒🌒🌒🌓🌓🌓
0.7	7	7	0001112223	🌑🌑🌑🌒🌒🌒🌓🌓🌓🌔
0.8	8	8	0011122233	🌑🌑🌒🌒🌒🌓🌓🌓🌔🌔
0.9	9	9	0111222333	🌑🌒🌒🌒🌓🌓🌓🌔🌔🌔
0.99	9.9	9	0111222333	🌑🌒🌒🌒🌓🌓🌓🌔🌔🌔
1	10	10	1112223334	🌒🌒🌒🌓🌓🌓🌔🌔🌔🌕