GenericDataBox
Reusable labelled stat box used by container summary panels for one-off numeric values. Displays a table of label-value-unit rows.
Reusable labelled stat box used by container summary panels for one-off numeric values.
Displays a table of label-value-unit rows.
import { GenericDataBox } from "@tetherto/mdk-react-devkit";| Prop | Status | Type | Default | Description |
|---|---|---|---|---|
data | Optional | DataItem[] | undefined | — | Array of data items to display |
fallbackValue | Optional | unknown | — | Fallback value when value is undefined |
Usage
Reusable labelled stat box for container summary panels. Renders a vertical list of label-value-unit rows with optional highlight and colour/flash states driven by threshold rules.
Example
import { GenericDataBox } from '@tetherto/mdk-react-devkit'export const GenericDataBoxExample = () => ( <div className="mdk-example-row"> <GenericDataBox data={[ { label: 'Temperature', value: 45, units: '°C' }, { label: 'Pressure', value: 2.5, units: 'bar', isHighlighted: true }, { label: 'Status', value: 'Running', color: 'green' }, ]} /> </div>)GaugeChartComponent
Single-needle gauge chart used inside container settings for thresholded percentage values. Displays a value as a gauge/speedometer chart with label and unit.
MaintenanceDialogContent
Body of the maintenance dialog — captures the work-order details before applying the maintenance flag.