Charts

Chart components specialized for Bitcoin mining operations data visualization, including hashrate trends, power consumption, power mode timelines, and multi-container comparisons.

Prerequisites

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

ChartWrapper

Wrapper component for charts with built-in loading and empty state handling.

Import

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

Props

Chart children (LineChart, BarChart) come from @tetherto/mdk-react-devkit/core.

import { LineChart, BarChart } from '@tetherto/mdk-react-devkit/core'

const CustomSpinner = () => <div className="my-spinner" aria-hidden />

Basic usage

<ChartWrapper
  data={chartData}
  isLoading={isLoading}
  minHeight={400}
>
  <LineChart data={chartData} />
</ChartWrapper>

With custom loader

<ChartWrapper
  data={chartData}
  isLoading={isLoading}
  customLoader={<CustomSpinner />}
  minHeight={300}
>
  <LineChart data={chartData} />
</ChartWrapper>

With custom empty message

Pass an empty dataset so ChartWrapper shows the empty placeholder instead of the chart. With non-empty dataset, children render and the custom message is not shown.

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

const emptyBarData = { labels: [], datasets: [] }

<ChartWrapper
  dataset={emptyBarData}
  isLoading={false}
  customNoDataMessage="No hashrate data available for this period"
  minHeight={300}
>
  <BarChart data={emptyBarData} />
</ChartWrapper>

States

The component handles three states automatically. Chart children are hidden while isLoading is true or when data / dataset is empty (and showNoDataPlaceholder is true):

1. Loading: Shows default <Loader /> (animated dots) or customLoader
2. No data: Shows EmptyState placeholder (or customNoDataMessage)
3. Has data: Shows chart content

Styling

• .mdk-chart-wrapper: Root element
• .mdk-chart-wrapper__content: Chart content container
• .mdk-chart-wrapper__content--hidden: Hidden content state
• .mdk-chart-wrapper__empty: Empty state container
• .mdk-chart-wrapper__loading: Loading state container

ContainerCharts

Container-level chart dashboard with combination selector and multiple chart types.

Import

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

Props

ChartEntry type

type EntryData = {
  [key: string]: number | null | undefined
}

type ChartEntry = {
  ts: number | string
  container_specific_stats_group_aggr: Record<string, EntryData | null | undefined>
}

Each row’s container_specific_stats_group_aggr keys use complete container type ids (for example container-bd-d40-m30, container-as-hk3). Stat field names inside each entry depend on the container family.

Bitdeer (container-bd-… keys) — field names per chart block:

Hydro (container-as-hk3): supply_liquid_temp_group, supply_liquid_pressure_group.

Combination value strings must contain the real prefix patterns the component detects (bd-…, as-hk3…, as-immersion…, mbt-…). Values such as bitmain_hydro_b2 (underscores) do not match isAntspaceHydro() and show the wrong chart blocks.

const chartData: ChartEntry[] = [
  {
    ts: 1700000000,
    container_specific_stats_group_aggr: {
      'container-bd-d40-m30': {
        hot_temp_c_w_1_group: 52,
        hot_temp_c_w_2_group: 54,
        cold_temp_c_w_1_group: 38,
        cold_temp_c_w_2_group: 39,
        cold_temp_c_1_group: 36,
        cold_temp_c_2_group: 37,
        tank1_bar_group: 2.4,
        tank2_bar_group: 2.5,
      },
      'container-as-hk3': {
        supply_liquid_temp_group: 44,
        supply_liquid_pressure_group: 2.8,
      },
    },
  },
]

Basic usage

<ContainerCharts
  combinations={[
    { value: 'bd-d40-m30_wm-m30sp', label: 'Bitdeer M30SP' },
    { value: 'as-hk3_am-s19xp_h', label: 'Bitmain Hydro S19XP' },
  ]}
  defaultSelectedCombination="bd-d40-m30_wm-m30sp"
  chartRawData={chartData}
  onSelectedCombinationChange={setSelected}
/>

Container type charts

Charts displayed vary by container type:

• Bitdeer: Liquid Temp H, Liquid Temp L, Oil Temp, Pressure
• Bitmain Hydro: Liquid Temp L, Pressure
• Bitmain Immersion: Liquid Temp L, Oil Temp
• MicroBT: Liquid Temp L, Pressure

Styling

• .mdk-container-charts: Root element
• .mdk-container-charts__title: Section title
• .mdk-container-charts__select-row: Combination selector row
• .mdk-container-charts__select-label: Selector label
• .mdk-container-charts__select: Select dropdown
• .mdk-container-charts__layout: Charts grid layout
• .mdk-container-charts__chart-block: Individual chart container
• .mdk-container-charts__chart-title: Chart block title
• .mdk-container-charts__loading: Loading state container

LineChartCard

Composable card with timeline selector, legend, line chart, and stats footer.

Import

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

Props

Basic usage

