4e: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"] 4f: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"] 50:T961,"use client"; import { createContext, type ReactNode, useContext, useMemo } from "react"; export interface SpringConfig { stiffness: number; damping: number; } export interface ChartConfigValue { /** Crosshair indicator, tooltip dot, date pill. */ tooltipSpring: SpringConfig; /** Floating tooltip panel. */ tooltipBoxSpring: SpringConfig; /** Line/area hover-highlight band (x + width). */ highlightSpring: SpringConfig; } export const DEFAULT_CHART_CONFIG: ChartConfigValue = { tooltipSpring: { stiffness: 300, damping: 30 }, tooltipBoxSpring: { stiffness: 100, damping: 20 }, highlightSpring: { stiffness: 180, damping: 28 }, }; const ChartConfigContext = createContext(null); export interface ChartConfigProviderProps { value?: Partial; children: ReactNode; } export function ChartConfigProvider({ value, children, }: ChartConfigProviderProps) { const merged = useMemo( () => ({ ...DEFAULT_CHART_CONFIG, ...value, }), [value] ); return ( {children} ); } export function useChartConfig(): ChartConfigValue { return useContext(ChartConfigContext) ?? DEFAULT_CHART_CONFIG; } const DEFAULT_TOOLTIP_BOX_DAMPING = DEFAULT_CHART_CONFIG.tooltipBoxSpring.damping; /** Maps a damping slider to the floating tooltip panel follow spring. `0` = instant. */ export function resolveTooltipBoxMotion(damping?: number): { animate: boolean; springConfig: SpringConfig; } { if (damping === 0) { return { animate: false, springConfig: DEFAULT_CHART_CONFIG.tooltipBoxSpring, }; } const effectiveDamping = damping ?? DEFAULT_TOOLTIP_BOX_DAMPING; let stiffness = DEFAULT_CHART_CONFIG.tooltipBoxSpring.stiffness; if (effectiveDamping < DEFAULT_TOOLTIP_BOX_DAMPING) { const t = (DEFAULT_TOOLTIP_BOX_DAMPING - effectiveDamping) / DEFAULT_TOOLTIP_BOX_DAMPING; stiffness += t * 400; } else if (effectiveDamping > DEFAULT_TOOLTIP_BOX_DAMPING) { const t = (effectiveDamping - DEFAULT_TOOLTIP_BOX_DAMPING) / (100 - DEFAULT_TOOLTIP_BOX_DAMPING); stiffness -= t * 85; } return { animate: true, springConfig: { stiffness: Math.max(12, Math.round(stiffness)), damping: effectiveDamping, }, }; } 51:T664,/** Vertical fade on the tooltip crosshair indicator. */ export type IndicatorFadeEdges = "both" | "none" | "top" | "bottom"; export interface VerticalFadeSides { top: boolean; bottom: boolean; any: boolean; } export function resolveVerticalFadeSides( fade: IndicatorFadeEdges | boolean ): VerticalFadeSides { if (fade === false || fade === "none") { return { top: false, bottom: false, any: false }; } if (fade === true || fade === "both") { return { top: true, bottom: true, any: true }; } if (fade === "top") { return { top: true, bottom: false, any: true }; } return { top: false, bottom: true, any: true }; } export interface IndicatorFadeGradientStop { offset: string; opacity: number; } /** Opacity stops for the crosshair vertical gradient. */ export function indicatorFadeGradientStops( sides: VerticalFadeSides, fadeLengthPercent = 10 ): IndicatorFadeGradientStop[] { const fade = Math.min(40, Math.max(2, fadeLengthPercent)); const innerEnd = 100 - fade; if (!sides.any) { return [{ offset: "0%", opacity: 1 }]; } if (sides.top && sides.bottom) { return [ { offset: "0%", opacity: 0 }, { offset: `${fade}%`, opacity: 1 }, { offset: "50%", opacity: 1 }, { offset: `${innerEnd}%`, opacity: 1 }, { offset: "100%", opacity: 0 }, ]; } if (sides.top) { return [ { offset: "0%", opacity: 0 }, { offset: `${fade}%`, opacity: 1 }, { offset: "100%", opacity: 1 }, ]; } return [ { offset: "0%", opacity: 1 }, { offset: `${innerEnd}%`, opacity: 1 }, { offset: "100%", opacity: 0 }, ]; } 52:T338d,"use client"; import { motion, useSpring } from "motion/react"; import { memo, useEffect, useMemo, useState } from "react"; import { createPortal } from "react-dom"; import { resolveTooltipBoxMotion, type SpringConfig, useChartConfig, } from "../chart-config-context"; import { chartCssVars, type LineConfig, useChart, useChartStable, } from "../chart-context"; import { weekdayDateFmt } from "../chart-formatters"; import type { IndicatorFadeEdges } from "../indicator-fade"; import { DateTicker } from "./date-ticker"; import { TooltipBox } from "./tooltip-box"; import { TooltipContent, type TooltipRow } from "./tooltip-content"; import { TooltipDot } from "./tooltip-dot"; import { TooltipIndicator } from "./tooltip-indicator"; export interface ChartTooltipProps { /** Whether to show the date pill at bottom. Default: true */ showDatePill?: boolean; /** Whether to show the vertical crosshair line. Default: true */ showCrosshair?: boolean; /** Whether to show dots on the lines. Default: true */ showDots?: boolean; /** Dot style: filled circle or transparent ring. Default: "dot" */ dotVariant?: "dot" | "ring"; /** Dot / ring radius in pixels. Default: 5 */ dotSize?: number; /** Ring corner radius as a fraction of side length (0 = square, 0.5 = circle). */ dotRadiusFraction?: number; /** Multiplier applied to the computed dot / ring pixel radius. Default: 1 */ dotScale?: number; /** Ring stroke width in pixels. Default: 1.5 for ring variant */ dotStrokeWidth?: number; /** * Color for the crosshair/indicator line. When a function, receives the hovered point * (e.g. for candlestick: match candle color from close vs open). Default: --chart-crosshair. */ indicatorColor?: string | ((point: Record) => string); /** Custom content renderer for the tooltip box */ content?: (props: { point: Record; index: number; }) => React.ReactNode; /** Custom row renderer - return array of TooltipRow */ rows?: (point: Record) => TooltipRow[]; /** * Override tooltip dot fill. When omitted and `rows` is set, dot colors match row colors. * When a function, receives the hovered point and line config. */ dotColor?: | string | ((point: Record, line: LineConfig) => string); /** Additional content to show below rows (e.g., markers) */ children?: React.ReactNode; /** Custom class name */ className?: string; /** Per-chart override for the crosshair / dot / date-pill spring. */ springConfig?: SpringConfig; /** * When `true`, the floating panel uses the crosshair spring and stays in sync. * Default `false` — panel follow uses `damping` (`20`). */ matchCrosshair?: boolean; /** * Spring damping for the floating tooltip panel when `matchCrosshair` is `false`. * `0` disables spring motion (instant). Default: `20`. */ damping?: number; /** SVG stroke dash pattern for the crosshair. Omit for solid. */ indicatorDasharray?: string; /** Vertical crosshair fade: `both`, `top`, `bottom`, or `none` (solid). Default: `both`. */ indicatorFadeEdges?: IndicatorFadeEdges; /** Crosshair fade zone size (% of height). Default: `10`. */ indicatorFadeLength?: number; /** Per-chart override for the floating-panel spring. */ boxSpringConfig?: SpringConfig; /** Inline styles for the tooltip panel (background, blur, etc.). */ panelStyle?: React.CSSProperties; /** * Tooltip panel background color (CSS variable or color value). * Default: `var(--chart-tooltip-background)`. */ backgroundColor?: string; } interface ChartTooltipInnerProps extends ChartTooltipProps { container: HTMLElement; } const ChartTooltipInner = memo(function ChartTooltipInner({ showDatePill = true, showCrosshair = true, showDots = true, dotVariant = "dot", dotSize = 5, dotRadiusFraction, dotScale = 1, dotStrokeWidth, indicatorColor: indicatorColorProp, content, rows: rowsRenderer, dotColor: dotColorProp, children, className = "", container, springConfig, matchCrosshair = false, damping, indicatorDasharray, indicatorFadeEdges, indicatorFadeLength, boxSpringConfig, panelStyle, backgroundColor, }: ChartTooltipInnerProps) { const { tooltipData, width, height, innerHeight, margin, columnWidth, lines, xAccessor, dateLabels, containerRef, orientation, barXAccessor, bandWidth, squareSnap, } = useChart(); const { tooltipSpring } = useChartConfig(); const isHorizontal = orientation === "horizontal"; const discreteInteraction = dateLabels.length > 60; const resolvedDotSize = useMemo(() => { if (dotVariant !== "ring" || !bandWidth || lines.length === 0) { return dotSize * dotScale; } const seriesCount = lines.length; const gap = squareSnap?.groupGap ?? (seriesCount > 1 ? 4 : 0); const squareSize = (bandWidth - gap * (seriesCount - 1)) / seriesCount; return (squareSize / 2) * dotScale; }, [ bandWidth, dotScale, dotSize, dotVariant, lines.length, squareSnap?.groupGap, ]); const boxMotion = useMemo(() => { if (boxSpringConfig) { return { animate: !discreteInteraction, springConfig: boxSpringConfig, }; } if (matchCrosshair) { return { animate: !discreteInteraction, springConfig: springConfig ?? tooltipSpring, }; } return resolveTooltipBoxMotion(damping); }, [ boxSpringConfig, damping, discreteInteraction, matchCrosshair, springConfig, tooltipSpring, ]); const visible = tooltipData !== null; const x = tooltipData?.x ?? 0; const xWithMargin = x + margin.left; // For horizontal charts, get the y position from the first line's yPosition (center of bar) const firstLineDataKey = lines[0]?.dataKey; const firstLineY = firstLineDataKey ? (tooltipData?.yPositions[firstLineDataKey] ?? 0) : 0; const yWithMargin = firstLineY + margin.top; const tooltipRows = useMemo(() => { if (!tooltipData) { return []; } if (rowsRenderer) { return rowsRenderer(tooltipData.point); } // Default: generate rows from registered lines return lines.map((line) => ({ color: line.stroke, label: line.dataKey, value: (tooltipData.point[line.dataKey] as number) ?? 0, })); }, [tooltipData, lines, rowsRenderer]); const resolveDotColor = useMemo(() => { return (line: LineConfig, index: number): string => { if (rowsRenderer && tooltipRows[index]?.color) { return tooltipRows[index].color; } if (dotColorProp != null) { if (typeof dotColorProp === "function" && tooltipData) { return dotColorProp(tooltipData.point, line); } if (typeof dotColorProp === "string") { return dotColorProp; } } return line.stroke; }; }, [dotColorProp, rowsRenderer, tooltipData, tooltipRows]); // Resolve indicator color (static or from hovered point) const indicatorColor = useMemo(() => { if (indicatorColorProp == null) { return chartCssVars.crosshair; } if (typeof indicatorColorProp === "function") { return tooltipData ? indicatorColorProp(tooltipData.point) : chartCssVars.crosshair; } return indicatorColorProp; }, [indicatorColorProp, tooltipData]); // Title from date or category const title = useMemo(() => { if (!tooltipData) { return undefined; } // For bar charts (horizontal or vertical), use the category name if (barXAccessor) { return barXAccessor(tooltipData.point); } // For line/area charts, use the date return weekdayDateFmt.format(xAccessor(tooltipData.point)); }, [tooltipData, barXAccessor, xAccessor]); const tooltipContent = ( <> {/* Crosshair indicator - rendered as SVG overlay */} {showCrosshair && ( )} {/* Dots on bars/lines - show for vertical charts only */} {showDots && visible && !isHorizontal && ( )} {/* Tooltip Box */} {content && tooltipData ? content({ point: tooltipData.point, index: tooltipData.index, }) : !content && ( {children} )} {/* Date/Category Ticker - only show for vertical charts */} ); return createPortal(tooltipContent, container); }); export function ChartTooltip(props: ChartTooltipProps) { const { containerRef } = useChartStable(); const [mounted, setMounted] = useState(false); // Only render portals on client side after mount useEffect(() => { setMounted(true); }, []); const container = containerRef.current; if (!(mounted && container)) { return null; } return ; } ChartTooltip.displayName = "ChartTooltip"; interface DatePillTrackerProps { enabled: boolean; visible: boolean; labels: string[]; currentIndex: number; xWithMargin: number; discreteInteraction: boolean; springConfig?: SpringConfig; } // Inner-only-on-visible so `useSpring` initializes at the real cursor x // instead of `margin.left` on first hover. function DatePillTracker(props: DatePillTrackerProps) { if (!(props.enabled && props.visible && props.labels.length > 0)) { return null; } return ; } function DatePillTrackerInner({ labels, currentIndex, xWithMargin, discreteInteraction, springConfig, visible, }: DatePillTrackerProps) { const { tooltipSpring } = useChartConfig(); const effectiveSpring = springConfig ?? tooltipSpring; const animatedX = useSpring(xWithMargin, effectiveSpring); if (!discreteInteraction) { animatedX.set(xWithMargin); } // biome-ignore lint/correctness/useExhaustiveDependencies: we need to jump the animatedX when the visible prop changes useEffect(() => { animatedX.set(xWithMargin); }, [animatedX, visible]); return ( ); } export default ChartTooltip; 53:T1a75,"use client"; import { motion, useSpring } from "motion/react"; import type { RefObject } from "react"; import { useEffect, useLayoutEffect, useRef, useState } from "react"; import { createPortal } from "react-dom"; import { cn } from "@/lib/utils"; import { type SpringConfig, useChartConfig } from "../chart-config-context"; import { chartCssVars } from "../chart-context"; export interface TooltipBoxProps { /** X position in pixels (relative to container) */ x: number; /** Y position in pixels (relative to container) */ y: number; /** Whether the tooltip is visible */ visible: boolean; /** Container ref for portal rendering */ containerRef: RefObject; /** Container width for flip detection */ containerWidth: number; /** Container height for bounds clamping */ containerHeight: number; /** Offset from the target position */ offset?: number; /** Custom class name */ className?: string; /** Tooltip content */ children: React.ReactNode; /** Override left position (bypasses internal calculation) */ left?: number | ReturnType; /** Override top position (bypasses internal calculation) */ top?: number | ReturnType; /** Force flip direction (for custom positioning) */ flipped?: boolean; /** Per-chart override; falls back to `ChartConfigProvider.tooltipBoxSpring`. */ springConfig?: SpringConfig; /** Animate panel position with a spring. Default: true */ animate?: boolean; /** Fade/scale the panel on show. Default: true */ entrance?: boolean; /** Inline styles for the inner tooltip panel. */ panelStyle?: React.CSSProperties; /** * Tooltip panel background color (CSS variable or color value). * Default: `var(--chart-tooltip-background)`. */ backgroundColor?: string; } // Inner-only-on-visible so `useSpring` initializes at the cursor's actual x/y // instead of (0, 0) on first hover. export function TooltipBox(props: TooltipBoxProps) { const [mounted, setMounted] = useState(false); useEffect(() => { setMounted(true); }, []); const container = props.containerRef.current; if (!(mounted && container)) { return null; } if (!props.visible) { return null; } return ; } function TooltipBoxInner({ x, y, containerWidth, containerHeight, offset = 16, className = "", children, left: leftOverride, top: topOverride, flipped: flippedOverride, springConfig, animate = true, entrance = true, panelStyle, backgroundColor = chartCssVars.tooltipBackground, container, }: Omit & { container: HTMLElement; }) { const { tooltipBoxSpring } = useChartConfig(); const effectiveSpring = springConfig ?? tooltipBoxSpring; const tooltipRef = useRef(null); const tooltipWidthRef = useRef(180); const tooltipHeightRef = useRef(80); const [staticPosition, setStaticPosition] = useState({ left: x, top: y }); const tw = tooltipWidthRef.current; const th = tooltipHeightRef.current; const shouldFlipX = x + tw + offset > containerWidth; const targetX = shouldFlipX ? x - offset - tw : x + offset; const targetY = Math.max( offset, Math.min(y - th / 2, containerHeight - th - offset) ); const animatedLeft = useSpring(targetX, effectiveSpring); const animatedTop = useSpring(targetY, effectiveSpring); if (animate && leftOverride === undefined) { animatedLeft.set(targetX); } if (animate && topOverride === undefined) { animatedTop.set(targetY); } useLayoutEffect(() => { if (!tooltipRef.current) { return; } const el = tooltipRef.current; const w = el.offsetWidth; const h = el.offsetHeight; if (w > 0) { tooltipWidthRef.current = w; } if (h > 0) { tooltipHeightRef.current = h; } const w2 = tooltipWidthRef.current; const h2 = tooltipHeightRef.current; const flip = x + w2 + offset > containerWidth; const tx = flip ? x - offset - w2 : x + offset; const ty = Math.max( offset, Math.min(y - h2 / 2, containerHeight - h2 - offset) ); if (!animate) { setStaticPosition({ left: tx, top: ty }); return; } if (leftOverride === undefined) { animatedLeft.set(tx); } if (topOverride === undefined) { animatedTop.set(ty); } }, [ x, y, containerWidth, containerHeight, offset, leftOverride, topOverride, animate, animatedLeft, animatedTop, ]); const prevFlipRef = useRef(shouldFlipX); const [flipKey, setFlipKey] = useState(0); useEffect(() => { if (prevFlipRef.current !== shouldFlipX) { setFlipKey((k) => k + 1); prevFlipRef.current = shouldFlipX; } }, [shouldFlipX]); const finalLeft = animate ? (leftOverride ?? animatedLeft) : staticPosition.left; const finalTop = animate ? (topOverride ?? animatedTop) : staticPosition.top; const isFlipped = flippedOverride ?? shouldFlipX; const transformOrigin = isFlipped ? "right top" : "left top"; const panelClassName = cn( "min-w-[140px] overflow-hidden rounded-lg text-chart-tooltip-foreground shadow-lg", panelStyle?.backgroundColor === undefined && backgroundColor === chartCssVars.tooltipBackground && "bg-chart-tooltip-background", panelStyle?.backdropFilter === undefined && "backdrop-blur-md" ); const panelStyleResolved = { transformOrigin, ...(panelStyle?.backgroundColor === undefined && { backgroundColor, }), ...panelStyle, }; if (!entrance) { return createPortal(

{children}

, container ); } return createPortal( {children} , container ); } TooltipBox.displayName = "TooltipBox"; export default TooltipBox; 54:T6e2,"use client"; import type { ReactNode } from "react"; import { intFmt } from "../chart-formatters"; export interface TooltipRow { color: string; label: string; value: string | number; } export interface TooltipContentProps { title?: string; rows: TooltipRow[]; /** Optional additional content (e.g., markers) */ children?: ReactNode; } export function TooltipContent({ title, rows, children }: TooltipContentProps) { return (

{title && (

{title}

)}

{rows.map((row) => (

{row.label}

{typeof row.value === "number" ? intFmt(row.value) : row.value}

))}

{children && (

{children}

)}

); } TooltipContent.displayName = "TooltipContent"; export default TooltipContent; 55:Tfad,"use client"; import { motion, useSpring, useTransform } from "motion/react"; import { type SpringConfig, useChartConfig } from "../chart-config-context"; import { chartCssVars } from "../chart-context"; export interface TooltipDotProps { x: number; y: number; visible: boolean; color: string; /** Half of width/height for dots; half-extent for ring squares. Default: 5 */ size?: number; strokeColor?: string; strokeWidth?: number; /** Dot fill or transparent ring around the hovered mark. Default: "dot" */ variant?: "dot" | "ring"; /** * Ring corner radius as a fraction of side length (0 = square, 0.5 = circle). * Same semantics as bar square radius. */ cornerRadiusFraction?: number; /** Per-chart override; falls back to `ChartConfigProvider.tooltipSpring`. */ springConfig?: SpringConfig; /** Animate position with a spring. Default: true */ animate?: boolean; } function ringCornerRadius( halfExtent: number, cornerRadiusFraction: number ): number { const side = halfExtent * 2; return side * Math.max(0, Math.min(0.5, cornerRadiusFraction)); } function AnimatedRingDot({ x, y, halfExtent, cornerRadiusFraction, fill, stroke, strokeWidth, springConfig, }: { x: number; y: number; halfExtent: number; cornerRadiusFraction: number; fill: string; stroke: string; strokeWidth: number; springConfig?: SpringConfig; }) { const { tooltipSpring } = useChartConfig(); const effectiveSpring = springConfig ?? tooltipSpring; const animatedX = useSpring(x, effectiveSpring); const animatedY = useSpring(y, effectiveSpring); const side = halfExtent * 2; const rx = ringCornerRadius(halfExtent, cornerRadiusFraction); const rectX = useTransform(animatedX, (value) => value - halfExtent); const rectY = useTransform(animatedY, (value) => value - halfExtent); animatedX.set(x); animatedY.set(y); return ( ); } export function TooltipDot({ x, y, visible, color, size = 5, strokeColor = chartCssVars.background, strokeWidth = 2, variant = "dot", cornerRadiusFraction = 0.25, springConfig, animate = true, }: TooltipDotProps) { const { tooltipSpring } = useChartConfig(); const effectiveSpring = springConfig ?? tooltipSpring; const animatedX = useSpring(x, effectiveSpring); const animatedY = useSpring(y, effectiveSpring); const isRing = variant === "ring"; const fill = isRing ? "transparent" : color; const stroke = isRing ? color : strokeColor; const effectiveStrokeWidth = isRing ? (strokeWidth ?? 1.5) : strokeWidth; if (animate && !isRing) { animatedX.set(x); animatedY.set(y); } if (!visible) { return null; } if (isRing) { if (animate) { return ( ); } const side = size * 2; const rx = ringCornerRadius(size, cornerRadiusFraction); return ( ); } if (!animate) { return ( ); } return ( ); } TooltipDot.displayName = "TooltipDot"; export default TooltipDot; 56:T1501,"use client"; import { motion, useSpring } from "motion/react"; import { useEffect } from "react"; import { type SpringConfig, useChartConfig } from "../chart-config-context"; import { chartCssVars } from "../chart-context"; import { type IndicatorFadeEdges, indicatorFadeGradientStops, resolveVerticalFadeSides, } from "../indicator-fade"; export type IndicatorWidth = | number // Pixel width | "line" // 1px line (default) | "thin" // 2px | "medium" // 4px | "thick"; // 8px export interface TooltipIndicatorProps { /** X position in pixels (center of the indicator) */ x: number; /** Height of the indicator */ height: number; /** Whether the indicator is visible */ visible: boolean; /** * Width of the indicator - number (pixels) or preset. * Ignored if `span` is provided. */ width?: IndicatorWidth; /** * Number of columns/days to span, with current point centered. * Requires `columnWidth` to be set. */ span?: number; /** Width of a single column/day in pixels. Required when using `span`. */ columnWidth?: number; /** Primary color at edges (10% and 90%) */ colorEdge?: string; /** Secondary color at center (50%) */ colorMid?: string; /** Vertical fade: both ends, top, bottom, or none (solid). */ fadeEdges?: IndicatorFadeEdges | boolean; /** Fade zone size as a percentage of indicator height. Default: 10 */ fadeLength?: number; /** Animate position with a spring. Default: true */ animate?: boolean; /** Unique ID for the gradient */ gradientId?: string; /** Per-chart override; falls back to `ChartConfigProvider.tooltipSpring`. */ springConfig?: SpringConfig; /** SVG stroke dash pattern. When set, renders a dashed stroke instead of a solid fill. */ strokeDasharray?: string; } function resolveWidth(width: IndicatorWidth): number { if (typeof width === "number") { return width; } switch (width) { case "line": return 1; case "thin": return 2; case "medium": return 4; case "thick": return 8; default: return 1; } } // Inner-only-on-visible so `useSpring` initializes at the real cursor x // instead of 0 on first hover. export function TooltipIndicator(props: TooltipIndicatorProps) { if (!props.visible) { return null; } return ; } function TooltipIndicatorInner({ x, visible, height, width = "line", span, columnWidth, colorEdge = chartCssVars.crosshair, colorMid = chartCssVars.crosshair, fadeEdges = "both", fadeLength = 10, animate = true, gradientId = "tooltip-indicator-gradient", springConfig, strokeDasharray, }: TooltipIndicatorProps) { const { tooltipSpring } = useChartConfig(); const effectiveSpring = springConfig ?? tooltipSpring; const pixelWidth = span !== undefined && columnWidth !== undefined ? span * columnWidth : resolveWidth(width); const rectX = x - pixelWidth / 2; const lineX = x; const animatedX = useSpring(rectX, effectiveSpring); const animatedLineX = useSpring(lineX, effectiveSpring); if (animate) { animatedX.set(rectX); animatedLineX.set(lineX); } // biome-ignore lint/correctness/useExhaustiveDependencies: we need to jump the animatedX when the visible prop changes useEffect(() => { animatedX.set(rectX); animatedLineX.set(lineX); }, [animatedLineX, animatedX, lineX, rectX, visible]); const indicatorFill = colorMid || colorEdge; const fadeSides = resolveVerticalFadeSides(fadeEdges); const dashed = Boolean(strokeDasharray); if (dashed) { const strokeWidth = Math.max(1, pixelWidth); return animate ? ( ) : ( ); } if (!fadeSides.any) { return animate ? ( ) : ( ); } const fadeStops = indicatorFadeGradientStops(fadeSides, fadeLength); return ( {fadeStops.map((stop) => ( ))} {animate ? ( ) : ( )} ); } TooltipIndicator.displayName = "TooltipIndicator"; export default TooltipIndicator; 57:T12bb,"use client"; import { motion, useSpring } from "motion/react"; import { memo, useMemo, useRef } from "react"; const TICKER_ITEM_HEIGHT = 24; /** Full scroll stacks are skipped above this count — single label + instant updates. */ const COMPACT_TICKER_THRESHOLD = 60; export interface DateTickerProps { currentIndex: number; labels: string[]; visible: boolean; } const DateTickerCompact = memo(function DateTickerCompact({ currentIndex, labels, }: Omit) { const label = labels[currentIndex] ?? labels[0] ?? ""; return (

