Gauge radial

import {
  AdviceType,
  GaugeRadial,
  GaugeRadialHorizontalAlignment,
  GaugeRadialSector,
  GaugeRadialVerticalAlignment,
  InstrumentState,
  ObcGaugeRadialType,
  Priority,
  TickmarkStyle,
  type GaugeRadialAdvice,
} from "@bosunkit/instruments";
import { useEffect, useState, type CSSProperties, type Dispatch, type ReactElement, type SetStateAction } from "react";

export const description: string =
  "The engine panel of a Yanmar 4JH80 on a live feed: revolutions on a needle with the cruise setpoint, coolant " +
  "filling a half dial into its caution zone, oil pressure and alternator load on quarter dials, and the " +
  "generator switched off.";

const RPM_ADVICES: GaugeRadialAdvice[] = [
  { minValue: 1600, maxValue: 2400, type: AdviceType.advice, hinted: true },
  { minValue: 3200, maxValue: 4000, type: AdviceType.caution, hinted: true },
];

const COOLANT_ADVICES: GaugeRadialAdvice[] = [
  { minValue: 70, maxValue: 88, type: AdviceType.advice, hinted: true },
  { minValue: 92, maxValue: 120, type: AdviceType.caution, hinted: true },
];

const PANEL: CSSProperties = {
  display: "grid",
  gridTemplateColumns: "repeat(auto-fit, minmax(190px, 1fr))",
  gap: 20,
  alignItems: "center",
  justifyItems: "center",
  width: "100%",
  maxWidth: 660,
};

const COLUMN: CSSProperties = { display: "flex", flexDirection: "column", gap: 12, alignItems: "center" };

/** A short, wide strip: the dial fits the height and sits at the left of the slack. */
const STRIP: CSSProperties = { width: 190, height: 110 };

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);
    };
  }, []);

  // The skipper eases the throttle up to 2400 rpm and back every half minute; the coolant follows behind.
  const load: number = (1 - Math.cos((second * Math.PI) / 15)) / 2;
  const rpm: number = 1750 + 650 * load + 25 * Math.sin(second * 1.7);
  const coolant: number = 82 + (13 * (1 - Math.cos(((second - 4) * Math.PI) / 15))) / 2;
  const oilPressure: number = 3.2 + 0.8 * load;
  const alternator: number = 38 + 14 * Math.sin(second / 6);

  return (
    <div style={PANEL}>
      <GaugeRadial
        value={rpm}
        minValue={0}
        maxValue={4000}
        type={ObcGaugeRadialType.needle}
        priority={Priority.enhanced}
        tickmarkStyle={TickmarkStyle.enhanced}
        setpoint={1800}
        autoAtSetpoint
        autoAtSetpointDeadband={100}
        animateSetpoint
        advices={RPM_ADVICES}
        primaryTickmarkInterval={1000}
        secondaryTickmarkInterval={500}
        tertiaryTickmarkInterval={100}
        showLabels
        hasReadout
        label="Engine"
        unit="rpm"
        faceDiameter={190}
      />

      <GaugeRadial
        sector={GaugeRadialSector.deg180}
        value={coolant}
        minValue={40}
        maxValue={120}
        advices={COOLANT_ADVICES}
        setpoint={85}
        primaryTickmarkInterval={20}
        secondaryTickmarkInterval={10}
        tertiaryTickmarkInterval={2}
        showLabels
        hasReadout
        label="Coolant"
        unit="°C"
        fractionDigits={1}
        faceDiameter={190}
      />

      <div style={COLUMN}>
        <GaugeRadial
          sector={GaugeRadialSector.deg90Left}
          value={oilPressure}
          minValue={0}
          maxValue={6}
          primaryTickmarkInterval={2}
          secondaryTickmarkInterval={1}
          showLabels
          tickmarksInside
          hasReadout
          label="Oil"
          unit="bar"
          fractionDigits={1}
          style={STRIP}
          horizontalAlignment={GaugeRadialHorizontalAlignment.left}
          verticalAlignment={GaugeRadialVerticalAlignment.bottom}
        />
        <GaugeRadial
          sector={GaugeRadialSector.deg90Right}
          type={ObcGaugeRadialType.bar}
          value={alternator}
          minValue={0}
          maxValue={115}
          primaryTickmarkInterval={50}
          secondaryTickmarkInterval={10}
          showLabels
          hasReadout
          label="Alternator"
          unit="A"
          style={STRIP}
          horizontalAlignment={GaugeRadialHorizontalAlignment.right}
          verticalAlignment={GaugeRadialVerticalAlignment.top}
        />
      </div>

      <GaugeRadial
        state={InstrumentState.off}
        value={0}
        minValue={0}
        maxValue={100}
        setpoint={70}
        setpointOverride
        primaryTickmarkInterval={25}
        secondaryTickmarkInterval={5}
        showLabels
        hasReadout
        label="Generator"
        unit="%"
        faceDiameter={150}
      />
    </div>
  );
}

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

