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:T144e,"use client"; import type { Transition } from "motion/react"; import { Children, isValidElement, type ReactNode, useMemo, useRef, } from "react"; import useMeasure from "react-use-measure"; import { cn } from "@/lib/utils"; import { DEFAULT_CHART_ENTER_TRANSITION } from "./animation"; import { defaultScatterColors, type LineConfig, type Margin, } from "./chart-context"; import type { ChartPhase } from "./chart-phase"; import { Scatter, type ScatterProps } from "./scatter"; import { ScatterChartInner } from "./scatter-chart-shell"; export interface ScatterChartProps { /** Data array — each item should have a date field and numeric values */ data: Record[]; /** Key in data for the x-axis (date). Default: "date" */ xDataKey?: string; /** Chart margins */ margin?: Partial; /** Animation duration in milliseconds. Default: 1100 */ animationDuration?: number; /** CSS easing for clip-reveal. Default: cubic-bezier(0.85, 0, 0.15, 1) */ animationEasing?: string; enterTransition?: Transition; revealSignature?: string; /** Aspect ratio as "width / height". Default: "2 / 1" */ aspectRatio?: string; /** Additional class name for the container */ className?: string; /** Child components (Scatter, Grid, ChartTooltip, XAxis, etc.) */ children: ReactNode; onPhaseChange?: (phase: ChartPhase) => void; } const DEFAULT_MARGIN: Margin = { top: 40, right: 40, bottom: 40, left: 40 }; function extractScatterConfigs(children: ReactNode): LineConfig[] { const configs: LineConfig[] = []; let seriesIndex = 0; Children.forEach(children, (child) => { if (!isValidElement(child)) { return; } const childType = child.type as { displayName?: string; name?: string; }; const componentName = typeof child.type === "function" ? childType.displayName || childType.name || "" : ""; const props = child.props as ScatterProps | undefined; const isScatterComponent = componentName === "Scatter" || child.type === Scatter || (props && typeof props.dataKey === "string" && props.dataKey.length > 0); if (isScatterComponent && props?.dataKey) { const seriesColor = defaultScatterColors[seriesIndex % defaultScatterColors.length] ?? defaultScatterColors[0]; configs.push({ dataKey: props.dataKey, stroke: props.fill || props.stroke || seriesColor, strokeWidth: props.radius ?? 5, yAxisId: props.yAxisId, }); seriesIndex += 1; } }); return configs; } interface ChartInnerProps { width: number; height: number; data: Record[]; xDataKey: string; margin: Margin; animationDuration: number; animationEasing?: string; enterTransition?: Transition; revealSignature?: string; children: ReactNode; containerRef: React.RefObject; onPhaseChange?: (phase: ChartPhase) => void; } function ChartInner({ width, height, data, xDataKey, margin, animationDuration, animationEasing, enterTransition, revealSignature, children, containerRef, onPhaseChange, }: ChartInnerProps) { const lines = useMemo(() => extractScatterConfigs(children), [children]); return ( {children} ); } export function ScatterChart({ data, xDataKey = "date", margin: marginProp, animationDuration = 1100, animationEasing, enterTransition = DEFAULT_CHART_ENTER_TRANSITION, revealSignature, aspectRatio = "2 / 1", className = "", children, onPhaseChange, }: ScatterChartProps) { const containerRef = useRef(null); const margin = { ...DEFAULT_MARGIN, ...marginProp }; const [measureRef, bounds] = useMeasure({ debounce: 10 }); const setContainerRef = (node: HTMLDivElement | null) => { containerRef.current = node; measureRef(node); }; const width = bounds.width ?? 0; const height = bounds.height ?? 0; return (

{width > 0 && height > 0 ? ( {children} ) : null}

); } ScatterChart.displayName = "ScatterChart"; export { Scatter, type ScatterProps } from "./scatter"; export default ScatterChart; 52:T1bf9,"use client"; import { bisector } from "d3-array"; import { scaleLinear, scaleTime } from "d3-scale"; import type { Transition } from "motion/react"; import { Children, isValidElement, type ReactElement, type ReactNode, useCallback, useEffect, useMemo, useState, } from "react"; import { DEFAULT_ANIMATION_EASING } from "./animation"; import { isClipExcludedComponent, isPostOverlayComponent, isUnderlayComponent, } from "./chart-child-passthrough"; import { type ChartContextValue, ChartProvider, type LineConfig, type Margin, } from "./chart-context"; import { isGradientDefComponent, isPatternDefComponent } from "./chart-defs"; import { shortDateFmt } from "./chart-formatters"; import { type ChartPhase, DEFAULT_CHART_LIFECYCLE } from "./chart-phase"; import { extractReferenceAreaConfigs } from "./reference-area-config"; import { useScatterChartInteraction } from "./use-scatter-chart-interaction"; import { buildYScalesForLines, getPrimaryYScale } from "./y-axis-scales"; export interface ScatterChartInnerProps { width: number; height: number; data: Record[]; xDataKey: string; margin: Margin; animationDuration: number; animationEasing?: string; enterTransition?: Transition; revealSignature?: string; children: ReactNode; containerRef: React.RefObject; lines: LineConfig[]; onPhaseChange?: (phase: ChartPhase) => void; } export function ScatterChartInner({ width, height, data, xDataKey, margin, animationDuration, animationEasing = DEFAULT_ANIMATION_EASING, enterTransition, revealSignature = "", children, containerRef, lines, onPhaseChange, }: ScatterChartInnerProps) { const [isLoaded, setIsLoaded] = useState(false); const [revealEpoch, setRevealEpoch] = useState(0); const innerWidth = width - margin.left - margin.right; const innerHeight = height - margin.top - margin.bottom; const xAccessor = useCallback( (d: Record): Date => { const value = d[xDataKey]; return value instanceof Date ? value : new Date(value as string | number); }, [xDataKey] ); const bisectDate = useMemo( () => bisector, Date>((d) => xAccessor(d)).left, [xAccessor] ); const xRangePadding = useMemo(() => { if (lines.length === 0) { return 12; } const maxRadius = Math.max(...lines.map((line) => line.strokeWidth ?? 5)); return maxRadius + 10; }, [lines]); const xScale = useMemo(() => { const dates = data.map((d) => xAccessor(d)); const minTime = Math.min(...dates.map((d) => d.getTime())); const maxTime = Math.max(...dates.map((d) => d.getTime())); return scaleTime() .range([ xRangePadding, Math.max(xRangePadding, innerWidth - xRangePadding), ]) .domain([minTime, maxTime]); }, [innerWidth, data, xAccessor, xRangePadding]); const columnWidth = useMemo(() => { if (data.length < 2) { return 0; } return innerWidth / (data.length - 1); }, [innerWidth, data.length]); const yScales = useMemo( () => buildYScalesForLines({ lines, data, innerHeight, resolveDomain: (dataKeys) => { let maxValue = 0; for (const d of data) { for (const key of dataKeys) { const value = d[key]; if (typeof value === "number" && value > maxValue) { maxValue = value; } } } const top = maxValue <= 0 ? 100 : maxValue * 1.1; return [0, top]; }, }), [innerHeight, data, lines] ); const yScale = getPrimaryYScale( yScales, scaleLinear().range([innerHeight, 0]).domain([0, 100]) ); const dateLabels = useMemo( () => data.map((d) => shortDateFmt.format(xAccessor(d))), [data, xAccessor] ); // biome-ignore lint/correctness/useExhaustiveDependencies: revealSignature useEffect(() => { setRevealEpoch((n) => n + 1); setIsLoaded(false); const timer = setTimeout(() => { setIsLoaded(true); }, animationDuration); return () => clearTimeout(timer); }, [animationDuration, revealSignature]); useEffect(() => { onPhaseChange?.(isLoaded ? "ready" : "revealing"); }, [isLoaded, onPhaseChange]); const canInteract = isLoaded; const { tooltipData, setTooltipData, selection, clearSelection, interactionHandlers, interactionStyle, } = useScatterChartInteraction({ xScale, yScale: yScale as ChartContextValue["yScale"], yScales: yScales as ChartContextValue["yScales"], data, lines, margin, xAccessor, bisectDate, canInteract, }); const referenceAreas = useMemo( () => extractReferenceAreaConfigs(children), [children] ); if (width < 10 || height < 10) { return null; } const defsChildren: ReactElement[] = []; const clipExcludedChildren: ReactElement[] = []; const underlayChildren: ReactElement[] = []; const preOverlayChildren: ReactElement[] = []; const postOverlayChildren: ReactElement[] = []; Children.forEach(children, (child) => { if (!isValidElement(child)) { return; } if (isGradientDefComponent(child)) { defsChildren.push(child); } else if (isPatternDefComponent(child)) { preOverlayChildren.push(child); } else if (isPostOverlayComponent(child)) { postOverlayChildren.push(child); } else if (isClipExcludedComponent(child)) { clipExcludedChildren.push(child); } else if (isUnderlayComponent(child)) { underlayChildren.push(child); } else { preOverlayChildren.push(child); } }); const contextValue: ChartContextValue = { ...DEFAULT_CHART_LIFECYCLE, data, renderData: data, xScale: xScale as ChartContextValue["xScale"], yScale: yScale as ChartContextValue["yScale"], yScales: yScales as ChartContextValue["yScales"], width, height, innerWidth, innerHeight, margin, columnWidth, tooltipData, setTooltipData, containerRef, lines, referenceAreas, isLoaded, animationDuration, animationEasing, enterTransition, revealEpoch, xAccessor, dateLabels, selection, clearSelection, }; return ( ); } 53:T4c94,"use client"; import { scaleLinear, scaleTime } from "@visx/scale"; import { bisector, extent } from "d3-array"; import type { Transition } from "motion/react"; import { Children, cloneElement, isValidElement, memo, type ReactElement, type ReactNode, useCallback, useEffect, useId, useMemo, useState, } from "react"; import { DEFAULT_ANIMATION_EASING, DEFAULT_CHART_ENTER_TRANSITION, } from "./animation"; import { isClipExcludedComponent, isPostOverlayComponent, isUnderlayComponent, resolveChartChildElement, } from "./chart-child-passthrough"; import { ChartProvider, type LineConfig, type Margin } from "./chart-context"; import { isGradientDefComponent, isPatternDefComponent } from "./chart-defs"; import { shortDateFmt } from "./chart-formatters"; import { type ChartPhase, type ChartStatus, DEFAULT_CHART_STATUS, DEFAULT_Y_DOMAIN_TWEEN_MS, isChartInteractionPhase, } from "./chart-phase"; import { ChartRevealClip } from "./chart-reveal-clip"; import { decimateTimeSeries, maxRenderPointsForWidth, } from "./decimate-time-series"; import { filterDataByXDomain } from "./filter-data-by-x-domain"; import { generateChartSkeletonData, generateChartSkeletonFromTarget, } from "./generate-chart-skeleton-data"; import { extractProjectionLineConfigs, mergeProjectionXDomainMax, mergeProjectionYDomain, } from "./projection-config"; import { extractReferenceAreaConfigs, type ReferenceAreaConfig, } from "./reference-area-config"; import { ReferenceAreaRegistrationContext } from "./reference-area-registration-context"; import { computeSeriesBarRevealClipPadding, computeSeriesBarWidth, } from "./series-bar-layout"; import { useStaticChartPreview } from "./static-chart-preview-context"; import { useAnimatedYDomains } from "./use-animated-y-domains"; import { useChartInteraction } from "./use-chart-interaction"; import { useChartPhaseOrchestrator } from "./use-chart-phase-orchestrator"; import { buildYScalesFromDomains, DEFAULT_Y_AXIS_ID, getPrimaryYScale, groupLinesByYAxisId, } from "./y-axis-scales"; import { computeYDomainsByAxis } from "./y-domain-utils"; function collectNumericExtents( data: Record[], dataKeys: string[] ) { let minValue = Number.POSITIVE_INFINITY; let maxValue = Number.NEGATIVE_INFINITY; for (const d of data) { for (const key of dataKeys) { const value = d[key]; if (typeof value === "number") { if (value < minValue) { minValue = value; } if (value > maxValue) { maxValue = value; } } } } if (minValue === Number.POSITIVE_INFINITY) { return { minValue: 0, maxValue: 100 }; } return { minValue, maxValue }; } function resolveTimeSeriesYDomain( data: Record[], dataKeys: string[], yScaleDomainMax: number | undefined ): [number, number] { if (yScaleDomainMax != null && yScaleDomainMax > 0) { return [0, yScaleDomainMax * 1.1]; } const { minValue, maxValue } = collectNumericExtents(data, dataKeys); if (minValue >= 0) { const top = maxValue <= 0 ? 100 : maxValue * 1.1; return [0, top]; } const padding = (maxValue - minValue) * 0.05 || 1; return [minValue - padding, maxValue + padding]; } function ensureChildKey(child: ReactElement, index: number): ReactElement { if (child.key != null) { return child; } return cloneElement(child, { key: `chart-child-${index}` }); } export interface TimeSeriesChartInnerProps { width: number; height: number; data: Record[]; xDataKey: string; margin: Margin; animationDuration: number; animationEasing?: string; enterTransition?: Transition; /** Signature of motion URL state — triggers reveal replay when it changes. */ revealSignature?: string; children: ReactNode; containerRef: React.RefObject; /** Series keys driving y-domain and tooltip (Line / Area / SeriesBar configs). */ lines: LineConfig[]; /** * Base SVG clipPath id for grow animation. Uniquified per chart instance so * multiple charts on one page do not share a clipPath (#226). */ clipPathId: string; /** Optional ComposedChart bar layout (forwarded into context). */ composedBarDataKeys?: string[]; composedBarSize?: number; composedMaxBarSize?: number; composedBarGap?: number; composedStacked?: boolean; composedStackOffsets?: Map>; composedStackGap?: number; /** When set, drives the y-axis max instead of scanning `lines` (e.g. stacked bar totals). */ yScaleDomainMax?: number; /** Loading vs ready — drives chart phase until transition orchestration lands. */ chartStatus?: ChartStatus; loadingLabel?: string; /** Animate y-domain on status / data transitions. Default: true */ yDomainTween?: boolean; yDomainTweenDuration?: number; /** Visible x-domain for brush zoom. When set, y-domain and series use data in this range. */ xDomain?: [Date, Date]; /** Full dataset length for x-scale padding when `xDomain` is set. */ xDomainSlotCount?: number; /** Tween y-domain when the visible x-range changes during the ready phase. */ tweenYDomainOnXDomainChange?: boolean; onPhaseChange?: (phase: ChartPhase) => void; } export function TimeSeriesChartInner(props: TimeSeriesChartInnerProps) { const { width, height } = props; if (width < 10 || height < 10) { return null; } return ; } const TimeSeriesChartCore = memo(function TimeSeriesChartCore({ width, height, data, xDataKey, margin, animationDuration, animationEasing = DEFAULT_ANIMATION_EASING, enterTransition, revealSignature = "", children, containerRef, lines, clipPathId, composedBarDataKeys, composedBarSize, composedMaxBarSize, composedBarGap, composedStacked, composedStackOffsets, composedStackGap, yScaleDomainMax, chartStatus = DEFAULT_CHART_STATUS, loadingLabel, yDomainTween = true, yDomainTweenDuration = DEFAULT_Y_DOMAIN_TWEEN_MS, xDomain, xDomainSlotCount, tweenYDomainOnXDomainChange = false, onPhaseChange, }: TimeSeriesChartInnerProps) { // Unique per instance — shared clipPath ids crop later charts (#226). const uniqueClipPathId = `${clipPathId}-${useId().replace(/:/g, "")}`; const staticPreview = useStaticChartPreview(); const innerWidth = width - margin.left - margin.right; const innerHeight = height - margin.top - margin.bottom; const resolveYDomain = useCallback( (sourceData: Record[], dataKeys: string[]) => { const axisGroups = groupLinesByYAxisId(lines); const usesDefaultOnly = axisGroups.size === 1 && axisGroups.has(DEFAULT_Y_AXIS_ID); const domainMax = usesDefaultOnly && yScaleDomainMax != null ? yScaleDomainMax : undefined; return resolveTimeSeriesYDomain(sourceData, dataKeys, domainMax); }, [lines, yScaleDomainMax] ); const skeletonData = useMemo(() => { const primaryKey = lines[0]?.dataKey ?? "value"; if (data.length === 0) { return generateChartSkeletonData({ dataKey: primaryKey }); } return generateChartSkeletonFromTarget(data, primaryKey); }, [data, lines]); const { chartPhase, plotData, revealEpoch, concealEpoch, isLoaded, notifyLoadingPulseComplete, notifyRevealConcealComplete, notifyYDomainTweenComplete, } = useChartPhaseOrchestrator({ animationDuration, chartStatus, revealSignature, skeletonData, skipEnterReveal: staticPreview, targetData: data, yDomainTweenDuration, }); useEffect(() => { onPhaseChange?.(chartPhase); }, [chartPhase, onPhaseChange]); const xAccessor = useCallback( (d: Record): Date => { const value = d[xDataKey]; return value instanceof Date ? value : new Date(value as string | number); }, [xDataKey] ); const bisectDate = useMemo( () => bisector, Date>((d) => xAccessor(d)).left, [xAccessor] ); const visiblePlotData = useMemo(() => { if (!xDomain) { return plotData; } return filterDataByXDomain(plotData, xDomain, xAccessor); }, [plotData, xDomain, xAccessor]); const projectionConfigs = useMemo( () => extractProjectionLineConfigs(children), [children] ); const xScale = useMemo(() => { const minTime = xDomain ? xDomain[0].getTime() : (extent(plotData, (d) => xAccessor(d).getTime())[0] ?? 0); let maxTime = xDomain ? xDomain[1].getTime() : (extent(plotData, (d) => xAccessor(d).getTime())[1] ?? minTime); // Brush defines the viewport — projection horizon is included via brush // track extent, not by extending past the selection on the main chart. if (!xDomain) { maxTime = mergeProjectionXDomainMax(maxTime, projectionConfigs); } return scaleTime({ range: [0, innerWidth], domain: [minTime, maxTime], }); }, [innerWidth, plotData, projectionConfigs, xAccessor, xDomain]); // When brushing, keep the full series for path rendering so edge fades stay // anchored to the viewport while the line pans through them. Y-domain and // interaction still use the filtered visible slice. const seriesSourceData = xDomain ? plotData : visiblePlotData; const renderData = useMemo(() => { const valueKeys = lines.map((line) => line.dataKey); return decimateTimeSeries( seriesSourceData, maxRenderPointsForWidth(innerWidth), valueKeys ); }, [seriesSourceData, innerWidth, lines]); const columnWidth = useMemo(() => { const slotCount = xDomain && xDomainSlotCount != null ? xDomainSlotCount : visiblePlotData.length; if (slotCount < 2) { return 0; } return innerWidth / (slotCount - 1); }, [innerWidth, visiblePlotData.length, xDomain, xDomainSlotCount]); const yDomainSkeletonByAxis = useMemo( () => computeYDomainsByAxis({ lines, resolveDomain: (dataKeys) => resolveYDomain(skeletonData, dataKeys), }), [lines, resolveYDomain, skeletonData] ); const yDomainTargetByAxis = useMemo(() => { const base = computeYDomainsByAxis({ lines, resolveDomain: (dataKeys) => resolveYDomain(xDomain ? visiblePlotData : data, dataKeys), }); if (projectionConfigs.length === 0) { return base; } const merged: Record = { ...base }; for (const axisId of Object.keys(base)) { merged[axisId] = mergeProjectionYDomain( base[axisId] ?? [0, 100], projectionConfigs, axisId ); } for (const config of projectionConfigs) { if (!merged[config.yAxisId]) { merged[config.yAxisId] = mergeProjectionYDomain( [0, 100], projectionConfigs, config.yAxisId ); } } return merged; }, [ data, lines, projectionConfigs, resolveYDomain, visiblePlotData, xDomain, ]); const animatedYDomainsByAxis = useAnimatedYDomains({ chartPhase, durationMs: yDomainTweenDuration, enabled: yDomainTween, onSettled: notifyYDomainTweenComplete, skeletonByAxis: yDomainSkeletonByAxis, targetByAxis: yDomainTargetByAxis, tweenOnTargetChange: yDomainTween || (tweenYDomainOnXDomainChange && xDomain != null), }); const yDomainsForScales = animatedYDomainsByAxis; const yScales = useMemo( () => buildYScalesFromDomains({ domainsByAxis: yDomainsForScales, innerHeight, lines, }), [yDomainsForScales, innerHeight, lines] ); const yScale = getPrimaryYScale( yScales, scaleLinear({ range: [innerHeight, 0], domain: [0, 100], nice: true }) ); const dateLabels = useMemo( () => visiblePlotData.map((d) => shortDateFmt.format(xAccessor(d))), [visiblePlotData, xAccessor] ); const canInteract = isLoaded && isChartInteractionPhase(chartPhase); const { tooltipData, setTooltipData, selection, clearSelection, interactionHandlers, interactionStyle, } = useChartInteraction({ bisectDate, canInteract, data: visiblePlotData, lines, margin, xAccessor, xScale, yScale, yScales, }); const defsChildren: ReactElement[] = []; const clipExcludedChildren: ReactElement[] = []; const underlayChildren: ReactElement[] = []; const preOverlayChildren: ReactElement[] = []; const postOverlayChildren: ReactElement[] = []; Children.forEach(children, (child, index) => { if (!isValidElement(child)) { return; } const keyedChild = ensureChildKey(child, index); const resolvedChild = resolveChartChildElement(keyedChild); if (isGradientDefComponent(resolvedChild)) { defsChildren.push(resolvedChild); } else if (isPatternDefComponent(resolvedChild)) { preOverlayChildren.push(resolvedChild); } else if (isPostOverlayComponent(resolvedChild)) { postOverlayChildren.push(resolvedChild); } else if (isClipExcludedComponent(resolvedChild)) { clipExcludedChildren.push(resolvedChild); } else if (isUnderlayComponent(resolvedChild)) { underlayChildren.push(resolvedChild); } else { preOverlayChildren.push(resolvedChild); } }); const [registeredReferenceAreas, setRegisteredReferenceAreas] = useState( () => new Map() ); const registerReferenceArea = useCallback( (id: string, config: ReferenceAreaConfig) => { setRegisteredReferenceAreas((prev) => { const existing = prev.get(id); if ( existing && existing.yAxisId === config.yAxisId && existing.y1 === config.y1 && existing.y2 === config.y2 && existing.axisLabelColor === config.axisLabelColor ) { return prev; } const next = new Map(prev); next.set(id, config); return next; }); }, [] ); const unregisterReferenceArea = useCallback((id: string) => { setRegisteredReferenceAreas((prev) => { if (!prev.has(id)) { return prev; } const next = new Map(prev); next.delete(id); return next; }); }, []); const referenceAreaRegistration = useMemo( () => ({ registerReferenceArea, unregisterReferenceArea }), [registerReferenceArea, unregisterReferenceArea] ); const referenceAreas = useMemo(() => { const extracted = extractReferenceAreaConfigs(children); const registered = [...registeredReferenceAreas.values()]; if (registered.length === 0) { return extracted; } if (extracted.length === 0) { return registered; } return [...extracted, ...registered]; }, [children, registeredReferenceAreas]); const contextValue = useMemo( () => ({ data: visiblePlotData, renderData, xScale, yScale, yScales, width, height, innerWidth, innerHeight, margin, columnWidth, tooltipData, setTooltipData, containerRef, lines, referenceAreas, chartPhase, chartStatus, loadingLabel, yDomainTweenDuration, yDomainSkeletonByAxis, yDomainTargetByAxis, isLoaded, animationDuration, animationEasing, enterTransition, revealEpoch, notifyLoadingPulseComplete, xAccessor, dateLabels, xDomain, xDomainSlotCount, selection, clearSelection, composedBarDataKeys, composedBarSize, composedMaxBarSize, composedBarGap, composedStacked, composedStackOffsets, composedStackGap, }), [ visiblePlotData, renderData, xScale, yScale, yScales, width, height, innerWidth, innerHeight, margin, columnWidth, tooltipData, setTooltipData, containerRef, lines, referenceAreas, chartPhase, chartStatus, loadingLabel, yDomainTweenDuration, yDomainSkeletonByAxis, yDomainTargetByAxis, isLoaded, animationDuration, animationEasing, enterTransition, revealEpoch, notifyLoadingPulseComplete, xAccessor, dateLabels, xDomain, xDomainSlotCount, selection, clearSelection, composedBarDataKeys, composedBarSize, composedMaxBarSize, composedBarGap, composedStacked, composedStackOffsets, composedStackGap, ] ); const useClipReveal = !staticPreview && renderData.length > 1 && innerWidth > 0 && animationDuration > 0; const isRevealAnimating = chartPhase === "revealing"; const isRevealConcealing = chartPhase === "exitingReady" && animationDuration > 0; const effectiveEnterTransition: Transition = enterTransition ?? ({ ...DEFAULT_CHART_ENTER_TRANSITION, duration: animationDuration / 1000, } satisfies Transition); const revealClipPadding = useMemo(() => { if (!composedBarDataKeys?.length) { return 0; } const barWidth = computeSeriesBarWidth({ columnWidth, composedBarGap, composedBarSize, composedMaxBarSize, dataLength: plotData.length, innerWidth, seriesCount: composedBarDataKeys.length, stacked: composedStacked, }); return computeSeriesBarRevealClipPadding({ barWidth, gap: composedBarGap, seriesCount: composedBarDataKeys.length, stacked: composedStacked, }); }, [ columnWidth, composedBarDataKeys, composedBarGap, composedBarSize, composedMaxBarSize, composedStacked, innerWidth, plotData.length, ]); return ( ); }); 54:Td33,import { Children, Fragment, isValidElement, type ReactElement, type ReactNode, } from "react"; import { isChartClipPassthrough } from "./chart-child-passthrough"; import type { ProjectionPoint } from "./projection-utils"; import { projectionDateExtents, projectionValueExtents, } from "./projection-utils"; import { normalizeYAxisId } from "./y-axis-scales"; export interface ProjectionLineConfig { yAxisId: string; data: ProjectionPoint[]; } interface ProjectionLineConfigProps { data?: ProjectionPoint[]; yAxisId?: string | number; } function getChildComponentName(child: ReactElement) { const childType = child.type as { displayName?: string; name?: string }; return typeof child.type === "function" ? childType.displayName || childType.name || "" : ""; } function isProjectionLineElement(child: ReactElement): boolean { return getChildComponentName(child) === "ProjectionLine"; } function normalizeProjectionData( data: ProjectionPoint[] | undefined ): ProjectionPoint[] { if (!data?.length) { return []; } return data.map((point) => ({ date: point.date instanceof Date ? point.date : new Date(point.date), value: point.value, })); } /** Collect {@link ProjectionLine} props from chart children for domain extension. */ export function extractProjectionLineConfigs( children: ReactNode ): ProjectionLineConfig[] { const configs: ProjectionLineConfig[] = []; const visit = (node: ReactNode) => { Children.forEach(node, (child) => { if (!isValidElement(child)) { return; } if (child.type === Fragment) { visit((child.props as { children?: ReactNode }).children); return; } if (isProjectionLineElement(child)) { const props = child.props as ProjectionLineConfigProps | undefined; const data = normalizeProjectionData(props?.data); if (data.length >= 2) { configs.push({ yAxisId: normalizeYAxisId(props?.yAxisId), data, }); } return; } if (isChartClipPassthrough(child.type)) { visit((child.props as { children?: ReactNode }).children); return; } const childProps = child.props as { children?: ReactNode } | undefined; if (childProps?.children) { visit(childProps.children); } }); }; visit(children); return configs; } export function mergeProjectionYDomain( domain: [number, number], configs: ProjectionLineConfig[], yAxisId: string ): [number, number] { const paths = configs .filter((config) => config.yAxisId === yAxisId) .map((config) => config.data); const extents = projectionValueExtents(paths); if (!extents) { return domain; } const [min, max] = domain; const nextMin = Math.min(min, extents.minValue); const nextMax = Math.max(max, extents.maxValue); if (nextMin >= 0 && min >= 0) { return [0, nextMax <= 0 ? 100 : nextMax * 1.1]; } const padding = (nextMax - nextMin) * 0.05 || 1; return [nextMin - padding, nextMax + padding]; } export function mergeProjectionXDomainMax( maxTime: number, configs: ProjectionLineConfig[] ): number { const paths = configs.map((config) => config.data); const extents = projectionDateExtents(paths); if (!extents) { return maxTime; } return Math.max(maxTime, extents.maxTime); } 55:T28a0,export type ProjectionMode = "auto" | "target" | "manual"; export type ProjectionAutoMethod = "linearRegression" | "lastSegment"; /** How the projection segment is drawn between anchor and horizon. */ export type ProjectionCurveKind = "linear" | "bezier"; /** @deprecated Stepped density removed — projections always anchor → horizon. */ export type ProjectionPathDensity = "stepped" | "endpoints"; export interface ProjectionPoint { date: Date; value: number; } export interface BuildProjectionPathOptions { sourceData: Record[]; seriesKey: string; xDataKey?: string; mode: ProjectionMode; autoMethod?: ProjectionAutoMethod; /** Auto mode: stepped points per interval, or anchor + end only. Default: stepped */ pathDensity?: ProjectionPathDensity; /** Index in sourceData where projection anchors (default: last point). */ startIndex?: number; /** How many future points to generate (matches source cadence). */ horizonPoints?: number; /** Target Y at the final projected date (target mode). */ endValue?: number; /** Full manual path — anchor + future points (manual mode). */ points?: ProjectionPoint[]; } function readDate(row: Record, xDataKey: string): Date | null { const raw = row[xDataKey]; if (raw instanceof Date && !Number.isNaN(raw.getTime())) { return raw; } if (typeof raw === "number" && Number.isFinite(raw)) { const date = new Date(raw); return Number.isNaN(date.getTime()) ? null : date; } if (typeof raw === "string") { const date = new Date(raw); return Number.isNaN(date.getTime()) ? null : date; } return null; } function readValue( row: Record, seriesKey: string ): number | null { const raw = row[seriesKey]; return typeof raw === "number" && Number.isFinite(raw) ? raw : null; } function resolveStartIndex( sourceData: Record[], startIndex: number | undefined ): number { if (startIndex == null || !Number.isFinite(startIndex)) { return Math.max(0, sourceData.length - 1); } return Math.min(Math.max(0, Math.floor(startIndex)), sourceData.length - 1); } function intervalFromAdjacentRows( sourceData: Record[], xDataKey: string, startIndex: number ): number | null { if (startIndex < 1) { return null; } const prevRow = sourceData[startIndex - 1]; const currentRow = sourceData[startIndex]; const prev = prevRow ? readDate(prevRow, xDataKey) : null; const current = currentRow ? readDate(currentRow, xDataKey) : null; if (!(prev && current)) { return null; } const delta = current.getTime() - prev.getTime(); return delta > 0 ? delta : null; } function intervalFromSeriesSpan( sourceData: Record[], xDataKey: string ): number | null { if (sourceData.length < 2) { return null; } const firstRow = sourceData[0]; const lastRow = sourceData.at(-1); const first = firstRow ? readDate(firstRow, xDataKey) : null; const last = lastRow ? readDate(lastRow, xDataKey) : null; if (!(first && last)) { return null; } const span = last.getTime() - first.getTime(); return span > 0 ? span / (sourceData.length - 1) : null; } function resolveIntervalMs( sourceData: Record[], xDataKey: string, startIndex: number ): number { return ( intervalFromAdjacentRows(sourceData, xDataKey, startIndex) ?? intervalFromSeriesSpan(sourceData, xDataKey) ?? 86_400_000 ); } function linearRegressionSlope(points: { t: number; y: number }[]): number { if (points.length < 2) { return 0; } const n = points.length; let sumT = 0; let sumY = 0; let sumTY = 0; let sumTT = 0; for (const { t, y } of points) { sumT += t; sumY += y; sumTY += t * y; sumTT += t * t; } const denom = n * sumTT - sumT * sumT; if (Math.abs(denom) < 1e-12) { return 0; } return (n * sumTY - sumT * sumY) / denom; } function buildAutoFutureValues(options: { anchorTime: number; anchorValue: number; autoMethod: ProjectionAutoMethod; historyPoints: { t: number; y: number }[]; horizonPoints: number; intervalMs: number; pathDensity: ProjectionPathDensity; }): ProjectionPoint[] { const { anchorTime, anchorValue, autoMethod, historyPoints, horizonPoints, intervalMs, pathDensity, } = options; const slope = autoMethod === "lastSegment" && historyPoints.length >= 2 ? (() => { const prev = historyPoints.at(-2); const last = historyPoints.at(-1); if (!(prev && last)) { return 0; } const dt = last.t - prev.t; return dt === 0 ? 0 : (last.y - prev.y) / dt; })() : linearRegressionSlope(historyPoints); if (pathDensity === "endpoints") { const endTime = anchorTime + intervalMs * horizonPoints; const endValue = anchorValue + slope * intervalMs * horizonPoints; return [ { date: new Date(anchorTime), value: anchorValue }, { date: new Date(endTime), value: endValue }, ]; } const result: ProjectionPoint[] = [ { date: new Date(anchorTime), value: anchorValue }, ]; for (let i = 1; i <= horizonPoints; i++) { const t = anchorTime + intervalMs * i; const value = anchorValue + slope * intervalMs * i; result.push({ date: new Date(t), value }); } return result; } /** Slope (value change per ms) at the projection anchor from the last data segment. */ export function computeProjectionAnchorTangentSlope( sourceData: Record[], seriesKey: string, xDataKey = "date", startIndexProp?: number ): number { if (sourceData.length < 2) { return 0; } const startIndex = resolveStartIndex(sourceData, startIndexProp); const historyPoints: { t: number; y: number }[] = []; for (let i = 0; i <= startIndex; i++) { const row = sourceData[i]; if (!row) { continue; } const date = readDate(row, xDataKey); const value = readValue(row, seriesKey); if (date && value != null) { historyPoints.push({ t: date.getTime(), y: value }); } } if (historyPoints.length < 2) { return 0; } const prev = historyPoints.at(-2); const last = historyPoints.at(-1); if (!(prev && last)) { return 0; } const dt = last.t - prev.t; return dt === 0 ? 0 : (last.y - prev.y) / dt; } /** Cubic bezier with horizontal tangents at start and end (price-target S-curve). */ export function buildHorizontalTangentBezierPath( x0: number, y0: number, x1: number, y1: number, /** How far control points sit along the x span (0–0.5). Default: 0.45 */ tension = 0.45 ): string { const dx = x1 - x0; if (Math.abs(dx) < 1e-6) { return `M ${x0},${y0} L ${x1},${y1}`; } const t = Math.min(0.5, Math.max(0.05, tension)); const c1x = x0 + dx * t; const c2x = x1 - dx * t; return `M ${x0},${y0} C ${c1x},${y0} ${c2x},${y1} ${x1},${y1}`; } function buildTargetPath(options: { anchorTime: number; anchorValue: number; endValue: number; horizonPoints: number; intervalMs: number; }): ProjectionPoint[] { const { anchorTime, anchorValue, endValue, horizonPoints, intervalMs } = options; const endTime = anchorTime + intervalMs * horizonPoints; return [ { date: new Date(anchorTime), value: anchorValue }, { date: new Date(endTime), value: endValue }, ]; } /** Build a projection path from historical chart data or explicit points. */ export function buildProjectionPath( options: BuildProjectionPathOptions ): ProjectionPoint[] { const { sourceData, seriesKey, xDataKey = "date", mode, autoMethod = "linearRegression", pathDensity = "endpoints", startIndex: startIndexProp, horizonPoints = 6, endValue, points, } = options; if (mode === "manual" && points && points.length >= 2) { return points.map((point) => ({ date: new Date(point.date), value: point.value, })); } if (sourceData.length === 0) { return []; } const startIndex = resolveStartIndex(sourceData, startIndexProp); const anchorRow = sourceData[startIndex]; if (!anchorRow) { return []; } const anchorDate = readDate(anchorRow, xDataKey); const anchorValue = readValue(anchorRow, seriesKey); if (!anchorDate || anchorValue == null) { return []; } const intervalMs = resolveIntervalMs(sourceData, xDataKey, startIndex); const anchorTime = anchorDate.getTime(); const historyPoints: { t: number; y: number }[] = []; for (let i = 0; i <= startIndex; i++) { const row = sourceData[i]; if (!row) { continue; } const date = readDate(row, xDataKey); const value = readValue(row, seriesKey); if (date && value != null) { historyPoints.push({ t: date.getTime(), y: value }); } } if (mode === "target" && endValue != null && Number.isFinite(endValue)) { return buildTargetPath({ anchorTime, anchorValue, endValue, horizonPoints, intervalMs, }); } return buildAutoFutureValues({ anchorTime, anchorValue, autoMethod, historyPoints, horizonPoints, intervalMs, pathDensity, }); } /** Collect numeric Y extents from projection point arrays. */ export function projectionValueExtents( paths: ProjectionPoint[][] ): { minValue: number; maxValue: number } | null { let minValue = Number.POSITIVE_INFINITY; let maxValue = Number.NEGATIVE_INFINITY; for (const path of paths) { for (const point of path) { if (point.value < minValue) { minValue = point.value; } if (point.value > maxValue) { maxValue = point.value; } } } if (minValue === Number.POSITIVE_INFINITY) { return null; } return { minValue, maxValue }; } /** Collect date extents from projection point arrays. */ export function projectionDateExtents( paths: ProjectionPoint[][] ): { minTime: number; maxTime: number } | null { let minTime = Number.POSITIVE_INFINITY; let maxTime = Number.NEGATIVE_INFINITY; for (const path of paths) { for (const point of path) { const time = point.date.getTime(); if (time < minTime) { minTime = time; } if (time > maxTime) { maxTime = time; } } } if (minTime === Number.POSITIVE_INFINITY) { return null; } return { minTime, maxTime }; } 56:Td75,import { Children, cloneElement, Fragment, isValidElement, type ReactElement, type ReactNode, } from "react"; /** Marker on wrapper components whose single child should inherit clip classification. */ export const CHART_CLIP_PASSTHROUGH = "__chartClipPassthrough" as const; export function isChartClipPassthrough(type: unknown): boolean { return ( typeof type === "function" && (type as { [CHART_CLIP_PASSTHROUGH]?: boolean })[CHART_CLIP_PASSTHROUGH] === true ); } /** Unwrap visibility wrappers so `Grid` / axes stay outside the series clip. */ export function resolveChartChildElement(child: ReactElement): ReactElement { if (isChartClipPassthrough(child.type)) { const inner = (child.props as { children?: unknown }).children; if (isValidElement(inner)) { return resolveChartChildElement(inner); } } return child; } /** Walk chart children, flattening React fragments (studio often groups layers in `<>...`). */ export function forEachChartChild( children: ReactNode, callback: (child: ReactElement, index: number) => void ) { let index = 0; const visit = (nodes: ReactNode) => { Children.forEach(nodes, (child) => { if (!isValidElement(child)) { return; } if (child.type === Fragment) { visit((child.props as { children?: ReactNode }).children); return; } callback(child, index); index += 1; }); }; visit(children); } const CLIP_EXCLUDED_COMPONENT_NAMES = new Set([ "Background", "Grid", "XAxis", "YAxis", "BarXAxis", "BarYAxis", "LiveXAxis", "LiveYAxis", ]); const UNDERLAY_COMPONENT_NAMES = new Set(["ReferenceArea", "BarColumnTrack"]); /** Markers render after the interaction overlay so they stay clickable. */ export function isPostOverlayComponent(child: ReactElement): boolean { const childType = child.type as { displayName?: string; name?: string; __isChartMarkers?: boolean; __isPostOverlay?: boolean; }; if (childType.__isChartMarkers || childType.__isPostOverlay) { return true; } const componentName = typeof child.type === "function" ? childType.displayName || childType.name || "" : ""; return ( componentName === "ChartMarkers" || componentName === "MarkerGroup" || componentName === "ChartBrush" ); } /** Renders above grid/axes but below series; excluded from grow-clip reveal. */ export function isUnderlayComponent(child: ReactElement): boolean { const childType = child.type as { displayName?: string; name?: string }; const componentName = typeof child.type === "function" ? childType.displayName || childType.name || "" : ""; return UNDERLAY_COMPONENT_NAMES.has(componentName); } /** Grid and axes stay visible during series clip reveal (e.g. loading → ready). */ export function isClipExcludedComponent(child: ReactElement): boolean { const childType = child.type as { displayName?: string; name?: string }; const componentName = typeof child.type === "function" ? childType.displayName || childType.name || "" : ""; return CLIP_EXCLUDED_COMPONENT_NAMES.has(componentName); } /** SVG layer lists from chart shells need stable keys when rendered as arrays. */ export function renderKeyedChartLayers(children: ReactElement[]) { return children.map((child, index) => cloneElement(child, { key: child.key ?? `chart-layer-${index}` }) ); } 57:T656,export function computeSeriesBarWidth(input: { innerWidth: number; dataLength: number; columnWidth: number; seriesCount: number; composedBarSize?: number; composedMaxBarSize?: number; composedBarGap?: number; stacked?: boolean; }): number { const { innerWidth, dataLength, columnWidth, seriesCount, composedBarSize, composedMaxBarSize, composedBarGap = 4, stacked = false, } = input; const gap = composedBarGap; const groupCount = stacked ? 1 : Math.max(1, seriesCount); let slot = columnWidth; if (slot <= 0) { slot = dataLength < 2 ? innerWidth : innerWidth / (dataLength - 1); } let width = composedBarSize ?? Math.min(slot * 0.88, composedMaxBarSize ?? Number.POSITIVE_INFINITY); if (composedMaxBarSize != null) { width = Math.min(width, composedMaxBarSize); } if (groupCount > 1) { const maxGroup = slot * 0.92; const needed = groupCount * width + (groupCount - 1) * gap; if (needed > maxGroup && maxGroup > 0) { width = Math.max(4, (maxGroup - (groupCount - 1) * gap) / groupCount); } } return Math.max(2, width); } /** Half-width of the bar group at each x — used to pad reveal clips. */ export function computeSeriesBarRevealClipPadding(input: { barWidth: number; seriesCount: number; gap?: number; stacked?: boolean; }): number { const { barWidth, seriesCount, gap = 4, stacked = false } = input; if (stacked || seriesCount <= 1) { return Math.ceil(barWidth / 2); } const groupWidth = seriesCount * barWidth + (seriesCount - 1) * gap; return Math.ceil(groupWidth / 2); } 58:Tac8,"use client"; import { useId } from "react"; import { useChartStable } from "./chart-context"; import { SeriesMarkers, type SeriesMarkersProps } from "./series-markers"; export interface ScatterProps extends Omit { /** Y-scale group id (Recharts `yAxisId`). Default: `"left"`. */ yAxisId?: string | number; /** Whether to animate points with clip reveal. Default: true */ animate?: boolean; /** * Color each dot by its vertical position using a chart-space linear gradient. * Lower values use `from`; higher values use `to`. Default stops: red (bottom) → green (top). */ yGradient?: boolean | { from?: string; to?: string }; } const DEFAULT_Y_GRADIENT_FROM = "var(--color-red-500)"; const DEFAULT_Y_GRADIENT_TO = "var(--color-emerald-500)"; export function Scatter({ dataKey, fill, stroke, strokeWidth = 2, ringGap = 2, outlineWidth = 0, outlineColor, radius = 5, animate = true, fadeOnHover = true, inactiveOpacity = 0.5, inactiveBlur = 2, enterBlur = 2, showActiveHighlight = true, yGradient, }: ScatterProps) { const { innerHeight } = useChartStable(); const yGradientConfig = (() => { if (!yGradient) { return null; } if (yGradient === true) { return { from: DEFAULT_Y_GRADIENT_FROM, to: DEFAULT_Y_GRADIENT_TO }; } return { from: yGradient.from ?? DEFAULT_Y_GRADIENT_FROM, to: yGradient.to ?? DEFAULT_Y_GRADIENT_TO, }; })(); const yGradientId = `scatter-y-gradient-${useId().replace(/:/g, "")}`; const gradientFill = yGradientConfig ? `url(#${yGradientId})` : undefined; const resolvedFill = gradientFill ?? fill; const resolvedStroke = stroke ?? (gradientFill ? gradientFill : undefined); return ( <> {yGradientConfig ? ( ) : null} ); } Scatter.displayName = "Scatter"; export default Scatter; 59:T224e,"use client"; import type { ScaleLinear, ScaleTime } from "d3-scale"; import { useCallback, useRef, useState } from "react"; import type { LineConfig, Margin, TooltipData } from "./chart-context"; import { localPointFromSvg } from "./scatter-svg"; import type { ChartSelection } from "./use-chart-interaction"; import { useScheduledTooltip } from "./use-scheduled-tooltip"; import { normalizeYAxisId } from "./y-axis-scales"; type XScale = ScaleTime; type YScale = ScaleLinear; interface UseScatterChartInteractionParams { xScale: XScale; yScale: YScale; yScales: Record; data: Record[]; lines: LineConfig[]; margin: Margin; xAccessor: (d: Record) => Date; bisectDate: ( data: Record[], date: Date, lo: number ) => number; canInteract: boolean; } interface ScatterChartInteractionResult { tooltipData: TooltipData | null; setTooltipData: React.Dispatch>; selection: ChartSelection | null; clearSelection: () => void; interactionHandlers: { onMouseMove?: (event: React.MouseEvent) => void; onMouseLeave?: () => void; onMouseDown?: (event: React.MouseEvent) => void; onMouseUp?: () => void; onTouchStart?: (event: React.TouchEvent) => void; onTouchMove?: (event: React.TouchEvent) => void; onTouchEnd?: () => void; }; interactionStyle: React.CSSProperties; } export function useScatterChartInteraction({ xScale, yScale, yScales, data, lines, margin, xAccessor, bisectDate, canInteract, }: UseScatterChartInteractionParams): ScatterChartInteractionResult { const [selection, setSelection] = useState(null); const { tooltipData, setTooltipData, scheduleTooltip, clearTooltip, resetTooltipDedupe, } = useScheduledTooltip(); const isDraggingRef = useRef(false); const dragStartXRef = useRef(0); const resolveTooltipFromX = useCallback( (pixelX: number): TooltipData | null => { const x0 = xScale.invert(pixelX); const index = bisectDate(data, x0, 1); const d0 = data[index - 1]; const d1 = data[index]; if (!d0) { return null; } let d = d0; let finalIndex = index - 1; if (d1) { const d0Time = xAccessor(d0).getTime(); const d1Time = xAccessor(d1).getTime(); if (x0.getTime() - d0Time > d1Time - x0.getTime()) { d = d1; finalIndex = index; } } const yPositions: Record = {}; for (const line of lines) { const value = d[line.dataKey]; if (typeof value === "number") { const axisScale = yScales[normalizeYAxisId(line.yAxisId)] ?? yScale; yPositions[line.dataKey] = axisScale(value) ?? 0; } } return { point: d, index: finalIndex, x: xScale(xAccessor(d)) ?? 0, yPositions, }; }, [xScale, yScale, yScales, data, lines, xAccessor, bisectDate] ); const resolveIndexFromX = useCallback( (pixelX: number): number => { const x0 = xScale.invert(pixelX); const index = bisectDate(data, x0, 1); const d0 = data[index - 1]; const d1 = data[index]; if (!d0) { return 0; } if (d1) { const d0Time = xAccessor(d0).getTime(); const d1Time = xAccessor(d1).getTime(); if (x0.getTime() - d0Time > d1Time - x0.getTime()) { return index; } } return index - 1; }, [xScale, data, xAccessor, bisectDate] ); const getChartX = useCallback( ( event: React.MouseEvent | React.TouchEvent, touchIndex = 0 ): number | null => { const svg = event.currentTarget.ownerSVGElement; let clientX: number; let clientY: number; if ("touches" in event) { const touch = event.touches[touchIndex]; if (!touch) { return null; } clientX = touch.clientX; clientY = touch.clientY; } else { clientX = event.clientX; clientY = event.clientY; } const point = localPointFromSvg(svg, clientX, clientY); if (!point) { return null; } return point.x - margin.left; }, [margin.left] ); const handleMouseMove = useCallback( (event: React.MouseEvent) => { const chartX = getChartX(event); if (chartX === null) { return; } if (isDraggingRef.current) { const startX = Math.min(dragStartXRef.current, chartX); const endX = Math.max(dragStartXRef.current, chartX); setSelection({ startX, endX, startIndex: resolveIndexFromX(startX), endIndex: resolveIndexFromX(endX), active: true, }); return; } const tooltip = resolveTooltipFromX(chartX); if (tooltip) { scheduleTooltip(tooltip); } }, [getChartX, resolveTooltipFromX, resolveIndexFromX, scheduleTooltip] ); const handleMouseLeave = useCallback(() => { clearTooltip(); if (isDraggingRef.current) { isDraggingRef.current = false; } setSelection(null); }, [clearTooltip]); const handleMouseDown = useCallback( (event: React.MouseEvent) => { const chartX = getChartX(event); if (chartX === null) { return; } isDraggingRef.current = true; dragStartXRef.current = chartX; clearTooltip(); setSelection(null); }, [getChartX, clearTooltip] ); const handleMouseUp = useCallback(() => { if (isDraggingRef.current) { isDraggingRef.current = false; } setSelection(null); }, []); const handleTouchStart = useCallback( (event: React.TouchEvent) => { if (event.touches.length === 1) { event.preventDefault(); const chartX = getChartX(event, 0); if (chartX === null) { return; } const tooltip = resolveTooltipFromX(chartX); if (tooltip) { scheduleTooltip(tooltip); } } else if (event.touches.length === 2) { event.preventDefault(); resetTooltipDedupe(); clearTooltip(); const x0 = getChartX(event, 0); const x1 = getChartX(event, 1); if (x0 === null || x1 === null) { return; } const startX = Math.min(x0, x1); const endX = Math.max(x0, x1); setSelection({ startX, endX, startIndex: resolveIndexFromX(startX), endIndex: resolveIndexFromX(endX), active: true, }); } }, [ getChartX, resolveTooltipFromX, resolveIndexFromX, scheduleTooltip, resetTooltipDedupe, clearTooltip, ] ); const handleTouchMove = useCallback( (event: React.TouchEvent) => { if (event.touches.length === 1) { event.preventDefault(); const chartX = getChartX(event, 0); if (chartX === null) { return; } const tooltip = resolveTooltipFromX(chartX); if (tooltip) { scheduleTooltip(tooltip); } } else if (event.touches.length === 2) { event.preventDefault(); const x0 = getChartX(event, 0); const x1 = getChartX(event, 1); if (x0 === null || x1 === null) { return; } const startX = Math.min(x0, x1); const endX = Math.max(x0, x1); setSelection({ startX, endX, startIndex: resolveIndexFromX(startX), endIndex: resolveIndexFromX(endX), active: true, }); } }, [getChartX, resolveTooltipFromX, resolveIndexFromX, scheduleTooltip] ); const handleTouchEnd = useCallback(() => { clearTooltip(); setSelection(null); }, [clearTooltip]); const clearSelection = useCallback(() => { setSelection(null); }, []); const interactionHandlers = canInteract ? { onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, } : {}; const interactionStyle: React.CSSProperties = { cursor: canInteract ? "crosshair" : "default", touchAction: "none", }; return { tooltipData, setTooltipData, selection, clearSelection, interactionHandlers, interactionStyle, }; } 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","d3-array",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/d3-array","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":"d3-array"}]]}]}],["$","li","d3-scale",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/d3-scale","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":"d3-scale"}]]}]}],["$","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"}]]}]}],["$","li","react-use-measure",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/react-use-measure","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":"react-use-measure"}]]}]}]]}],["$","$L4f",null,{"namespace":"@catalogs","registryDependencies":["@bklit/chart-context","@bklit/chart-animation","@bklit/chart-series","@bklit/grid","@bklit/x-axis","@bklit/chart-tooltip","@bklit/utils"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"src/charts/scatter-chart.tsx","content":"$51","type":"registry:component","target":"components/charts/scatter-chart.tsx"},{"path":"src/charts/scatter-chart-shell.tsx","content":"$52","type":"registry:component","target":"components/charts/scatter-chart-shell.tsx"},{"path":"src/charts/time-series-chart-shell.tsx","content":"$53","type":"registry:component","target":"components/charts/time-series-chart-shell.tsx"},{"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"},{"path":"src/charts/projection-config.ts","content":"$54","type":"registry:component","target":"components/charts/projection-config.ts"},{"path":"src/charts/projection-utils.ts","content":"$55","type":"registry:component","target":"components/charts/projection-utils.ts"},{"path":"src/charts/chart-child-passthrough.ts","content":"$56","type":"registry:component","target":"components/charts/chart-child-passthrough.ts"},{"path":"src/charts/series-bar-layout.ts","content":"$57","type":"registry:component","target":"components/charts/series-bar-layout.ts"},{"path":"src/charts/scatter.tsx","content":"$58","type":"registry:component","target":"components/charts/scatter.tsx"},{"path":"src/charts/use-scatter-chart-interaction.ts","content":"$59","type":"registry:component","target":"components/charts/use-scatter-chart-interaction.ts"},{"path":"src/charts/scatter-svg.ts","content":"/** Map viewport coordinates to SVG user space (no @visx/event). */\nexport function localPointFromSvg(\n svg: SVGSVGElement | null,\n clientX: number,\n clientY: number\n): { x: number; y: number } | null {\n if (!svg) {\n return null;\n }\n\n const point = svg.createSVGPoint();\n point.x = clientX;\n point.y = clientY;\n\n const matrix = svg.getScreenCTM();\n if (!matrix) {\n return null;\n }\n\n const transformed = point.matrixTransform(matrix.inverse());\n return { x: transformed.x, y: transformed.y };\n}\n","type":"registry:component","target":"components/charts/scatter-svg.ts"}],"className":"h-[70svh] min-h-80"}]]}]