Operations charts

Chart components specialized for Bitcoin mining operations data visualization, including hashrate trends, power consumption, and timeline data.

Prerequisites

Before using these components, complete the @mdk/foundation installation and add the dependency.

`ChartWrapper`

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

Import

import { ChartWrapper } from '@mdk/foundation'

Props

Prop	Type	Default	Description
`children`	`ReactNode`	none	Chart content to render
`data`	`Record<string, unknown> \| unknown[]`	none	Chart data object (for LineChart with datasets)
`dataset`	`Record<string, unknown> \| unknown[]`	none	Chart dataset (for BarChart with direct dataset)
`isLoading`	`boolean`	`false`	Loading state
`customLoader`	`ReactNode`	`<Loader />`	Custom loader component
`showNoDataPlaceholder`	`boolean`	`true`	Show "no data" placeholder when empty
`customNoDataMessage`	`string \| ReactNode`	none	Custom empty state message
`minHeight`	`number`	`400`	Minimum height in pixels
`loadingMinHeight`	`number`	`minHeight`	Minimum height for loading skeleton
`className`	`string`	none	Additional CSS class

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}
>
  <BarChart data={chartData} />
</ChartWrapper>

With custom empty message

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

States

The component handles three states automatically:

Loading: Shows skeleton loader (or custom loader)
No data: Shows empty state placeholder
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

`HashRateLineChart`

Hashrate over time visualization with timeline selector and real-time data support.

Import

import { HashRateLineChart } from '@mdk/foundation'

Props

Prop	Type	Default	Description
`data`	`HashRateLogEntry[]`	`[]`	Historical hashrate data
`realtimeHashrateData`	`HashRateLogEntry`	none	Real-time hashrate entry
`isOneMinEnabled`	`boolean`	none	Enable 1-minute granularity option
`fixedTimezone`	`string`	none	Fixed timezone for display
`height`	`number`	none	Chart height in pixels
`loading`	`boolean`	none	Loading state

`HashRateLogEntry` type

type HashRateLogEntry = {
  timestamp: number | string
  hashrate: number
  unit?: string
}

Basic usage

<HashRateLineChart
  data={hashrateHistory}
  height={400}
  loading={isLoading}
/>

With real-time data

<HashRateLineChart
  data={hashrateHistory}
  realtimeHashrateData={currentHashrate}
  isOneMinEnabled
  height={400}
  loading={false}
/>

With timezone

<HashRateLineChart
  data={hashrateHistory}
  fixedTimezone="America/New_York"
  height={400}
  loading={false}
/>

Features

Timeline selector: 5m, 15m, 1h, 6h, 24h, 7d range options
Legend toggle: Show/hide individual datasets
Min/Max/Avg display: Statistical summary
Real-time updates: Supports streaming data
Highlighted value: Current hashrate prominently displayed

Styling

Built on ChartContainer and LineChart from @mdk/core. See core chart styling documentation for customization options.

`WidgetTopRow`

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

Import

import { WidgetTopRow } from '@mdk/foundation'

Props

Prop	Type	Default	Description
`title`	`string`	required	Widget title
`power`	`number`	none	Power consumption value
`unit`	`string`	none	Power unit (e.g., "kW")
`statsErrorMessage`	`string \| ErrorWithTimestamp[]`	none	Error message to display
`alarms`	`AlarmsMap`	none	Map of alarm types to alarm items
`className`	`string`	none	Additional CSS class

Basic usage

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

With alarms

<WidgetTopRow
  title="Container A1"
  power={125000}
  unit="kW"
  alarms={{
    temperature: [{ title: 'High temp', value: 85 }],
    pressure: [{ title: 'Low pressure', value: 0.8 }],
  }}
/>

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__power: Power display

`LineChartCard`

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

Import

import { LineChartCard } from '@mdk/foundation'

Props

Prop	Type	Default	Description
`data`	`LineChartCardData`	none	Processed chart data
`rawData`	`unknown`	none	Raw data to be processed by adapter
`dataAdapter`	`(raw: unknown) => LineChartCardData`	none	Adapter function for raw data
`title`	`string`	none	Chart title
`timelineOptions`	`TimelineOption[]`	none	Available timeline ranges
`timeline`	`string`	none	Controlled timeline value
`defaultTimeline`	`string`	`'5m'`	Default timeline selection
`onTimelineChange`	`(timeline: string) => void`	none	Timeline change handler
`detailLegends`	`boolean`	`false`	Show detailed legends
`isLoading`	`boolean`	`false`	Loading state
`shouldResetZoom`	`boolean`	`true`	Reset zoom on timeline change
`minHeight`	`number`	`350`	Minimum chart height
`className`	`string`	none	Additional CSS class

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

