MDK Logo

Bitdeer container components

Bitdeer-specific UI for the Operations Centre containers view

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

For components shared across all container vendors (TanksBox, Socket, ContainerControlsBox, etc.), see the Containers overview.

Prerequisites

Components

ComponentDescription
BitdeerPumpsBitdeer exhaust fan status indicator
BitdeerSettingsBitdeer container settings and thresholds
BitdeerTankPressureChartsBitdeer tank pressure time-series chart
BitdeerTankTempChartsBitdeer 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 '@mdk/foundation'

Props

PropTypeDefaultDescription
dataUnknownRecordnoneBitdeer 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 '@mdk/foundation'

Props

PropTypeDefaultDescription
dataUnknownRecord{}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 '@mdk/foundation'

Props

PropTypeDefaultDescription
tagstringnoneContainer tag used to scope chart data
chartTitlestring'Tank Pressure'Chart header title
dataUnknownRecord[]noneTime-series entries to plot
timelinestring'24h'Initial time range (e.g. '5m', '3h', '1D')
dateRange{ start?: number; end?: number }noneExplicit start/end window in ms
fixedTimezonestringnoneForces a timezone for axis labels
heightnumbernoneChart 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 '@mdk/foundation'

Props

PropTypeDefaultDescription
tagstringnoneContainer tag used to scope chart data
tankNumbernumber | string1Tank index used to build backend attributes
dataUnknownRecord[]noneTime-series entries to plot
timelinestring'24h'Initial time range
dateRange{ start?: number; end?: number }noneExplicit start/end window in ms
fixedTimezonestringnoneForces a timezone for axis labels
heightnumbernoneChart 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

On this page