<LineChartCard
  title="Temperature"
  data={chartData}
  timelineOptions={[
    { label: '5m', value: '5m' },
    { label: '1h', value: '1h' },
    { label: '24h', value: '24h' },
  ]}
  defaultTimeline="1h"
/>

With data adapter

<LineChartCard
  title="Power Consumption"
  rawData={rawStats}
  dataAdapter={(raw) => processStatsToChartData(raw)}
  timelineOptions={timelineOptions}
  defaultTimeline="24h"
  isLoading={isLoading}
/>

Styling

• .mdk-line-chart-card: Root element
• .mdk-line-chart-card__legends: Detail legends container

PowerModeTimelineChart

Visualizes power mode changes over time using TimelineChart.

Mining-specific wrapper around TimelineChart. Use TimelineChart directly when you supply custom row labels and segment data.

Import

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

Props

PowerModeTimelineEntry type

type PowerModeTimelineEntry = {
  ts?: number
  power_mode_group_aggr?: Record<string, string>
  status_group_aggr?: Record<string, string>
}

Basic usage

<PowerModeTimelineChart
  data={powerModeHistory}
  timezone="America/New_York"
  isLoading={isLoading}
/>

With real-time updates

<PowerModeTimelineChart
  data={powerModeHistory}
  dataUpdates={realtimeUpdates}
  timezone={userTimezone}
/>

TimelineChart

Horizontal timeline visualization for time-based events like power mode changes.

Gantt-like timeline for multiple rows. labels lists row names (Y axis). Each dataset groups colored segments; each segment's y must match one of labels, and x is [startMs, endMs].

Import

import { TimelineChart, emptyTimelineChartData } from '@tetherto/mdk-react-devkit/foundation'
import type { TimelineChartData } from '@tetherto/mdk-react-devkit/foundation'

Empty initial state

Use emptyTimelineChartData ({ labels: [], datasets: [] }) for the first render before live timeline data arrives. Pair with isLoading while fetching if needed.

<TimelineChart
  initialData={emptyTimelineChartData}
  title="Miner state"
  isLoading={isLoading}
/>

Props

TimelineChartData type

See also Timeline chart types.

type TimelineChartDataPoint = {
  x: [number, number] // segment start and end (epoch ms)
  y: string | undefined // must match an entry in labels
}

type TimelineChartDataset = {
  label: string
  data: TimelineChartDataPoint[]
  borderColor?: string[]
  backgroundColor?: string[]
  color?: string
}

type TimelineChartData = {
  labels: string[]
  datasets: TimelineChartDataset[]
}

type ChartRange = {
  min: Date | number
  max: Date | number
}

Basic usage

const start = Date.now() - 2 * 60 * 60 * 1000

<TimelineChart
  initialData={{
    labels: ['Task A', 'Task B', 'Task C'],
    datasets: [
      {
        label: 'In Progress',
        color: '#22afff',
        data: [
          { x: [start, start + 30 * 60 * 1000], y: 'Task A' },
          { x: [start + 20 * 60 * 1000, start + 50 * 60 * 1000], y: 'Task B' },
        ],
      },
      {
        label: 'Completed',
        color: '#72f59e',
        data: [{ x: [start + 30 * 60 * 1000, start + 60 * 60 * 1000], y: 'Task A' }],
      },
    ],
  }}
  title="Project timeline"
  axisTitleText={{ x: 'Time', y: 'Tasks' }}
/>

With newData updates

<TimelineChart
  initialData={baseline}
  newData={streamingUpdate}
  skipUpdates={false}
/>

When newData arrives, labels are unioned and datasets are appended. Set skipUpdates to keep only initialData.

Styling

• .mdk-timeline-chart: Root element
• .mdk-timeline-chart__loading: Loading container
• .mdk-timeline-chart__legend, .mdk-timeline-chart__legend-item, .mdk-timeline-chart__legend-color, .mdk-timeline-chart__legend-label: Legend row
• .mdk-timeline-chart__visualization: Scrollable chart body

WidgetTopRow

Dashboard header row displaying title, power consumption, and alarm indicators.

Import

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

Props

Composition

WidgetTopRow renders the title, then four fixed alarm slots in order (liquid, leakage, pressure, other), then the power readout. Each slot reads the matching alarms key from the table below; when the array is missing or empty, that slot is not shown. Tooltip text lists each Alert with timestamp and description.

When power and unit are set and statsErrorMessage is unset, the power label shows formatNumber(unitToKilo(power)) followed by the unit in a nested <span>.

Basic usage

<WidgetTopRow
  title="Container A1"
  power={125000}
  unit="kW"
/>

More examples

Styling

• .mdk-widget-top-row: Root element
• .mdk-widget-top-row__inner: Inner container
• .mdk-widget-top-row__title: Title text
• .mdk-widget-top-row__alarm-info-icon: Alarm slot icon (tooltip trigger)
• .mdk-widget-top-row__alarm-info-title: Alarm tooltip heading ({slot} issues)
• .mdk-widget-top-row__power: Power display or error placeholder