State timeline

On this page

Patterned intervals indicate unknown state

Charger

Inverter

12:00 UTC12:30 UTC13:00 UTC

Bulk
Absorption
Float
Standby
Invert

Inspect equipment modes and diagnostic validity over explicit time intervals.

Code

import type { ReactElement } from "react";
import { StateTimeline } from "@bosunkit/components/state-timeline";
import { ChartPanel } from "@bosunkit/components/chart-panel";
// Fixed illustrative display strings; consumers supply their quantity formatter.
export const description: string =
  "Illustrative charger and inverter states have explicit ends, with patterned unknown intervals.";
const times: Readonly<Record<number, string>> = {
  "0": "12:00 UTC",
  "15": "12:15 UTC",
  "20": "12:20 UTC",
  "30": "12:30 UTC",
  "35": "12:35 UTC",
  "45": "12:45 UTC",
  "60": "13:00 UTC",
};
export default function EquipmentStates(): ReactElement {
  return (
    <ChartPanel title="Electrical operating modes" description="Illustrative history · 12:00–13:00 UTC">
      <StateTimeline
        rows={[
          {
            key: "charger-0",
            label: "Charger",
            intervals: [
              { start: 0, end: 20, state: "bulk" },
              { start: 20, end: 35, state: "absorption" },
              { start: 45, end: 60, state: "float" },
            ],
          },
          {
            key: "inverter-0",
            label: "Inverter",
            intervals: [
              { start: 0, end: 30, state: "standby" },
              { start: 30, end: 60, state: "invert" },
            ],
          },
        ]}
        config={{
          bulk: { label: "Bulk" },
          absorption: { label: "Absorption" },
          float: { label: "Float" },
          standby: { label: "Standby" },
          invert: { label: "Invert" },
        }}
        range={[0, 60]}
        label="Illustrative charger and inverter state history"
        formatTime={(time: number): string => times[time] ?? ""}
        unknownText="Patterned intervals indicate unknown state"
        dataTableLabel="View state intervals"
        columnLabels={["Equipment", "Start", "End", "State", "Details"]}
      />
    </ChartPanel>
  );
}

Each entity supplies ordered, non-overlapping half-open intervals with validity ends. The drawing clips them to the controlled range and fills absent history with patterned unknown intervals. A state cannot continue beyond its supplied end. The server retrieves the preceding state at the window boundary, preserves heartbeat validity and records transitions. Caller labels describe the device, state and time reference; the source table includes interval details. Operational states use categorical colors and patterns; alert priority presentation belongs in AlertCard.

01Preserve meaningObservation spacing, validity and comparison basis remain explicit.

02Caller display textLabels and formatted values come from the consumer.

03Inspect without hoverNamed controls and source values remain accessible with a keyboard.

Examples

Composition

Patterned intervals indicate unknown state

Charger

Inverter

12:00 UTC12:30 UTC13:00 UTC

Bulk
Absorption
Float
Standby
Invert

Illustrative charger and inverter states have explicit ends, with patterned unknown intervals.

Code

import type { ReactElement } from "react";
import { StateTimeline } from "@bosunkit/components/state-timeline";
import { ChartPanel } from "@bosunkit/components/chart-panel";
// Fixed illustrative display strings; consumers supply their quantity formatter.
export const description: string =
  "Illustrative charger and inverter states have explicit ends, with patterned unknown intervals.";
const times: Readonly<Record<number, string>> = {
  "0": "12:00 UTC",
  "15": "12:15 UTC",
  "20": "12:20 UTC",
  "30": "12:30 UTC",
  "35": "12:35 UTC",
  "45": "12:45 UTC",
  "60": "13:00 UTC",
};
export default function EquipmentStates(): ReactElement {
  return (
    <ChartPanel title="Electrical operating modes" description="Illustrative history · 12:00–13:00 UTC">
      <StateTimeline
        rows={[
          {
            key: "charger-0",
            label: "Charger",
            intervals: [
              { start: 0, end: 20, state: "bulk" },
              { start: 20, end: 35, state: "absorption" },
              { start: 45, end: 60, state: "float" },
            ],
          },
          {
            key: "inverter-0",
            label: "Inverter",
            intervals: [
              { start: 0, end: 30, state: "standby" },
              { start: 30, end: 60, state: "invert" },
            ],
          },
        ]}
        config={{
          bulk: { label: "Bulk" },
          absorption: { label: "Absorption" },
          float: { label: "Float" },
          standby: { label: "Standby" },
          invert: { label: "Invert" },
        }}
        range={[0, 60]}
        label="Illustrative charger and inverter state history"
        formatTime={(time: number): string => times[time] ?? ""}
        unknownText="Patterned intervals indicate unknown state"
        dataTableLabel="View state intervals"
        columnLabels={["Equipment", "Start", "End", "State", "Details"]}
      />
    </ChartPanel>
  );
}

Props

Prop	Type	Default	Description
rowsrequired	readonly TimelineRow[]	–	Entities or diagnostic channels, in display order.
configrequired	Readonly<Record<string, TimelineState>>	–	Registry of state names, palette slots and patterns; at most nine states.
rangerequired	ChartRangeValue	–	Controlled half-open visible window in epoch milliseconds.
labelrequired	string	–	Accessible name describing the entities and time window.
formatTimerequired	(time: number) => string	–	Formats time ticks and interval endpoints, including their time reference.
unknownTextrequired	string	–	Display text for unknown intervals and gaps.
dataTableLabelrequired	string	–	Disclosure button and source-table accessible name.
columnLabelsrequired	readonly [string, string, string, string, string]	–	Entity, start, end, state and details column headings.
height	string \| undefined	–	Optional minimum plot height; rows determine the natural height when unset.
motion	MotionProp \| undefined	false	Entrance and exit motion; off by default. State changes never interpolate.
className	string \| undefined	–	Additional classes on the root.
testId	string \| undefined	–	Becomes data-testid on the root.
ref	Ref<HTMLElement> \| undefined	–	The root element.

Patterned intervals indicate unknown state

Charger

Inverter

12:00 UTC12:30 UTC13:00 UTC

Bulk
Absorption
Float
Standby
Invert

Keep the comparison basis and missing information visible.

Don't

Preserve gaps and supply the source or validity information needed to interpret the observations.

Missing history must not appear to be a measured zero or a known state.

Instrument history: stream selection, aggregation and asynchronous windows.
Chart panel: descriptions, controls and source information.
Chart container: shared registry and direct Recharts composition.

Examples

Composition

Props

Related