MDK Logo
UI Kitreact-devkitComponentsFoundationWidgets

MinerMetricCard

Single-metric card (hashrate, temperature, or power) for one miner with sparkline and delta. Displays key metrics for a miner including: - Efficiency (fixed …

Single-metric card (hashrate, temperature, or power) for one miner with sparkline and delta.

Displays key metrics for a miner including: - Efficiency (fixed position top-right) - Hash rate, Temperature - Frequency, Consumption - Optional secondary stats in grid

import { MinerMetricCard } from "@tetherto/mdk-react-devkit";
PropStatusTypeDefaultDescription
primaryStatsOptionalStatItem[]Primary statistics (efficiency, hashrate, temperature, frequency, consumption)
secondaryStatsOptionalStatItem[]Secondary statistics to display in grid
showSecondaryStatsOptionalbooleanWhether to show secondary stats section

Usage

Card showing primary and secondary statistics for a single miner: efficiency, hashrate, temperature, frequency, and power consumption.

Minimal example

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

<MinerMetricCard
  primaryStats={[
    { name: "Hashrate", value: 95.5, unit: "TH/s" },
    { name: "Efficiency", value: 28.3, unit: "J/TH" },
  ]}
  secondaryStats={[
    { name: "Temperature", value: 65, unit: "°C" },
  ]}
  showSecondaryStats={true}
/>

Example

import { MinerMetricCard } from '@tetherto/mdk-react-devkit'export const MinerMetricCardExample = () => (  <div className="mdk-example-row">    <MinerMetricCard      primaryStats={[        { name: 'Hashrate', value: 95.5, unit: 'TH/s' },        { name: 'Efficiency', value: 28.3, unit: 'J/TH' },        { name: 'Temperature', value: 65, unit: '°C' },      ]}      secondaryStats={[        { name: 'Frequency', value: 620, unit: 'MHz' },        { name: 'Consumption', value: 3250, unit: 'W' },      ]}      showSecondaryStats={true}    />  </div>)