Operational reporting

Operational reporting components cover a consolidated operations dashboard (OperationalDashboard), energy consumption (EnergyReport), and hashrate (Hashrate) views. EnergyReport and Hashrate 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. Each is self-contained — supply your API data and the component handles layout, charts, and tab navigation.

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

OperationalDashboard

Composite operational dashboard showing a 2×2 grid of line-trend and stacked-bar charts. Each card can expand to full width; expand state persists across remounts. Pair with useOperationsDashboard to shape raw metric logs into chart-ready payloads.

Import

import { OperationalDashboard } from '@tetherto/mdk-react-devkit/foundation'
import type { OperationalDashboardProps, UseOperationsDashboardInput } from '@tetherto/mdk-react-devkit/foundation'

Props

All props are optional.

Basic usage

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

function OperationsDashboardPage({ hashrateLog, consumptionLog, efficiencyLog, minersLog }) {
  const vm = useOperationsDashboard({
    hashrate: { log: hashrateLog, isLoading },
    consumption: { log: consumptionLog, isLoading },
    efficiency: { log: efficiencyLog, isLoading },
    miners: { log: minersLog, isLoading },
  })

  return (
    <OperationalDashboard
      hashrate={vm.hashrate}
      consumption={vm.consumption}
      efficiency={vm.efficiency}
      miners={vm.miners}
    />
  )
}

Behaviour

Renders a 2×2 grid of four LineChartCard-based chart cards: hashrate trend, power consumption trend, site efficiency trend, and miners status (stacked bar). Each card has an expand toggle that widens it to full grid width; expand state persists across remounts. Assumes a single OperationalDashboard instance is mounted at a time.

Styling

• .mdk-operational-dashboard: Root element
• .mdk-operational-dashboard__controls: Controls slot wrapper (only rendered when controls is supplied)
• .mdk-operational-dashboard__grid: 2×2 chart grid
• .mdk-operational-dashboard__cell: Individual chart cell
• .mdk-operational-dashboard__cell--expanded: Modifier applied when a card is expanded to full width

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, HashrateSiteViewProps } from '@tetherto/mdk-react-devkit/foundation'

Props

HashrateTabValue type

type HashrateTabValue = 'site-view' | 'miner-type-view' | 'mining-unit-view'

Site view tab props

HashrateSiteView renders an aggregate hashrate trend line across the whole site, with an optional miner-type filter that scopes the sum to a subset. A date-range picker and optional reset button appear in the control row.

Miner type and mining unit tab props

Both minerTypeView and miningUnitView render bar charts. Charts share axis scaling when both tabs are visible so relative comparisons remain accurate.

Basic usage

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

<Hashrate
  siteView={{
    log: groupedHashrateLog,
    isLoading,
    dateRange,
    onDateRangeChange: setDateRange,
  }}
  minerTypeView={{ chartInput: minerTypeInput, isLoading }}
  miningUnitView={{ chartInput: miningUnitInput, 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 line for the whole site with optional miner-type filter; date-range picker and Reset button in the control row
• Miner Type View — hashrate broken down by miner model/type as a bar chart with a toggle legend
• Mining Unit View — hashrate broken down per mining unit (container) as a bar chart with a toggle legend

Miner type and mining unit bar charts share Y-axis scaling so relative comparisons across tabs remain accurate. Active tab is managed internally.

Styling

• .mdk-hashrate: Root element

OperationalDashboard

Composite operational dashboard showing a 2×2 grid of line-trend and stacked-bar charts. Each card can expand to full width; expand state persists across remounts. Pair with useOperationsDashboard to shape raw metric logs into chart-ready payloads.

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