@jcsoftdev/ui 0.0.0-stage → 0.1.0

package/src/charts/core/distribution/layout.ts

@@ -0,0 +1,302 @@
+import { type AxisTick, estimateTextWidth, thinTicks } from "../axes.js";
+import { resolveAxisFormat, type ValueFormat } from "../format.js";
+import { type BandScale, bandScale } from "../scales/band.js";
+import { type ContinuousScale, linearScale } from "../scales/linear.js";
+import { timeScale, timeTicks } from "../scales/time.js";
+
+/** Value axis options shared by the distribution charts. */
+export interface DistributionAxisOptions {
+  /** Fixed lower bound; the data decides by default. */
+  min?: number;
+  /** Fixed upper bound. */
+  max?: number;
+  /** Approximate number of ticks; derived from the size by default. */
+  tickCount?: number;
+  /** Tick format; defaults to a short form of the chart `valueFormat`. */
+  format?: ValueFormat;
+  /** Short axis title, e.g. "min" or "S/". */
+  title?: string;
+}
+
+export interface PlotMargin {
+  top: number;
+  right: number;
+  bottom: number;
+  left: number;
+}
+
+const clamp = (value: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, value));
+
+function ticksOf(
+  scale: ContinuousScale,
+  count: number,
+  format: ValueFormat | undefined,
+): AxisTick[] {
+  const toText = resolveAxisFormat(format);
+  const [d0, d1] = scale.domain;
+  return scale
+    .ticks(count)
+    .filter((value) => value >= Math.min(d0, d1) - 1e-9 && value <= Math.max(d0, d1) + 1e-9)
+    .map((value) => ({ key: value, position: scale.map(value), label: toText(value) }));
+}
+
+const clock = new Intl.DateTimeFormat("es-PE", { hour: "2-digit", minute: "2-digit" });
+
+/** Calendar ticks; spans shorter than two days fall back to evenly spaced clock times. */
+function timeAxisTicks(scale: ContinuousScale, count: number): AxisTick[] {
+  const [d0, d1] = scale.domain;
+  const calendar = timeTicks(d0, d1, count);
+  if (calendar.length >= 2) {
+    return calendar.map((tick) => ({
+      key: tick.value,
+      position: scale.map(tick.value),
+      label: tick.label,
+    }));
+  }
+  const steps = Math.max(2, Math.min(count, 6));
+  return Array.from({ length: steps }, (_unused, i) => {
+    const value = d0 + ((d1 - d0) * i) / (steps - 1);
+    return { key: value, position: scale.map(value), label: clock.format(value) };
+  });
+}
+
+/** Shortens `label` with an ellipsis so it fits `maxWidth` pixels at `fontSize`. */
+export function truncateLabel(label: string, maxWidth: number, fontSize = 11): string {
+  if (estimateTextWidth(label, fontSize) <= maxWidth) return label;
+  const chars = Math.max(1, Math.floor(maxWidth / (fontSize * 0.58)) - 1);
+  return `${label.slice(0, chars).trimEnd()}…`;
+}
+
+/** Room past the plot for the last tick label, which is centered on its tick. */
+const tailRoom = (ticks: readonly AxisTick[], minimum: number) =>
+  Math.max(minimum, estimateTextWidth(ticks[ticks.length - 1]?.label ?? "") / 2 + 4);
+
+const widest = (ticks: readonly AxisTick[], size = 11) =>
+  ticks.reduce((max, tick) => Math.max(max, estimateTextWidth(tick.label, size)), 0);
+
+/** Resolves a value domain, honouring fixed bounds and keeping a non-empty span. */
+function domainOf(
+  extent: readonly [number, number] | null,
+  axis: DistributionAxisOptions,
+): [number, number] {
+  let lo = axis.min ?? extent?.[0] ?? 0;
+  let hi = axis.max ?? extent?.[1] ?? 1;
+  if (lo === hi) {
+    lo -= 1;
+    hi += 1;
+  }
+  return lo < hi ? [lo, hi] : [hi, lo];
+}
+
+export interface CategoryLayoutInput {
+  width: number;
+  height: number;
+  /** "vertical": categories along x, values up the y axis. "horizontal": rows, values along x. */
+  orientation: "vertical" | "horizontal";
+  categories: readonly string[];
+  /** Series drawn side by side inside every category. */
+  seriesCount: number;
+  /** Data extent of the value axis. */
+  extent: readonly [number, number] | null;
+  valueFormat?: ValueFormat;
+  axis?: DistributionAxisOptions;
+  /** Inner padding between categories, as a fraction of the step (default 0.3). */
+  padding?: number;
+}
+
+export interface CategoryLayout {
+  margin: PlotMargin;
+  innerWidth: number;
+  innerHeight: number;
+  horizontal: boolean;
+  valueScale: ContinuousScale;
+  band: BandScale;
+  valueTicks: AxisTick[];
+  categoryTicks: AxisTick[];
+  /** Center and thickness of series `s` inside category `c`. */
+  slot(category: number, series: number): { center: number; size: number };
+}
+
+/**
+ * Geometry for charts with a category axis and a continuous value axis
+ * (box plots, violins, rainclouds, beeswarms). Pure.
+ */
+export function categoryLayout(input: CategoryLayoutInput): CategoryLayout {
+  const { width, height, categories, seriesCount, valueFormat } = input;
+  const axis = input.axis ?? {};
+  const horizontal = input.orientation === "horizontal";
+  const domain = domainOf(input.extent, axis);
+  const fixed = axis.min != null && axis.max != null;
+  const format = axis.format ?? valueFormat;
+  const top = axis.title ? 24 : 10;
+  const bottom = 28;
+
+  let margin: PlotMargin;
+  let tickCount: number;
+  if (horizontal) {
+    const labelWidth = Math.max(0, ...categories.map((label) => estimateTextWidth(label, 12)));
+    margin = { top, right: 18, bottom, left: clamp(labelWidth + 18, 36, width * 0.34) };
+    tickCount =
+      axis.tickCount ?? clamp(Math.round((width - margin.left - margin.right) / 90), 2, 9);
+    const probe = linearScale({ domain, range: [0, width], nice: !fixed, tickCount });
+    margin.right = tailRoom(ticksOf(probe, tickCount, format), 18);
+  } else {
+    tickCount = axis.tickCount ?? clamp(Math.round((height - top - bottom) / 50), 2, 8);
+    const probe = linearScale({ domain, range: [height, 0], nice: !fixed, tickCount });
+    margin = {
+      top,
+      right: 14,
+      bottom,
+      left: Math.max(30, widest(ticksOf(probe, tickCount, format)) + 16),
+    };
+  }
+  const innerWidth = Math.max(10, width - margin.left - margin.right);
+  const innerHeight = Math.max(10, height - margin.top - margin.bottom);
+  const valueScale = linearScale({
+    domain,
+    range: horizontal ? [0, innerWidth] : [innerHeight, 0],
+    nice: !fixed,
+    tickCount,
+  });
+  const band = bandScale({
+    count: categories.length,
+    range: horizontal ? [0, innerHeight] : [0, innerWidth],
+    paddingInner: input.padding ?? 0.3,
+    paddingOuter: 0.18,
+  });
+  const valueTicks = ticksOf(valueScale, tickCount, format);
+  const categoryTicks = categories.map((label, index) => ({
+    key: index,
+    position: band.center(index),
+    label: horizontal ? truncateLabel(label, margin.left - 18, 12) : label,
+  }));
+  const groups = Math.max(1, seriesCount);
+  const inner = band.bandwidth / groups;
+  return {
+    margin,
+    innerWidth,
+    innerHeight,
+    horizontal,
+    valueScale,
+    band,
+    valueTicks: horizontal ? thinTicks(valueTicks) : valueTicks,
+    categoryTicks: horizontal ? categoryTicks : thinTicks(categoryTicks),
+    slot: (category, series) => ({
+      center: band.start(category) + inner * (series + 0.5),
+      size: inner * (groups > 1 ? 0.86 : 1),
+    }),
+  };
+}
+
+export interface XYLayoutInput {
+  width: number;
+  height: number;
+  xExtent: readonly [number, number] | null;
+  yExtent: readonly [number, number] | null;
+  xFormat?: ValueFormat;
+  yFormat?: ValueFormat;
+  xAxis?: DistributionAxisOptions;
+  yAxis?: DistributionAxisOptions;
+  /** Extra room inside the plot for marks with a radius (pixels). */
+  inset?: number;
+  /** x values are epoch milliseconds: a calendar axis with es-PE tick labels. */
+  xTime?: boolean;
+}
+
+export interface XYLayout {
+  margin: PlotMargin;
+  innerWidth: number;
+  innerHeight: number;
+  xScale: ContinuousScale;
+  yScale: ContinuousScale;
+  xTicks: AxisTick[];
+  yTicks: AxisTick[];
+}
+
+/** Two continuous axes (scatter, bubble, histogram). Pure. */
+export function xyLayout(input: XYLayoutInput): XYLayout {
+  const { width, height, inset = 0 } = input;
+  const xAxis = input.xAxis ?? {};
+  const yAxis = input.yAxis ?? {};
+  const xDomain = domainOf(input.xExtent, xAxis);
+  const yDomain = domainOf(input.yExtent, yAxis);
+  const xFixed = xAxis.min != null && xAxis.max != null;
+  const yFixed = yAxis.min != null && yAxis.max != null;
+  const xFormat = xAxis.format ?? input.xFormat;
+  const yFormat = yAxis.format ?? input.yFormat;
+  const top = yAxis.title ? 24 : 10;
+  const bottom = xAxis.title ? 46 : 28;
+  const yCount = yAxis.tickCount ?? clamp(Math.round((height - top - bottom) / 50), 2, 8);
+  const probe = linearScale({
+    domain: yDomain,
+    range: [height, 0],
+    nice: !yFixed,
+    tickCount: yCount,
+  });
+  const margin: PlotMargin = {
+    top,
+    right: 16,
+    bottom,
+    left: Math.max(30, widest(ticksOf(probe, yCount, yFormat)) + 16),
+  };
+  const innerWidth = Math.max(10, width - margin.left - margin.right);
+  const innerHeight = Math.max(10, height - margin.top - margin.bottom);
+  const xCount = xAxis.tickCount ?? clamp(Math.round(innerWidth / 90), 2, 10);
+  const xRange: [number, number] = [inset, Math.max(inset + 1, innerWidth - inset)];
+  const xScale: ContinuousScale = input.xTime
+    ? timeScale({ domain: xDomain, range: xRange })
+    : linearScale({ domain: xDomain, range: xRange, nice: !xFixed, tickCount: xCount });
+  const yScale = linearScale({
+    domain: yDomain,
+    range: [Math.max(inset + 1, innerHeight - inset), inset],
+    nice: !yFixed,
+    tickCount: yCount,
+  });
+  return {
+    margin,
+    innerWidth,
+    innerHeight,
+    xScale,
+    yScale,
+    xTicks: thinTicks(
+      input.xTime ? timeAxisTicks(xScale, xCount) : ticksOf(xScale, xCount, xFormat),
+    ),
+    yTicks: ticksOf(yScale, yCount, yFormat),
+  };
+}
+
+/**
+ * Index of the item closest to `(x, y)` within `radius` pixels, or null.
+ * Linear scan: distribution charts hold hundreds of marks, not millions.
+ */
+export function nearestPoint(
+  points: ReadonlyArray<{ x: number; y: number; r?: number } | null>,
+  x: number,
+  y: number,
+  radius = 24,
+): number | null {
+  let best: number | null = null;
+  let bestDistance = Number.POSITIVE_INFINITY;
+  points.forEach((point, index) => {
+    if (!point) return;
+    const distance = Math.hypot(point.x - x, point.y - y) - (point.r ?? 0);
+    if (distance < bestDistance && distance <= radius) {
+      best = index;
+      bestDistance = distance;
+    }
+  });
+  return best;
+}
+
+/**
+ * Keeps the tooltip inside narrow frames: below 480 px it flips at the middle
+ * and its width is capped to half the container (`cqw`, the chart frame is a
+ * size container).
+ */
+export function tooltipFit(width: number): { containerWidth: number; className?: string } {
+  if (width >= 480) return { containerWidth: width };
+  return {
+    containerWidth: width * 1.2,
+    className: "min-w-[112px] max-w-[calc(50cqw-16px)]",
+  };
+}

