Operational reporting
Operational reporting components — energy consumption and hashrate views
@tetherto/mdk-react-devkit/foundation
Operational reporting components cover energy consumption (EnergyReport) and hashrate (Hashrate) views. Each is a multi-tab reporting surface — supply your API data; the component handles site, miner-type, and mining-unit breakdown 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
| Component | Description |
|---|---|
EnergyReport | Operational energy consumption reporting view |
Hashrate | Operational hashrate reporting view |
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
| Prop | Status | Type | Default | Description |
|---|---|---|---|---|
defaultTab | Optional | EnergyReportTabValue | 'site-view' | Tab shown on first render — defaults to 'site-view' |
siteView | Optional | HashrateSiteViewProps | none | Props for the Site View tab |
minerTypeView | Optional | HashrateMinerTypeViewProps | none | Props for the Miner Type View tab |
minerUnitView | Optional | EnergyReportMinerUnitViewProps | none | Props for the Mining Unit View tab |
className | Optional | string | none | Optional root class override |
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
DateRangePickerand Reset button appear above this tab only. Date range is managed internally unlesssiteView.dateRangeis 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
| Prop | Status | Type | Default | Description |
|---|---|---|---|---|
defaultTab | Optional | EnergyReportTabValue | 'site-view' | Tab shown on first render — defaults to 'site-view' |
siteView | Optional | HashrateSiteViewProps | none | Props for the Site View tab |
minerTypeView | Optional | HashrateMinerTypeViewProps | none | Props for the Miner Type View tab |
miningUnitView | Optional | HashrateMiningUnitViewProps | none | Props for the Mining Unit View tab |
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