Wind

import {
  Priority,
  VesselImage,
  Wind,
  WindVariant,
  WindVisualization,
  type WindHistogramData,
} from "@bosunkit/instruments";
import { useEffect, useState, type CSSProperties, type Dispatch, type ReactElement, type SetStateAction } from "react";

export const description: string =
  "A squall line coming through on a live feed: the wind veers from west-northwest to north-northwest and gusts " +
  "from 12 to 26 knots, so the barbs change and the histogram of the last minute fills in, on a large dial with the " +
  "vessel, a medium dial of force streaks and a small cockpit dial.";

const HISTORY_SECONDS: number = 60;
const BIN_DEGREES: number = 10;

const PANEL: CSSProperties = {
  display: "flex",
  flexWrap: "wrap",
  alignItems: "flex-end",
  justifyContent: "center",
  gap: 28,
  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 };

/** Direction the wind comes from, in degrees, at a time in seconds: a slow veer with shifts in the gusts. */
function directionAt(time: number): number {
  return 305 + 20 * ((1 - Math.cos(time / 25)) / 2) + 8 * Math.sin(time / 3.7);
}

/** Wind speed in knots at a time in seconds: a building breeze with gusts. */
function speedAt(time: number): number {
  const gust: number = Math.max(0, Math.sin(time / 5)) ** 3;
  return 12 + 6 * ((1 - Math.cos(time / 25)) / 2) + 8 * gust;
}

/** How often the wind came from each 10 degree sector over the last minute. */
function histogramAt(time: number): WindHistogramData[] {
  const counts: Map<number, number> = new Map<number, number>();
  for (let past: number = 0; past < HISTORY_SECONDS; past += 1) {
    const sector: number = (Math.round(directionAt(time - past) / BIN_DEGREES) * BIN_DEGREES) % 360;
    counts.set(sector, (counts.get(sector) ?? 0) + 1);
  }
  return Array.from(counts, ([direction, occurrences]: [number, number]): WindHistogramData => ({
    direction,
    occurrences,
  }));
}

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

  const direction: number = directionAt(second);
  const speed: number = speedAt(second);
  const heading: number = 47 + 4 * Math.sin(second / 6);

  return (
    <div style={PANEL}>
      <figure style={FIGURE}>
        <div style={{ width: 240, height: 240 }}>
          <Wind
            variant={WindVariant.large}
            visualization={WindVisualization.histogram}
            currentWindFromDirection={direction}
            currentWindSpeedKnots={speed}
            windHistogramData={histogramAt(second)}
            vesselImage={VesselImage.genericTop}
            vesselHeadingDeg={heading}
            priority={Priority.enhanced}
          />
        </div>
        <figcaption style={CAPTION}>Large: the double ring, the last minute's directions and the vessel</figcaption>
      </figure>

      <figure style={FIGURE}>
        <div style={{ width: 160, height: 160 }}>
          <Wind
            variant={WindVariant.medium}
            visualization={WindVisualization.forceGraphics}
            currentWindFromDirection={direction}
            currentWindSpeedKnots={speed}
            vesselImage={VesselImage.genericTop}
            vesselHeadingDeg={heading}
          />
        </div>
        <figcaption style={CAPTION}>Medium: force streaks for the strength</figcaption>
      </figure>

      <figure style={FIGURE}>
        <div style={{ width: 90, height: 90 }}>
          <Wind
            variant={WindVariant.auto}
            smallVariantMaxPx={100}
            mediumVariantMaxPx={220}
            currentWindFromDirection={direction}
            currentWindSpeedKnots={speed}
            priority={Priority.enhanced}
          />
        </div>
        <figcaption style={CAPTION}>Cockpit: the small layout, picked by size</figcaption>
      </figure>
    </div>
  );
}

import { Wind, WindVariant } from "@bosunkit/instruments";
import type { ReactElement } from "react";

export const description: string =
  "Wind from the northwest at 14 knots, with the direction histogram behind the arrow and the vessel at its heading.";

export default function WindExample(): ReactElement {
  return (
    <div style={{ width: 200, height: 200 }}>
      <Wind
        variant={WindVariant.medium}
        currentWindSpeedKnots={14}
        currentWindFromDirection={310}
        vesselHeadingDeg={47}
      />
    </div>
  );
}

import { Wind, WindVariant, WindVisualization } from "@bosunkit/instruments";
import type { ReactElement } from "react";

export const description: string = "The same wind with the force-graphics streak field in the center layer.";

export default function Force(): ReactElement {
  return (
    <div style={{ width: 200, height: 200 }}>
      <Wind
        variant={WindVariant.medium}
        visualization={WindVisualization.forceGraphics}
        currentWindSpeedKnots={14}
        currentWindFromDirection={310}
        vesselHeadingDeg={47}
      />
    </div>
  );
}

import { Priority, Wind, WindVariant, WindVisualization } from "@bosunkit/instruments";
import type { ReactElement } from "react";

export const description: string = "The streak field and the wind arrow in the enhanced palette.";

export default function Enhanced(): ReactElement {
  return (
    <div style={{ width: 200, height: 200 }}>
      <Wind
        variant={WindVariant.medium}
        visualization={WindVisualization.forceGraphics}
        priority={Priority.enhanced}
        currentWindSpeedKnots={14}
        currentWindFromDirection={310}
        vesselHeadingDeg={47}
      />
    </div>
  );
}

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

export const description: string =
  "A wind speed that is not a number draws no wind arrow, so the dial never shows a calm it did not measure.";

export default function NoReading(): ReactElement {
  return (
    <div style={{ width: 200, height: 200 }}>
      <Wind currentWindSpeedKnots={Number.NaN} currentWindFromDirection={310} />
    </div>
  );
}