package/src/charts/core/distribution/marks.tsx

@@ -0,0 +1,334 @@
+import { memo } from "react";
+import { AxisBottom, AxisLeft, GridLines } from "../axes.js";
+import { ChartDataTable } from "../data-table.js";
+import type { ValueFormatter } from "../format.js";
+import type { TooltipRow } from "../tooltip.js";
+import type { DistributionLabels } from "./labels.js";
+import type { CategoryLayout, XYLayout } from "./layout.js";
+import type { BoxStats } from "./stats.js";
+
+const TITLE = "fill-ink-3 font-bold text-[10.5px]";
+
+/** Gridlines along the value axis plus both axes of a `categoryLayout`. */
+export const CategoryAxes = memo(function CategoryAxes({
+  layout,
+  title,
+  grid = true,
+}: {
+  layout: CategoryLayout;
+  title?: string;
+  grid?: boolean;
+}) {
+  const { horizontal, innerWidth, innerHeight, valueTicks, categoryTicks } = layout;
+  return (
+    <>
+      {grid ? (
+        <GridLines
+          ticks={valueTicks}
+          direction={horizontal ? "vertical" : "horizontal"}
+          length={horizontal ? innerHeight : innerWidth}
+        />
+      ) : null}
+      {horizontal ? (
+        <>
+          <g transform="translate(0,0)">
+            {categoryTicks.map((tick) => (
+              <text
+                key={tick.key}
+                x={-12}
+                y={tick.position}
+                dy="0.34em"
+                textAnchor="end"
+                className="fill-ink-2 font-semibold text-[12px]"
+              >
+                {tick.label}
+              </text>
+            ))}
+          </g>
+          <AxisBottom ticks={valueTicks} offset={innerHeight} />
+          {title ? (
+            <text x={innerWidth} y={-10} textAnchor="end" className={TITLE}>
+              {title}
+            </text>
+          ) : null}
+        </>
+      ) : (
+        <>
+          <AxisLeft ticks={valueTicks} offset={0} title={title} />
+          <AxisBottom ticks={categoryTicks} offset={innerHeight} />
+        </>
+      )}
+      <line
+        x1={0}
+        x2={horizontal ? 0 : innerWidth}
+        y1={horizontal ? 0 : innerHeight}
+        y2={innerHeight}
+        shapeRendering="crispEdges"
+        style={{ stroke: "var(--line-strong)" }}
+      />
+    </>
+  );
+});
+
+/** Gridlines in both directions and the x/y axes of an `xyLayout`. */
+export const XYAxes = memo(function XYAxes({
+  layout,
+  xTitle,
+  yTitle,
+  grid = true,
+}: {
+  layout: XYLayout;
+  xTitle?: string;
+  yTitle?: string;
+  grid?: boolean;
+}) {
+  const { innerWidth, innerHeight, xTicks, yTicks } = layout;
+  return (
+    <>
+      {grid ? (
+        <>
+          <GridLines ticks={yTicks} direction="horizontal" length={innerWidth} />
+          <g opacity={0.6}>
+            <GridLines ticks={xTicks} direction="vertical" length={innerHeight} />
+          </g>
+        </>
+      ) : null}
+      <line
+        x1={0}
+        x2={innerWidth}
+        y1={innerHeight}
+        y2={innerHeight}
+        shapeRendering="crispEdges"
+        style={{ stroke: "var(--line-strong)" }}
+      />
+      <AxisLeft ticks={yTicks} offset={0} title={yTitle} />
+      <AxisBottom ticks={xTicks} offset={innerHeight} />
+      {xTitle ? (
+        <text x={innerWidth} y={innerHeight + 40} textAnchor="end" className={TITLE}>
+          {xTitle}
+        </text>
+      ) : null}
+    </>
+  );
+});
+
+export interface BoxGlyphProps {
+  stats: BoxStats;
+  /** Value to pixel along the value axis. */
+  map: (value: number) => number;
+  /** Pixel of the box axis on the cross axis. */
+  center: number;
+  /** Box thickness in pixels. */
+  size: number;
+  horizontal: boolean;
+  color: string;
+  /** "box": soft fill and colored outline. "inner": slim dark box for violins and rainclouds. */
+  variant?: "box" | "inner";
+  showMean?: boolean;
+  showOutliers?: boolean;
+  /** Highlighted outlier value (keyboard or pointer). */
+  activeOutlier?: number | null;
+  dimmed?: boolean;
+  active?: boolean;
+}
+
+/**
+ * One box-and-whisker: IQR box, median line, whiskers with caps, optional
+ * mean diamond and outlier dots. Pure SVG, memoised.
+ */
+export const BoxGlyph = memo(function BoxGlyph({
+  stats,
+  map,
+  center,
+  size,
+  horizontal,
+  color,
+  variant = "box",
+  showMean = true,
+  showOutliers = true,
+  activeOutlier,
+  dimmed,
+  active,
+}: BoxGlyphProps) {
+  const inner = variant === "inner";
+  const half = size / 2;
+  const q1 = map(stats.q1);
+  const q3 = map(stats.q3);
+  const lo = map(stats.lowerWhisker);
+  const hi = map(stats.upperWhisker);
+  const median = map(stats.median);
+  const start = Math.min(q1, q3);
+  const length = Math.max(1, Math.abs(q3 - q1));
+  const cap = inner ? 0 : Math.min(half * 0.55, 14);
+  const line = (v0: number, c0: number, v1: number, c1: number) =>
+    horizontal ? { x1: v0, y1: c0, x2: v1, y2: c1 } : { x1: c0, y1: v0, x2: c1, y2: v1 };
+  const ink = inner ? "var(--ink-2)" : color;
+  const mean = map(stats.mean);
+  const diamond = inner ? 0 : Math.max(3.5, Math.min(5, half * 0.3));
+  return (
+    <g
+      className="transition-opacity duration-150"
+      style={{ opacity: dimmed ? 0.3 : 1 }}
+      data-box=""
+    >
+      <line
+        {...line(lo, center, start, center)}
+        strokeWidth={inner ? 1.5 : 1.5}
+        style={{ stroke: ink }}
+      />
+      <line
+        {...line(start + length, center, hi, center)}
+        strokeWidth={1.5}
+        style={{ stroke: ink }}
+      />
+      {cap > 0 ? (
+        <>
+          <line
+            {...line(lo, center - cap, lo, center + cap)}
+            strokeWidth={1.5}
+            strokeLinecap="round"
+            style={{ stroke: ink }}
+          />
+          <line
+            {...line(hi, center - cap, hi, center + cap)}
+            strokeWidth={1.5}
+            strokeLinecap="round"
+            style={{ stroke: ink }}
+          />
+        </>
+      ) : null}
+      <rect
+        x={horizontal ? start : center - half}
+        y={horizontal ? center - half : start}
+        width={horizontal ? length : size}
+        height={horizontal ? size : length}
+        rx={inner ? Math.min(2, half) : Math.min(6, half / 2)}
+        strokeWidth={inner ? 0 : active ? 2.25 : 1.5}
+        style={
+          inner
+            ? { fill: "var(--ink-2)" }
+            : { fill: color, fillOpacity: active ? 0.3 : 0.18, stroke: color }
+        }
+      />
+      {inner ? (
+        <circle
+          cx={horizontal ? median : center}
+          cy={horizontal ? center : median}
+          r={Math.max(2, Math.min(3.2, half * 0.9))}
+          style={{ fill: "var(--surface)" }}
+        />
+      ) : (
+        <line
+          {...line(median, center - half, median, center + half)}
+          strokeWidth={2.5}
+          strokeLinecap="round"
+          style={{ stroke: color }}
+        />
+      )}
+      {showMean && diamond > 0 ? (
+        <path
+          d={
+            horizontal
+              ? `M${mean},${center - diamond}L${mean + diamond},${center}L${mean},${center + diamond}L${mean - diamond},${center}Z`
+              : `M${center},${mean - diamond}L${center + diamond},${mean}L${center},${mean + diamond}L${center - diamond},${mean}Z`
+          }
+          strokeWidth={1.5}
+          style={{ fill: "var(--surface)", stroke: color }}
+        />
+      ) : null}
+      {showOutliers
+        ? stats.outliers.map((value, index) => {
+            const at = map(value);
+            const highlighted = activeOutlier === value;
+            return (
+              <circle
+                // biome-ignore lint/suspicious/noArrayIndexKey: outliers can repeat; order is stable.
+                key={index}
+                cx={horizontal ? at : center}
+                cy={horizontal ? center : at}
+                r={highlighted ? 4.5 : 3.25}
+                strokeWidth={1.5}
+                style={{
+                  fill: highlighted ? color : "var(--surface)",
+                  stroke: inner ? "var(--ink-2)" : color,
+                }}
+              />
+            );
+          })
+        : null}
+    </g>
+  );
+});
+
+/** Tooltip rows for a five-number summary. */
+export function boxTooltipRows(
+  stats: BoxStats,
+  labels: DistributionLabels,
+  format: ValueFormatter,
+  color: string,
+  showMean = true,
+): TooltipRow[] {
+  const row = (id: string, name: string, value: string, emphasis = false): TooltipRow => ({
+    id,
+    name,
+    value,
+    color,
+    shape: "square",
+    emphasis,
+  });
+  const rows = [
+    row("max", labels.max, format(stats.max)),
+    row("q3", labels.q3, format(stats.q3)),
+    row("median", labels.median, format(stats.median)),
+    row("q1", labels.q1, format(stats.q1)),
+    row("min", labels.min, format(stats.min)),
+  ];
+  if (showMean) rows.push(row("mean", labels.mean, format(stats.mean)));
+  rows.push(row("count", labels.count, String(stats.count), true));
+  if (stats.outliers.length) {
+    rows.push(row("outliers", labels.outliers, String(stats.outliers.length)));
+  }
+  return rows;
+}
+
+/** One-line summary of a box for `aria-valuetext`. */
+export function boxValueText(
+  name: string,
+  stats: BoxStats,
+  labels: DistributionLabels,
+  format: ValueFormatter,
+): string {
+  return `${name}: ${labels.median} ${format(stats.median)}, ${labels.q1} ${format(stats.q1)}, ${labels.q3} ${format(
+    stats.q3,
+  )}, ${labels.min} ${format(stats.min)}, ${labels.max} ${format(stats.max)}, ${labels.mean} ${format(
+    stats.mean,
+  )}, ${labels.count} ${stats.count}${stats.outliers.length ? `, ${labels.outliers} ${stats.outliers.length}` : ""}`;
+}
+
+export interface BoxStatsTableProps {
+  caption: string;
+  labels: DistributionLabels;
+  rows: ReadonlyArray<{ name: string; stats: BoxStats | null; format: ValueFormatter }>;
+}
+
+/** Hidden data table with the summary of every box, violin or cloud. */
+export function BoxStatsTable({ caption, labels, rows }: BoxStatsTableProps) {
+  const keys = ["count", "min", "q1", "median", "q3", "max", "mean", "outliers"] as const;
+  return (
+    <ChartDataTable
+      caption={caption}
+      categoryHeader={labels.category}
+      categories={rows.map((row) => row.name)}
+      columns={keys.map((key) => ({
+        id: key,
+        name: labels[key],
+        values: rows.map(({ stats, format }) => {
+          if (!stats) return "";
+          if (key === "count") return String(stats.count);
+          if (key === "outliers") return stats.outliers.map(format).join(", ");
+          return format(stats[key]);
+        }),
+      }))}
+    />
+  );
+}

