Stats

Single-value and grouped stat cards plus the combined miner metric layout used by the details view.

For miner identity (MinerInfoCard), see the details view overview. For fleet activity visualizations, see Charts. For per-chip thermal data, see Chips.

Prerequisites

• Complete the @tetherto/mdk-react-devkit installation and add the dependency

• Components on this page read live metrics from device.last.snap.stats on a Device

  Metric fields and adapter store hooks

Components

SingleStatCard

Single metric display card with primary, secondary, tertiary, and highlighted layout variants, plus optional flash animation for alerts.

Import

import { SingleStatCard } from '@tetherto/mdk-react-devkit/foundation'

Props

A tooltip is rendered automatically whenever value is set; pass tooltipText to override the label portion. Values longer than six characters get a --long-value modifier for narrower number formatting.

Use primary through tertiary for explorer and device metrics. Use highlighted for financial or reporting summary metric strips (same presentation as OSS MetricCard $isHighlighted, for example EBITDA sell-scenario tiles: large emphasized value, subdued label).

Basic usage

<SingleStatCard name="Temperature" value={42} unit="°C" />
<SingleStatCard name="Hash rate" value="95.5" unit="TH/s" />
<SingleStatCard name="Uptime" value="99.7" unit="%" />

Variants

<SingleStatCard name="Temperature" value={42} unit="°C" variant="primary" />
<SingleStatCard name="Fan speed" value={4200} unit="RPM" variant="secondary" />
<SingleStatCard name="Power" value={3250} unit="W" variant="tertiary" />

Highlighted (reporting metrics)

<SingleStatCard name="Revenue" value={4.2} unit="M$" variant="highlighted" />
<SingleStatCard name="OpEx" value={1.8} unit="M$" variant="highlighted" />
<SingleStatCard
  name="(Sell scenario - all BTC sold)"
  value={-123.123}
  unit="$"
  variant="highlighted"
  color="#FF8C42"
/>
<SingleStatCard name="Margin" value={57} unit="%" variant="highlighted" />

Alerts with flash

<SingleStatCard name="Temperature" value={92} unit="°C" color="red" flash />
<SingleStatCard name="Status" value="Overheat" color="#ff0000" superflash />

Row layout

<SingleStatCard name="Efficiency" value="32.5" unit="J/TH" row />

Styling

• .mdk-single-stat-card: root element
• .mdk-single-stat-card--primary, --secondary, --tertiary, --highlighted: layout variants (--highlighted uses a large bold value via --stat-color, muted name and subtitle)
• .mdk-single-stat-card--flash, --superflash: animation modifiers
• .mdk-single-stat-card--row: row layout
• .mdk-single-stat-card--long-value: applied automatically when value exceeds 6 characters
• .mdk-single-stat-card__name, __subtitle, __value, __text: inner elements

SecondaryStatCard

Simple secondary statistic display with name and value.

Import

import { SecondaryStatCard } from '@tetherto/mdk-react-devkit/foundation'

Props

Basic usage

<SecondaryStatCard name="Hash rate" value="95.5 TH/s" />
<SecondaryStatCard name="Uptime" value={99.8} />
<SecondaryStatCard name="Efficiency" value="92%" />

Styling

• .mdk-secondary-stat-card: root element
• .mdk-secondary-stat-card__name: stat label
• .mdk-secondary-stat-card__value: stat value

StatsGroupCard

Aggregated statistics display for selected miners with primary and secondary stat rows.

Import

import { StatsGroupCard } from '@tetherto/mdk-react-devkit/foundation'

Props

Aggregated stats

Primary stats (always rendered):

• Hash rate: sum of snap.stats.hashrate_mhs.t_5m across the selection, formatted via getHashrateUnit
• Temperature: max of snap.stats.temperature_c.max, in °C
• Frequency: average of snap.stats.frequency_mhz.avg, in MHz
• Consumption: sum of snap.stats.power_w (suppressed for miner types where power is not reported)
• Efficiency: derived consumption / hash rate in J/TH, only when both are present

Secondary stats depend on layout mode:

• Default grid layout (isMinerMetrics={false}): a second row of SecondaryStatCards when the effective selection (miners or the useDevices() fallback) has length 1 (any device type). Values come from the first entry in that set.
• Miner-metrics layout (isMinerMetrics={true}): secondary stats inside MinerMetricCard only when the adapter store selection from useDevices() contains exactly one device whose type satisfies isMiner (prefix miner-). Passing miners={…} alone does not enable the secondary strip. Vendor types such as antminer-s19 are not counted unless type uses the miner- prefix.

Basic usage

<StatsGroupCard miners={selectedMiners} />

Render with the miner metric layout

<StatsGroupCard isMinerMetrics />

When isMinerMetrics is true, wire device selection through useDevices() and use miner-* device types if you need the secondary strip; see Aggregated stats above.

Styling

• .mdk-stats-group-card: root element
• .mdk-stats-group-card__row: stat row container

MinerMetricCard

Card showing efficiency, hash rate, temperature, frequency, and consumption as primary stats, with an optional grid of secondary stats below.

Import

import { MinerMetricCard } from '@tetherto/mdk-react-devkit/foundation'

Props

The StatItem type is exported from the same module:

type StatItem = {
  name?: string
  value?: number | string
  unit?: string
  tooltipText?: string
}

Recognised primary stat names

primaryStats is read by name. Unknown entries are ignored; only these labels render:

• Efficiency: rendered top-right. Hidden if value is undefined or non-numeric.
• Hash rate: top-left primary box
• Temperature: top-right primary box. Also drives the displayed Frequency value (the source rounds and formats the temperature value as a Frequency stand-in; pass both stats explicitly to keep them aligned).
• Frequency: bottom-left primary box (uses the formatted Temperature numeric for backwards-compat with upstream callers)
• Consumption: bottom-right primary box. Formatted with three decimals; falls back to kWh unit when value is 0.

Basic usage

<MinerMetricCard
  primaryStats={[
    { name: 'Efficiency', value: 32.5, unit: 'J/TH' },
    { name: 'Hash rate', value: 95.5, unit: 'TH/s' },
    { name: 'Temperature', value: 65, unit: '°C' },
    { name: 'Frequency', value: 500, unit: 'MHz' },
    { name: 'Consumption', value: 3.25, unit: 'kW' },
  ]}
  secondaryStats={[
    { name: 'Fan speed', value: '6000 RPM' },
    { name: 'Uptime', value: '3 days' },
  ]}
/>

Hide the secondary grid

<MinerMetricCard
  primaryStats={primaryStats}
  secondaryStats={[]}
  showSecondaryStats={false}
/>

Styling

• .mdk-miner-metric-card: root element
• .mdk-miner-metric-card__title: card title (Miner Metrics)
• .mdk-miner-metric-card__body: layout wrapper
• .mdk-miner-metric-card__efficiency: top-right efficiency block
• .mdk-miner-metric-card__content: primary and secondary stat grid
• .mdk-miner-metric-card__box: pair of primary stat items
• .mdk-miner-metric-card__item: single label/value cell
• .mdk-miner-metric-card__label: stat label
• .mdk-miner-metric-card__value: stat value
• .mdk-miner-metric-card__grid-box: secondary stats grid