Gauge bar indicator

import { LevelTile } from "@bosunkit/components/level-tile";
import type { GaugeBarIndicatorDirection, GaugeBarIndicatorType } from "@bosunkit/instruments";
import { useEffect, useState } from "react";
import type { Dispatch, ReactElement, SetStateAction } from "react";

export const description: string =
  "Althea's systems at a glance on a two-second feed: both directions and both types, from an empty bilge and a nearly empty propane bottle at the minimum visible fill to a full starter battery.";

interface Level {
  name: string;
  detail: string;
  percent: number;
  direction: GaugeBarIndicatorDirection;
  type: GaugeBarIndicatorType;
}

function levelsAt(step: number): Level[] {
  const house: number = 74 - (step % 60) * 0.2;
  const freshWater: number = 62 + (step % 60) * 0.3;
  return [
    {
      name: "House bank",
      detail: `−6\u00a0A, ${((house * 4) / 6).toFixed(0)}\u00a0h left`,
      percent: house,
      direction: "vertical",
      type: "fill",
    },
    { name: "Starter battery", detail: "Charged, 12.8\u00a0V", percent: 100, direction: "vertical", type: "fill" },
    { name: "Diesel", detail: "152 of 220\u00a0L", percent: 69, direction: "vertical", type: "tinted" },
    { name: "Calorifier", detail: "62\u00a0°C, 40\u00a0L", percent: 89, direction: "vertical", type: "tinted" },
    {
      name: "Fresh water",
      detail: "Watermaker on, 27\u00a0L/h",
      percent: freshWater,
      direction: "horizontal",
      type: "tinted",
    },
    { name: "Black water", detail: "Pump out within a day", percent: 83, direction: "horizontal", type: "fill" },
    { name: "Propane", detail: "Change the bottle", percent: 2, direction: "horizontal", type: "fill" },
    { name: "Bilge", detail: "Dry since Palma", percent: 0, direction: "horizontal", type: "tinted" },
  ];
}

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

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

  return (
    <div
      style={{
        display: "grid",
        gridTemplateColumns: "repeat(auto-fill, minmax(140px, 1fr))",
        gap: 8,
        width: "100%",
        maxWidth: 620,
      }}
    >
      {levelsAt(step).map((level: Level): ReactElement => (
        <LevelTile
          key={level.name}
          label={level.name}
          percent={level.percent}
          detail={level.detail}
          direction={level.direction}
          type={level.type}
        />
      ))}
    </div>
  );
}

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

export const description: string = "A solid fill at 44 percent in the vertical layout.";

export default function Fill(): ReactElement {
  return (
    <GaugeBarIndicator value={44} />
  );
}

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

export const description: string = "The tinted type in the horizontal layout, with a lighter fill and an end marker.";

export default function Tinted(): ReactElement {
  return (
    <GaugeBarIndicator value={44} direction="horizontal" type="tinted" />
  );
}