Bitdeer container components

UI for Bitdeer containers. These components consume Bitdeer-shaped device records and render pump state, exhaust fan status, tank charts, and settings.

For primitives shared across all container vendors (EnabledDisableToggle, DryCooler, etc.), see the Containers overview. The PDU socket tile has its own Socket page.

Prerequisites

Complete the @tetherto/mdk-react-devkit installation and add the dependency
A Bitdeer container device record. The charts and pumps components read from container_specific_stats.cooling_system.

Components

Component	Description
`BitdeerPumps`	Bitdeer exhaust fan status indicator
`BitdeerSettings`	Bitdeer container settings and thresholds
`BitdeerTankPressureCharts`	Bitdeer tank pressure time-series chart
`BitdeerTankTempCharts`	Bitdeer tank oil and water temperature chart

`BitdeerPumps`

Shows the Bitdeer container exhaust fan as an on/off indicator, driven by data from the cooling system.

Import

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

Props

Prop	Status	Type	Default	Description
`data`	Required	`UnknownRecord`	none	Bitdeer container record; must contain exhaust fan status

Basic usage

<BitdeerPumps data={bitdeerContainer} />

Styling

.mdk-bitdeer-pumps: Root element
.mdk-bitdeer-pumps__status: Title and indicator row
.mdk-bitdeer-pumps__title: Label text ("Exhaust Fan")

`BitdeerSettings`

Top-level Bitdeer container settings view combining container parameter info with editable oil temperature and tank pressure threshold forms and alert coloring.

Import

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

Props

Prop	Status	Type	Default	Description
`data`	Optional	`UnknownRecord`	`{}`	Bitdeer container device record

Basic usage

<BitdeerSettings data={bitdeerContainer} />

Composition

Renders ContainerParamsSettings with container identity data
Renders EditableThresholdForm wired with Bitdeer-specific color, flash, and superflash helpers for oil temperature and tank pressure

Styling

.mdk-bitdeer-settings: Root element
.mdk-bitdeer-settings__params: Container params section
.mdk-bitdeer-settings__thresholds: Editable threshold section

`BitdeerTankPressureCharts`

Time-series chart of Tank1 and Tank2 pressure in bar for Bitdeer containers, rendered through ContainerChartsBuilder.

Import

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

Props

Prop	Status	Type	Default	Description
`tag`	Required	`string`	none	Container tag used to scope chart data
`chartTitle`	Optional	`string`	`'Tank Pressure'`	Chart header title
`data`	Required	`UnknownRecord[]`	none	Time-series entries to plot
`timeline`	Optional	`string`	`'24h'`	Initial time range (e.g. `'5m'`, `'3h'`, `'1D'`)
`dateRange`	Optional	{ start?: number; end?: number }	none	Explicit start/end window in ms
`fixedTimezone`	Required	`string`	none	Forces a timezone for axis labels
`height`	Required	`number`	none	Chart height in pixels

Basic usage

<BitdeerTankPressureCharts
  tag="container1"
  data={pressureData}
  timeline="24h"
/>

Lines rendered

Tank1 Pressure: yellow, backend attribute tank1_bar_group
Tank2 Pressure: violet, backend attribute tank2_bar_group
Values are shown in bar with 1 decimal place

`BitdeerTankTempCharts`

Time-series chart of hot and cold oil and water temperatures for a specific Bitdeer tank, with lines dynamically built from the tank number.

Import

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

Props

Prop	Status	Type	Default	Description
`tag`	Required	`string`	none	Container tag used to scope chart data
`tankNumber`	Optional	`number \| string`	`1`	Tank index used to build backend attributes
`data`	Required	`UnknownRecord[]`	none	Time-series entries to plot
`timeline`	Optional	`string`	`'24h'`	Initial time range
`dateRange`	Optional	{ start?: number; end?: number }	none	Explicit start/end window in ms
`fixedTimezone`	Required	`string`	none	Forces a timezone for axis labels
`height`	Required	`number`	none	Chart height in pixels

Basic usage

<BitdeerTankTempCharts
  tag="container1"
  tankNumber={1}
  data={tempData}
  timeline="24h"
/>

Lines rendered

Tank{n} Oil TempL: yellow (4px), backend attribute cold_temp_c_{n}_group
Tank{n} Oil TempH: violet, hot_temp_c_{n}_group
Tank{n} Water TempL: blue, cold_temp_c_w_{n}_group
Tank{n} Water TempH: sky blue, hot_temp_c_w_{n}_group
Values are shown in °C

Bitdeer container components

On this page