What a page downloads, itemised, every figure counting up to its weight except the one that has nothing to count, which stays at zero while the total climbs past it.
Turn the props on the right; the snippet under them is what you would write to get what you see.
import { Monitoring24 } from "@/components/beste/component/monitoring24";
<Monitoring24
rows={[{"label":"Markup","kb":14},{"label":"Styles","kb":9},{"label":"Fonts","kb":31},{"label":"Animation library","kb":0}]}
/>The import and the props worth knowing about, in one place.
import { Monitoring24 } from "@/components/beste/piece/monitoring24";
<Monitoring24
surface="card"
bordered={true}
inverted={false}
title="Downloaded by this page"
rows={[
{
"label": "Markup",
"kb": 14
},
{
"label": "Styles",
"kb": 9
},
{
"label": "Fonts",
"kb": 31
},
{
"label": "Animation library",
"kb": 0
}
]}
totalLabel="Total"
unit="KB"
countMs={1100}
/>Single distribution bar splitting incident counts across critical, warning, and info segments with a mono legend.
Distributed trace timeline laying spans across a shared horizontal axis, each row labeled in monospace.
Utilization bar for CPU, memory, disk, or network with a recolorable fill and matching percentage label.
Rate-limit row that maps remaining capacity to a chain of filled and hollow dots, with a count beside it.