Bar horizontal

import {
  AdvicePosition,
  AdviceType,
  BarContainerStyle,
  BarHorizontal,
  BorderRadiusPosition,
  ExternalScaleSide,
  FillMode,
  FrameStyle,
  InstrumentState,
  Priority,
  Readout,
  ReadoutDirection,
  ReadoutValueType,
  ScaleType,
} from "@bosunkit/instruments";
import type { ExternalScaleAdvice, ReadoutProps } from "@bosunkit/instruments";
import { useCallback, useEffect, useState } from "react";
import type { CSSProperties, Dispatch, ReactElement, ReactNode, RefCallback, SetStateAction } from "react";

export const description: string =
  "Althea coming alongside in Port Grimaud on a one-second feed: a bow thruster the crew pushes from a preview to a confirmed setpoint, speed with a hull-speed caution range and a value dot, heel with reef and caution ranges in the bar, shore power tinted in its normal band, and an autopilot bar still loading.";

/** Feed steps before the docking sequence repeats. */
const CYCLE: number = 20;
/** The bars' width where the column allows it; on a narrower screen they take the column's width. */
const BAR_WIDTH: number = 520;

const SPEED_ADVICE: ExternalScaleAdvice[] = [
  { min: 5.5, max: 7, type: AdviceType.advice, hinted: false },
  { min: 8.5, max: 10, type: AdviceType.caution, hinted: true },
];

const HEEL_ADVICE: ExternalScaleAdvice[] = [
  { min: 15, max: 20, type: AdviceType.advice, hinted: true },
  { min: 20, max: 30, type: AdviceType.caution, hinted: false },
];

const ROW_STYLE: CSSProperties = { display: "grid", justifyItems: "start", gap: 2 };
const NAME_STYLE: CSSProperties = { fontSize: 12, color: "var(--element-neutral-color)" };

interface Thruster {
  setpoint: number;
  newSetpoint: number | undefined;
  touching: boolean;
  note: string;
}

/**
 * The skipper's joystick while the bow swings onto the berth: idle, a push to starboard previewed at 40 percent, the
 * push confirmed, a short burst to port to stop the swing, then idle again.
 */
function thrusterAt(step: number): Thruster {
  if (step < 4) {
    return { setpoint: 0, newSetpoint: undefined, touching: false, note: "Idle, 30 m to the berth" };
  }
  if (step < 7) {
    return { setpoint: 0, newSetpoint: 40, touching: true, note: "Joystick to starboard, waiting to confirm" };
  }
  if (step < 13) {
    return { setpoint: 40, newSetpoint: undefined, touching: false, note: "Bow swinging to starboard" };
  }
  if (step < 16) {
    return { setpoint: -25, newSetpoint: undefined, touching: false, note: "Burst to port to stop the swing" };
  }
  return { setpoint: 0, newSetpoint: undefined, touching: false, note: "Alongside, lines ashore" };
}

function Row({ readout, children }: { readout: ReadoutProps; children: ReactNode }): ReactElement {
  return (
    <div style={ROW_STYLE}>
      <Readout direction={ReadoutDirection.horizontal} {...readout} />
      {children}
    </div>
  );
}

/**
 * A bar takes its width in pixels, so the showcase measures the column the bars sit in and draws them at
 * `preferred`, or at the column's width when the screen is narrower than that.
 */
function useFittedWidth(preferred: number): [RefCallback<HTMLDivElement>, number] {
  const [width, setWidth]: [number, Dispatch<SetStateAction<number>>] = useState<number>(preferred);
  const measure: RefCallback<HTMLDivElement> = useCallback(
    (column: HTMLDivElement | null): (() => void) | undefined => {
      if (column === null) {
        return undefined;
      }
      const observer: ResizeObserver = new ResizeObserver((entries: ResizeObserverEntry[]): void => {
        const available: number | undefined = entries.at(0)?.contentRect.width;
        if (available !== undefined && available > 0) {
          setWidth(Math.min(preferred, Math.floor(available)));
        }
      });
      observer.observe(column);
      return (): void => {
        observer.disconnect();
      };
    },
    [preferred],
  );
  return [measure, width];
}