{label}

); }); const DateTickerInner = memo(function DateTickerInner({ currentIndex, labels, }: Omit) { // Parse labels into month and day parts const parsedLabels = useMemo(() => { return labels.map((label, index) => { const parts = label.split(" "); const month = parts[0] || ""; const day = parts[1] || ""; return { month, day, full: label, key: `${label}::${index}` }; }); }, [labels]); // Month segments: one entry per consecutive run (Jan → Feb → …), keyed by start index const monthSegments = useMemo(() => { const segments: { month: string; key: string; startIndex: number }[] = []; parsedLabels.forEach((label, index) => { const prev = segments.at(-1); if (!prev || prev.month !== label.month) { segments.push({ month: label.month, key: `${label.month}-${index}`, startIndex: index, }); } }); return segments; }, [parsedLabels]); // Index into monthSegments for the current data point const currentMonthIndex = useMemo(() => { if (currentIndex < 0 || currentIndex >= parsedLabels.length) { return 0; } for (let i = monthSegments.length - 1; i >= 0; i--) { const segment = monthSegments[i]; if (segment && segment.startIndex <= currentIndex) { return i; } } return 0; }, [currentIndex, parsedLabels.length, monthSegments]); // Track previous month index const prevMonthIndexRef = useRef(-1); // Animated Y offsets const dayY = useSpring(0, { stiffness: 400, damping: 35 }); const monthY = useSpring(0, { stiffness: 400, damping: 35 }); dayY.set(-currentIndex * TICKER_ITEM_HEIGHT); if (currentMonthIndex >= 0) { const isFirstRender = prevMonthIndexRef.current === -1; const monthChanged = prevMonthIndexRef.current !== currentMonthIndex; if (isFirstRender || monthChanged) { monthY.set(-currentMonthIndex * TICKER_ITEM_HEIGHT); prevMonthIndexRef.current = currentMonthIndex; } } return (

{/* Month stack */}

{monthSegments.map((segment) => (

{segment.month}

))}

{/* Day stack */}

{parsedLabels.map((label) => (

{label.day}

))}

); }); export function DateTicker({ currentIndex, labels, visible }: DateTickerProps) { if (!visible || labels.length === 0) { return null; } if (labels.length > COMPACT_TICKER_THRESHOLD) { return ; } return ; } DateTicker.displayName = "DateTicker"; export default DateTicker; 4d:["$","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","@number-flow/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40number-flow%2Freact","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":"@number-flow/react"}]]}]}],["$","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"}]]}]}]]}],["$","$L4e",null,{"namespace":"@bklit","registryDependencies":["@bklit/chart-context","@bklit/utils"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"src/charts/chart-config-context.tsx","content":"$50","type":"registry:component","target":"components/charts/chart-config-context.tsx"},{"path":"src/charts/indicator-fade.ts","content":"$51","type":"registry:lib","target":"components/charts/indicator-fade.ts"},{"path":"src/charts/tooltip/chart-tooltip.tsx","content":"$52","type":"registry:component","target":"components/charts/tooltip/chart-tooltip.tsx"},{"path":"src/charts/tooltip/tooltip-box.tsx","content":"$53","type":"registry:component","target":"components/charts/tooltip/tooltip-box.tsx"},{"path":"src/charts/tooltip/tooltip-content.tsx","content":"$54","type":"registry:component","target":"components/charts/tooltip/tooltip-content.tsx"},{"path":"src/charts/tooltip/tooltip-dot.tsx","content":"$55","type":"registry:component","target":"components/charts/tooltip/tooltip-dot.tsx"},{"path":"src/charts/tooltip/tooltip-indicator.tsx","content":"$56","type":"registry:component","target":"components/charts/tooltip/tooltip-indicator.tsx"},{"path":"src/charts/tooltip/date-ticker.tsx","content":"$57","type":"registry:component","target":"components/charts/tooltip/date-ticker.tsx"},{"path":"src/charts/tooltip/index.ts","content":"export { ChartTooltip, type ChartTooltipProps } from \"./chart-tooltip\";\nexport { DateTicker, type DateTickerProps } from \"./date-ticker\";\nexport { TooltipBox, type TooltipBoxProps } from \"./tooltip-box\";\nexport {\n TooltipContent,\n type TooltipContentProps,\n type TooltipRow,\n} from \"./tooltip-content\";\nexport { TooltipDot, type TooltipDotProps } from \"./tooltip-dot\";\nexport {\n type IndicatorWidth,\n TooltipIndicator,\n type TooltipIndicatorProps,\n} from \"./tooltip-indicator\";\n","type":"registry:component","target":"components/charts/tooltip/index.ts"}],"className":"h-[70svh] min-h-80"}]]}]