Reading

import { Reading, type ReadingTrend } from "@bosunkit/components/reading";
import { ReadoutDirection, ReadoutPriority, ReadoutSize } from "@bosunkit/instruments";
import { useEffect, useState, type Dispatch, type ReactElement, type SetStateAction } from "react";

export const description: string =
  "A helm panel on a live one-second feed: depth large and enhanced with its trend, speed and wind in medium, and " +
  "a row of small readings that are degraded, stale, lost and horizontal.";

/** Seconds since the example started; every value is derived from it. */
function useFeedSeconds(): number {
  const [seconds, setSeconds]: [number, Dispatch<SetStateAction<number>>] = useState<number>(0);
  useEffect((): (() => void) => {
    const timer: ReturnType<typeof setInterval> = setInterval((): void => {
      setSeconds((current: number): number => current + 1);
    }, 1000);
    return (): void => {
      clearInterval(timer);
    };
  }, []);
  return seconds;
}

/** The trend between two samples, steady within the given band. */
function trendOf(previous: number, current: number, band: number): ReadingTrend {
  if (current - previous > band) {
    return "rising";
  }
  return previous - current > band ? "falling" : "steady";
}

/** Depth over a sand bar on the approach to Sóller: shoaling to about 6 m and deepening again, once a minute. */
function depthAt(seconds: number): number {
  return 10.5 + Math.cos((seconds / 60) * 2 * Math.PI) * 4.4;
}

function speedAt(seconds: number): number {
  return 5.8 + Math.sin(seconds / 5) * 0.4;
}

function windAt(seconds: number): number {
  return 17 + Math.sin(seconds / 9) * 3 + (seconds % 7 === 0 ? 2.5 : 0);
}

export default function Showcase(): ReactElement {
  const seconds: number = useFeedSeconds();
  const depth: number = depthAt(seconds);
  const speed: number = speedAt(seconds);
  const wind: number = windAt(seconds);

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-xl)", width: "100%" }}>
      <div style={{ display: "flex", gap: "var(--space-2xl)", flexWrap: "wrap", alignItems: "flex-end" }}>
        <Reading
          value={depth}
          unit="m"
          label="Depth"
          source="DST810"
          fractionDigits={1}
          maxDigits={2}
          trend={trendOf(depthAt(seconds - 1), depth, 0.05)}
          size={ReadoutSize.large}
          priority={ReadoutPriority.enhanced}
        />
        <Reading
          value={speed}
          unit="kn"
          label="SOG"
          source="GPS · 10Hz"
          fractionDigits={1}
          trend={trendOf(speedAt(seconds - 1), speed, 0.05)}
          size={ReadoutSize.medium}
        />
        <Reading
          value={wind}
          unit="kn"
          label="AWS"
          source="WS320"
          fractionDigits={1}
          maxDigits={2}
          trend={trendOf(windAt(seconds - 1), wind, 0.2)}
          size={ReadoutSize.medium}
        />
      </div>
      <div
        style={{
          display: "flex",
          gap: "var(--space-xl)",
          flexWrap: "wrap",
          alignItems: "flex-start",
          paddingTop: "var(--space-lg)",
          borderTop: "1px solid var(--border)",
        }}
      >
        <Reading
          value={218}
          unit="°T"
          label="HDG"
          source="Compass"
          integrity="degraded"
          reason="heading frozen for 40 s"
          size={ReadoutSize.small}
        />
        <Reading
          value={19.4}
          unit="°C"
          label="Sea temp"
          source="DST810"
          fractionDigits={1}
          integrity="stale"
          ageSeconds={95 + seconds}
          size={ReadoutSize.small}
        />
        <Reading
          value={null}
          unit="°C"
          label="Coolant"
          source="J1939"
          ageSeconds={480 + seconds}
          size={ReadoutSize.small}
        />
        <Reading
          value={1008}
          unit="hPa"
          label="Baro"
          source="BME280"
          trend="falling"
          size={ReadoutSize.small}
          direction={ReadoutDirection.horizontal}
        />
      </div>
    </div>
  );
}

import { Reading } from "@bosunkit/components/reading";
import type { ReactElement } from "react";

export const description: string = "A fresh depth with its unit, its label and the instrument it comes from.";

export default function FreshWithSource(): ReactElement {
  return <Reading value={12.4} unit="m" label="Depth" source="DST810" fractionDigits={1} />;
}

import { Reading } from "@bosunkit/components/reading";
import type { ReactElement } from "react";

export const description: string =
  "A stale depth, dimmed and carrying an age badge for the three minutes since it was measured.";

export default function Stale(): ReactElement {
  return (
    <Reading value={12.4} unit="m" label="Depth" source="DST810" fractionDigits={1} integrity="stale" ageSeconds={190} />
  );
}

