Instrument radial

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

export const description: string =
  "The electrical panel of the vessel on a live feed: the house bank's charge filling a full dial toward its " +
  "setpoint, the battery current on a half dial running through zero, the shore power limit being adjusted on a " +
  "zoomed quarter dial, and the generator switched off on a face too small for its labels.";

const CHARGE_ADVICES: GaugeRadialAdvice[] = [
  { minValue: 0, maxValue: 20, type: AdviceType.caution, hinted: true },
  { minValue: 80, maxValue: 100, type: AdviceType.advice, hinted: true },
];

const CURRENT_ADVICES: GaugeRadialAdvice[] = [{ minValue: -60, maxValue: -40, type: AdviceType.caution, hinted: true }];

const SHORE_ADVICES: GaugeRadialAdvice[] = [{ minValue: 14, maxValue: 16, type: AdviceType.caution, hinted: true }];

const PANEL: CSSProperties = {
  display: "grid",
  gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
  gap: 20,
  alignItems: "center",
  justifyItems: "center",
  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: 220 };

/** A half dial across the top: -60 A at nine o'clock, zero at twelve, 60 A at three. */
function halfDialAngle(value: number): number {
  return (value / 60) * 90;
}

/** A quarter dial from twelve to three o'clock for 0 to 16 A. */
function quarterDialAngle(value: number): number {
  return (value / 16) * 90;
}

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

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

  // The fridge compressor cycles while the solar panels charge, so the current swings through zero.
  const current: number = 12 + 30 * Math.sin(second / 6);
  const charge: number = 46 + 10 * ((1 - Math.cos(second / 20)) / 2);
  const shoreDraw: number = 9 + 3 * Math.sin(second / 4);

  // The skipper raises the shore power limit from 10 to 16 A over two seconds, then sets it back, every ten seconds.
  const phase: number = second % 10;
  const limit: number = Math.floor(second / 10) % 2 === 0 ? 10 : 16;
  const adjusting: boolean = phase >= 8;

  function recordGeneratorFrame(frame: RadialFrame): void {
    setGeneratorLabelsHidden(frame.labelsHidden);
  }

  return (
    <div style={PANEL}>
      <figure style={FIGURE}>
        <InstrumentRadial
          value={charge}
          minValue={0}
          maxValue={100}
          type={ObcGaugeRadialType.filled}
          priority={Priority.enhanced}
          tickmarkStyle={TickmarkStyle.enhanced}
          primaryTickmarkInterval={25}
          secondaryTickmarkInterval={5}
          tertiaryTickmarkInterval={1}
          showLabels
          advices={CHARGE_ADVICES}
          setpoint={50}
          autoAtSetpoint
          autoAtSetpointDeadband={2}
          animateSetpoint
          faceDiameter={180}
        />
        <figcaption style={CAPTION}>House bank charge, %, against the 50 % floor</figcaption>
      </figure>

      <figure style={FIGURE}>
        <InstrumentRadial
          value={current}
          minValue={-60}
          maxValue={60}
          getAngle={halfDialAngle}
          type={ObcGaugeRadialType.bar}
          barColor="var(--instrument-enhanced-secondary-color)"
          primaryTickmarkInterval={30}
          secondaryTickmarkInterval={10}
          showLabels
          endLabelsMaxMin
          clipBottom={45}
          advices={CURRENT_ADVICES}
          faceDiameter={180}
        />
        <figcaption style={CAPTION}>Battery current, A, charging to the right</figcaption>
      </figure>

      <figure style={FIGURE}>
        <div style={{ width: 200, height: 160 }}>
          <InstrumentRadial
            value={shoreDraw}
            minValue={0}
            maxValue={16}
            getAngle={quarterDialAngle}
            type={ObcGaugeRadialType.needle}
            needleColor="var(--instrument-enhanced-primary-color)"
            primaryTickmarkInterval={4}
            secondaryTickmarkInterval={1}
            showLabels
            tickmarksInside
            advices={SHORE_ADVICES}
            setpoint={limit}
            newSetpoint={adjusting ? (limit === 10 ? 16 : 10) : undefined}
            touching={adjusting}
            setpointAtZeroDeadband={0.2}
            animateSetpoint
            zoomToFitArc
          />
        </div>
        <figcaption style={CAPTION}>Shore power draw, A, with the breaker limit being set</figcaption>
      </figure>

      <figure style={FIGURE}>
        <InstrumentRadial
          value={0}
          minValue={0}
          maxValue={100}
          state={InstrumentState.off}
          setpoint={70}
          setpointOverride
          atSetpoint={false}
          primaryTickmarkInterval={25}
          secondaryTickmarkInterval={5}
          showLabels
          clipTop={0}
          clipLeft={0}
          clipRight={0}
          faceDiameter={90}
          onFrameChange={recordGeneratorFrame}
        />
        <figcaption style={CAPTION}>
          Generator off{generatorLabelsHidden ? "; scale labels left out at this size" : ""}
        </figcaption>
      </figure>
    </div>
  );
}

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

export const description: string = "The gauge building block at the middle of its range.";

export default function HalfFull(): ReactElement {
  return (
    <div style={{ width: 200, height: 200 }}>
      <InstrumentRadial value={50} />
    </div>
  );
}

import { AdviceType, InstrumentRadial, ObcGaugeRadialType, type GaugeRadialAdvice } from "@bosunkit/instruments";
import { useEffect, useState, type CSSProperties, type Dispatch, type ReactElement, type SetStateAction } from "react";

export const description: string =
  "A left-leaning quarter dial, the mirror of the shore power dial: the inverter's load runs from nine o'clock up to " +
  "twelve, with the pivot at the bottom right, so a pair of quarter dials can sit back to back.";

const INVERTER_ADVICES: GaugeRadialAdvice[] = [
  { minValue: 2400, maxValue: 3000, type: AdviceType.caution, hinted: true },
];

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: 220 };

/** A quarter dial from nine to twelve o'clock for 0 to 3000 W. */
function leftQuarterAngle(value: number): number {
  return -90 + (value / 3000) * 90;
}

export default function LeftLeaningQuarter(): 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 watermaker and the kettle share the inverter, so its load steps between them.
  const load: number = 1400 + 700 * Math.sin(second / 5);

  return (
    <figure style={FIGURE}>
      <div style={{ width: 200, height: 160 }}>
        <InstrumentRadial
          value={load}
          minValue={0}
          maxValue={3000}
          getAngle={leftQuarterAngle}
          type={ObcGaugeRadialType.needle}
          needleColor="var(--instrument-enhanced-primary-color)"
          primaryTickmarkInterval={1000}
          secondaryTickmarkInterval={250}
          showLabels
          tickmarksInside
          advices={INVERTER_ADVICES}
          zoomToFitArc
        />
      </div>
      <figcaption style={CAPTION}>Inverter load, W, leaning left from nine to twelve o&apos;clock</figcaption>
    </figure>
  );
}