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/1o6_421saitt-.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/1o6_421saitt-.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:T18c9,"use client"; import { useCallback, useMemo } from "react"; import { chartCssVars, useChart, useChartHover } from "../chart-context"; import { type ChartMarker, MarkerGroup } from "./marker-group"; export interface ChartMarkersProps { /** Array of markers to display */ items: ChartMarker[]; /** Size of each marker circle. Default: 28 */ size?: number; /** Whether to show vertical guide lines. Default: true */ showLines?: boolean; /** Whether to animate markers on entrance. Default: true */ animate?: boolean; } // Tooltip content for markers export interface MarkerTooltipContentProps { markers: ChartMarker[]; } const MAX_TOOLTIP_MARKERS = 2; export function MarkerTooltipContent({ markers }: MarkerTooltipContentProps) { if (markers.length === 0) { return null; } const visibleMarkers = markers.slice(0, MAX_TOOLTIP_MARKERS); const hiddenCount = markers.length - MAX_TOOLTIP_MARKERS; return (

{visibleMarkers.map((marker) => { const isClickable = !!(marker.onClick || marker.href); return (

{marker.icon}

{marker.content ? ( marker.content ) : ( <>

{marker.title} {isClickable && ( ↗ )}

{marker.description && (

{marker.description}

)} )}

); })} {hiddenCount > 0 && (

+{hiddenCount} more...

)}

); } export function ChartMarkers({ items, size = 28, showLines = true, animate = true, }: ChartMarkersProps) { const { xScale, innerHeight, margin, containerRef, tooltipData, setTooltipData, animationDuration, } = useChart(); // Hide the crosshair when hovering markers (matching original behavior) const handleMarkerHover = useCallback( (markers: ChartMarker[] | null) => { if (markers) { // Hide crosshair when hovering a marker setTooltipData(null); } }, [setTooltipData] ); // Group markers by date const markersByDate = useMemo(() => { const grouped = new Map(); for (const marker of items) { const dateKey = marker.date.toDateString(); const existing = grouped.get(dateKey) || []; grouped.set(dateKey, [...existing, marker]); } return grouped; }, [items]); // Get markers for currently hovered date const _activeMarkers = useMemo(() => { if (!tooltipData) { return []; } const point = tooltipData.point; const date = point.date instanceof Date ? point.date : new Date(point.date as string | number); const dateKey = date.toDateString(); return markersByDate.get(dateKey) || []; }, [tooltipData, markersByDate]); // Y position for markers (above chart area) const markerY = -8; return ( <> {/* SVG markers rendered in chart space */} {Array.from(markersByDate.entries()).map( ([dateKey, dateMarkers], groupIndex) => { const markerDate = dateMarkers[0]?.date; if (!markerDate) { return null; } const markerX = xScale(markerDate) ?? 0; const isActive = tooltipData ? (() => { const point = tooltipData.point; const date = point.date instanceof Date ? point.date : new Date(point.date as string | number); return date.toDateString() === dateKey; })() : undefined; const markerDelay = animate ? animationDuration / 1000 + groupIndex * 0.1 : 0; return ( ); } )} ); } // Hook to get active markers for tooltip export function useActiveMarkers(items: ChartMarker[]) { const { tooltipData } = useChartHover(); return useMemo(() => { if (!tooltipData) { return []; } const point = tooltipData.point; const date = point.date instanceof Date ? point.date : new Date(point.date as string | number); const dateKey = date.toDateString(); return items.filter((m) => m.date.toDateString() === dateKey); }, [tooltipData, items]); } ChartMarkers.displayName = "ChartMarkers"; // Marker for SVG component detection (renders after mouse overlay for interaction) (ChartMarkers as { __isChartMarkers?: boolean }).__isChartMarkers = true; MarkerTooltipContent.displayName = "MarkerTooltipContent"; export default ChartMarkers; 52:T3e95,"use client"; import { AnimatePresence, motion } from "motion/react"; import type * as React from "react"; import { useState } from "react"; import { createPortal } from "react-dom"; import { cn } from "@/lib/utils"; import { chartCssVars } from "../chart-context"; // Fan configuration const FAN_RADIUS = 50; const FAN_ANGLE = 160; export interface ChartMarker { /** Date for this marker (will be matched to nearest data point) */ date: Date; /** Icon to display in the marker circle */ icon: React.ReactNode; /** Title shown in tooltip */ title: string; /** Optional description */ description?: string; /** Optional custom content for tooltip (overrides title/description) */ content?: React.ReactNode; /** Optional color override for the marker circle */ color?: string; /** Click handler */ onClick?: () => void; /** URL to navigate to when clicked */ href?: string; /** Open href in new tab. Default: false */ target?: "_blank" | "_self"; } export interface MarkerGroupProps { /** X position in pixels */ x: number; /** Y position (top of chart area) */ y: number; /** Markers at this position */ markers: ChartMarker[]; /** Whether this marker group is currently hovered (via chart hover) */ isActive?: boolean; /** Size of each marker circle */ size?: number; /** Callback when marker group is hovered */ onHover?: (markers: ChartMarker[] | null) => void; /** Reference to chart container for portal positioning */ containerRef?: React.RefObject; /** Margin left offset from chart container */ marginLeft?: number; /** Margin top offset from chart container */ marginTop?: number; /** Delay before entrance animation starts */ animationDelay?: number; /** Whether the marker should animate in */ animate?: boolean; /** Height of the vertical guide line below the marker */ lineHeight?: number; /** Whether to show the vertical guide line. Default: true */ showLine?: boolean; /** * Force the marker fan to open even when the user isn't hovering this * group directly. Used by parent layers (e.g. a clustered marker layer) * to fan out a cluster when the chart's main crosshair lands on one of * the cluster's buckets. */ forceOpen?: boolean; /** * Make the icon `foreignObject` fill the entire circle (no 4px inset) * so favicon-style icons sit edge-to-edge with the marker border. */ iconFill?: boolean; /** * Override the marker circle's stroke color. Falls back to * `chartCssVars.markerBorder` when not set. */ borderColor?: string; /** * Marker circle stroke width in px. Default 1.5. */ borderWidth?: number; /** * Cap the number of markers rendered in the fan-out arc. The count * badge still reflects the full cluster size. Without this, large * clusters (e.g. 20+ spikes) collapse the fan angular spacing to * essentially zero and the markers stack on top of each other. */ maxFanned?: number; /** * Fade this marker group when another cluster has focus. Used by * parent layers to spotlight the active cluster. */ isMuted?: boolean; } // Entrance + fanned + muted variants. `fanned` shrinks and dims the // collapsed marker while its siblings are flying out in the portal, so // users only see the fan and not a duplicate icon sitting underneath. // `muted` fades non-active clusters when one cluster is being focused. const markerEntranceVariants = { hidden: { scale: 0.85, opacity: 0, filter: "blur(2px)", }, visible: { scale: 1, opacity: 1, filter: "blur(0px)", }, fanned: { scale: 0.6, opacity: 0, filter: "blur(2px)", }, muted: { scale: 1, opacity: 0.4, filter: "blur(0px)", }, }; export function MarkerGroup({ x, y, markers, isActive = false, size = 28, onHover, containerRef, marginLeft = 0, marginTop = 0, animationDelay = 0, animate = true, lineHeight = 0, showLine = true, forceOpen = false, iconFill = false, borderColor, borderWidth = 1.5, maxFanned, isMuted = false, }: MarkerGroupProps) { const [isHovered, setIsHovered] = useState(false); const shouldFan = (isHovered || forceOpen) && markers.length > 1; const hasMultiple = markers.length > 1; const fannedMarkers = maxFanned === undefined ? markers : markers.slice(0, maxFanned); let currentVariant: "fanned" | "muted" | "visible" = "visible"; if (shouldFan) { currentVariant = "fanned"; } else if (isMuted) { currentVariant = "muted"; } const getCirclePosition = (index: number, total: number) => { const startAngle = -90 - FAN_ANGLE / 2; const angleStep = total > 1 ? FAN_ANGLE / (total - 1) : 0; const angle = startAngle + index * angleStep; const radians = (angle * Math.PI) / 180; return { x: Math.cos(radians) * FAN_RADIUS, y: Math.sin(radians) * FAN_RADIUS, }; }; const handleMouseEnter = (e: React.MouseEvent) => { e.stopPropagation(); // Prevent chart from handling this event setIsHovered(true); onHover?.(markers); }; const handleMouseLeave = (e: React.MouseEvent) => { e.stopPropagation(); // Prevent chart from handling this event setIsHovered(false); onHover?.(null); }; const handleMouseMove = (e: React.MouseEvent) => { e.stopPropagation(); // Prevent chart crosshair from moving while hovering markers }; const portalX = x + marginLeft; const portalY = y + marginTop; return ( <> {/* Position group - no interaction */} {/* Vertical guide line - non-interactive, rendered first (behind marker) */} {showLine && lineHeight > 0 && ( { if (isHovered) { return 1; } if (isActive) { return 0; } return 0.6; })(), }} initial={{ strokeOpacity: 0.6 }} stroke={chartCssVars.markerBorder} strokeDasharray="4,4" strokeLinecap="round" strokeWidth={1} style={{ pointerEvents: "none" }} transition={{ duration: 0.2, ease: "easeOut" }} x1={0} x2={0} y1={size / 2 + 4} y2={lineHeight + Math.abs(y)} /> )} {/* Interactive marker group */} {/* biome-ignore lint/a11y/noStaticElementInteractions: Chart marker interaction */} {/* Hit area - covers marker circle with padding for count badge above */} {/* Main marker */} {/* Count badge */} {hasMultiple && !shouldFan && ( {markers.length} )} {/* Portal for fanned circles */} {containerRef?.current && createPortal( // biome-ignore lint/a11y/noStaticElementInteractions: Marker hover portal // biome-ignore lint/a11y/noNoninteractiveElementInteractions: Marker hover portal

{/* Center point offset - all fanned markers are positioned relative to this */}

{shouldFan && fannedMarkers.map((marker, index) => { const position = getCirclePosition( index, fannedMarkers.length ); return ( ); })} {shouldFan && (

)}

, containerRef.current )} ); } interface MarkerCircleProps { icon: React.ReactNode; size: number; color?: string; onClick?: () => void; href?: string; target?: "_blank" | "_self"; isClickable?: boolean; /** Edge-to-edge icon (no 4px inset). */ iconFill?: boolean; /** Override circle stroke color. */ borderColor?: string; /** Circle stroke width. */ borderWidth?: number; } function MarkerCircle({ icon, size, color, iconFill = false, borderColor, borderWidth = 1.5, }: MarkerCircleProps) { const inset = iconFill ? 0 : 4; return (

{icon}

); } function MarkerCircleHTML({ icon, size, color, onClick, href, target = "_self", isClickable = false, iconFill = false, borderColor, borderWidth = 1.5, }: MarkerCircleProps) { const hasAction = isClickable || onClick || href; const inset = iconFill ? 0 : 4; const handleClick = (e: React.MouseEvent) => { e.stopPropagation(); if (onClick) { onClick(); } else if (href) { if (target === "_blank") { window.open(href, "_blank", "noopener,noreferrer"); } else { window.location.href = href; } } }; // Note: color and CSS vars must remain inline styles as they're dynamic return ( {icon} ); } MarkerGroup.displayName = "MarkerGroup"; export default MarkerGroup; 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":[null,["$","$L4f",null,{"namespace":"@catalogs","registryDependencies":["@bklit/chart-context","@bklit/chart-tooltip","@bklit/utils"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"src/charts/markers/chart-markers.tsx","content":"$51","type":"registry:component","target":"components/charts/markers/chart-markers.tsx"},{"path":"src/charts/markers/marker-group.tsx","content":"$52","type":"registry:component","target":"components/charts/markers/marker-group.tsx"},{"path":"src/charts/markers/index.ts","content":"export {\n ChartMarkers,\n type ChartMarkersProps,\n MarkerTooltipContent,\n type MarkerTooltipContentProps,\n useActiveMarkers,\n} from \"./chart-markers\";\nexport {\n type ChartMarker,\n MarkerGroup,\n type MarkerGroupProps,\n} from \"./marker-group\";\n","type":"registry:component","target":"components/charts/markers/index.ts"}],"className":"h-[70svh] min-h-80"}]]}]