Operational efficiency

@tetherto/mdk-react-devkit/foundation

OperationsEfficiency is a three-tab reporting surface:

Site View
Miner Type View
Mining Unit View

Your app loads metrics or tail-log data, passes it through the siteView, minerTypeView, and minerUnitView prop bags, and the shell renders charts and time-frame controls.

Prerequisites

Complete the @tetherto/mdk-react-devkit installation and add the dependency
@tetherto/mdk-react-devkit/core (tabs and charts are composed from core primitives)

Import

import {
  OperationsEfficiency,
  toOperationsEfficiencyMinerType,
  toOperationsEfficiencyMinerUnit,
  TAIL_LOG_MINER_TYPE_KEY,
  TAIL_LOG_CONTAINER_KEY,
} from '@tetherto/mdk-react-devkit/foundation'
import type {
  EfficiencyDateRange,
  MetricsEfficiencyLogEntry,
} from '@tetherto/mdk-react-devkit/foundation'

`OperationsEfficiency`

Tab shell built on Tabs from @tetherto/mdk-react-devkit/core. Each tab receives an optional props object; omit a tab’s props to render it with empty defaults.

Props

Prop	Status	Type	Default	Description
`defaultTab`	Optional	`'site-view' \| 'miner-type-view' \| 'mining-unit-view'`	`'site-view'`	Initial active tab key
`siteView`	Optional	`EfficiencySiteViewProps`	none	Data and callbacks for the Site View line chart
`minerTypeView`	Optional	`EfficiencyMinerTypeViewProps`	none	Bar chart input for Miner Type View
`minerUnitView`	Optional	`EfficiencyMinerUnitViewProps`	none	Bar chart input for Mining Unit View (same shape as miner type)

Site view tab

Wire the Site View to /auth/metrics/efficiency (v2). Map the response log array to MetricsEfficiencyLogEntry and pass it on siteView.log.

Prop	Status	Type	Default	Description
`log`	Optional	`MetricsEfficiencyLogEntry[]`	`[]`	Time series for the line chart (`ts`, `efficiencyWThs`)
`avgEfficiency`	Optional	`number \| null`	`null`	Average efficiency for the selected range; shown in the chart header
`nominalValue`	Optional	`number \| null`	`null`	Nominal efficiency target; when set, adds a nominal series to the chart
`isLoading`	Optional	`boolean`	`false`	When `true`, shows loading state on the chart container
`dateRange`	Optional	`EfficiencyDateRange`	none	`{ start, end }` millisecond range for the date picker
`onDateRangeChange`	Optional	`function`	none	Called when the user selects a new range from the chart brush or date picker
`onReset`	Optional	`function`	none	Called when the user activates Reset on the site chart header

Miner type and mining unit tabs

Miner Type View and Mining Unit View use bar charts fed by ToBarChartDataInput ({ labels, series }). Until the metrics API supports groupBy=miner, build that input from tail-log (stat-5m / t-miner) using the pure helpers below. A backend follow-up will allow swapping the data source in foundation without changing this props contract.

Helper	Input	Output
`toOperationsEfficiencyMinerType`	`{ tailLog }`	`{ chartInput, isEmpty }` — reads `TAIL_LOG_MINER_TYPE_KEY` from tail-log
`toOperationsEfficiencyMinerUnit`	`{ tailLog, containers? }`	`{ chartInput, isEmpty }` — reads `TAIL_LOG_CONTAINER_KEY`; optional `containers` for labels

Pass the result on minerTypeView / minerUnitView:

Prop	Status	Type	Default	Description
`chartInput`	Optional	`ToBarChartDataInput`	none	Declarative bar data; convert with `buildBarChartData` if you need Chart.js `data` elsewhere
`isEmpty`	Optional	`boolean`	`false`	When `true`, shows the chart empty state
`isLoading`	Optional	`boolean`	`false`	When `true`, shows loading on the bar chart container
`onTimeFrameChange`	Optional	`function`	none	Called with `(start: Date, end: Date)` when the preset or custom range changes

Each bar view mounts a single-series toggle legend via ChartContainer's legendData and onToggleDataset props. Clicking the legend item hides or shows the bar series. MDK tooltips on the bars format values with the efficiency unit (W/TH/s), consistent with the rest of the reporting surface.

Example

import { useMemo, useState } from 'react'
import {
  OperationsEfficiency,
  toOperationsEfficiencyMinerType,
  toOperationsEfficiencyMinerUnit,
} from '@tetherto/mdk-react-devkit/foundation'
import type { EfficiencyDateRange, MetricsEfficiencyLogEntry } from '@tetherto/mdk-react-devkit/foundation'

function OperationalEfficiencyPanel({
  efficiencyLog,
  minerTypeTailLog,
  containerTailLog,
}: {
  efficiencyLog: MetricsEfficiencyLogEntry[]
  minerTypeTailLog: Record<string, unknown>
  containerTailLog: Record<string, unknown>
}) {
  const [dateRange, setDateRange] = useState<EfficiencyDateRange | undefined>()

  const minerType = useMemo(
    () => toOperationsEfficiencyMinerType({ tailLog: minerTypeTailLog }),
    [minerTypeTailLog],
  )
  const minerUnit = useMemo(
    () => toOperationsEfficiencyMinerUnit({ tailLog: containerTailLog }),
    [containerTailLog],
  )

  return (
    <OperationsEfficiency
      siteView={{
        log: efficiencyLog,
        dateRange,
        onDateRangeChange: setDateRange,
      }}
      minerTypeView={{
        chartInput: minerType.chartInput,
        isEmpty: minerType.isEmpty,
      }}
      minerUnitView={{
        chartInput: minerUnit.chartInput,
        isEmpty: minerUnit.isEmpty,
      }}
    />
  )
}

Next steps

Consider related reference materials:

Metrics efficiency types: MetricsEfficiencyLogEntry and response wrapper for the site tab
Chart composition: buildBarChartData for bar chart data shapes

Operational efficiency

On this page