Chart

Components for data visualization and charting.

Prerequisites

• Complete the installation

• Add the dependency to your app's package.json

{
  "dependencies": {
    "@tetherto/mdk-react-devkit": "*",
    "@tetherto/mdk-react-adapter": "*",
    "@tetherto/mdk-ui-foundation": "*"
  }
}

Run npm install from the mdk/ui workspace root after your app is under apps/ so npm links workspace packages.

• Import styles: import '@tetherto/mdk-react-devkit/styles.css'

Components

Chart container

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

A layout wrapper for charts that provides a title/header row, interactive legend, range selector, highlighted value display, loading/empty states, and a stats footer.

Prop data shapes

Props are generated from this component's TypeScript types, the source of truth. The following are supplementary (object-prop shapes, allowed values, or passthrough props), not the full prop list.

LegendItem

HighlightedValueProps

RangeSelectorProps

Notes

• minMaxAvg and timeRange are only rendered when the chart is not loading or empty

Example

/**
 * Runnable example for ChartContainer.
 */
import { useState } from 'react'
import { ChartContainer } from '@tetherto/mdk-react-devkit'

const RANGE_OPTIONS = [
  { label: '1H', value: '1h' },
  { label: '24H', value: '24h' },
  { label: '7D', value: '7d' },
]

const LEGEND_DATA = [
  { label: 'Pool A', color: '#59E8E8' },
  { label: 'Pool B', color: '#FF9500' },
]

const MockChart = () => (
  <div
    style={{
      height: 160,
      background: 'var(--mdk-color-surface-secondary, #1a1a2e)',
      borderRadius: 4,
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      color: 'var(--mdk-color-text-secondary, #888)',
      fontSize: 13,
    }}
  >
    Chart content
  </div>
)

export const ChartContainerExample = () => {
  const [range, setRange] = useState('24h')

  return (
    <div className="mdk-example-row" style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
      {/* Basic with title only */}
      <ChartContainer title="Simple Chart">
        <MockChart />
      </ChartContainer>

      {/* Full-featured: highlighted value, legend, range selector, min/max/avg */}
      <ChartContainer
        title="Hashrate"
        highlightedValue={{ value: 102.4, unit: 'TH/s' }}
        legendData={LEGEND_DATA}
        rangeSelector={{ options: RANGE_OPTIONS, value: range, onChange: setRange }}
        minMaxAvg={{ min: '10 TH/s', avg: '55 TH/s', max: '100 TH/s' }}
      >
        <MockChart />
      </ChartContainer>

      {/* Loading state */}
      <ChartContainer title="Loading" loading>
        <MockChart />
      </ChartContainer>

      {/* Empty state */}
      <ChartContainer title="No Data" empty emptyMessage="No data available for this period">
        <MockChart />
      </ChartContainer>
    </div>
  )
}

Related API

• useChartDataCheck

Import the public APIs on this page from @tetherto/mdk-react-devkit.

ActualEbitdaCard

Stat card summarising the realised EBITDA for the selected reporting window vs the prior period

agent-ready

Props

AreaChart

Presentational Chart.js area chart (Line with fill). Data must be provided via props; this component does no fetching of its own

agent-ready

Props

AverageDowntimeChart

Stacked bar chart of average downtime (curtailment vs operational issues). Wraps ChartContainer and BarChart; pass period labels and rate arrays via data

agent-ready

Props

AvgAllInCostChart

Avg All-in Cost - revenue vs cost ($/MWh) bar chart over time.

Renders the OSS SiteEnergyVsCostChart. The revenue/cost time-series isn't carried by the cost-summary response, so consumers feed it through as a separate prop (the OSS app sources it from useAvgAllInPowerCostData)

agent-ready

Props

BarChart

Presentational Chart.js bar chart. Data must be pre-aggregated; use grouped or stacked categories via datasets

agent-ready

Props

BitcoinPriceCard

Stat card showing the BTC reference price used by the reporting view with currency and timestamp

agent-ready

Props

BitcoinProducedCard

Stat card summarising the bitcoin produced during the reporting window with delta to prior period

agent-ready

Props

BitcoinProducedChart

