Stats

Stat widgets are the compact, at-a-glance cards that line the dashboard. They summarise container health, pool configuration, liquid supply, tanks, miner roll-ups, and export controls.

Prerequisites

• Complete the @mdk/foundation installation and add the dependency
• Most widgets expect a container Device record; read the individual Props sections for specifics

Supported widgets

Both provider-specific and general widgets are supported:

Generic widgets

Widgets that work with any container vendor and pool configuration.

MinersSummaryBox

Displays mining summary parameters in a 2-column grid layout.

Import

import { MinersSummaryBox } from '@mdk/foundation'

Props

MinersSummaryParam type

type MinersSummaryParam = {
  label: string   // Parameter name
  value: string   // Pre-formatted display value (including units)
}

Basic usage

<MinersSummaryBox
  params={[
    { label: 'Efficiency', value: '32.5 W/TH/S' },
    { label: 'Hash Rate', value: '1.24 PH/s' },
    { label: 'Max Temp', value: '72 °C' },
    { label: 'Avg Temp', value: '65 °C' },
  ]}
/>

Notes

• Values must be pre-formatted strings (the component does not format data)
• Text size automatically adjusts for long values (>12 or >15 characters)

Styling

• .mdk-miners-summary-box: Root element
• .mdk-miners-summary-box__param: Individual parameter row
• .mdk-miners-summary-box__label: Parameter label
• .mdk-miners-summary-box__label--small: Smaller text for long values
• .mdk-miners-summary-box__label--tiny: Tiny text for very long values
• .mdk-miners-summary-box__value: Parameter value

PoolDetailsCard

Mining pool configuration display card showing pool details in a labeled list format.

Import

import { PoolDetailsCard } from '@mdk/foundation'

Props

PoolDetailItem type

type PoolDetailItem = {
  title: string
  value?: string | number
}

Basic usage

<PoolDetailsCard
  label="Pool Configuration"
  details={[
    { title: 'Pool URL', value: 'stratum+tcp://pool.example.com:3333' },
    { title: 'Worker', value: 'worker001' },
    { title: 'Algorithm', value: 'SHA-256' },
  ]}
/>

With underline

<PoolDetailsCard
  label="Primary Pool"
  underline
  details={[
    { title: 'URL', value: 'stratum://pool1.example.com:3333' },
    { title: 'Status', value: 'Active' },
    { title: 'Hashrate', value: '95.2 TH/s' },
    { title: 'Accepted', value: 12847 },
    { title: 'Rejected', value: 23 },
  ]}
/>

Empty state

When details is an empty array, displays "No data available":

<PoolDetailsCard
  label="Backup Pool"
  details={[]}
/>

Styling

• .mdk-pool-details-card: Root element
• .mdk-pool-details-card__header: Header container
• .mdk-pool-details-card__header--underline: Underlined header modifier
• .mdk-pool-details-card__label: Header label text
• .mdk-pool-details-card__list: Details list container
• .mdk-pool-details-card__item: Individual detail row
• .mdk-pool-details-card__item-title: Detail title
• .mdk-pool-details-card__item-value: Detail value
• .mdk-pool-details-card__empty: Empty state container

PoolDetailsPopover

Button that opens a dialog popover displaying pool details using PoolDetailsCard.

Import

import { PoolDetailsPopover } from '@mdk/foundation'

Props

Basic usage

<PoolDetailsPopover
  triggerLabel="View Pool Details"
  title="Primary Pool"
  details={[
    { title: 'URL', value: 'stratum://pool.example.com:3333' },
    { title: 'Worker', value: 'worker001' },
    { title: 'Status', value: 'Active' },
  ]}
/>

With description

<PoolDetailsPopover
  triggerLabel="Pool Info"
  title="Pool Configuration"
  description="Current mining pool settings"
  details={poolDetails}
/>

Disabled state

<PoolDetailsPopover
  triggerLabel="View Details"
  details={[]}
  disabled={!hasPoolData}
/>

Styling

• .mdk-pool-details-popover: Root element
• .mdk-pool-details-popover__body: Dialog body container

StatsExport

Dropdown button for exporting statistics to CSV or JSON formats.

Import

import { StatsExport } from '@mdk/foundation'

Props

Basic usage

<StatsExport
  onCsvExport={async () => {
    const data = await fetchStats()
    downloadCsv(data, 'mining-stats.csv')
  }}
  onJsonExport={async () => {
    const data = await fetchStats()
    downloadJson(data, 'mining-stats.json')
  }}
/>

Disabled state

<StatsExport
  disabled={!hasData}
  onCsvExport={handleCsvExport}
  onJsonExport={handleJsonExport}
/>

With loading state

The component automatically shows a loading spinner during export operations:

<StatsExport
  onCsvExport={async () => {
    await generateAndDownloadCsv()
  }}
  onJsonExport={async () => {
    await generateAndDownloadJson()
  }}
/>

Export formats

The dropdown provides two export options:

