Gauge trend indicator

import { GaugeTrendIndicator, ObcGaugeTrendIndicatorType, Readout } from "@bosunkit/instruments";
import { useEffect, useState } from "react";
import type { CSSProperties, Dispatch, ReactElement, SetStateAction } from "react";

export const description: string =
  "The night watch summary on Althea, sampled every two seconds: both cue types, a graph zoomed in with its own chart range while the cue keeps the full scale, and a cue that falls back to the last sample when no value is given.";

/** Samples each graph keeps. */
const SAMPLES: number = 24;

interface Trend {
  name: string;
  reading: number;
  unit: string;
  fractionDigits: number;
  note: string;
  type: ObcGaugeTrendIndicatorType;
  data: number[];
  minValue: number;
  maxValue: number;
  chartMinValue?: number;
  chartMaxValue?: number;
  value?: number;
}

const TILE_STYLE: CSSProperties = {
  display: "grid",
  gridTemplateColumns: "48px 1fr",
  alignItems: "center",
  gap: 10,
  padding: 8,
  borderRadius: 8,
  background: "var(--container-section-color)",
};
const NAME_STYLE: CSSProperties = { fontSize: 12, color: "var(--element-neutral-color)" };

function sampled(level: (sample: number) => number, newest: number): number[] {
  return Array.from({ length: SAMPLES }, (_unused: unknown, index: number): number =>
    level(newest - SAMPLES + 1 + index),
  );
}

function pressureAt(sample: number): number {
  return 1012 - sample * 0.12 + 0.3 * Math.sin(sample / 2);
}

function windAt(sample: number): number {
  return 16 + 5 * Math.sin(sample / 2.5) + 2 * Math.sin(sample * 1.7);
}

function depthAt(sample: number): number {
  return 7.8 + 0.9 * Math.sin(sample / 4);
}

function houseVoltageAt(sample: number): number {
  return 12.9 - sample * 0.006 + 0.03 * Math.sin(sample);
}

function trendsAt(step: number): Trend[] {
  const pressure: number = pressureAt(step);
  const wind: number = windAt(step);
  const depth: number = depthAt(step);
  const voltage: number = houseVoltageAt(step);
  return [
    {
      name: "Barometer",
      reading: pressure,
      unit: "hPa",
      fractionDigits: 1,
      note: "Graph zoomed to 1000–1015 hPa",
      type: ObcGaugeTrendIndicatorType.Fill,
      data: sampled(pressureAt, step),
      minValue: 960,
      maxValue: 1050,
      chartMinValue: 1000,
      chartMaxValue: 1015,
      value: pressure,
    },
    {
      name: "True wind",
      reading: wind,
      unit: "kn",
      fractionDigits: 0,
      note: "Gusting to 23 kn",
      type: ObcGaugeTrendIndicatorType.Point,
      data: sampled(windAt, step),
      minValue: 0,
      maxValue: 40,
      value: wind,
    },
    {
      name: "Depth at anchor",
      reading: depth,
      unit: "m",
      fractionDigits: 1,
      note: "Tide range 1.8 m, swinging clear",
      type: ObcGaugeTrendIndicatorType.Point,
      data: sampled(depthAt, step),
      minValue: 0,
      maxValue: 15,
    },
    {
      name: "House voltage",
      reading: voltage,
      unit: "V",
      fractionDigits: 2,
      note: "Fridge and anchor light on",
      type: ObcGaugeTrendIndicatorType.Fill,
      data: sampled(houseVoltageAt, step),
      minValue: 11.5,
      maxValue: 14.5,
    },
  ];
}

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) % 60);
    }, 2000);
    return (): void => {
      window.clearInterval(timer);
    };
  }, []);

  return (
    <div
      style={{
        display: "grid",
        gridTemplateColumns: "repeat(auto-fill, minmax(260px, 1fr))",
        gap: 8,
        width: "100%",
        maxWidth: 600,
      }}
    >
      {trendsAt(step).map((trend: Trend): ReactElement => (
        <div key={trend.name} style={TILE_STYLE}>
          <GaugeTrendIndicator
            type={trend.type}
            data={trend.data}
            minValue={trend.minValue}
            maxValue={trend.maxValue}
            chartMinValue={trend.chartMinValue}
            chartMaxValue={trend.chartMaxValue}
            value={trend.value}
          />
          <div style={{ display: "grid", gap: 2, minWidth: 0 }}>
            <Readout label={trend.name} value={trend.reading} unit={trend.unit} fractionDigits={trend.fractionDigits} />
            <span style={{ ...NAME_STYLE, fontSize: 11 }}>{trend.note}</span>
          </div>
        </div>
      ))}
    </div>
  );
}

import { GaugeTrendIndicator, ObcGaugeTrendIndicatorType } from "@bosunkit/instruments";
import type { ReactElement } from "react";

export const description: string = "A small trend graph with the current value of 50 as a fill at the right edge.";

export default function Trend(): ReactElement {
  return (
    <GaugeTrendIndicator
      type={ObcGaugeTrendIndicatorType.Fill}
      data={[45, 52, 48, 55, 62, 58, 52, 40, 32, 37, 55, 68]}
      minValue={0}
      maxValue={100}
      value={50}
    />
  );
}