MDK by Tether

Chart components that summarize fleet-wide miner state at a glance.

For single-value and aggregated stat cards, see Stats. For miner identity (MinerInfoCard), see the details view overview.

Prerequisites

Complete the @mdk/foundation installation and add the dependency
A MinersActivityData record keyed by status name. Typically derived by grouping a Device list by status.

Components

Component	Description
`MinersActivityChart`	Miner uptime and activity visualization

`MinersActivityChart`

Displays miner activity status with color-coded indicators for online, offline, warning states.

Import

import { MinersActivityChart } from '@mdk/foundation'

Props

Prop	Type	Default	Description
`data`	`MinersActivityData`	`{}`	Counts keyed by status name
`large`	`boolean`	`false`	Switch to large indicator and label sizing
`isLoading`	`boolean`	`false`	Render a spinner instead of the chart
`isError`	`boolean`	`false`	Render `CoreAlert` instead of the chart (unless `isDemoMode`)
`error`	`{ data?: { message?: string } } \| null`	`null`	Message surfaced inside the error alert
`showLabel`	`boolean`	`true`	Show the per-status text label under each indicator
`isDemoMode`	`boolean`	`false`	Render zeros on error rather than the alert (for demos)

MinersActivityData is an open record. The component renders one indicator per status key it knows about; unknown keys are ignored.

Statuses rendered

The chart fixes the order and color of each indicator:

Offline: gray
Error: red, with a tooltip noting that minor errors not affecting hash rate are excluded
Sleep: power mode
Low: yellow, low power mode
Normal: green, normal power mode
High: purple, high power mode
Empty: socket with no miner connected (rendered as empty label)

Basic usage

<MinersActivityChart
  data={{
    total: 100,
    offline: 4,
    error: 1,
    low: 8,
    normal: 80,
    high: 7,
  }}
/>

Loading and error states

<MinersActivityChart isLoading />

<MinersActivityChart
  isError
  error={{ data: { message: 'Failed to fetch activity data' } }}
/>

{/* Demo dashboards: render zeros on error instead of the alert */}
<MinersActivityChart isError isDemoMode />

Styling

.mdk-miners-activity-chart__root: root flex row
.mdk-miners-activity-chart__item: per-status indicator wrapper
.mdk-miners-activity-chart__item--large: large variant
.mdk-miners-activity-chart__label: status label
.mdk-miners-activity-chart__label--large: large label
.mdk-miners-activity-chart__spinner: loading spinner
.mdk-miners-activity-chart__spinner--large: large spinner

Charts