MicroBT container components

UI for MicroBT containers. These components read from MicroBT-shaped device records and render cooling status, fire and water sensors, power meters, and a gauge chart used for temperature readouts.

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 MicroBT container device record. Cooling components read from container_specific_stats.cdu; PowerMeters reads from container_specific_stats.power_meters.

Components

FireStatusBox

Shows smoke detector, water ingress detector, and cooling fan status as colored indicators for MicroBT containers.

Import

import { FireStatusBox } from '@mdk/foundation'

Props

FireStatusBoxData type

type FireStatusBoxData = {
  smokeDetector: string | number
  waterIngressDetector: string | number
  coolingFanStatus: string | number
}

Basic usage

<FireStatusBox
  data={{
    smokeDetector: microbtContainer.smoke_detector,
    waterIngressDetector: microbtContainer.water_ingress_detector,
    coolingFanStatus: microbtContainer.cooling_fan_status,
  }}
/>

Indicators rendered

• Smoke Detector 1: red Detected when smokeDetector is truthy, green Normal otherwise
• Water Ingress Detector: red Detected when waterIngressDetector is truthy, green Normal otherwise
• Fan Status: green Running when coolingFanStatus is truthy, gray Off otherwise

Styling

• .mdk-fire-status-box: Root element
• .mdk-fire-status-box__item: Single sensor row
• .mdk-fire-status-box__label: Sensor label text

GaugeChartComponent

Wraps the core GaugeChart to render a value against a maximum with optional label, custom colors, and an overlaid numeric value and unit.

Import

import { GaugeChartComponent } from '@mdk/foundation'

Props

Basic usage

<GaugeChartComponent
  max={100}
  value={75.5}
  label="Temperature"
  unit="°C"
/>

Styling

• .mdk-gauge-chart-component: Root element
• .mdk-gauge-chart-component__title: Gauge title
• .mdk-gauge-chart-component__chart: Chart wrapper
• .mdk-gauge-chart-component__value: Value readout row
• .mdk-gauge-chart-component__value-number: Numeric value text
• .mdk-gauge-chart-component__value-unit: Unit text

MicroBTCooling

Detailed MicroBT cooling view covering cycle pump, main circulation pump (status, switch, speed), cooling fan, and make-up water pump, with Kehua-specific adjustments.

Import

import { MicroBTCooling } from '@mdk/foundation'

Props

Basic usage

<MicroBTCooling data={microbtContainer} />

Composition

• Cycle Pump indicator from cdu.cycle_pump_control (green Running, gray Off)
• Main Circulation Pump panel: status from circulation_pump_running_status, switch from circulation_pump_switch, speed from circulation_pump_speed in % or Hz
• Cooling Fan panel: status from cooling_fan_control, Kehua-only speed from cooling_system_status, switch from cooling_fan_switch
• Make Up Pump panel: status is red on makeup_water_pump_fault, green on makeup_water_pump_control, gray otherwise; switch from makeup_water_pump_switch.

Styling

• .mdk-micro-bt-cooling: Root element
• .mdk-micro-bt-cooling__section: Section wrapper
• .mdk-micro-bt-cooling__section-title: Section heading
• .mdk-micro-bt-cooling__divider: Horizontal divider between sections
• .mdk-micro-bt-cooling__row: Row of items inside a section
• .mdk-micro-bt-cooling__item-row: Single-row layout (cycle pump)
• .mdk-micro-bt-cooling__item: Item cell
• .mdk-micro-bt-cooling__label: Item label text
• .mdk-micro-bt-cooling__value: Item value text

MicroBTSettings

Combines container parameter settings with an editable inlet water temperature threshold form for MicroBT containers.

Import

import { MicroBTSettings } from '@mdk/foundation'

Props

Basic usage

<MicroBTSettings data={microbtContainer} />

With custom thresholds

<MicroBTSettings
  data={microbtContainer}
  containerSettings={{ thresholds: customThresholds }}
/>

Composition

• Renders ContainerParamsSettings for the common container parameters block
• Renders MicroBTEditableThresholdForm wired with MicroBT-specific color, flash, and superflash helpers (getMicroBtInletTempColor, shouldMicroBtTemperatureFlash, shouldMicroBtTemperatureSuperflash) for inlet water temperature

Styling

• .mdk-micro-bt-settings: Root element
• .mdk-micro-bt-settings__divider: Spacer between the params and threshold sections

MicroBTWidgetBox

Compact widget showing MicroBT cycle pump and cooling fan running/off indicators, with a red error state when the cooling fan is not running.

Import

import { MicroBTWidgetBox } from '@mdk/foundation'

Props

Basic usage

<MicroBTWidgetBox data={microbtContainer} />

Indicators rendered

• Cicle Pump: green Running when cdu.circulation_pump_running_status equals CONTAINER_STATUS.RUNNING, gray Off otherwise
• Cooling Fan: green Running when cdu.cooling_fan_control is truthy, red Error otherwise

Styling

• .mdk-micro-bt-widget-box: Root grid element
• .mdk-micro-bt-widget-box__item: Single indicator cell
• .mdk-micro-bt-widget-box__title: Indicator label text

PowerMeters

Renders one data panel per power meter with communication status, A-B/B-C/C-A voltages, power factor, frequency, active and apparent power, and energy.

Import

import { PowerMeters } from '@mdk/foundation'

Props

Basic usage

<PowerMeters data={microbtContainer} />

Rows rendered

• Communication Status: green Normal when status === 1, red Error otherwise
• Voltage A-B, Voltage B-C, Voltage C-A: voltage_ab, voltage_bc, voltage_ca in V
• Total Power Factor: total_power_factor, unitless
• Frequency: freq in Hz
• Total Active Power: total_active_power in kW
• Total Apparent Power: total_apparent_power in kVA
• Total Active Energy: total_active_energy in kWh

Styling

• .mdk-power-meters: Root element
• .mdk-power-meters__panel: Single power-meter panel wrapper