Skip to content
design
Components

Situation line

The vessel's situation in one line, her position, depth, speed over ground and what she is doing.

On this page
50° 45.912′ N 001° 17.964′ W
Position
6.4
Depth
m
0.2
SOG
kn
Anchored 2 h 10 min
Night
At anchor at night, the depth floored.
Code
import { SituationLine } from "@bosunkit/components/situation-line";
import type { ReactElement } from "react";

export const description: string =
  "At anchor at night: her position, the depth floored, her speed over ground, and how long she has been anchored.";

export default function Showcase(): ReactElement {
  return (
    <SituationLine
      position={{ value: { latitude: 50.7652, longitude: -1.2994 } }}
      depth={{ value: 6.48 }}
      speedOverGround={{ value: 0.2 }}
      activity="Anchored"
      activityDuration="2 h 10 min"
      night
    />
  );
}

The situation line sets the vessel's situation in one line, under her vessel overview at the top of the situation board: her position in chart notation, the depth, her speed over ground, what she is doing and for how long, and night when it is. The position, the depth and the speed over ground are readings, the position written as text: stale, a value dims and carries its age in the yellow badge; invalid, it keeps its last value in the invalid marking and says in red how old it is; with no value it is the readout's dash, never blank. The depth is floored as every depth is, tenths below 10 m and whole meters above, so the line never says there is more water than there is. Only what is given is drawn, and the line wraps on a narrow screen with each item kept whole.

Each live value comes with its trust state as bosund reports it (integrity and ageSeconds); what she is doing and for how long come from the caller as display text in the crew's language.

Examples

Stale depth

50° 44.286′ N 001° 06.618′ W
Position
14
Depth
m
3 min
6.4
SOG
kn
Underway 1 h 35 min
Underway with the depth three minutes old: the depth dims and carries its age, as every reading does.
Code
import { SituationLine } from "@bosunkit/components/situation-line";
import type { ReactElement } from "react";

export const description: string =
  "Underway with the depth three minutes old: the depth dims and carries its age, as every reading does.";

export default function Stale(): ReactElement {
  return (
    <SituationLine
      position={{ value: { latitude: 50.7381, longitude: -1.1103 } }}
      depth={{ value: 14.2, integrity: "stale", ageSeconds: 180 }}
      speedOverGround={{ value: 6.4 }}
      activity="Underway"
      activityDuration="1 h 35 min"
    />
  );
}

Lost fix

50° 44.286′ N 001° 06.618′ W
Position
last seen 5 min
9.3
Depth
m
‒.‒
SOG
kn
last seen —
Underway
The GPS fix lost five minutes ago: her last position stays, marked invalid, with how old it is, and the speed over ground has no value at all.
Code
import { SituationLine } from "@bosunkit/components/situation-line";
import type { ReactElement } from "react";

export const description: string =
  "The GPS fix lost five minutes ago: her last position stays, marked invalid, with how old it is, and the speed " +
  "over ground has no value at all.";

export default function LostFix(): ReactElement {
  return (
    <SituationLine
      position={{ value: { latitude: 50.7381, longitude: -1.1103 }, integrity: "invalid", ageSeconds: 300 }}
      depth={{ value: 9.3 }}
      speedOverGround={{ value: null }}
      activity="Underway"
    />
  );
}

On the board

Hanse 460 Design Berret-Racoupeau Built 2021–present

LOA 14.60 m · Draft 2.25 m · Air draft 21.90 m

50° 45.912′ N 001° 17.964′ W
Position
6.4
Depth
m
0.2
SOG
kn
Anchored 2 h 10 min
Night
The top of the situation board: the vessel overview, closed, and her situation line under it.
Code
import { SituationLine } from "@bosunkit/components/situation-line";
import { VesselOverview } from "@bosunkit/components/vessel-overview";
import { HANSE_2021 } from "@bosunkit/components/vessel-profile";
import type { ReactElement } from "react";

export const description: string =
  "The top of the situation board: the vessel overview, closed, and her situation line under it.";

export default function OnTheBoard(): ReactElement {
  return (
    <div style={{ display: "grid", gap: "var(--space-md)" }}>
      <VesselOverview
        name="Althea"
        model="Hanse 460"
        designer="Berret-Racoupeau"
        modelYears="2021–present"
        mmsi="244123456"
        callSign="PDAX"
        defaultOpen={false}
        outline={HANSE_2021}
        proportions={{ lengthOverall: 14.6, waterlineLength: 13.05, draft: 2.25 }}
        dimensions={{ lengthOverall: "14.60 m", draft: "2.25 m", airDraft: "21.90 m" }}
      />
      <SituationLine
        position={{ value: { latitude: 50.7652, longitude: -1.2994 } }}
        depth={{ value: 6.48 }}
        speedOverGround={{ value: 0.2 }}
        activity="Anchored"
        activityDuration="2 h 10 min"
        night
      />
    </div>
  );
}

Props

PropTypeDefaultDescription
positionSituationReading<Position> | undefined–Her position, written in chart notation. Not drawn when unset.
depthSituationReading<number> | undefined–The depth in meters, floored as core/i18n floors a depth: tenths below 10 m, whole meters above.
speedOverGroundSituationReading<number> | undefined–Her speed over ground in knots, to a tenth.
activitystring | undefined–What she is doing, as display text in the crew's language ("Anchored").
activityDurationstring | undefined–For how long she has been doing it, as display text ("2 h 10 min").
nightboolean | undefinedfalseWhether it is night at her position.
testIdstring | undefined–Becomes data-testid on the root.
classNamestring | undefined–Classes added to the root's own.