import { Reading } from "@bosunkit/components/reading";
import type { ReactElement } from "react";

export const description: string =
  "A degraded heading, current and at full brightness, with the reason the evaluator distrusts it.";

export default function Degraded(): ReactElement {
  return <Reading value={225} unit="°T" label="HDG" source="NMEA" integrity="degraded" reason="heading frozen" />;
}

import { Reading } from "@bosunkit/components/reading";
import type { ReactElement } from "react";

export const description: string =
  "A lost depth, which keeps its place, dashes the value and says how long ago it was seen.";

export default function Invalid(): ReactElement {
  return <Reading value={null} unit="m" label="Depth" source="DST810" ageSeconds={480} />;
}

import { Reading } from "@bosunkit/components/reading";
import type { ReactElement } from "react";

export const description: string = "A rising wind speed, with the direction as an arrow beside the value.";

export default function Trend(): ReactElement {
  return <Reading value={18.2} unit="kn" label="AWS" source="WS320" fractionDigits={1} trend="rising" />;
}

import { Reading } from "@bosunkit/components/reading";
import type { ReactElement } from "react";

export const description: string =
  "A value that is not a number, which takes the same lost treatment as an absent one.";

export default function NotANumber(): ReactElement {
  return <Reading value={Number.NaN} fractionDigits={1} unit="m" label="Depth" ageSeconds={180} />;
}

import { Reading } from "@bosunkit/components/reading";
import type { ReactElement } from "react";

export const description: string = "A value that is null, which the reading never renders blank.";

export default function Absent(): ReactElement {
  return <Reading value={null} fractionDigits={1} unit="m" label="Depth" ageSeconds={180} />;
}

import { Reading } from "@bosunkit/components/reading";
import type { ReactElement } from "react";

export const description: string =
  "A value that is not one number, a position in chart notation, three minutes old: written as given, with the " +
  "same stale treatment as any reading.";

export default function Position(): ReactElement {
  return <Reading value="50° 45.912′ N 001° 17.964′ W" label="Position" integrity="stale" ageSeconds={180} />;
}

import { Button } from "@bosunkit/components/button";
import { MotionPresence } from "@bosunkit/components/motion";
import { Reading } from "@bosunkit/components/reading";
import { useState, type Dispatch, type ReactElement, type SetStateAction } from "react";

export const description: string =
  "A sea temperature reading that rises in when its sensor reports and fades out when it is removed, beside a depth " +
  "whose new values jump into place without moving.";

const DEPTHS: readonly number[] = [8.4, 8.1, 7.6, 7.2];

export default function Motion(): ReactElement {
  const [reporting, setReporting]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(true);
  const [sample, setSample]: [number, Dispatch<SetStateAction<number>>] = useState<number>(0);
  return (
    <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-start", gap: "var(--space-md)" }}>
      <div style={{ display: "flex", flexWrap: "wrap", gap: "var(--space-sm)" }}>
        <Button
          size="sm"
          onClick={(): void => {
            setReporting((current: boolean): boolean => !current);
          }}
        >
          {reporting ? "Remove the sensor" : "Fit the sensor"}
        </Button>
        <Button
          size="sm"
          onClick={(): void => {
            setSample((current: number): number => (current + 1) % DEPTHS.length);
          }}
        >
          Next depth reading
        </Button>
      </div>
      <div style={{ display: "flex", flexWrap: "wrap", gap: "var(--space-lg)", minHeight: 64 }}>
        <Reading value={DEPTHS[sample]} unit="m" label="Depth" source="DST810" fractionDigits={1} />
        <MotionPresence>
          {reporting && (
            <Reading key="sea" value={16.8} unit="°C" label="Sea" source="DST810" fractionDigits={1} />
          )}
        </MotionPresence>
      </div>
    </div>
  );
}

import { Reading } from "@bosunkit/components/reading";
import { useEffect, useState, type Dispatch, type ReactElement, type SetStateAction } from "react";

export const description: string =
  "Speed over ground updating every half second. Asked for a highlight, it tints its background on an update at most " +
  "once every 2 seconds, so the fast feed does not flicker, and the value always jumps to the latest reading.";

export default function Highlight(): ReactElement {
  const [sample, setSample]: [number, Dispatch<SetStateAction<number>>] = useState<number>(0);
  useEffect((): (() => void) => {
    const timer: ReturnType<typeof setInterval> = setInterval((): void => {
      setSample((current: number): number => current + 1);
    }, 500);
    return (): void => {
      clearInterval(timer);
    };
  }, []);
  const speed: number = 6.2 + 0.3 * Math.sin(sample / 3);
  return (
    <Reading
      value={speed}
      unit="kn"
      label="SOG"
      source="GPS"
      fractionDigits={1}
      maxDigits={2}
      motion={{ change: "highlight" }}
    />
  );
}