Reference Area

1"use client";
2 
3import { motion } from "motion/react";
4import { useId, useLayoutEffect, useMemo } from "react";
5import { chartCssVars, useChartStable, useYScale } from "./chart-context";
6import { type PatternPresetId, renderPatternPreset } from "./pattern-preset";
7import {
8  computeReferenceAreaRect,
9  type ReferenceAreaIfOverflow,
10} from "./reference-area-geometry";
11import { useReferenceAreaRegistration } from "./reference-area-registration-context";
12import { normalizeYAxisId } from "./y-axis-scales";
13import { isReferenceAreaVisiblePhase } from "./y-domain-utils";
14 
15const DEFAULT_FILL =
16  "color-mix(in oklch, var(--chart-foreground-muted) 12%, transparent)";
17 
18export type ReferenceAreaStrokeStyle = "solid" | "dashed";
19 
20export interface ReferenceAreaProps {
21  /** Lower Y data bound (extends to plot top when omitted). */
22  y1?: number;
23  /** Upper Y data bound (extends to plot bottom when omitted). */
24  y2?: number;
25  /** Starting X data coordinate (extends to plot left when omitted). */
26  x1?: Date | number;
27  /** Ending X data coordinate (extends to plot right when omitted). */
28  x2?: Date | number;
29  /** Y-scale group id. Default: `"left"`. */
30  yAxisId?: string | number;
31  /** Solid fill when `pattern` is `"none"`. */
32  fill?: string;
33  fillOpacity?: number;
34  /** Pattern preset. `"none"` uses solid `fill`. */
35  pattern?: PatternPresetId;
36  /** Pattern stroke / tile color. */
37  patternColor?: string;
38  patternScale?: number;
39  patternStrokeWidth?: number;
40  patternRadius?: number;
41  patternComplement?: boolean;
42  patternFill?: string;
43  patternDotFill?: boolean;
44  patternTileBackground?: string;
45  stroke?: string;
46  strokeWidth?: number;
47  strokeStyle?: ReferenceAreaStrokeStyle;
48  /** Dash array when `strokeStyle` is `"dashed"`. Default: `"4,4"`. */
49  strokeDasharray?: string;
50  /** Fade fill and edge lines at left/right. Default: true */
51  fadeEdges?: boolean;
52  /** Horizontal fade zone as % of plot width per edge. Default: 10 */
53  fadeEdgesLength?: number;
54  /** Y-axis tick label color for values inside this band. */
55  axisLabelColor?: string;
56  /** Inward bracket markers at the horizontal center of the band. */
57  showMarkers?: boolean;
58  markerColor?: string;
59  markerSize?: number;
60  ifOverflow?: ReferenceAreaIfOverflow;
61  className?: string;
62}
63 
64const ENTER_FADE_MS = 420;
65 
66function clampFadeLength(length: number): number {
67  return Math.min(45, Math.max(0, length));
68}
69 
70function bracketMarkerPath(
71  centerX: number,
72  edgeY: number,
73  size: number,
74// … truncated