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

<aside> 💡 ついに Notion 自体でプログレスバーと Ring が実装されました。このような小手先の技は必要なくなりました。一番下のテーブルの右二つが Notion 自体の機能で記述したものです。素晴らしいですね。

</aside>

<aside> 📁 [2022/07/11 修正]

0.7 の時に表示がおかしくなるとバグレポートがありました。確かにここだけ 6 しか付いていませんでした。

https://twitter.com/PmLvgn/status/1546429052831023105

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

</aside>

個人的にはあまり使う用途がないのですが、巷に紹介されているプログレスバーの実装がもう少し綺麗になりそうなので、自分で作ってみました。紹介されているほとんどのものが、複数の●を切り取る substring (Formula 1.0 までは slice という関数でした)と複数の○を切り取る substring を二つ使ったものです。そもそも最初の文字列として、●○を連結したものを使えば substring 一つで済むのにと思ったのが作成したきっかけです。

また、多くのものが round を使っているのですが、そうすると 99% でも全てが埋まってしまうのが気に入りませんでした。私の関数では ceil で意味上の切り捨て(符号反転しているため。ceil 自体は切り上げ)をしているので、99% だと ○が一つ残ります。

/* rate の値を10段階の数値に変換し、変数 x に代入 */
let(x, floor(prop("rate") * 10), 
 /* 連結した文字列から該当する部分を切り出し */
 "●●●●●●●●●●○○○○○○○○○○".substring(10 - x, 20 - x)
)

→ let floor *, multiply substring -, subtract

Formula 2.0 では repeat 関数が用意されました。このためこんな感じで簡単になります。

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

→ let floor *, multiply repeat -, subtract

その後、以下の記事で色付きにするネタを見つけました。絵文字だと slice が使えないとのことだったので、後から replaceAll を使うように修正してみました。

lets(
 /* rate の値を10段階の数値に変換し、変数 x に代入 */
 x, floor(prop("rate") * 10),
 /* x の値に従って丸の色を選択し、変数 s に代入 */
 s, ifs(x >= 7, "🟢", x >= 5, "🟡", "🔴"),
   /* 連結した文字列から該当する部分を切り出し */
   "●●●●●●●●●●○○○○○○○○○○".substring(10 - x, 20 - x)
   /* 黒丸を s に置き換え */
   .replaceAll("●", s)
)

→ let floor *, multiply ifs >=substring -, subtract replaceAll

こちらも repeat で書き換えると簡単になります。

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)
)

→ let floor *, multiply ifs >=repeat -, subtract

https://twitter.com/OmnaGupta/status/1505109093421391885

月の満ち欠けにしたものも作ってみました。○も置き換えています。

lets(
 /* rate の値を10段階の数値に変換し、変数 x に代入 */
 x, floor(prop("rate") * 10),
 /* x の値に従って月の色を選択し、変数 s に代入 */
 s, ifs(x == 10, "🌕", x >= 7, "🌔", x >= 4, "🌓", "🌒"),
   /* 連結した文字列から該当する部分を切り出し */
  "●●●●●●●●●●○○○○○○○○○○".substring(10 - x, 20 - x)
   /* 白丸を新月に置き換え */
  .replaceAll("○", "🌑")
   /* 黒丸を s に置き換え */
  .replaceAll("●", s)
)