package/src/charts/core/distribution/observations.tsx

@@ -0,0 +1,61 @@
+import { memo } from "react";
+import { sequentialColor } from "../color-scale.js";
+
+export interface ObservationDotsProps {
+  points: ReadonlyArray<{ value: number; offset: number }>;
+  /** Value to pixel along the value axis. */
+  map: (value: number) => number;
+  /** Pixel of the group axis on the cross axis. */
+  center: number;
+  horizontal: boolean;
+  color: string;
+  /** "value" grades the fill from a pale tint of `color` to `color` across `range`. */
+  coloring?: "series" | "value";
+  range?: readonly [number, number];
+  radius?: number;
+  dimmed?: boolean;
+}
+
+/** Raw observations of a box or violin as small dots (jitter already applied). */
+export const ObservationDots = memo(function ObservationDots({
+  points,
+  map,
+  center,
+  horizontal,
+  color,
+  coloring = "series",
+  range,
+  radius = 2.6,
+  dimmed,
+}: ObservationDotsProps) {
+  const graded = coloring === "value" && range != null;
+  return (
+    <g
+      data-observations=""
+      className="pointer-events-none transition-opacity duration-150"
+      style={{ opacity: dimmed ? 0.2 : 1 }}
+    >
+      {points.map((point, index) => {
+        const at = map(point.value);
+        const fill = graded
+          ? sequentialColor(point.value, range, { mid: "var(--surface)", high: color }).color
+          : color;
+        return (
+          <circle
+            // biome-ignore lint/suspicious/noArrayIndexKey: samples repeat; order is stable.
+            key={index}
+            cx={horizontal ? at : center + point.offset}
+            cy={horizontal ? center + point.offset : at}
+            r={radius}
+            strokeWidth={graded ? 0.75 : 0.5}
+            style={{
+              fill,
+              fillOpacity: graded ? 0.95 : 0.6,
+              stroke: graded ? color : "var(--surface)",
+            }}
+          />
+        );
+      })}
+    </g>
+  );
+});