export const description: string =
  "The default 270 degree sweep, filled from zero to 50 percent, with the readout in the center.";

export default function ThreeQuarter(): ReactElement {
  return (
    <GaugeRadial
      value={50}
      minValue={0}
      maxValue={100}
      faceDiameter={180}
      primaryTickmarkInterval={25}
      secondaryTickmarkInterval={5}
      showLabels
      hasReadout
      label="Load"
      unit="%"
    />
  );
}

import { GaugeRadial, ObcGaugeRadialType, Priority } from "@bosunkit/instruments";
import type { ReactElement } from "react";

export const description: string = "A needle in the enhanced palette at 50, with the setpoint marker at 75.";

export default function NeedleAndSetpoint(): ReactElement {
  return (
    <GaugeRadial
      value={50}
      minValue={0}
      maxValue={100}
      faceDiameter={180}
      type={ObcGaugeRadialType.needle}
      priority={Priority.enhanced}
      setpoint={75}
      primaryTickmarkInterval={25}
      secondaryTickmarkInterval={5}
      showLabels
      hasReadout
      label="RPM"
      unit="×100"
    />
  );
}

import { GaugeRadial, GaugeRadialSector } from "@bosunkit/instruments";
import type { ReactElement } from "react";

export const description: string = "A 180 degree sweep at 62 percent, with the readout below the arc.";

export default function HalfSector(): ReactElement {
  return (
    <GaugeRadial
      sector={GaugeRadialSector.deg180}
      value={62}
      minValue={0}
      maxValue={100}
      faceDiameter={180}
      primaryTickmarkInterval={25}
      secondaryTickmarkInterval={5}
      showLabels
      hasReadout
      label="Trim"
      unit="%"
    />
  );
}

import { GaugeRadial, GaugeRadialSector } from "@bosunkit/instruments";
import type { ReactElement } from "react";

export const description: string =
  "A 90 degree sweep on the right at 62 percent; the dial is under 160 px tall, so the value and unit sit under the arc.";

export default function QuarterSector(): ReactElement {
  return (
    <GaugeRadial
      sector={GaugeRadialSector.deg90Right}
      value={62}
      minValue={0}
      maxValue={100}
      faceDiameter={180}
      primaryTickmarkInterval={25}
      secondaryTickmarkInterval={5}
      showLabels
      hasReadout
      label="Aux"
      unit="%"
    />
  );
}

import { AdviceType, GaugeRadial } from "@bosunkit/instruments";
import type { ReactElement } from "react";

export const description: string =
  "A temperature of 80 inside the caution zone, which is drawn as triggered, beside an advice zone that is only hinted.";

export default function AdviceTriggered(): ReactElement {
  return (
    <GaugeRadial
      value={80}
      minValue={0}
      maxValue={100}
      faceDiameter={180}
      primaryTickmarkInterval={25}
      secondaryTickmarkInterval={5}
      showLabels
      hasReadout
      label="Temp"
      unit="°C"
      advices={[
        { minValue: 70, maxValue: 100, type: AdviceType.caution, hinted: true },
        { minValue: 25, maxValue: 60, type: AdviceType.advice, hinted: true },
      ]}
    />
  );
}

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

export const description: string = "A value that is not a number draws no bar, so the gauge shows no reading.";

export default function NoReading(): ReactElement {
  return (
    <div style={{ width: 200, height: 200 }}>
      <GaugeRadial value={Number.NaN} minValue={0} maxValue={100} />
    </div>
  );
}