Time-series chart of bitcoin produced per day across the selected reporting window

agent-ready

Props

BitcoinProductionCostCard

Stat card showing the average cost in USD to produce one bitcoin during the reporting window

agent-ready

Props

ChartContainer

Standard chrome for charts: title, optional highlighted value, legend with toggle, range selector (radio cards), loading / empty states, and a footer for min/max/avg stats

agent-ready

Props

ChartExpandAction

Expand / collapse toggle rendered in a dashboard chart card's header. Swaps between a maximize and a minimize glyph based on isExpanded

advanced

Props

ChartStatsFooter

ChartStatsFooter - Displays Min/Max/Avg values and optional stats grid below a chart

agent-ready

Props

CostCharts

Convenience wrapper that renders the three cost-page charts in declaration order. Pages that need bespoke layouts (e.g. CostContent's 2x2 Mosaic) compose the individual chart components directly instead

agent-ready

Props

DetailLegend

DetailLegend - Enhanced chart legend with current values and percentage change indicators

agent-ready

Props

DoughnutChart

DoughnutChart – Presentational Chart.js doughnut chart with custom HTML legend matching the MDK design

agent-ready

Props

Ebitda

Top-level EBITDA section of the reporting view — pulls together metric cards, charts, and tables

agent-ready

Props

EbitdaCharts

Chart panel inside the EBITDA section visualising revenue, cost, and EBITDA over time

agent-ready

Props

EbitdaHodlCard

Stat card projecting EBITDA assuming all produced bitcoin is held instead of sold

agent-ready

Props

EbitdaMetrics

Row of summary metric cards across the top of the EBITDA section (actual, hodl, selling, cost)

agent-ready

Props

EbitdaSellingCard

Stat card projecting EBITDA assuming all produced bitcoin is sold at the daily reference price

agent-ready

Props

EnergyBalance

Full energy balance view with tabbed revenue and cost sections, charts, and metric cards

agent-ready

Props

EnergyBalanceCostCharts

Layout container for the energy cost tab charts: revenue-vs-cost bar chart and power line chart

agent-ready

Props

EnergyBalanceCostMetrics

Grid of stat cards summarising energy cost metrics for the selected period

agent-ready

Props

EnergyBalancePowerChart

Line chart visualising power consumption against threshold for the energy balance view

agent-ready

Props

EnergyBalanceRevenueCharts

Mosaic layout of revenue, downtime, and power charts for the energy balance revenue tab

agent-ready

Props

EnergyBalanceRevenueMetrics

Grid of stat cards summarising energy revenue metrics for the selected period

agent-ready

Props

EnergyCostChart

Bar chart comparing site revenue vs cost per MWh, with USD/BTC currency toggle

agent-ready

Props

EnergyMetricCard

Stat card for a single energy balance metric

agent-ready

Props

EnergyReportMinerTypeView

Energy report — power consumption grouped by miner model (latest day in range)

advanced

Props

EnergyReportMinerUnitView

Energy report — power consumption grouped by mining unit / container

advanced

Props

EnergyReportSiteView

Energy report site tab — power trend, power-mode table, and per–mining-unit activity cards

advanced

Props

EnergyRevenueChart

Bar chart showing site energy revenue per MWh, with USD/BTC currency toggle

agent-ready

Props

GaugeChart

GaugeChart - Presentational gauge / speedometer chart.

Implementation note: the gauge is drawn by a pure-SVG internal implementation (see ./gauge-svg.tsx), so the component is bundler- and runtime-agnostic and carries no third-party runtime dependency. The gauge packages on NPM are published CommonJS-only with a module field pointing at the same CJS file, which crashes under ESM bundlers that add no __esModule ? .default : module interop shim (Webpack 4, raw esbuild, some SSR setups) with React's "Element type is invalid" error

agent-ready

Props

Hashrate

Top-level hashrate reporting section - composes the site / miner-type / mining-unit drilldowns into a tabbed shell. Each tab fetches independently because the three views use different groupBy axes; the composite stitches them via per-tab prop bags

agent-ready

Props

HashrateMinerTypeView

Hashrate drilldown grouped by miner model - bar chart of the latest hashrate per miner type, with an optional multi-select filter

agent-ready

Props

HashrateMiningUnitView

Hashrate drilldown grouped by mining unit / container - bar chart of the latest hashrate per container with an optional multi-select filter. Drops BE-leaked rollup keys (group-N, maintenance) via the utils layer

agent-ready

Props

HashrateSiteView

Site-level hashrate trend - aggregates hashrate across the whole site for the selected date range, with an optional miner-type filter that scopes the sum to a subset

agent-ready

Props

Heatmap

Heatmap — a generic grid of value-coloured cells on a low→high gradient.

Presentational and domain-agnostic: pass a row-major matrix of cells and an optional [min, max] range (auto-derived otherwise). Use renderCell to overlay domain content (socket borders, selection, tooltips) without forking the primitive — the grid still owns each cell's background colour. Pair with HeatmapLegend for a gradient scale

agent-ready

Props

HeatmapLegend

HeatmapLegend — a gradient bar with low/high scale labels, matching the gradient used by Heatmap

agent-ready

Props

LineChart

Customisable Chart.js line chart with built-in zoom, tooltip, and legend. Data is passed via props; the component does no fetching

agent-ready

Props

LineChartCard

Composable line-chart card with title, timeline range selector, legend (basic or detailed), error boundary, and an optional min/max/avg footer.

Accepts either pre-shaped data or rawData + a dataAdapter callback so upstream domain components can keep their data wrangling local

agent-ready

Props

MinMaxAvg

Min / Max / Avg summary row with consistent MDK label and value styling

agent-ready

Props

MonthlyEbitdaChart

Bar chart comparing EBITDA across the most recent months for trend visualisation

agent-ready

Props

OperationalHashrateChart

Hashrate trend card for the operational dashboard. Renders the site hashrate over time (TH/s) with an optional nominal reference line, plus an expand toggle. Purely presentational - pass pre-shaped data from useOperationsDashboard

advanced

Props

OperationalMinersStatusChart

Miners-status card for the operational dashboard. Renders a stacked daily breakdown of miner states (online / error / offline / sleep / maintenance) with an expand toggle. Purely presentational - pass pre-shaped data from useOperationsDashboard

advanced

Props

OperationalPowerConsumptionChart

Power-consumption trend card for the operational dashboard. Renders site power draw over time (MW) with an optional power-availability reference line, plus an expand toggle. Purely presentational - pass pre-shaped data from useOperationsDashboard

advanced

Props

OperationalSiteEfficiencyChart

Site-efficiency trend card for the operational dashboard. Renders measured site efficiency over time (W/TH/s) with an optional nominal reference line, an info tooltip, and an expand toggle. Purely presentational - pass pre-shaped data from useOperationsDashboard

advanced

Props

OperationsEnergyChart

Doughnut breakdown of Operations vs Energy cost (in USD totals).

Mirrors the OSS OperationsEnergyCostChart. Returns the empty-state placeholder when both totals are zero (the OSS chart hides both slices in that case)

agent-ready

Props

OperationsEnergyCostChart

Doughnut breakdown of Operations vs Energy cost (USD per MWh). Wraps ChartContainer and DoughnutChart; pass operationalCostsUSD and energyCostsUSD via data

agent-ready

Props

PowerModeTimelineChart

Timeline chart for power-mode state changes over time. Wraps TimelineChart with mining-specific data shaping

agent-ready

Props

ProductionCostChart

Production cost over time, overlaid with BTC price.

Mirrors the OSS ProductionCostPriceChart - both series rendered as bars on the same x-axis (bucket labels derived from dateRange.period)

agent-ready

Props

RevenueChart

Stacked bar chart displaying monthly revenue per site. Automatically switches between BTC and Sats display based on value scale. Receives pre-fetched data as props — no internal data fetching

agent-ready

Props

ThresholdLineChart

Line chart with optional horizontal threshold lines. Wraps ChartContainer and LineChart; pass series and optional thresholds via data

agent-ready

Props

TimelineChart

Discrete-event timeline chart (e.g. miner state over time) with a category legend. Supports streaming updates via newData

agent-ready

Props