4f:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 50:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 51:T1fc7,"use client"; import { motion } from "motion/react"; import { useId, useLayoutEffect, useMemo } from "react"; import { chartCssVars, useChartStable, useYScale } from "./chart-context"; import { type PatternPresetId, renderPatternPreset } from "./pattern-preset"; import { computeReferenceAreaRect, type ReferenceAreaIfOverflow, } from "./reference-area-geometry"; import { useReferenceAreaRegistration } from "./reference-area-registration-context"; import { normalizeYAxisId } from "./y-axis-scales"; import { isReferenceAreaVisiblePhase } from "./y-domain-utils"; const DEFAULT_FILL = "color-mix(in oklch, var(--chart-foreground-muted) 12%, transparent)"; export type ReferenceAreaStrokeStyle = "solid" | "dashed"; export interface ReferenceAreaProps { /** Lower Y data bound (extends to plot top when omitted). */ y1?: number; /** Upper Y data bound (extends to plot bottom when omitted). */ y2?: number; /** Starting X data coordinate (extends to plot left when omitted). */ x1?: Date | number; /** Ending X data coordinate (extends to plot right when omitted). */ x2?: Date | number; /** Y-scale group id. Default: `"left"`. */ yAxisId?: string | number; /** Solid fill when `pattern` is `"none"`. */ fill?: string; fillOpacity?: number; /** Pattern preset. `"none"` uses solid `fill`. */ pattern?: PatternPresetId; /** Pattern stroke / tile color. */ patternColor?: string; patternScale?: number; patternStrokeWidth?: number; patternRadius?: number; patternComplement?: boolean; patternFill?: string; patternDotFill?: boolean; patternTileBackground?: string; stroke?: string; strokeWidth?: number; strokeStyle?: ReferenceAreaStrokeStyle; /** Dash array when `strokeStyle` is `"dashed"`. Default: `"4,4"`. */ strokeDasharray?: string; /** Fade fill and edge lines at left/right. Default: true */ fadeEdges?: boolean; /** Horizontal fade zone as % of plot width per edge. Default: 10 */ fadeEdgesLength?: number; /** Y-axis tick label color for values inside this band. */ axisLabelColor?: string; /** Inward bracket markers at the horizontal center of the band. */ showMarkers?: boolean; markerColor?: string; markerSize?: number; ifOverflow?: ReferenceAreaIfOverflow; className?: string; } const ENTER_FADE_MS = 420; function clampFadeLength(length: number): number { return Math.min(45, Math.max(0, length)); } function bracketMarkerPath( centerX: number, edgeY: number, size: number, direction: "down" | "up" ): string { const half = size / 2; if (direction === "down") { return `M ${centerX - half} ${edgeY} L ${centerX + half} ${edgeY} L ${centerX} ${edgeY + size} Z`; } return `M ${centerX - half} ${edgeY} L ${centerX + half} ${edgeY} L ${centerX} ${edgeY - size} Z`; } export function ReferenceArea({ y1, y2, x1, x2, yAxisId, fill = DEFAULT_FILL, fillOpacity = 1, pattern = "none", patternColor = chartCssVars.foregroundMuted, patternScale = 1, patternStrokeWidth, patternRadius, patternComplement, patternFill, patternDotFill, patternTileBackground, stroke = chartCssVars.foregroundMuted, strokeWidth = 1, strokeStyle = "dashed", strokeDasharray = "4,4", fadeEdges = true, fadeEdgesLength = 10, axisLabelColor, showMarkers = false, markerColor = "var(--chart-1)", markerSize = 6, ifOverflow = "hidden", className, }: ReferenceAreaProps) { const { innerWidth, innerHeight, xScale, chartPhase, enterTransition } = useChartStable(); const yScale = useYScale(yAxisId); const uniqueId = useId().replace(/:/g, ""); const registration = useReferenceAreaRegistration(); useLayoutEffect(() => { if (!registration) { return; } registration.registerReferenceArea(uniqueId, { yAxisId: normalizeYAxisId(yAxisId), y1, y2, axisLabelColor, }); return () => registration.unregisterReferenceArea(uniqueId); }, [registration, uniqueId, yAxisId, y1, y2, axisLabelColor]); const patternId = `chart-reference-area-pattern-${uniqueId}`; const hMaskId = `chart-reference-area-fade-${uniqueId}`; const hGradientId = `${hMaskId}-gradient`; const rect = useMemo( () => computeReferenceAreaRect({ innerWidth, innerHeight, x1, x2, y1, y2, ifOverflow, xScale, yScale, }), [innerWidth, innerHeight, x1, x2, y1, y2, ifOverflow, xScale, yScale] ); const usesPattern = pattern !== "none"; const patternNode = useMemo(() => { if (!usesPattern) { return null; } return renderPatternPreset(pattern, patternId, { color: patternColor, scale: patternScale, strokeWidth: patternStrokeWidth, radius: patternRadius, complement: patternComplement, fill: patternFill, dotFill: patternDotFill, tileBackground: patternTileBackground, }); }, [ usesPattern, pattern, patternId, patternColor, patternScale, patternStrokeWidth, patternRadius, patternComplement, patternFill, patternDotFill, patternTileBackground, ]); const fadeEdge = clampFadeLength(fadeEdgesLength); const edgeMask = fadeEdges ? `url(#${hMaskId})` : undefined; const lineDash = strokeStyle === "dashed" ? strokeDasharray : undefined; if (!rect) { return null; } const { x, y, width, height } = rect; const topEdgeY = y; const bottomEdgeY = y + height; const centerX = x + width / 2; const visible = isReferenceAreaVisiblePhase(chartPhase); const fadeTransition = enterTransition && typeof enterTransition === "object" ? enterTransition : { duration: ENTER_FADE_MS / 1000, ease: "easeOut" as const }; const areaFill = usesPattern && patternNode ? `url(#${patternId})` : fill; return ( // biome-ignore lint/a11y/noAriaHiddenOnFocusable: decorative reference band ); } ReferenceArea.displayName = "ReferenceArea"; export default ReferenceArea; 52:Tc67,export type ReferenceAreaIfOverflow = "hidden" | "visible" | "discard"; export interface ReferenceAreaRect { x: number; y: number; width: number; height: number; } export interface ComputeReferenceAreaRectOptions { innerWidth: number; innerHeight: number; x1?: Date | number; x2?: Date | number; y1?: number; y2?: number; ifOverflow?: ReferenceAreaIfOverflow; xScale: (value: Date) => number; yScale: (value: number) => number; } function toDate(value: Date | number): Date { return value instanceof Date ? value : new Date(value); } function resolveXPixel( xScale: (value: Date) => number, value: Date | number | undefined, fallback: number ): number { if (value == null) { return fallback; } return xScale(toDate(value)); } function resolveYPixel( yScale: (value: number) => number, value: number | undefined, fallback: number ): number { if (value == null) { return fallback; } return yScale(value); } function clampRectToPlot( rect: ReferenceAreaRect, innerWidth: number, innerHeight: number ): ReferenceAreaRect | null { const x1 = Math.max(0, rect.x); const y1 = Math.max(0, rect.y); const x2 = Math.min(innerWidth, rect.x + rect.width); const y2 = Math.min(innerHeight, rect.y + rect.height); const width = x2 - x1; const height = y2 - y1; if (width <= 0 || height <= 0) { return null; } return { x: x1, y: y1, width, height }; } function isFullyInsidePlot( rect: ReferenceAreaRect, innerWidth: number, innerHeight: number ): boolean { return ( rect.x >= 0 && rect.y >= 0 && rect.x + rect.width <= innerWidth && rect.y + rect.height <= innerHeight ); } /** Map data bounds to plot pixels for a reference rectangle. */ export function computeReferenceAreaRect( options: ComputeReferenceAreaRectOptions ): ReferenceAreaRect | null { const { innerWidth, innerHeight, x1, x2, y1, y2, ifOverflow = "hidden", xScale, yScale, } = options; if (innerWidth <= 0 || innerHeight <= 0) { return null; } const left = resolveXPixel(xScale, x1, 0); const right = resolveXPixel(xScale, x2, innerWidth); const top = resolveYPixel(yScale, y1, 0); const bottom = resolveYPixel(yScale, y2, innerHeight); const x = Math.min(left, right); const y = Math.min(top, bottom); const width = Math.abs(right - left); const height = Math.abs(bottom - top); if (width <= 0 || height <= 0) { return null; } const rect: ReferenceAreaRect = { x, y, width, height }; if (ifOverflow === "visible") { return rect; } if (ifOverflow === "discard") { return isFullyInsidePlot(rect, innerWidth, innerHeight) ? rect : null; } return clampRectToPlot(rect, innerWidth, innerHeight); } /** Inclusive data range for axis label highlighting. */ export function resolveReferenceDataRange( y1: number | undefined, y2: number | undefined, domain: [number, number] ): [number, number] { const dMin = Math.min(domain[0], domain[1]); const dMax = Math.max(domain[0], domain[1]); const low = y1 ?? dMin; const high = y2 ?? dMax; return [Math.min(low, high), Math.max(low, high)]; } 4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L4f",null,{"namespace":"@bklit","registryDependencies":["@bklit/chart-context","@bklit/background"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"src/charts/reference-area.tsx","content":"$51","type":"registry:component","target":"components/charts/reference-area.tsx"},{"path":"src/charts/reference-area-geometry.ts","content":"$52","type":"registry:component","target":"components/charts/reference-area-geometry.ts"},{"path":"src/charts/reference-area-registration-context.tsx","content":"\"use client\";\n\nimport { createContext, useContext } from \"react\";\nimport type { ReferenceAreaConfig } from \"./reference-area-config\";\n\nexport interface ReferenceAreaRegistrationContextValue {\n registerReferenceArea: (id: string, config: ReferenceAreaConfig) => void;\n unregisterReferenceArea: (id: string) => void;\n}\n\nexport const ReferenceAreaRegistrationContext =\n createContext(null);\n\nexport function useReferenceAreaRegistration(): ReferenceAreaRegistrationContextValue | null {\n return useContext(ReferenceAreaRegistrationContext);\n}\n","type":"registry:component","target":"components/charts/reference-area-registration-context.tsx"}],"className":"h-[70svh] min-h-80"}]]}]