Operational reporting

Operational reporting components cover energy consumption (EnergyReport), hashrate (Hashrate), and the at-a-glance operations dashboard (OperationalDashboard). The first two are multi-tab reporting surfaces with site, miner-type, and mining-unit breakdown charts; OperationalDashboard is a 2×2 grid composite of the four core site-operations charts.

For financial reporting see Financial. For operational efficiency see Operational efficiency.

Prerequisites

• Complete the @tetherto/mdk-react-devkit installation and add the dependency
• <MdkProvider> from @tetherto/mdk-react-adapter

Components

EnergyReport

Multi-tab reporting surface for operational energy data: site view and miner-type breakdown charts.

Import

import { EnergyReport } from '@tetherto/mdk-react-devkit/foundation'
import type { EnergyReportProps, EnergyReportTabValue } from '@tetherto/mdk-react-devkit/foundation'

Props

EnergyReportTabValue type

type EnergyReportTabValue = 'site-view' | 'miner-type-view' | 'miner-unit-view'

EnergyReportSiteViewProps key fields

type EnergyReportSiteViewProps = {
  consumptionLog?: MetricsConsumptionLogEntry[]  // power/consumption time-series
  nominalPowerAvailabilityMw?: number | null      // site nominal capacity
  containers?: EnergyReportContainer[]            // container inventory
  tailLog?: EnergyReportTailLogItem[][]           // snapshot tail-log for power-mode table
  dateRange?: EnergyReportDateRange               // controlled date range
  onDateRangeChange?: (range: EnergyReportDateRange) => void
}

Basic usage

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

export const EnergyReportPage = () => (
  <EnergyReport
    siteView={{
      consumptionLog: consumptionData,
      nominalPowerAvailabilityMw: 500,
      containers,
      tailLog,
    }}
    minerTypeView={{ groupedConsumption, containers }}
    minerUnitView={{ groupedConsumption: unitGroupedData, containers }}
  />
)

More examples

Behaviour

Renders a three-tab layout:

• Site View — power consumption trend chart against nominal capacity, power-mode breakdown table per container. A DateRangePicker and Reset button appear above this tab only. Date range is managed internally unless siteView.dateRange is provided.
• Miner Type View — consumption grouped by miner type as a bar chart with per-miner-type breakdown.
• Mining Unit View — consumption grouped by mining unit as a bar chart.

Each tab fetches independently via its own prop bag.

Styling

• .mdk-energy-report: Root element
• .mdk-energy-report__date-controls: Date picker + Reset row (site view only)

Hashrate

Multi-tab reporting surface for fleet hashrate: site view and mining-unit breakdown charts.

Import

import { Hashrate } from '@tetherto/mdk-react-devkit/foundation'
import type { HashrateProps, HashrateTabValue } from '@tetherto/mdk-react-devkit/foundation'

Props

HashrateTabValue type

// Values come from HASHRATE_TAB_TYPES constant
type HashrateTabValue = 'site-view' | 'miner-type-view' | 'mining-unit-view'

Basic usage

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

<Hashrate
  siteView={{ data: siteHashrateData, isLoading }}
  minerTypeView={{ data: minerTypeData, isLoading }}
  miningUnitView={{ data: miningUnitData, isLoading }}
/>

More examples

Behaviour

Renders a three-tab layout using a shared Tabs shell. Each tab fetches independently via its own prop bag:

• Site View — aggregate hashrate trend across all sites
• Miner Type View — hashrate broken down by miner model/type
• Mining Unit View — hashrate broken down per mining unit (container)

Active tab is managed internally; tabs are driven by the HASHRATE_TABS constant.

Styling

• .mdk-hashrate: Root element

OperationalDashboard

Operational dashboard composite: a 2x2 grid of the four site-operations charts (hashrate, power consumption, site efficiency, miners status). Each card can expand to full width; expand state persists across reloads.

A 2×2 grid of the four site-operations charts — Hashrate, Power Consumption, Site Efficiency (line trends with an optional nominal reference line), and Miners Status (stacked daily breakdown). Each card can expand to full width, and the expand state persists across remounts.

The composite is pure glue: it renders pre-shaped data. Use the useOperationsDashboard hook to turn raw metric logs into the chart-ready payloads, then spread them in — the hook never fetches, so wire your own data layer.

Import

import { OperationalDashboard, useOperationsDashboard } from '@tetherto/mdk-react-devkit/foundation'

Props

useOperationsDashboard(input)

input accepts one entry per chart. Trend inputs take { log, nominalValue?, isLoading?, error? } where log is { ts, value }[] in base units (hashrate MH/s, power W, efficiency W/TH/s). The miners input takes per-day { ts, online, error, offline, sleep, maintenance } counts.

Basic usage

import { OperationalDashboard, useOperationsDashboard } from '@tetherto/mdk-react-devkit/foundation'

const Dashboard = ({ queries }) => {
  const viewModel = useOperationsDashboard({
    hashrate: { log: queries.hashrate.log, nominalValue: queries.nominalHashrateMhs },
    consumption: { log: queries.consumption.log, nominalValue: queries.nominalPowerW },
    efficiency: { log: queries.efficiency.log, nominalValue: queries.nominalEfficiency },
    miners: { log: queries.miners.log },
  })

  return <OperationalDashboard {...viewModel} controls={<DateRangePicker />} />
}

Behaviour

Renders the four charts in a 2×2 grid; any card expands to full width and the expand state persists across remounts. Hashrate is displayed in TH/s, power in MW, and efficiency in W/TH/s. A nominalValue renders a flat reference line. The individual chart components (OperationalHashrateChart, …) and ChartExpandAction are exported as advanced building blocks for custom layouts.

Related hooks