Ship data

import { ShipData, type ShipDataLabels } from "@bosunkit/components/ship-data";
import type { ReactElement } from "react";

export const description: string =
  "Althea under way: heading 270°, course over ground 259° and no rate of turn, a position off the Norwegian coast, wind " +
  "4.5 kn from 051° and a 2.0 kn current setting from 045°, the compass drawing each of them.";

export const LABELS: ShipDataLabels = {
  heading: "HDG",
  courseOverGround: "COG",
  rateOfTurn: "ROT",
  wind: "Wind",
  current: "Current",
  speed: "Speed",
  direction: "Direction",
};

export default function Showcase(): ReactElement {
  return (
    <div style={{ width: "100%", maxWidth: 640 }}>
      <ShipData
        title="Own ship data"
        labels={LABELS}
        heading={270}
        courseOverGround={259}
        rateOfTurn={0}
        position={{ latitude: 62.45983, longitude: 6.19923 }}
        wind={{ speedKnots: 4.5, fromDirection: 51 }}
        current={{ speedKnots: 2, fromDirection: 45 }}
      />
    </div>
  );
}

import { ShipData } from "@bosunkit/components/ship-data";
import type { ReactElement } from "react";
import { LABELS } from "./showcase";

export const description: string =
  "With no compass, no fix and no wind sensor the panel keeps its shape: every readout shows a dash and the position a dash, so nothing moves when a sensor returns.";

export default function NoData(): ReactElement {
  return (
    <div style={{ width: "100%", maxWidth: 640 }}>
      <ShipData
        title="Own ship data"
        labels={LABELS}
        heading={null}
        courseOverGround={null}
        rateOfTurn={null}
        position={null}
        wind={null}
        current={null}
      />
    </div>
  );
}

import { ShipData } from "@bosunkit/components/ship-data";
import type { ReactElement } from "react";
import { LABELS } from "./showcase";

export const description: string =
  "The heading from a compass that stopped 3 min ago, and a position last fixed 8 min ago: each value the caller gives its trust is drawn as a reading, with its age, and the position says when it was last seen.";

export default function Trust(): ReactElement {
  return (
    <div style={{ width: "100%", maxWidth: 640 }}>
      <ShipData
        title="Own ship data"
        labels={LABELS}
        heading={270}
        courseOverGround={259}
        rateOfTurn={0}
        position={{ latitude: 62.45983, longitude: 6.19923 }}
        wind={{ speedKnots: 4.5, fromDirection: 51 }}
        current={{ speedKnots: 2, fromDirection: 45 }}
        trust={{
          heading: { integrity: "stale", ageSeconds: 190, source: "Fluxgate compass" },
          courseOverGround: { integrity: "fresh", source: "GPS" },
          position: { integrity: "invalid", ageSeconds: 480 },
        }}
      />
    </div>
  );
}

import { ShipData } from "@bosunkit/components/ship-data";
import type { ReactElement } from "react";
import { LABELS } from "./showcase";

export const description: string =
  "`faceDiameter` of 140 for a panel in a narrower column, with the title one level down under a page heading.";

export default function SmallFace(): ReactElement {
  return (
    <div style={{ width: "100%", maxWidth: 520 }}>
      <ShipData
        title="Own ship data"
        labels={LABELS}
        headingLevel={3}
        faceDiameter={140}
        heading={47}
        courseOverGround={52}
        rateOfTurn={8}
        position={{ latitude: 50.1421, longitude: -5.0517 }}
        wind={{ speedKnots: 14, fromDirection: 310 }}
        current={{ speedKnots: 1.2, fromDirection: 190 }}
      />
    </div>
  );
}