SiteStatsBar

Site-level summary strip composed from `WidgetTopRow` (title + power) and `GenericDataBox` (hashrate / miner-count / container-count). Designed to sit at the…

Site-level summary strip composed from WidgetTopRow (title + power) and GenericDataBox (hashrate / miner-count / container-count). Designed to sit at the top of a dashboard page above the chart cards.

import { SiteStatsBar } from "@tetherto/mdk-react-devkit";

Prop	Status	Type	Default	Description
`title`	Required	`string`	—	Site label rendered in the header row.
`power`	Optional	`number \| undefined`	—	Current site-level power consumption, in watts (or whatever `powerUnit` says).
`powerUnit`	Optional	`string \| undefined`	—	Display unit for `power` — defaults to `kW`.
`totalHashrate`	Optional	`number \| undefined`	—	Aggregate hashrate, in TH/s.
`hashrateUnit`	Optional	`string \| undefined`	—	Hashrate display unit — defaults to `TH/s`.
`minerCount`	Optional	`number \| undefined`	—	Total miner count across the site.
`containerCount`	Optional	`number \| undefined`	—	Total container count across the site.
`isLoading`	Optional	`boolean \| undefined`	—	Render a skeleton bar while data is loading.
`className`	Optional	`string \| undefined`	—	Optional class hook.

Usage

Site-level summary strip sitting at the top of a dashboard page. Composes WidgetTopRow (title + current power) and GenericDataBox (hashrate, miner count, container count) into one horizontal card.

Notes

Renders '—' for any stat that's undefined. Pass isLoading for a cleaner first-paint experience.
WidgetTopRow reads timezone formatting via useTimezoneFormatter, so this component must live inside an <MdkProvider> tree.

Example

/** * Runnable example for SiteStatsBar. * * Compose the four site-level stats (current power, hashrate, miner count, * container count) into one summary strip. Drives off pre-computed numbers * — the dashboard hooks compute these from `useHashrateChartData` / * `useSiteConsumptionChartData` / `useDevices`. */import { SiteStatsBar } from '@tetherto/mdk-react-devkit'export const SiteStatsBarExample = () => (  <SiteStatsBar    title="Site A"    power={1320}    powerUnit="kW"    totalHashrate={92.3}    hashrateUnit="TH/s"    minerCount={1024}    containerCount={4}  />)