Bitmain container components

UI for Bitmain hydro containers. These components read from Bitmain-shaped device records and render cooling-system status, power and positioning, liquid-flow charts, and hydro settings.

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

Prerequisites

• Complete the @mdk/foundation installation and add the dependency
• A Bitmain container device record. Most components read from container_specific_stats and container_specific_stats_group_aggr on the device.

Components

BitMainBasicSettings

Composite settings panel for Bitmain containers showing cooling system status alongside power distribution and GPS positioning sections.

Import

import { BitMainBasicSettings } from '@mdk/foundation'

Props

Basic usage

<BitMainBasicSettings data={bitmainContainer} />

Composition

• Renders BitMainCoolingSystem with pump and fan indicators
• Renders a "Power & Positioning" section containing BitMainPowerAndPositioning

Styling

• .mdk-bitmain-basic-settings: Root element
• .mdk-bitmain-basic-settings__section: Section wrapper
• .mdk-bitmain-basic-settings__title: Section heading

BitMainCoolingSystem

Displays Bitmain cooling subsystem statuses including circulating pump, fluid infusion pump, two container fans, and three cooling tower fans, each with fault-aware indicators.

Import

import { BitMainCoolingSystem } from '@mdk/foundation'

Props

Basic usage

<BitMainCoolingSystem data={bitmainContainer} />

Indicators rendered

• Circulating pump: circulating_pump, fault from circulating_pump_fault
• Fluid Infusion pump: fluid_infusion_pump, fault from fluid_infusion_pump_fault
• Fan #1, Fan #2: fan1, fan2, faults from fan1_fault, fan2_fault
• Cooling tower fan #1..#3: cooling_tower_fan1..3 with matching _fault attributes
• Indicator color is red on fault, green when running, gray otherwise

Styling

• .mdk-bitmain-cooling-system: Root element
• .mdk-bitmain-cooling-system__wrapper: Indicator grid wrapper
• .mdk-bitmain-cooling-system__row: Row of indicators
• .mdk-bitmain-cooling-system__item: Indicator cell
• .mdk-bitmain-cooling-system__label: Label text

BitMainHydroLiquidTemperatureCharts

Time-series chart of secondary liquid supply Temp1 and Temp2 for Bitmain Hydro containers, with legend and range selector.

Import

import { BitMainHydroLiquidTemperatureCharts } from '@mdk/foundation'

Props

Basic usage

<BitMainHydroLiquidTemperatureCharts
  tag="container1"
  data={tempData}
  timeline="24h"
/>

Lines rendered

• Sec. Liquid supply Temp1: sky blue, backend attribute second_supply_temp1_group
• Sec. Liquid supply Temp2: violet, backend attribute second_supply_temp2_group
• Values are shown in °C with 1 decimal place

BitMainHydroSettings

Top-level settings view for Bitmain Hydro containers combining basic settings with an editable threshold form for supply liquid temperature and pressure.

Import

import { BitMainHydroSettings } from '@mdk/foundation'

Props

Basic usage

<BitMainHydroSettings data={bitmainContainer} />

Composition

• Renders BitMainBasicSettings for cooling, power, and positioning
• Renders HydroEditableThresholdForm wired with Bitmain-specific color, flash, and superflash helpers for supply liquid temperature and pressure

Styling

• .mdk-bitmain-hydro-settings: Root element
• .mdk-bitmain-hydro-settings__params: Basic settings section
• .mdk-bitmain-hydro-settings__thresholds: Editable threshold section

BitMainLiquidPressureCharts

Time-series chart of supply and return liquid pressure for Bitmain containers, converting stored MPa values to bar for display.

Import

import { BitMainLiquidPressureCharts } from '@mdk/foundation'

Props

Basic usage

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

Lines rendered

• Supply Liquid Pressure: sky blue, backend attribute supply_liquid_pressure_group
• Return Liquid Pressure: violet, backend attribute return_liquid_pressure_group
• Values are shown in bar with 3 decimal places; source MPa values are autoconverted with convertMpaToBar.

BitMainLiquidTempCharts

Time-series chart of supply and return liquid temperatures in Celsius for Bitmain containers, with legend and range selector.

Import

import { BitMainLiquidTempCharts } from '@mdk/foundation'

Props

Basic usage

<BitMainLiquidTempCharts
  tag="container1"
  data={tempData}
  timeline="24h"
/>

Lines rendered

• Supply Liquid Temp: sky blue, backend attribute supply_liquid_temp_group
• Return Liquid Temp: violet, backend attribute return_liquid_temp_group
• Values are shown in °C with 1 decimal place

BitMainPowerAndPositioning

Shows Bitmain container power draw from distribution boxes 1 and 2 in kilowatts alongside latitude and longitude coordinates with direction.

Import

import { BitMainPowerAndPositioning } from '@mdk/foundation'

Props

Basic usage

<BitMainPowerAndPositioning data={bitmainContainer} />

Composition

• Renders a Power ContentBox with distribution box #1 and #2 kW values (read from distribution_box1_power_w, distribution_box2_power_w)
• Renders a Location ContentBox with latitude, longitude, and their direction fields

Styling

• .mdk-bitmain-power-positioning: Root element
• .mdk-bitmain-power-positioning__panel: Power or Location panel
• .mdk-bitmain-power-positioning__section: Section body
• .mdk-bitmain-power-positioning__power-item: Distribution box row
• .mdk-bitmain-power-positioning__location-grid: Latitude and longitude grid
• .mdk-bitmain-power-positioning__location-item: Coordinate cell
• .mdk-bitmain-power-positioning__location-details: Coordinate details
• .mdk-bitmain-power-positioning__subtitle: Panel subtitle
• .mdk-bitmain-power-positioning__value: Power value text

BitMainPowerCharts

Time-series chart of Bitmain container power consumption showing a computed total plus per-distribution-box series, with kW-to-W conversion for display.

Import

import { BitMainPowerCharts } from '@mdk/foundation'

Props

Basic usage

<BitMainPowerCharts
  tag="container1"
  data={powerData}
  timeline="24h"
/>

Lines rendered

• Total Power: sky blue (3px), computed attribute total_power_computed (sum of boxes)
• Dist. Box 1 Power: violet, backend attribute distribution_box1_power_group
• Dist. Box 2 Power: red, backend attribute distribution_box2_power_group
• Values are shown in W (stored kW is converted with convertKwToW) with 2 decimal places

BitMainSupplyLiquidFlowCharts

Single-series time-series chart of supply liquid flow rate in cubic meters per hour for Bitmain containers.

Import

import { BitMainSupplyLiquidFlowCharts } from '@mdk/foundation'

Props

Basic usage

<BitMainSupplyLiquidFlowCharts
  tag="container1"
  data={flowData}
  timeline="24h"
/>

Lines rendered

• Supply Liquid Flow: sky blue (2px), backend attribute supply_liquid_flow_group
• Values are shown in m³/h with 2 decimal places

StatusItem

Generic row pairing a label with a colored indicator for normal, warning, fault, or unavailable states.

Import

import { StatusItem } from '@mdk/foundation'

Props

Status mapping

• normal: green indicator, label Normal
• warning: amber indicator, label Warning
• fault: red indicator, label Fault
• unavailable: gray indicator, label Unavailable

Basic usage

<StatusItem label="Temperature" status="normal" />
<StatusItem label="Pressure" status="warning" />
<StatusItem label="Flow" status="fault" />

Styling

• .mdk-status-item: Root element
• .mdk-status-item__content: Label and indicator row
• .mdk-status-item__label: Label text