MDK Logo
ReferenceUI KitReactUI Kit foundationComponentsDashboards

EnergyReport

Operational Energy report — site consumption trend, power modes by miner type, and per–mining-unit / per–miner-type bar charts.

Operational Energy report — site consumption trend, power modes by miner type, and per–mining-unit / per–miner-type bar charts.

import { EnergyReport } from "@tetherto/mdk-react-devkit";
PropStatusTypeDefaultDescription
defaultTabOptionalEnergyReportTabValue | undefined
siteViewOptional(Omit<EnergyReportSiteViewProps, "dateRange"> & { dateRange?: EnergyReportDateRange | undefined; }) | undefined
minerTypeViewOptionalEnergyReportGroupedBarViewProps | undefined
minerUnitViewOptionalEnergyReportGroupedBarViewProps | undefined
classNameOptionalstring | undefined

Usage

Operational Energy report with three tabs: site consumption trend, power modes by miner type, and bar charts by miner type / mining unit.

Composite

import { EnergyReport } from "@tetherto/mdk-react-devkit";

<EnergyReport
  siteView={{
    dateRange: { start, end },
    onDateRangeChange: setRange,
    consumptionLog,
    nominalPowerAvailabilityMw: 600,
    tailLog,
    containers,
    onRefetchSnapshot: refetch,
  }}
  minerTypeView={{
    groupedConsumption,
    containers,
    isLoading,
    onTimeFrameChange: (start, end) => fetchGrouped("miner", start, end),
  }}
  minerUnitView={{
    groupedConsumption: containerGrouped,
    containers,
    isLoading,
  }}
/>

Hooks / utils

  • useEnergyReportSite — derives site chart series, power-mode table rows, and container cards from v2 consumption + tail log.
  • transformToBarData / toEnergyReportBarChartInput — latest-day grouped consumption bars (miner vs container groupBy).

Demo

apps/demo route: /operational-energy

Example

/** * Runnable example for EnergyReport. Mock data only. */import { EnergyReport } from '@tetherto/mdk-react-devkit'const DAY_MS = 86_400_000const mockConsumptionLog = [  { ts: Date.now() - DAY_MS, powerW: 180_000_000, consumptionMWh: 4.3 },  { ts: Date.now(), powerW: 220_000_000, consumptionMWh: 5.1 },]export const EnergyReportExample = () => (  <EnergyReport    siteView={{      consumptionLog: mockConsumptionLog,      nominalPowerAvailabilityMw: 500,    }}  />)