notionで進捗バーを作る時にはまったので、記録しておきます。
進捗バーの数が特定条件で増える問題
例えば、 notion 進捗バー などでググってよく出てくる以下のformulaを試してみます。
slice("●●●●●●●●●●", 0, round(prop("進捗率") * 10)) + slice("○○○○○○○○○○", 0, round((1 - prop("進捗率")) * 10)) + " " + format(round(prop("進捗率") * 100)) + "%"
※sliceの関数は、 slice("xxxxx", 【開始位置】, 【終了位置】) のかたちで抽出する値の開始位置から終了位置までの値を抜き出す関数です。
例えば、slice("1234567",0,3) だと、「123」という結果で、slice("1234567",2,4) だと「34」という結果になります。
実行結果
結果をみるとわかるとおり、端数が5の時、進捗バーの記号1つが増えています。
理由は、このformulaの場合、 進捗率の実数*10分の「●」の数を数えつつ、 1-進捗率の実数*10 の「○」の数をつないでいるため発生します。
例えば、24%（0.24）の時、 0.24*10=2．4 で「●」は2個になり、 (1-0.24)*10=7．6 で「○」は8個になります。この時小数点以下は四捨五入されています。
一方で、55%（0.55）の時、 0.55*10=5.5 で「●」は6個ですが、 (1-0.55)*10=4.5 で「○」は5個になります。その結果11個の記号を用いた進捗バーの表現になってしまいました。
この時の自分の思い出Tweet。
解決方法
このケースを考慮に入れた記述は次のformulaです。
めっちゃ簡単な記述あったので修正しました
slice("●●●●●●●●●●", 0, round(prop("進捗率") * 10)) + slice("○○○○○○○○○○", round(prop("進捗率") * 10))+ " " + format(round(prop("進捗率") * 100)) + "%"
「○」については開始位置だけを指定する記述にすれば十分でした。
例えば、55%の時、 0.55*10=5.5 で「●」は6個になります。 一方で「○」は 0.55*10=5.5 で6と計測されますが、開始位置だけを指定する記述 slice(text,number) にして、6番目の「○」以降を取得する（つまりは「○」は4個になる）ようにするだけで、十分でした。
slice("●●●●●●●●●●", 0, round(prop("進捗率") * 10)) + slice("○○○○○○○○○○○", 1, 11 - round(prop("進捗率") * 10)) + " " + format(round(prop("進捗率") * 100)) + "%"
中身は次のとおりです。
「●」の数を 数えるのはこれまで通り。
逆に「○」のときは、 【終了位置】を11-(進捗率*10) にして1つ数字を多く数えるように規定しつつ、「○」の【開始位置】を、0からではなく1からにすることで、余分に数えている数字の考慮を入れます。
更に四捨五入の計算を先に持ってくることで、5の端数のケースの処理を適切に行なっています。
例えば、55%の時、 0.55*10=5.5 で「●」は6個になりますが、 11-(round(0.55*10))=5 で、○の終了位置を5としつつ、開始位置を1に置くことで、「○」の数を4つとみなします。
この作業によって、○の数が余分に考慮されるケースを除外できます。
実行結果
もしよければ試してみてください。
Appendix
こんな記述方法もあります。最初はこちらも利用していましたが、この記事書いていたら、上記のシンプルな記述でも行けそうだということがわかりました。
if(round(prop("進捗率") * 100) < 5, "○○○○○○○○○○", if(round(prop("進捗率") * 100) >= 95, "●●●●●●●●●●", slice("●●●●●●●●●●", 0, round(prop("進捗率") * 10)) + slice("○○○○○○○○○○", 1, 11 - round(prop("進捗率") * 10)))) + " " + format(round(prop("進捗率") * 100)) + "%"
参考：
Copyright ©︎ Takao Tatematsu. All Rights Reserved. This website is made with 🄽 Notion and ⚡️ Super