Speed gauge

import {
  AdviceType,
  ObcSpeedGaugeNeedleType,
  Priority,
  SpeedGauge,
  TickmarkStyle,
  type SpeedAdvice,
} from "@bosunkit/instruments";
import { useEffect, useState, type CSSProperties, type Dispatch, type ReactElement, type SetStateAction } from "react";

export const description: string =
  "Surfing downwind on a live feed: the speed through water climbs past the polar target and into the caution zone " +
  "on each wave, while a second gauge shows the speed over ground on a scale that runs astern, with the speed " +
  "needed to make the bridge opening being adjusted.";

/** Hull speed of a Hanse 460 is about 8.8 knots; a surf past 10 knots is where she starts to broach. */
const STW_ADVICES: SpeedAdvice[] = [
  { minSpeed: 7, maxSpeed: 8.8, type: AdviceType.advice, hinted: true },
  { minSpeed: 10, maxSpeed: 12, type: AdviceType.caution, hinted: true },
];

const SOG_ADVICES: SpeedAdvice[] = [{ minSpeed: -2, maxSpeed: 0, type: AdviceType.caution, hinted: false }];

const PANEL: CSSProperties = {
  display: "flex",
  flexWrap: "wrap",
  alignItems: "flex-end",
  justifyContent: "center",
  gap: 32,
  width: "100%",
  maxWidth: 660,
};

const FIGURE: CSSProperties = { display: "flex", flexDirection: "column", alignItems: "center", gap: 6, margin: 0 };
const CAPTION: CSSProperties = { fontSize: 13, color: "var(--text-dim)", textAlign: "center", maxWidth: 240 };

/** Speed through water in knots at a time in seconds: a steady run with a surf on every set of waves. */
function speedAt(time: number): number {
  const surf: number = Math.max(0, Math.sin((2 * Math.PI * time) / 12)) ** 2;
  return 7.2 + 0.4 * Math.sin(time / 3) + 3.4 * surf * (0.6 + 0.4 * Math.sin(time / 17));
}

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

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

  const speed: number = speedAt(second);
  // A 1.2 knot foul tide takes off part of the speed through water.
  const overGround: number = speed - 1.2;
  // The navigator moves the speed needed to make the bridge opening between 6 and 7 knots every ten seconds,
  // turning the knob for the last two.
  const target: number = Math.floor(second / 10) % 2 === 0 ? 6 : 7;
  const adjusting: boolean = second % 10 >= 8;

  return (
    <div style={PANEL}>
      <figure style={FIGURE}>
        <SpeedGauge
          speed={speed}
          minSpeed={0}
          maxSpeed={12}
          needleType={ObcSpeedGaugeNeedleType.full}
          priority={Priority.enhanced}
          tickmarkStyle={TickmarkStyle.enhanced}
          tickmarkInterval={1}
          showLabels
          speedAdvices={STW_ADVICES}
          setpoint={7.4}
          autoAtSetpoint
          autoAtSetpointDeadband={0.3}
          animateSetpoint
          hasReadout
          label="STW"
          unit="KN"
          fractionDigits={1}
          faceDiameter={230}
        />
        <figcaption style={CAPTION}>Through the water, against the 7.4 knot polar target</figcaption>
      </figure>

      <figure style={FIGURE}>
        <SpeedGauge
          speed={overGround}
          minSpeed={-2}
          maxSpeed={10}
          needleType={ObcSpeedGaugeNeedleType.bar}
          tickmarkInterval={2}
          tickmarksInside
          showLabels
          speedAdvices={SOG_ADVICES}
          setpoint={target}
          newSetpoint={adjusting ? (target === 6 ? 7 : 6) : undefined}
          touching={adjusting}
          setpointAtZeroDeadband={0.2}
          setpointOverride
          hasReadout
          label="SOG"
          unit="KN"
          fractionDigits={2}
          faceDiameter={170}
        />
        <figcaption style={CAPTION}>
          Over the ground, astern below zero, against the speed needed for the bridge
        </figcaption>
      </figure>
    </div>
  );
}

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

export const description: string = "A speed of 6.4 knots on a scale that ends at 12.";

export default function Speed(): ReactElement {
  return (
    <div style={{ width: 200, height: 200 }}>
      <SpeedGauge speed={6.4} maxSpeed={12} />
    </div>
  );
}

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

export const description: string =
  "A speed gauge on a face pinned to 180 pixels, which sizes itself and needs no surrounding box.";

export default function SmallFace(): ReactElement {
  return <SpeedGauge speed={6.4} maxSpeed={12} faceDiameter={180} />;
}