ContainerWidgetCard
Presentational summary card for a single container in the Site Overview widgets grid: a header row (title / alarms / power), then either an offline / error b…
Presentational summary card for a single container in the Site Overview widgets grid: a header row (title / alarms / power), then either an offline / error banner or the body (optional vendor content, a miners summary, and a miner-activity chart).
Fully props-driven — no data fetching, formatting, or alarm math. The owning feature/hook shapes every value (including flash and summary).
import { ContainerWidgetCard } from "@tetherto/mdk-react-devkit";| Prop | Status | Type | Default | Description |
|---|---|---|---|---|
title | Required | string | — | Container display name shown in the header row. |
power | Optional | number | undefined | — | Latest container power draw in watts (rendered in kW by the top row). |
powerUnit | Optional | string | undefined | — | Power unit label shown next to the reading. |
alarms | Optional | Partial<Record<AlarmPropKey, Alert[]>> | undefined | — | Per-category alarm badges for the header row. |
statsErrorMessage | Optional | string | ErrorWithTimestamp[] | null | undefined | — | Raw stats error surfaced as a tooltip in place of the power reading. |
summary | Required | MinersSummaryParam[] | — | Pre-formatted miners-summary rows (label + display value incl. units). |
activity | Optional | ContainerActivityData | undefined | — | Miner-state activity counts for the embedded chart. |
isActivityLoading | Optional | boolean | undefined | — | Activity chart loading state. |
isActivityError | Optional | boolean | undefined | — | Activity chart error state. |
activityError | Optional | ContainerActivityError | undefined | — | Activity chart error payload. |
isOffline | Optional | boolean | undefined | — | Render the offline banner instead of the body. |
errorMessage | Optional | string | undefined | — | Container-level error message; renders an error banner instead of the body. |
flash | Optional | boolean | undefined | — | Critical-high alarm flash. Computed upstream (by the data hook) so the card stays presentational — never derive alarm state inside this component. |
vendorContent | Optional | React.ReactNode | — | Optional vendor-specific content (supply-liquid / tanks / immersion / MicroBT boxes) rendered above the miners summary. Kept as a slot so the generic card carries no per-model branching. |
onClick | Optional | (() => void) | undefined | — | Invoked when the card is clicked (navigation is the caller's concern). |
className | Optional | string | undefined | — | — |
Usage
Presentational summary card for a single container in the Site Overview widgets grid. Renders a header row (title / alarm badges / power), then either an offline / error banner or the body: an optional vendor-specific content slot, a miners summary, and a miner-activity chart.
Fully props-driven — no data fetching, formatting, or alarm math. The owning
feature/hook shapes every value (including flash and the pre-formatted
summary rows).
Notes
flashandsummaryare derived by the container-widgets data hook — the card never computes alarm state or formats values itself.- Use
vendorContentto slot in per-model boxes (SupplyLiquidBox,TanksBox,MicroBTWidgetBox,BitmainImmersionSummaryBox) without adding model branching to the generic card.
Example
/** * Runnable example for ContainerWidgetCard. */import { ContainerWidgetCard } from "@tetherto/mdk-react-devkit"export const ContainerWidgetCardExample = () => ( <div className="mdk-example-row"> <ContainerWidgetCard title="Container A" power={412_000} powerUnit="kW" summary={[ { label: "Hash Rate", value: "1.24 PH/s" }, { label: "Max Temp", value: "72 °C" }, { label: "Avg Temp", value: "65 °C" }, { label: "Efficiency", value: "32.5 W/TH/s" }, ]} activity={{ total: 210, online: 200, offline: 8, faulted: 2 }} /> <ContainerWidgetCard title="Container B" isOffline summary={[]} /> <ContainerWidgetCard title="Container C" errorMessage="Worker unreachable" summary={[]} /> </div>)