Nautical chart symbols

import { NauticalChart } from "@bosunkit/components/nautical-chart";
import {
  AisTargetSymbol,
  OwnVesselSymbol,
  TrackSymbol,
  type TrackPoint,
} from "@bosunkit/components/nautical-chart-symbols";
import type { ReactElement } from "react";

export const description: string =
  "Off the Raz de Sein at 150 units to the mile: own vessel with her heading line, course vector and the last half " +
  "hour of track, a sailing vessel closing inside the 0.5 NM and 6 min limits and drawn dangerous, a ferry passing " +
  "clear, and a fishing vessel asleep.";

const PIXELS_PER_NM: number = 150;

/** The last 30 minutes of own vessel's track, one position every 5 minutes, oldest first. */
const TRACK: readonly TrackPoint[] = [
  { x: 470, y: 60, ageSeconds: 1800 },
  { x: 458, y: 110, ageSeconds: 1500 },
  { x: 444, y: 160, ageSeconds: 1200 },
  { x: 432, y: 210, ageSeconds: 900 },
  { x: 422, y: 262, ageSeconds: 600 },
  { x: 410, y: 312, ageSeconds: 300 },
  { x: 400, y: 360, ageSeconds: 0 },
];

export default function Showcase(): ReactElement {
  return (
    <div style={{ width: "100%", maxWidth: "48em" }}>
      <NauticalChart staticSvg={null} width={800} height={600}>
        <TrackSymbol points={TRACK} />
        <AisTargetSymbol
          x={250}
          y={420}
          name="Galatea"
          cog={80}
          sog={5.5}
          cpa={0.3}
          tcpa={4}
          cpaLimit={0.5}
          tcpaLimit={6}
          pixelsPerNauticalMile={PIXELS_PER_NM}
        />
        <AisTargetSymbol
          x={640}
          y={520}
          name="Iroise Express"
          cog={340}
          sog={14}
          cpa={1.4}
          tcpa={9}
          cpaLimit={0.5}
          tcpaLimit={6}
          pixelsPerNauticalMile={PIXELS_PER_NM}
        />
        <AisTargetSymbol
          x={180}
          y={120}
          name="Kerlaouen"
          state="sleeping"
          cog={150}
          sog={3}
          cpa={2.1}
          tcpa={25}
          cpaLimit={0.5}
          tcpaLimit={6}
          pixelsPerNauticalMile={PIXELS_PER_NM}
        />
        <OwnVesselSymbol x={400} y={360} heading={196} cog={200} sog={6.4} pixelsPerNauticalMile={PIXELS_PER_NM} />
      </NauticalChart>
    </div>
  );
}

import { NauticalChart } from "@bosunkit/components/nautical-chart";
import { OwnVesselSymbol } from "@bosunkit/components/nautical-chart-symbols";
import type { ReactElement } from "react";

export const description: string =
  "Own vessel three ways: heading 196° with a stream setting her to 215° at 6.4 kn, no heading so the hull lies on " +
  "the course over ground, and drifting at 0.3 kn with no course vector.";

export default function OwnVessel(): ReactElement {
  return (
    <div style={{ width: "100%", maxWidth: "40em" }}>
      <NauticalChart staticSvg={null} width={600} height={240}>
        <OwnVesselSymbol x={110} y={90} heading={196} cog={215} sog={6.4} pixelsPerNauticalMile={150} />
        <OwnVesselSymbol x={300} y={90} heading={null} cog={215} sog={6.4} pixelsPerNauticalMile={150} />
        <OwnVesselSymbol x={490} y={120} heading={196} cog={40} sog={0.3} pixelsPerNauticalMile={150} />
      </NauticalChart>
    </div>
  );
}

import { NauticalChart } from "@bosunkit/components/nautical-chart";
import { AisTargetSymbol, type AisTargetSymbolProps } from "@bosunkit/components/nautical-chart-symbols";
import type { ReactElement } from "react";

export const description: string =
  "Four AIS targets against 0.5 NM and 6 min limits: asleep, activated with its course vector, reporting no course, " +
  "and dangerous at a CPA of 0.2 NM in 3 min.";

/** What every target here shares: the chart's scale and the limits. */
const SHARED: Pick<AisTargetSymbolProps, "cpaLimit" | "tcpaLimit" | "pixelsPerNauticalMile"> = {
  cpaLimit: 0.5,
  tcpaLimit: 6,
  pixelsPerNauticalMile: 150,
};

export default function AisTargets(): ReactElement {
  return (
    <div style={{ width: "100%", maxWidth: "40em" }}>
      <NauticalChart staticSvg={null} width={600} height={240}>
        <AisTargetSymbol
          {...SHARED}
          x={70}
          y={120}
          name="Kerlaouen"
          state="sleeping"
          cog={150}
          sog={3}
          cpa={2}
          tcpa={30}
        />
        <AisTargetSymbol {...SHARED} x={210} y={120} name="Nordic Vega" cog={260} sog={11} cpa={1.8} tcpa={14} />
        <AisTargetSymbol {...SHARED} x={350} y={120} name="244456789" cog={null} sog={null} cpa={null} tcpa={null} />
        <AisTargetSymbol {...SHARED} x={480} y={120} name="Galatea" cog={80} sog={5.5} cpa={0.2} tcpa={3} />
      </NauticalChart>
    </div>
  );
}

import { NauticalChart } from "@bosunkit/components/nautical-chart";
import { TrackSymbol, type TrackPoint } from "@bosunkit/components/nautical-chart-symbols";
import type { ReactElement } from "react";

export const description: string =
  "An hour of track, a position every 5 minutes, fading over 30 minutes: the older half is not drawn.";

const TRACK: readonly TrackPoint[] = Array.from({ length: 13 }, (_: unknown, index: number): TrackPoint => ({
  x: 40 + index * 44,
  y: 180 - Math.round(60 * Math.sin(index / 3)),
  ageSeconds: (12 - index) * 300,
}));

export default function Track(): ReactElement {
  return (
    <div style={{ width: "100%", maxWidth: "40em" }}>
      <NauticalChart staticSvg={null} width={600} height={240}>
        <TrackSymbol points={TRACK} maxAgeSeconds={1800} />
      </NauticalChart>
    </div>
  );
}