🧵

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

属性名
プログレスバー
返り値
String
逆引きNotionDB
関連するもの
💡
ついに Notion 自体でプログレスバーと Ring が実装されました。このような小手先の技は必要なくなりました。一番下のテーブルの右二つが Notion 自体の機能で記述したものです。素晴らしいですね。
📁
[2022/07/11 修正]
0.7 の時に表示がおかしくなるとバグレポートがありました。確かにここだけ 6 しか付いていませんでした。
99% の時に 10 個付けたくないので、round ではなく、ceil を使っていました。浮動小数点数の微妙な誤差によりものと思われます。実際に Ruby で確認してみるとこんな感じになりました。0.3 という数値であれば 3 になるのですが、(1-0.7)の演算をしてしまうと 4 になってしまいます。浮動小数点での計算はしない方がよさそうなので、発想を逆転させて floor したものを計算して、整数値の 10 から減算することにしました。以下の記事では内容を修正しています。
% irb irb(main):001:0> (0.7*10).ceil => 7 irb(main):002:0> (0.3*10).ceil => 3 irb(main):003:0> ((1-0.7)*10).ceil => 4
 
個人的にはあまり使う用途がないのですが、巷に紹介されているプログレスバーの実装がもう少し綺麗になりそうなので、自分で作ってみました。紹介されているほとんどのものが、複数の●を切り取る slice と複数の○を切り取る slice を二つ使ったものです。そもそも最初の文字列として、●○を連結したものを使えば slice 一つで済むのにと思ったのが作成したきっかけです。
また、多くのものが round を使っているのですが、そうすると 99% でも全てが埋まってしまうのが気に入りませんでした。私の関数では ceil で意味上の切り捨て(符号反転しているため。ceil 自体は切り上げ)をしているので、99% だと ○が一つ残ります。
また、Formula での % 表示の方法も説明しておきます。% の部分は Formula なのですが、Formula を作成する前に「Number」の設定をしておき、Format number で「Percent」を設定しています。その後、Formula を作成すると作成した数値は%表示することができます。
slice("●●●●●●●●●●○○○○○○○○○○", 10 - floor(prop("rate") * 10), 20 - floor(prop("rate") * 10))
その後、以下の記事で色付きにするネタを見つけました。絵文字だと slice が使えないとのことだったので、後から replaceAll を使うように修正してみました。
replaceAll(slice("●●●●●●●●●●○○○○○○○○○○", 10 - floor(prop("rate") * 10), 20 - floor(prop("rate") * 10)), "●", if(prop("rate") >= 0.7, "🟢", if(prop("rate") >= 0.5, "🟡", "🔴")))
月の満ち欠けにしたものも作ってみました。○も置き換えています。
replaceAll(replaceAll(slice("●●●●●●●●●●○○○○○○○○○○", 10-floor(prop("rate") * 10), 20-floor(prop("rate") * 10)), "○", "🌑"), "●", if(prop("rate") == 1, "🌕", if(prop("rate") >= 0.6666, "🌔", if(prop("rate") >= 0.3333, "🌓", "🌒"))))
全部書き換えるのもなんか違う気がして、こんな感じのものも作ってみました。slice の都合上右から月が満ちてきます。満月が出れば完成です。
replaceAll(replaceAll(replaceAll(replaceAll(replaceAll(slice("00000000001112223334", floor(prop("rate") * 10), floor(prop("rate") * 10) + 10), "0", "🌑"), "1", "🌒"), "2", "🌓"), "3", "🌔"), "4", "🌕")
 
Name
%
プログレスバー
色付き
全て置き換え
rate
moon progress
Pie
Bar
0
○○○○○○○○○○
○○○○○○○○○○
🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑
0
🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑
NaN
NaN
0.09
○○○○○○○○○○
○○○○○○○○○○
🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑
0.09
🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑
NaN
NaN
0.1
●○○○○○○○○○
🔴○○○○○○○○○
🌒🌑🌑🌑🌑🌑🌑🌑🌑🌑
0.1
🌑🌑🌑🌑🌑🌑🌑🌑🌑🌒
NaN
NaN
0.2
●●○○○○○○○○
🔴🔴○○○○○○○○
🌒🌒🌑🌑🌑🌑🌑🌑🌑🌑
0.2
🌑🌑🌑🌑🌑🌑🌑🌑🌒🌒
NaN
NaN
0.3
●●●○○○○○○○
🔴🔴🔴○○○○○○○
🌒🌒🌒🌑🌑🌑🌑🌑🌑🌑
0.3
🌑🌑🌑🌑🌑🌑🌑🌒🌒🌒
NaN
NaN
0.4
●●●●○○○○○○
🔴🔴🔴🔴○○○○○○
🌓🌓🌓🌓🌑🌑🌑🌑🌑🌑
0.4
🌑🌑🌑🌑🌑🌑🌒🌒🌒🌓
NaN
NaN
0.5
●●●●●○○○○○
🟡🟡🟡🟡🟡○○○○○
🌓🌓🌓🌓🌓🌑🌑🌑🌑🌑
0.5
🌑🌑🌑🌑🌑🌒🌒🌒🌓🌓
NaN
NaN
0.6
●●●●●●○○○○
🟡🟡🟡🟡🟡🟡○○○○
🌓🌓🌓🌓🌓🌓🌑🌑🌑🌑
0.6
🌑🌑🌑🌑🌒🌒🌒🌓🌓🌓
NaN
NaN
0.7
●●●●●●●○○○
🟢🟢🟢🟢🟢🟢🟢○○○
🌔🌔🌔🌔🌔🌔🌔🌑🌑🌑
0.7
🌑🌑🌑🌒🌒🌒🌓🌓🌓🌔
NaN
NaN
0.8
●●●●●●●●○○
🟢🟢🟢🟢🟢🟢🟢🟢○○
🌔🌔🌔🌔🌔🌔🌔🌔🌑🌑
0.8
🌑🌑🌒🌒🌒🌓🌓🌓🌔🌔
NaN
NaN
0.9
●●●●●●●●●○
🟢🟢🟢🟢🟢🟢🟢🟢🟢○
🌔🌔🌔🌔🌔🌔🌔🌔🌔🌑
0.9
🌑🌒🌒🌒🌓🌓🌓🌔🌔🌔
NaN
NaN
0.99
●●●●●●●●●○
🟢🟢🟢🟢🟢🟢🟢🟢🟢○
🌔🌔🌔🌔🌔🌔🌔🌔🌔🌑
0.99
🌑🌒🌒🌒🌓🌓🌓🌔🌔🌔
NaN
NaN
1
●●●●●●●●●●
🟢🟢🟢🟢🟢🟢🟢🟢🟢🟢
🌕🌕🌕🌕🌕🌕🌕🌕🌕🌕
1
🌒🌒🌒🌓🌓🌓🌔🌔🌔🌕
NaN
NaN