Metrics
The network’s one way to show numbers: tiles, a trend line, ranked bars, percentiles, a split and a sortable table.
The specimen
Rendered by this site from the openvibe-shared it pins.
Example numbers, so every part shows. On Report, Exchange and Compare the same parts draw real ones.
OVMetrics.spark(values)OVMetrics.percentiles({ p50, p90, p95, n })OVMetrics.bars(rows, { format })OVMetrics.split(parts, { format })OVMetrics.table(rows, columns)The parts draw in the browser from /shared/ov-metrics.js; with script off, a page shows its own table of the same numbers.
Every part takes its colours from the theme (tokens only), fits 390 px, reads in both themes and holds still with motion off. A delta knows whether up is good: more calls is green, a slower first token is red, and both say it in words. A number nobody measured is a dash, never 0.
What shipped
4.232.0 shipped ov-metrics.js. Report, Exchange, Compare and the admin panel draw their AI and usage numbers with it: time to first token, tokens a second, success, cache share, cost per call and per task. The words come from OVMetrics.format, which servers also use, so 540 ms, $0.0042 and 86.0 tok/s read the same on every site.
“ov-metrics.js: the network’s one way to show numbers … nobody draws a chart of their own.” — the 4.232.0 change, for every AI call measured everywhere
The rules it carries out
159 Every number is drawn by ov-metrics, and a number nobody measured is a dash.20 Status is a word, never colour alone.1 Never show content that is not real.
Build it
<script src="/shared/ov-metrics.js" defer></script>
// tiles with a delta that knows whether up is good
slot.append(OVMetrics.tiles([
{ label: 'Calls', value: OVMetrics.format.count(18420), delta: 0.12, trend: daily },
{ label: 'Time to first token', value: OVMetrics.format.ms(row.ttft_ms.p50), sub: 'p95 ' + OVMetrics.format.ms(row.ttft_ms.p95), better: 'down' },
]));
// p50 and p95 on one scale, from report.ai-performance@1
slot.append(OVMetrics.percentiles(row.ttft_ms, { label: 'Time to first token' }));
// a sortable table; a numeric column can carry a bar
slot.append(OVMetrics.table(rows, [{ key: 'model', label: 'Model' }, { key: 'tps', label: 'Speed', numeric: true, bar: true, format: OVMetrics.format.tps }]));
// on a server: the same words
const { format } = require('openvibe-shared/ov-metrics');
format.ms(1310); // '1.3 s'