Readout

import {
  ObcTextboxFontWeight,
  Readout,
  ReadoutDataQuality,
  ReadoutDirection,
  ReadoutPriority,
  ReadoutSize,
  ReadoutValueType,
} from "@bosunkit/instruments";
import { Gauge, Navigation, Target, Wind } from "lucide-react";
import { useEffect, useState } from "react";
import type { CSSProperties, Dispatch, ReactElement, SetStateAction } from "react";

export const description: string =
  "Althea's navigation readouts on a one-second feed: the autopilot heading closing on its setpoint, speed against the advised passage speed, the depth shoaling under the anchorage limit, and horizontal rows for wind of low integrity, an invalid sensor, a radar on standby, a text status and a label-only row.";

const PANEL_STYLE: CSSProperties = {
  display: "grid",
  gap: "var(--space-lg)",
  padding: "var(--space-lg)",
  borderRadius: "var(--radius-md)",
  background: "var(--container-section-color)",
  width: "100%",
  maxWidth: "40em",
};

/** The three vertical readouts in equal columns, their feet on one line, so their sources line up. */
const HEADLINE_STYLE: CSSProperties = {
  display: "grid",
  gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
  alignItems: "end",
  justifyItems: "center",
  gap: "var(--space-lg)",
};

/** The horizontal rows under a rule, each starting on the same edge. */
const ROWS_STYLE: CSSProperties = {
  display: "grid",
  justifyItems: "start",
  gap: "var(--space-sm)",
  paddingBlockStart: "var(--space-lg)",
  borderBlockStart: "1px solid var(--border-divider-color)",
};

const NOTE_STYLE: CSSProperties = { margin: 0, font: "var(--bk-type-caption)", color: "var(--element-neutral-color)" };

/** A depth in tenths of a meter, floored, so it never shows more water than there is. */
function tenths(depth: number): string {
  const floored: number = Math.floor(depth * 10);
  return `${String(Math.trunc(floored / 10))}.${String(floored % 10)}`;
}

/** The autopilot's course to steer after the crew dialed 10° to starboard for the Sóller lighthouse. */
const HEADING_SETPOINT: number = 64;

export default function Showcase(): ReactElement {
  const [step, setStep]: [number, Dispatch<SetStateAction<number>>] = useState<number>(0);

  useEffect((): (() => void) => {
    const timer: number = window.setInterval((): void => {
      setStep((previous: number): number => previous + 1);
    }, 1000);
    return (): void => {
      window.clearInterval(timer);
    };
  }, []);

  const phase: number = step % 30;
  const heading: number = Math.min(HEADING_SETPOINT, 54 + phase * 0.8);
  const speed: number = 6.1 + 0.3 * Math.sin(step / 3);
  const depth: number = 4.2 - phase * 0.05;
  const shallow: boolean = depth < 3.5;
  const trueWind: number = 17 + 2 * Math.sin(step / 2);

  return (
    <div style={PANEL_STYLE}>
      <div style={HEADLINE_STYLE}>
        <Readout
          label="HDG"
          src="Fluxgate compass"
          value={heading}
          hasDegree
          maxDigits={3}
          size={ReadoutSize.large}
          priority={ReadoutPriority.enhanced}
          hasSetpoint
          setpoint={HEADING_SETPOINT}
          setpointIcon={<Navigation size={14} aria-hidden />}
          valueOptions={{ weight: ObcTextboxFontWeight.bold, hintedZeros: true }}
          setpointOptions={{ hintedZeros: true }}
        />
        <Readout
          label="SOG"
          unit="kn"
          src="GPS"
          value={speed}
          fractionDigits={1}
          maxDigits={2}
          size={ReadoutSize.medium}
          hasAdvice
          advice={6.5}
          adviceIcon={<Target size={14} aria-hidden />}
          unitOptions={{ spaceReserver: "kn" }}
        />
        <Readout
          label="Depth"
          unit="m"
          src="Echosounder"
          value={depth}
          fractionDigits={1}
          maxDigits={2}
          size={ReadoutSize.medium}
        />
      </div>
      <div style={ROWS_STYLE}>
        <Readout
          direction={ReadoutDirection.horizontal}
          label="TWS"
          unit="kn"
          src="Masthead, last calibrated 2025"
          value={trueWind}
          fractionDigits={1}
          dataQuality={ReadoutDataQuality.lowIntegrity}
          valueIcon={<Wind size={16} aria-hidden />}
          valueOptions={{ hasIcon: true }}
        />
        <Readout
          direction={ReadoutDirection.horizontal}
          label="Sea temp"
          unit="°C"
          src="Transducer"
          value={null}
          dataQuality={ReadoutDataQuality.invalid}
          hasDegreeSpacer
        />
        <Readout
          direction={ReadoutDirection.horizontal}
          label="Radar"
          src="Halo 20+"
          value={0}
          off
          offText="Standby"
          valueIcon={<Gauge size={16} aria-hidden />}
          valueOptions={{ hasIcon: true }}
        />
        <Readout
          direction={ReadoutDirection.horizontal}
          label="AIS status"
          src="Class B transponder"
          value="Under way using engine"
          valueType={ReadoutValueType.text}
        />
        <Readout direction={ReadoutDirection.horizontal} label="Anchor watch, armed at 21:40" hasValue={false} />
      </div>
      <p style={NOTE_STYLE}>
        {shallow
          ? `Depth ${tenths(depth)} m is under the 3.5 m limit set for this anchorage: slow down and turn toward deeper water to the north.`
          : "Autopilot turning to 064° for the Sóller lighthouse; speed is under the 6.5 kn advised for an 18:00 arrival."}
      </p>
    </div>
  );
}

import { Readout } from "@bosunkit/instruments";
import type { ReactElement } from "react";

export const description: string = "A value of 9.87 shown to one decimal, with room for three integer digits.";

export default function Value(): ReactElement {
  return (
    <Readout value={9.87} fractionDigits={1} maxDigits={3} />
  );
}

import { Readout } from "@bosunkit/instruments";
import type { ReactElement } from "react";

export const description: string = "A value that is not available shows a dash, so the layout does not move.";

export default function NoValue(): ReactElement {
  return (
    <Readout value={null} />
  );
}