export default function Showcase(): ReactElement {
  const [step, setStep]: [number, Dispatch<SetStateAction<number>>] = useState<number>(0);
  const [column, barWidth]: [RefCallback<HTMLDivElement>, number] = useFittedWidth(BAR_WIDTH);

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

  const phase: number = step % CYCLE;
  const thruster: Thruster = thrusterAt(phase);
  const thrust: number = thruster.touching ? 0 : thruster.setpoint;
  const speed: number = Math.max(0.3, 2.4 - phase * 0.11 + 0.2 * Math.sin(step));
  const heel: number = 3 + 1.5 * Math.sin(step / 2);
  const shoreCurrent: number = phase >= 16 ? 6.2 + 0.4 * Math.sin(step) : 0;

  return (
    <div ref={column} style={{ display: "grid", gap: 14, width: "100%", maxWidth: 560 }}>
      <Row
        readout={{
          label: "Bow thruster",
          value: thrust === 0 ? "0" : `${thrust > 0 ? "Stbd" : "Port"} ${String(Math.abs(thrust))}`,
          valueType: ReadoutValueType.text,
          unit: "%",
        }}
      >
        <BarHorizontal
          width={barWidth}
          minValue={-100}
          maxValue={100}
          value={thrust}
          fillMin={0}
          fillMax={thrust}
          hasBar
          mainTickmarks={[-100, 0, 100]}
          primaryTickmarkInterval={50}
          secondaryTickmarkInterval={25}
          scaleType={ScaleType.condensed}
          scaleBackground
          barContainerStyle={BarContainerStyle.secondary}
          setpoint={thruster.setpoint}
          newSetpoint={thruster.newSetpoint}
          touching={thruster.touching}
          animateSetpoint
          priority={Priority.enhanced}
        />
      </Row>
      <Row readout={{ label: "Speed through water", value: speed, unit: "kn", fractionDigits: 1 }}>
        <BarHorizontal
          width={barWidth}
          minValue={0}
          maxValue={10}
          value={speed}
          hasBar
          side={ExternalScaleSide.top}
          mainTickmarks={[0, 10]}
          primaryTickmarkInterval={2}
          secondaryTickmarkInterval={1}
          tertiaryTickmarkInterval={0.5}
          advices={SPEED_ADVICE}
          advicePosition={AdvicePosition.outer}
          highlightCurrentValue
        />
      </Row>
      <Row readout={{ label: "Heel", value: heel, hasDegree: true, maxDigits: 2 }}>
        <BarHorizontal
          width={barWidth}
          minValue={0}
          maxValue={30}
          value={heel}
          hasBar
          mainTickmarks={[0, 30]}
          primaryTickmarkInterval={10}
          secondaryTickmarkInterval={5}
          advices={HEEL_ADVICE}
          advicePosition={AdvicePosition.center}
          priority={Priority.enhanced}
        />
      </Row>
      <Row readout={{ label: "Shore power", value: shoreCurrent, unit: "A", fractionDigits: 1 }}>
        <BarHorizontal
          width={barWidth}
          minValue={0}
          maxValue={16}
          value={shoreCurrent}
          hasBar
          fillMode={FillMode.tint}
          fillMin={4}
          fillMax={10}
          barFillColor="var(--automation-medium-hot)"
          highlightCurrentValue
          mainTickmarks={[0, 16]}
          primaryTickmarkInterval={4}
          secondaryTickmarkInterval={2}
          frameStyle={FrameStyle.flat}
          borderRadiusPosition={BorderRadiusPosition.outerLastChild}
          borderRadius={4}
          labelThickness={20}
        />
      </Row>
      <Row readout={{ label: "Autopilot rudder", value: null, hasDegree: true, off: true, offText: "Starting" }}>
        <BarHorizontal
          width={barWidth}
          minValue={-35}
          maxValue={35}
          value={0}
          hasBar
          state={InstrumentState.loading}
          mainTickmarks={[-35, 0, 35]}
          primaryTickmarkInterval={10}
          showLabels={false}
          tickThickness={16}
        />
      </Row>
      <p style={{ margin: 0, textAlign: "center", ...NAME_STYLE }}>Bow thruster: {thruster.note}</p>
    </div>
  );
}

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

export const description: string = "A bar 200 pixels wide, filled to 40 on the default 0 to 100 scale.";

export default function Bar(): ReactElement {
  return (
    <BarHorizontal hasBar value={40} width={200} />
  );
}