Skip to content
bahtuiv0.6.0

<baht-meter>

Spent-against-budget meter. The fill carries severity (accent → warning → danger); the unfilled track is a lighter step of the same ramp. Severity is never color alone — warning and danger add an icon and the worded status. danger is strictly above its threshold, so spending exactly the budget reads as “At budget”, not “Over budget”.

Budget pace

<baht-meter label="Food" value="3180" max="4000" format="currency" expected="2933"></baht-meter>
<baht-meter label="Transport" value="3400" max="4000" format="currency" expected="2933"></baht-meter>
<baht-meter label="Fun" value="4200" max="3500" format="currency" expected="2566"></baht-meter>
NameTypeDefaultDescription
valuenumber0Amount used so far
maxnumber100The budget the value is measured against
labelstring''Sentence-case caption
formatChartFormat'number'number | currency | percent | compact
currencystring'THB'ISO code; THB renders ฿
thresholdsJSMeterThresholds{ warning: 0.8, danger: 1 }Fractions of max where the fill turns warning / danger
expectednumber | nullnullPace marker: where the value should be by now
over-labelstring'Over budget'Danger wording
at-labelstring'At budget'Wording when the value has reached max exactly
near-labelstring'Near limit'Warning wording