50: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"] 51: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"] 52:T180d,"use client"; import { curveLinear } from "@visx/curve"; import { LinePath } from "@visx/shape"; import { useCallback, useId, useMemo } from "react"; import { useChartStable, useYScale } from "./chart-context"; import { buildHorizontalTangentBezierPath, type ProjectionCurveKind, type ProjectionPoint, } from "./projection-utils"; // biome-ignore lint/suspicious/noExplicitAny: d3 curve factory type type CurveFactory = any; export type ProjectionStrokeStyle = "solid" | "gradient"; export interface ProjectionLineProps { /** Projection path points — anchor (last data row) + horizon end. */ data: ProjectionPoint[]; /** Y-scale group id. Default: `"left"`. */ yAxisId?: string | number; /** Solid stroke color. Default: var(--chart-3) */ stroke?: string; /** Solid or path-aligned gradient stroke. Default: solid */ strokeStyle?: ProjectionStrokeStyle; /** Gradient start color when `strokeStyle` is gradient. Default: `stroke` */ gradientStart?: string; /** Gradient end color when `strokeStyle` is gradient. Default: var(--chart-5) */ gradientEnd?: string; /** Stroke width. Default: 2 */ strokeWidth?: number; /** Straight segment or horizontal-tangent S-curve. Default: linear */ curveKind?: ProjectionCurveKind; /** Advanced curve override (used when `curveKind` is omitted). */ curve?: CurveFactory; /** Dash pattern. Default: "6,4" */ strokeDasharray?: string; /** Stroke opacity. Default: 1 */ strokeOpacity?: number; /** Show horizon endpoint marker. Default: true */ showEndMarker?: boolean; /** @deprecated Use `showEndMarker`. */ showEndpoints?: boolean; /** Endpoint marker radius. Default: 5 */ endpointRadius?: number; className?: string; } function resolveVisibleEndX( endX: number, innerWidth: number, endpointRadius: number, strokeWidth: number ): number { const edgePadding = endpointRadius + strokeWidth * 0.5 + 1; return Math.min(endX, Math.max(0, innerWidth - edgePadding)); } function renderProjectionStroke({ bezierPath, curve, curveKind, data, getX, getY, linearPath, strokeProps, }: { bezierPath: string | null; curve: CurveFactory | undefined; curveKind: ProjectionCurveKind; data: ProjectionPoint[]; getX: (point: ProjectionPoint) => number; getY: (point: ProjectionPoint) => number; linearPath: string | null; strokeProps: { stroke: string; strokeDasharray: string; strokeLinecap: "round"; strokeOpacity: number; strokeWidth: number; }; }) { if (curveKind === "bezier" && bezierPath) { return ; } if (curveKind === "linear" && linearPath) { return ; } return ( ); } export function ProjectionLine({ data, yAxisId, stroke = "var(--chart-3)", strokeStyle = "solid", gradientStart, gradientEnd = "var(--chart-5)", strokeWidth = 2, curveKind = "linear", curve, strokeDasharray = "6,4", strokeOpacity = 1, showEndMarker, showEndpoints, endpointRadius = 5, className, }: ProjectionLineProps) { const { xScale, chartPhase, innerWidth } = useChartStable(); const yScale = useYScale(yAxisId); const gradientId = useId().replace(/:/g, ""); const showMarker = showEndMarker ?? showEndpoints ?? true; const resolvedGradientStart = gradientStart ?? stroke; const getX = useCallback( (point: ProjectionPoint) => xScale(point.date) ?? 0, [xScale] ); const getY = useCallback( (point: ProjectionPoint) => yScale(point.value) ?? 0, [yScale] ); const startPoint = data[0]; const endPoint = data.at(-1); const geometry = useMemo(() => { if (!(startPoint && endPoint)) { return null; } const startX = getX(startPoint); const startY = getY(startPoint); const endX = getX(endPoint); const endY = getY(endPoint); const visibleEndX = resolveVisibleEndX( endX, innerWidth, showMarker ? endpointRadius : 0, strokeWidth ); return { startX, startY, visibleEndX, endY }; }, [ endPoint, endpointRadius, getX, getY, innerWidth, showMarker, startPoint, strokeWidth, ]); const bezierPath = useMemo(() => { if (curveKind !== "bezier" || !geometry) { return null; } return buildHorizontalTangentBezierPath( geometry.startX, geometry.startY, geometry.visibleEndX, geometry.endY ); }, [curveKind, geometry]); const linearPath = useMemo(() => { if (curveKind !== "linear" || !geometry) { return null; } return `M ${geometry.startX},${geometry.startY} L ${geometry.visibleEndX},${geometry.endY}`; }, [curveKind, geometry]); const showStroke = chartPhase === "revealing" || chartPhase === "ready" || chartPhase === "exitingReady"; if (data.length < 2 || !geometry) { return null; } const resolvedStroke = strokeStyle === "gradient" && geometry ? `url(#${gradientId})` : stroke; const strokeProps = { stroke: showStroke ? resolvedStroke : "transparent", strokeDasharray, strokeLinecap: "round" as const, strokeOpacity, strokeWidth, }; return ( {strokeStyle === "gradient" && geometry ? ( ) : null} {renderProjectionStroke({ bezierPath, curve, curveKind, data, getX, getY, linearPath, strokeProps, })} ); } ProjectionLine.displayName = "ProjectionLine"; export default ProjectionLine; 53:T663,"use client"; import { useCallback } from "react"; import { useChartStable, useYScale } from "./chart-context"; import type { ProjectionPoint } from "./projection-utils"; export interface ProjectionLineEndMarkerProps { data: ProjectionPoint[]; yAxisId?: string | number; stroke?: string; strokeOpacity?: number; radius?: number; } /** Renders the projection horizon dot outside the series reveal clip. */ export function ProjectionLineEndMarker({ data, yAxisId, stroke = "var(--chart-3)", strokeOpacity = 1, radius = 5, }: ProjectionLineEndMarkerProps) { const { xScale, chartPhase, innerWidth } = useChartStable(); const yScale = useYScale(yAxisId); const getX = useCallback( (point: ProjectionPoint) => xScale(point.date) ?? 0, [xScale] ); const getY = useCallback( (point: ProjectionPoint) => yScale(point.value) ?? 0, [yScale] ); const showStroke = chartPhase === "revealing" || chartPhase === "ready" || chartPhase === "exitingReady"; if (!showStroke || data.length < 2) { return null; } const endPoint = data.at(-1); if (!endPoint) { return null; } const edgePadding = radius + 1; const endX = Math.min(getX(endPoint), Math.max(0, innerWidth - edgePadding)); const endY = getY(endPoint); return ( ); } ProjectionLineEndMarker.displayName = "ProjectionLineEndMarker"; ( ProjectionLineEndMarker as unknown as Record ).__isPostOverlay = true; export default ProjectionLineEndMarker; 54: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 }; } 55:T94b,"use client"; import { motion } from "motion/react"; import { useMemo } from "react"; import { useChartStable, useYScale } from "./chart-context"; import { StaticSeriesPointMarker } from "./series-point-marker"; export interface LineSeriesTerminalMarkerProps { dataKey: string; yAxisId?: string | number; fill?: string; stroke?: string; radius?: number; ringGap?: number; strokeWidth?: number; } function isTerminalMarkerPhaseVisible(phase: string): boolean { return phase === "ready" || phase === "exitingReady"; } /** Hollow ring at the last data point — shared anchor for projection lines. */ export function LineSeriesTerminalMarker({ dataKey, yAxisId, fill = "transparent", stroke = "var(--chart-1)", radius = 5, ringGap = 0, strokeWidth = 1.5, }: LineSeriesTerminalMarkerProps) { const { data, xScale, xAccessor, chartPhase, revealEpoch, enterTransition } = useChartStable(); const yScale = useYScale(yAxisId); const point = useMemo(() => { const lastRow = data.at(-1); if (!lastRow) { return null; } const value = lastRow[dataKey]; if (typeof value !== "number") { return null; } return { cx: xScale(xAccessor(lastRow)) ?? 0, cy: yScale(value) ?? 0, }; }, [data, dataKey, xAccessor, xScale, yScale]); const visible = isTerminalMarkerPhaseVisible(chartPhase); const fadeTransition = enterTransition && typeof enterTransition === "object" ? enterTransition : { duration: 0.28, ease: [0.22, 1, 0.36, 1] as const }; if (!point) { return null; } return ( ); } LineSeriesTerminalMarker.displayName = "LineSeriesTerminalMarker"; ( LineSeriesTerminalMarker as unknown as Record ).__isPostOverlay = true; export default LineSeriesTerminalMarker; 4f:["$","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","@visx/shape@4.0.1-alpha.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40visx%2Fshape","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":"@visx/shape@4.0.1-alpha.0"}]]}]}],["$","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"}]]}]}]]}],["$","$L50",null,{"namespace":"@bklit","registryDependencies":["@bklit/chart-context","@bklit/line-chart"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/charts/projection-line.tsx","content":"$52","type":"registry:component","target":"components/charts/projection-line.tsx"},{"path":"src/charts/projection-line-end-marker.tsx","content":"$53","type":"registry:component","target":"components/charts/projection-line-end-marker.tsx"},{"path":"src/charts/projection-utils.ts","content":"$54","type":"registry:component","target":"components/charts/projection-utils.ts"},{"path":"src/charts/line-series-terminal-marker.tsx","content":"$55","type":"registry:component","target":"components/charts/line-series-terminal-marker.tsx"}],"className":"h-[70svh] min-h-80"}]]}]