数据库模板语法分享 2 个仿 Notion 的数值显示图形：圆圈与条形

众所周知，在 Notion 中，数字类型可较为方便地显示为图形（条形或圆圈），便于查看，如图：

但由于思源笔记目前暂无该选项，翻阅了几篇模板语法的教程，受大佬文章（思源模板功能新人指南：模板语法 + 函数 + md 块语法）的启发，我也用模板列手搓了一个。

效果演示

实际在数据库中的使用效果：

模板代码

圆圈

.action{ $input := 70 }
.action{ $denominator := 100 }
.action{ $show_number := true }
.action{ $display_mode := ternary "none" "flex" (eq $input nil) }
.action{ $progress := ternary 0 (div (mul 100 ($input | int)) $denominator) (eq $input nil) }
.action{ $progress = ternary 100 $progress (gt $progress 100) }
.action{ $pi := 3.14159265358979323846264338327950288 }
.action{ $circumference := mulf 2 $pi 9 }
.action{ $mainOffset := subf $circumference (mulf (divf $progress 100) $circumference) }
.action{ $extraPadding := mulf $circumference 0.04 }
.action{ $bgOffsetLeft  := subf $mainOffset $extraPadding }
.action{ $bgOffsetRight := subf $mainOffset (divf $extraPadding 2) }
<div style="display: .action{ $display_mode }; flex-wrap: wrap; gap: 6px 8px; justify-content: end;">
    <div style="display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 6px 8px; line-height: 1.5; word-break: break-word;">
        .action{ ternary $input "" $show_number }
        <div role="progressbar" aria-valuenow=".action{ $progress }" style="height: 21px; width: 21px; pointer-events: auto;">
            <svg viewBox="0 0 21 21" color="transparent" style="width: 100%; height: 100%; transform: rotate(-90deg); transform-origin: 50% 50%;">
                <!-- 背景圆 -->
                <circle r="9" cx="10.5" cy="10.5" stroke-width="3" 
                    stroke="rgba(199, 198, 196, 0.5)" stroke-linecap="round" fill="transparent">
                </circle>
                <!-- 进度条底色 -->
                <circle r="9" cx="10.5" cy="10.5" stroke-width="3" 
                    stroke="rgba(231, 243, 248, 1)" stroke-linecap="round" stroke-dasharray=".action{ $circumference } .action{ $bgOffsetLeft }" stroke-dashoffset=".action{ $bgOffsetRight }" fill="transparent">
                </circle>
                <!-- 当前进度 -->
                <circle r="9" cx="10.5" cy="10.5" stroke-width="3" 
                    stroke="rgba(91, 151, 189, 1)" stroke-linecap="round" stroke-dasharray=".action{ $circumference }" stroke-dashoffset=".action{ $mainOffset }" fill="transparent">
                </circle>
                <!-- 进度文本 -->
                <text x="10.5" y="10.5" text-anchor="middle" 
                    dominant-baseline="middle" fill="rgba(120, 119, 116, 1)" font-size="0.75em" 
                    style="transform-origin: 50% 50%; transform: rotate(90deg);">
                </text>
            </svg>
        </div>
    </div>
</div>
​

条形

.action{ $input := 70 }
.action{ $denominator := 100 }
.action{ $show_number := true }
.action{ $display_mode := ternary "none" "flex" (eq $input nil) }
.action{ $progress := ternary 0 (div (mul 100 ($input | int)) $denominator) (eq $input nil) }
.action{ $progress = ternary 100 $progress (gt $progress 100) }
<div style="display: .action{ $display_mode }; flex-wrap: wrap; gap: 6px 8px; justify-content: end;">
    <div style="display: flex; flex-direction: row; align-items: center; justify-content: flex-end; gap: 6px 8px; line-height: 1.5; word-break: break-word; flex: 1 0 auto;">
        .action{ ternary $input "" $show_number }
        <div role="progressbar" aria-valuenow=".action{ $progress }" style="align-self: stretch; display: flex; align-items: center; justify-content: stretch; height: 21px; flex-grow: 1; max-width: 160px; pointer-events: auto;">
            <div style="position: relative; border-radius: 1000px; background-color: rgba(199, 198, 196, 0.5); width: 100%; overflow: hidden; height: 4px; min-height: 4px;">
                <div style="position: absolute; border-radius: 1000px; background-color: rgb(231, 243, 248); height: 100%; width: calc(.action{ $progress }% + 2px);">
                </div>
                <div style="position: absolute; border-radius: 1000px; background-color: rgb(91, 151, 189); height: 100%; width: .action{ $progress }%;">
                </div>
            </div>
        </div>
    </div>
</div>
​

变量说明

主要有 3 个需要关注的变量：

.action{ $input := 70 }
.action{ $denominator := 100 }
.action{ $show_number := true }

其中，

$input 代表输入值，可引用其他列，或通过前置模板动态计算得到；

$denominator 代表图形的 分母 ，通常来说 100 或 365 比较常用；

$show_number 代表图形左侧是否显示数值本身，可为 true 或 false 。

额外说明

图形左侧的数值，为原始输入值，在图形中展示时，会除以分母计算出百分比值并应用于图形。

所以在 $input 超过 $denominator 时，图形会显示"满"。