lukaszraczylo/traefik-llmgateway
1
0
Fork 0
mirror of https://github.com/lukaszraczylo/traefik-llmgateway.git synced 2026-10-15 05:29:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(webui): compact usage-count formatting

Browse Source 
Operator scope addition: raw token/request counts reaching millions/
billions were unreadable as bare digits. formatCompactCount (lib/
format.ts, shipped in the previous commit alongside this feature's own
helpers) renders an SI-style label: below 10,000 the exact integer with
thousands separators, at or above it three significant figures with a
k/M/B suffix ("12.3k", "456k", "1.23M", "45.6M", "1.23B") —
every digit past the third significant one is FLOORED, never rounded,
the same honesty rule formatRatePercent already applies to the
success-rate badge: a count of 999,950 must read "999k", never
"1,000k", since it has not actually crossed that boundary.

CompactNumber.vue is the one shared, reusable presentational component
(component-first: no per-call-site wrapper markup) — renders the
compact form as text, with the exact value on both title and aria-label,
mirroring ProviderRateBadge.vue/ModelChip.vue's own hover-parity
pattern.

Applied everywhere a count renders: usage-columns.ts's numericColumn
(reqMin/reqDay/tokIn-out per day and month — cost columns explicitly
opt out via a new compact:false argument, since formatCost already
shows full precision), target-columns.ts's MCP/agent request counters,
UsageView.vue's Total card and group-accordion trigger/detail stat
grid, and UsageChart.vue's Chart.js y-axis ticks (compact only — no
room for the raw figure on an axis label) and tooltip labels (compact
form WITH the precise raw value alongside, e.g. "Tokens in: 1.23M
(1,234,567)").

Sorting is unaffected by construction: every numericColumn's accessorFn
still returns the raw number (what getSortedRowModel actually sorts by)
regardless of what the cell renders — usage-columns.spec.ts pins this
directly, including a sort-order assertion that would fail under a
lexicographic (string) sort but passes under the numeric one.
This commit is contained in:
lukaszraczylo
2026-08-22 01:36:48 +01:00
parent eac0862d68
commit 040ff40ae0
6 changed files with 181 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webui/src/components/CompactNumber.vue
+28
View File
@@ -0,0 +1,28 @@
<script setup lang="ts">
import { computed } from 'vue'
import { formatCompactCount, formatExactInt } from '@/lib/format'
/**
* CompactNumber renders a large raw token/request count in its compact
* SI-style form ("1.23M") while carrying the exact value via both
* `title` (mouse hover) and `aria-label` (keyboard/screen-reader parity
* — the same established pattern ProviderRateBadge.vue and ModelChip.vue
* already apply to their own hover detail). Used anywhere a usage count
* renders: DataTable numeric columns (usage-columns.ts, target-
* columns.ts, via `h(CompactNumber, { value })`), the Usage tab's Total
* card, and a group accordion's trigger/detail stat grid (UsageView.vue).
*
* Cost figures are NOT this component's concern — formatCost already
* shows full 4-decimal precision, so there is nothing to compact or
* disambiguate with a title there; only token/request COUNTS use this.
*/
const props = defineProps<{ value: number }>()
const compact = computed(() => formatCompactCount(props.value))
const exact = computed(() => formatExactInt(props.value))
</script>
<template>
<span :title="exact" :aria-label="exact">{{ compact }}</span>
</template>