diff --git a/web/src/expense.ts b/web/src/expense.ts index e65f22c..4276a8e 100644 --- a/web/src/expense.ts +++ b/web/src/expense.ts @@ -6,6 +6,7 @@ import _ from "lodash"; import { ajax, forEachMonth, + formatFixedWidthFloat, formatCurrency, formatCurrencyCrude, Posting, @@ -406,18 +407,18 @@ function renderCurrentExpensesBreakdown( .attr("class", "is-family-monospace") .text( (d) => - `${formatCurrency(d.total)} ${sprintf( - "%6.2f", - (d.total / total) * 100 + `${formatCurrency(d.total)} ${formatFixedWidthFloat( + (d.total / total) * 100, + 6 )}%` ), (update) => update .text( (d) => - `${formatCurrency(d.total)} ${sprintf( - "%6.2f", - (d.total / total) * 100 + `${formatCurrency(d.total)} ${formatFixedWidthFloat( + (d.total / total) * 100, + 6 )}%` ) .transition(t) diff --git a/web/src/utils.ts b/web/src/utils.ts index 1b91d83..2f0f6da 100644 --- a/web/src/utils.ts +++ b/web/src/utils.ts @@ -163,6 +163,13 @@ export function formatFloat(value, precision = 2) { return sprintf(`%.${precision}f`, value); } +export function formatFixedWidthFloat(value, width, precision = 2) { + if (obscure) { + value = 0; + } + return sprintf(`%${width}.${precision}f`, value); +} + export function forEachMonth( start: dayjs.Dayjs, end: dayjs.Dayjs,