Reporting tool

Reporting-tool components cover financial and operational analytics. Host apps supply API or tail-log data; components handle layout, charts, and tab navigation. Every report shares one date-range model through TimeframeControls, ReportTimeFrameSelector, and useFinancialDateRange.

Prerequisites

• Complete the @tetherto/mdk-react-devkit installation and add the dependency

Component groups

• Financial reporting: revenue, cost, EBITDA, energy balance, hash balance, and subsidy fee reports
• Operational reporting: operational dashboard, energy consumption, and hashrate reports
• Operational efficiency: three-tab efficiency dashboard (OperationsEfficiency)
• Multi-site reporting: portfolio-level SiteReports composite

Reporting components

TimeframeControls

Year/month preset selector with custom date range override, shared across financial and operational reporting surfaces.

Date-range picker for financial reporting pages. Supports year, month, and optional week granularity via connected selects. Drives the date range for the cost, EBITDA, energy balance, and other financial reports.

Import

import { TimeframeControls } from '@tetherto/mdk-react-devkit/foundation'
import type { TimeframeControlsProps } from '@tetherto/mdk-react-devkit/foundation'

Props

All props are optional.

Basic usage

import { TimeframeControls } from '@tetherto/mdk-react-devkit/foundation'
import type { FinancialDateRange } from '@tetherto/mdk-react-devkit/foundation'

function ReportPage() {
  const [dateRange, setDateRange] = useState<FinancialDateRange>()

  return (
    <TimeframeControls
      isMonthSelectVisible
      isWeekSelectVisible={false}
      showResetButton
      dateRange={dateRange}
      onRangeChange={(range, opts) =>
        setDateRange({ start: range[0].getTime(), end: range[1].getTime(), period: opts.period })
      }
      onReset={() => setDateRange(undefined)}
    />
  )
}

For the backing state machine see useTimeframeControls.

ReportTimeFrameSelector

Compact preset-window and custom date range control used inside efficiency and hashrate bar views. Pair with useReportTimeFrameSelectorState for controlled state.

Compact preset-window picker (1D / 7D / 30D / custom range) used inside the Miner Type and Mining Unit bar views of the operational efficiency and hashrate reports. Pair it with useReportTimeFrameSelectorState for the full controlled state.

Import

import { ReportTimeFrameSelector } from '@tetherto/mdk-react-devkit/foundation'
import type { ReportTimeFrameSelectorProps } from '@tetherto/mdk-react-devkit/foundation'

Props

Props come directly from the useReportTimeFrameSelectorState return value; spread them onto the component:

Basic usage

import {
  ReportTimeFrameSelector,
  useReportTimeFrameSelectorState,
} from '@tetherto/mdk-react-devkit/foundation'

function EfficiencyBarPanel() {
  const { presetTimeFrame, dateRange, setPresetTimeFrame, setDateRange } =
    useReportTimeFrameSelectorState()

  return (
    <ReportTimeFrameSelector
      presetTimeFrame={presetTimeFrame}
      dateRange={dateRange}
      setPresetTimeFrame={setPresetTimeFrame}
      setDateRange={setDateRange}
    />
  )
}

Styling

• .mdk-report-time-frame-selector: Root element

MetricCard

Compact card displaying a metric label, formatted value, unit, and optional trend indicator for reporting composite layouts.

Compact card displaying a labelled metric value with an optional unit, highlight state, and transparency. Used across financial and operational reporting composites for cost, EBITDA, hash, and energy metric tiles.

Import

import { MetricCard } from '@tetherto/mdk-react-devkit/foundation'
import type { MetricCardProps } from '@tetherto/mdk-react-devkit/foundation'

Props

Basic usage

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

<MetricCard label="Total Cost" value={42500} unit="USD" />

Styling

• .mdk-metric-card: Root element
• .mdk-metric-card--no-min-width: Modifier removing the min-width constraint
• .mdk-metric-card__label: Label text
• .mdk-metric-card__value: Value text
• .mdk-metric-card__value--medium: Medium-weight value modifier