Heave

import {
  AdviceType,
  Heave,
  ObcHeaveType,
  Priority,
  Readout,
  ReadoutSize,
  VesselImage,
  type LinearAdvice,
} from "@bosunkit/instruments";
import { useEffect, useState, type CSSProperties, type Dispatch, type ReactElement, type SetStateAction } from "react";

export const description: string =
  "Hove to in a building swell on a live feed: the yacht rides the heave beside its scale, the band of the last ten " +
  "seconds reaches the advice and caution zones as the sets come through, and a bar column repeats it on a wider " +
  "range.";

/** The swell where boarding the tender gets awkward, and where it stops. */
const ADVICE: LinearAdvice[] = [
  { min: 0.8, max: 1.2, type: AdviceType.advice, hinted: false },
  { min: -1.2, max: -0.8, type: AdviceType.advice, hinted: false },
  { min: 1.2, max: 3, type: AdviceType.caution, hinted: true },
  { min: -3, max: -1.2, type: AdviceType.caution, hinted: true },
];

const WIDE_ADVICE: LinearAdvice[] = [
  { min: 2, max: 5, type: AdviceType.caution, hinted: true },
  { min: -5, max: -2, type: AdviceType.caution, hinted: true },
];

const SAMPLE_SECONDS: number = 0.5;
const TREND_SECONDS: number = 10;

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

const COLUMN: CSSProperties = { display: "flex", flexDirection: "column", gap: 16 };

/** Heave in meters at a time in seconds: two wave trains under an envelope that builds and eases as sets pass. */
function heaveAt(time: number): number {
  const envelope: number = 0.7 + 0.45 * Math.sin(time / 12);
  return envelope * (0.9 * Math.sin((2 * Math.PI * time) / 7) + 0.45 * Math.sin((2 * Math.PI * time) / 4.3 + 1));
}

/** The lowest and highest heave over the trend window ending at `time`. */
function trendAt(time: number): { low: number; high: number } {
  let low: number = Number.POSITIVE_INFINITY;
  let high: number = Number.NEGATIVE_INFINITY;
  for (let past: number = 0; past <= TREND_SECONDS; past += SAMPLE_SECONDS) {
    const value: number = heaveAt(time - past);
    low = Math.min(low, value);
    high = Math.max(high, value);
  }
  return { low, high };
}

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

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

  const time: number = sample * SAMPLE_SECONDS;
  const heave: number = heaveAt(time);
  const { low, high }: { low: number; high: number } = trendAt(time);

  return (
    <div style={PANEL}>
      <div style={{ width: 280, height: 280 }}>
        <Heave
          heave={heave}
          minTrendHeave={low}
          maxTrendHeave={high}
          instrumentRange={3}
          gainScale={2}
          draftOffset={0.2}
          vesselImage={VesselImage.sailingYachtFore}
          advice={ADVICE}
          priority={Priority.enhanced}
          type={ObcHeaveType.vessel}
        />
      </div>
      <div style={{ width: 120, height: 280 }}>
        <Heave
          heave={heave}
          minTrendHeave={low}
          maxTrendHeave={high}
          instrumentRange={5}
          advice={WIDE_ADVICE}
          type={ObcHeaveType.bar}
        />
      </div>
      <div style={COLUMN}>
        <Readout label="Heave" value={heave} fractionDigits={1} unit="m" src="Motion sensor" size={ReadoutSize.large} />
        <Readout label="Lowest, 10 s" value={low} fractionDigits={1} unit="m" />
        <Readout label="Highest, 10 s" value={high} fractionDigits={1} unit="m" />
      </div>
    </div>
  );
}

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

export const description: string = "The vessel 0.6 meters above its mean height.";

export default function HeaveExample(): ReactElement {
  return (
    <div style={{ width: 200, height: 200 }}>
      <Heave heave={0.6} />
    </div>
  );
}

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

export const description: string = "The vessel with the band between its recent lowest and highest heave.";

export default function WithVessel(): ReactElement {
  return (
    <div style={{ width: 200, height: 200 }}>
      <Heave heave={0.6} minTrendHeave={-0.9} maxTrendHeave={1.4} />
    </div>
  );
}

import { Heave, ObcHeaveType } from "@bosunkit/instruments";
import type { ReactElement } from "react";

export const description: string = "The scale column on its own, for a narrow strip beside another instrument.";

export default function Bar(): ReactElement {
  return (
    <div style={{ width: 200, height: 200 }}>
      <Heave heave={0.6} minTrendHeave={-0.9} maxTrendHeave={1.4} type={ObcHeaveType.bar} />
    </div>
  );
}