1. CSV: Comma-separated values for spreadsheet applications
2. JSON: JavaScript Object Notation for programmatic use

Styling

• .stats-export__button: Trigger button
• .stats-export__button--disabled: Disabled state
• .stats-export__label: Button label text
• .stats-export__divider: Divider between icon and arrow
• .stats-export__dropdown: Dropdown menu container
• .stats-export__item: Dropdown menu item
• .stats-export__item--bordered: Item with bottom border

SupplyLiquidBox

Displays cooling liquid supply metrics including temperature, set temperature, and pressure.

Import

import { SupplyLiquidBox } from '@mdk/foundation'

Props

Basic usage

<SupplyLiquidBox data={containerDevice} />

With threshold settings

<SupplyLiquidBox
  data={containerDevice}
  containerSettings={{
    thresholds: {
      supply_liquid_temp: { warning: 35, critical: 40 },
      supply_liquid_pressure: { warning: 1.8, critical: 2.0 },
    },
  }}
/>

Features

The component displays three SingleStatCard items:

• Supply Liquid Temp: Current liquid temperature
• Supply Liquid Set Temp: Target temperature
• Supply Liquid Pressure: Current pressure

Each stat automatically shows color and flash indicators based on threshold settings.

Styling

• .mdk-supply-liquid-box: Root element
• .mdk-supply-liquid-box__stats: Stats container

TanksBox

Displays immersion tank status with temperature, pressure, and pump indicators for each tank.

Import

import { TanksBox } from '@mdk/foundation'

Props

TanksBoxData type

type Tank = {
  cold_temp_c: number
  enabled: boolean
  color?: string      // Visual indicator color
  flash?: boolean     // Enable flash animation
  tooltip?: string    // Tooltip text
}

type TanksBoxData = {
  oil_pump: Tank[]
  water_pump: { enabled: boolean }[]
  pressure: { value?: number; flash?: boolean; color?: string; tooltip?: string }[]
}

Basic usage

<TanksBox
  data={{
    oil_pump: [
      { cold_temp_c: 45, enabled: true },
      { cold_temp_c: 42, enabled: true },
    ],
    water_pump: [
      { enabled: true },
      { enabled: false },
    ],
    pressure: [
      { value: 1.2 },
      { value: 1.1 },
    ],
  }}
/>

With visual alerts

<TanksBox
  data={{
    oil_pump: [
      { cold_temp_c: 85, enabled: true, color: 'red', flash: true, tooltip: 'High temp!' },
    ],
    water_pump: [{ enabled: true }],
    pressure: [{ value: 2.5, color: 'orange', flash: true }],
  }}
/>

Styling

• .mdk-tanks-box: Root element
• Uses TankRow internally for each tank display

Vendor-specific widgets

Summary widgets that read vendor-shaped fields off a Device record. One component per vendor today.

Bitmain Immersion

BitMainImmersionSummaryBox

Summary panel showing oil pump 1/2 and water pump statuses alongside primary and secondary liquid supply temperatures with alert coloring.

Import

import { BitMainImmersionSummaryBox } from '@mdk/foundation'

Props

BitMainImmersionSummaryBoxContainerSettings type

type BitMainImmersionSummaryBoxContainerSettings = {
  thresholds?: Record<string, unknown>
}

Basic usage

<BitMainImmersionSummaryBox data={immersionContainer} />

With custom thresholds

<BitMainImmersionSummaryBox
  data={immersionContainer}
  containerSettings={{ thresholds: customThresholds }}
/>

Composition

• Oil pump #1 and Oil pump #2 indicators derived from second_pump1 / second_pump2 and their _fault flags
• Water pump indicator derived from one_pump
• Three SingleStatCards for primary supply temp, secondary supply Temp1, and secondary supply Temp2, each colored and flashed via getImmersionTemperatureColor and shouldImmersionTemperatureFlash

Styling

• .mdk-bitmain-immersion-summary-box: Root element
• .mdk-bitmain-immersion-summary-box__pumps: Pumps row
• .mdk-bitmain-immersion-summary-box__pump: Single pump cell
• .mdk-bitmain-immersion-summary-box__pump-title: Pump label text
• .mdk-bitmain-immersion-summary-box__liquid-stats: Liquid stat cards row

MicroBT

MicroBTWidgetBox

Compact widget showing MicroBT cycle pump and cooling fan running/off indicators, with a red error state when the cooling fan is not running.

Import

import { MicroBTWidgetBox } from '@mdk/foundation'

Props

Basic usage

<MicroBTWidgetBox data={microbtContainer} />

Indicators rendered

• Cicle Pump: green Running when cdu.circulation_pump_running_status equals CONTAINER_STATUS.RUNNING, gray Off otherwise
• Cooling Fan: green Running when cdu.cooling_fan_control is truthy, red Error otherwise

Styling

• .mdk-micro-bt-widget-box: Root grid element
• .mdk-micro-bt-widget-box__item: Single indicator cell
• .mdk-micro-bt-widget-box__title: Indicator label text