`TimelineChart`

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

Import

import { TimelineChart } from '@mdk/foundation'

Props

Prop	Type	Default	Description
`initialData`	`TimelineChartData`	required	Initial chart data
`newData`	`TimelineChartData`	none	New data to merge
`skipUpdates`	`boolean`	`false`	Skip merging new data
`range`	`[number, number]`	none	Time range bounds
`axisTitleText`	`{ x: string; y: string }`	`{ x: 'Time', y: '' }`	Axis titles
`isLoading`	`boolean`	`false`	Loading state
`title`	`string`	none	Chart title
`height`	`number \| string`	none	Chart height

`TimelineChartData` type

type TimelineChartData = {
  labels: string[]
  datasets: {
    label: string
    data: { x: number; y: number }[]
    color?: string
  }[]
}

Basic usage

<TimelineChart
  initialData={{
    labels: ['Normal', 'Low Power', 'High Power'],
    datasets: [
      { label: 'Miner 1', data: [...], color: 'blue' },
    ],
  }}
  axisTitleText={{ x: 'Time', y: 'Power Mode' }}
  title="Power Mode Changes"
/>

Styling

.mdk-timeline-chart: Root element
.mdk-timeline-chart__loading: Loading container

`ConsumptionLineChart`

Power consumption trend chart built on LineChartCard.

Import

import { ConsumptionLineChart } from '@mdk/foundation'

Props

Prop	Type	Default	Description
`data`	`TailLogEntry[]`	`[]`	Consumption log entries
`tag`	`string`	`'t-miner'`	Data tag filter
`isDetailed`	`boolean`	none	Show detail legends
`skipMinMaxAvg`	`boolean`	`false`	Skip min/max/avg display
`powerAttribute`	`string`	none	Power attribute key
`label`	`string`	none	Dataset label
`isOneMinEnabled`	`boolean`	none	Enable 1-minute option
`totalTransformerConsumption`	`boolean`	none	Use transformer total
`rawConsumptionW`	`number \| string`	none	Raw consumption value
`timelineOptions`	`TimelineOption[]`	none	Timeline options
`timeline`	`string`	none	Current timeline
`defaultTimeline`	`string`	none	Default timeline
`onTimelineChange`	`(timeline: string) => void`	none	Timeline change handler

Basic usage

<ConsumptionLineChart
  data={consumptionLogs}
  timelineOptions={timelineOptions}
  defaultTimeline="5m"
  onTimelineChange={setTimeline}
/>

`PowerModeTimelineChart`

Visualizes power mode changes over time using TimelineChart.

Import

import { PowerModeTimelineChart } from '@mdk/foundation'

Props

Prop	Type	Default	Description
`data`	`PowerModeTimelineEntry[]`	`[]`	Historical power mode data
`dataUpdates`	`PowerModeTimelineEntry[]`	`[]`	Real-time updates
`isLoading`	`boolean`	`false`	Loading state
`timezone`	`string`	`'UTC'`	Display timezone
`title`	`string`	`'Power Mode Timeline'`	Chart title

Basic usage

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

With real-time updates

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

`ContainerCharts`

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

Import

import { ContainerCharts } from '@mdk/foundation'

Props

Prop	Type	Default	Description
`featureEnabled`	`boolean`	`true`	Enable feature gate
`disabledMessage`	`string`	`'Container Charts feature is not enabled'`	Disabled state message
`combinations`	`{ value: string; label: string }[]`	required	Container combination options
`isLoadingCombinations`	`boolean`	`false`	Loading combinations
`title`	`string`	`'Container Charts'`	Section heading
`selectedCombination`	`string \| null`	none	Controlled selection
`defaultSelectedCombination`	`string \| null`	`null`	Default selection
`onSelectedCombinationChange`	`(value: string \| null) => void`	none	Selection change handler
`chartRawData`	`ChartEntry[]`	`null`	Raw chart data
`isLoadingCharts`	`boolean`	`false`	Loading charts
`getDatasetBorderColor`	`function`	none	Custom dataset colors

Basic usage

<ContainerCharts
  combinations={[
    { value: 'bitdeer_a1', label: 'Bitdeer A1' },
    { value: 'bitmain_hydro_b2', label: 'Bitmain Hydro B2' },
  ]}
  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

Operations charts

On this page