OperationalDashboard

Operational dashboard - a 2x2 grid of the four site-operations charts (hashrate, power consumption, site efficiency, miners status). Each card can expand to full width; expand state persists across remounts. Thin glue: pass pre-shaped data from useOperationsDashboard and an optional controls slot (e.g. a date-range picker).

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

Usage

A 2x2 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. Wire your own data layer (RTK Query, TanStack, fixtures) - the hook never fetches.

Notes

• Hashrate is displayed in TH/s (kit standard); power in MW; efficiency in W/TH/s.
• A nominal value renders a flat reference line (lightweight-charts has no native reference line).
• The individual chart components (OperationalHashrateChart, …) and ChartExpandAction are exported as advanced building blocks for custom layouts.

Example

import {  OperationalDashboard,  useOperationsDashboard,  type UseOperationsDashboardInput,} from '@tetherto/mdk-react-devkit/domain'const DAY = 24 * 60 * 60 * 1000const START = 1_769_025_600_000const trend = (base: number, step: number) =>  Array.from({ length: 7 }, (_, i) => ({ ts: START + i * DAY, value: base + i * step }))// Mock buckets in base units: hashrate MH/s, consumption W, efficiency W/TH/s.const MOCK_INPUT: UseOperationsDashboardInput = {  hashrate: { log: trend(95_000_000, 1_500_000), nominalValue: 110_000_000 },  consumption: { log: trend(38_000_000, 400_000), nominalValue: 45_000_000 },  efficiency: { log: trend(21, 0.3), nominalValue: 19 },  miners: {    log: Array.from({ length: 7 }, (_, i) => ({      ts: START + i * DAY,      online: 1200 - i * 4,      error: 10 + i,      offline: 8,      sleep: 20,      maintenance: 4,    })),  },}export const OperationalDashboardExample = () => {  const viewModel = useOperationsDashboard(MOCK_INPUT)  return (    <div className="mdk-example-row">      <OperationalDashboard {...viewModel} />    </div>  )}