Category barFree

"use client";

import { useEffect, useState, type CSSProperties } from "react";
import { useCategoryBarModel, type CategoryBarProps } from "../../core/category-bar";
import { InstrumentStyles } from "./styles";

export type CategoryBarChartProps<TDatum extends Record<string, unknown>> = CategoryBarProps<TDatum> & {
  /** Show each range's bounds in the legend (default true). Bounds sit in the legend, where long or narrow ranges can't collide. */
  showLabels?: boolean | undefined;
  /** Classes on the bar. */
  className?: string | undefined;
};

/** Sample data used when you install the category bar; replace it with your own rows. */
export const categoryBarSample = [
  { band: "At risk", size: 50, color: "var(--i-bad)" }, { band: "Watch", size: 25, color: "var(--i-warn)" }, { band: "Healthy", size: 25, color: "var(--i-good)" },
];

/**
 * Category bar, Instrument theme. Plain HTML: no chart engine.
 * One bar split into named ranges laid end to end, with an optional marker for where a value falls. It isn't
 * interactive; screen readers get one sentence naming every range and where the marker is.
 */
export function CategoryBar<TDatum extends Record<string, unknown>>(props: CategoryBarChartProps<TDatum>) {
  const m = useCategoryBarModel(props);
  const [entered, setEntered] = useState(false);
  // Entered on the next frame (not synchronously in the effect), so the entry animation has a first frame to start from.
  useEffect(() => { const frame = requestAnimationFrame(() => setEntered(true)); return () => cancelAnimationFrame(frame); }, []);
  const showLabels = props.showLabels ?? true;
  // One coordinate system: each range sits at its own place on the scale, and the marker on the same scale.
  const pct = (v: number) => (m.span > 0 ? ((v - m.start) / m.span) * 100 : 0);
  return (
    <div data-slot="category-bar" data-bc-theme={"Instrument".toLowerCase()} data-entered={entered && m.k > 0 ? "" : undefined} className={props.className}
      role="img" aria-label={m.summary} style={{ ["--bc-k" as string]: m.k } as CSSProperties}>
      <InstrumentStyles />
      <div data-slot="category-bar-track" aria-hidden="true">
        {m.segments.map((s, i) => (
          <span key={s.key} data-slot="category-bar-segment" data-first={i === 0 ? "" : undefined}
            style={{ left: `${pct(s.from)}%`, width: `${s.share * 100}%`, ["--c" as string]: i, ["--seg" as string]: s.color ?? `var(--bc-palette-${(s.index % 8) + 1})` } as CSSProperties} />
        ))}
        {m.marker ? <span data-slot="category-bar-marker" data-beyond={m.marker.beyond ?? undefined} style={{ left: `${m.marker.position * 100}%` }} /> : null}
      </div>
      {/* The names, bounds and marker in words, visible and wrapping: nothing depends on hovering. */}
      <p data-slot="category-bar-legend" aria-hidden="true">
        {m.segments.map((s) => <span key={s.key} style={{ ["--seg" as string]: s.color ?? `var(--bc-palette-${(s.index % 8) + 1})` } as CSSProperties}>{s.name}{showLabels ? ` ${m.format(s.from)}–${m.format(s.to)}` : ""}</span>)}
        {m.markerText ? <span data-slot="category-bar-marker-text">{m.markerText}</span> : null}
        {!m.segments.length ? <span>No ranges to show.</span> : null}
      </p>
    </div>
  );
}