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:T159b,"use client"; import { curveLinear } from "@visx/curve"; import { LinePath } from "@visx/shape"; import { useCallback, useId, useMemo } from "react"; import { useChart, useChartStable } from "./chart-context"; import { type FadeEdges, fadeGradientStops, resolveFadeSides, } from "./fade-edges"; import { useProfitLossLegendHover } from "./profit-loss-legend-hover"; import { splitProfitLossSegments } from "./profit-loss-segments"; // CurveFactory type - simplified version compatible with visx // biome-ignore lint/suspicious/noExplicitAny: d3 curve factory type type CurveFactory = any; export const PROFIT_LOSS_POSITIVE_COLOR = "var(--color-emerald-500)"; export const PROFIT_LOSS_NEGATIVE_COLOR = "var(--color-red-500)"; const LEGEND_DIM_OPACITY = 0.25; export function profitLossColor(value: number) { return value >= 0 ? PROFIT_LOSS_POSITIVE_COLOR : PROFIT_LOSS_NEGATIVE_COLOR; } export const PROFIT_LOSS_TOOLTIP_LABEL_FALLBACK = "Profit/Loss"; export function resolveProfitLossTooltipLabel(label: string) { const trimmed = label.trim(); return trimmed || PROFIT_LOSS_TOOLTIP_LABEL_FALLBACK; } export interface ProfitLossLineProps { dataKey: string; xDataKey?: string; strokeWidth?: number; positiveColor?: string; negativeColor?: string; /** Curve function. Default: curveLinear */ curve?: CurveFactory; /** * Fade the line stroke toward transparent at the chart edges. * Default: false */ fadeEdges?: FadeEdges; } function segmentLegendIndex(isPositive: boolean) { return isPositive ? 0 : 1; } export function ProfitLossLine({ dataKey, xDataKey = "date", strokeWidth = 2.5, positiveColor = PROFIT_LOSS_POSITIVE_COLOR, negativeColor = PROFIT_LOSS_NEGATIVE_COLOR, curve = curveLinear, fadeEdges = false, }: ProfitLossLineProps) { const { tooltipData } = useChart(); const { hoveredIndex } = useProfitLossLegendHover(); const { renderData, xScale, yScale, xAccessor, innerWidth } = useChartStable(); const reactId = useId(); const fadeSides = resolveFadeSides(fadeEdges); const fadeStops = fadeSides.any ? fadeGradientStops(fadeSides) : null; const positiveGradientId = `profit-loss-gradient-pos-${dataKey}-${reactId}`; const negativeGradientId = `profit-loss-gradient-neg-${dataKey}-${reactId}`; const focusedLegendIndex = useMemo(() => { if (hoveredIndex !== null) { return hoveredIndex; } if (!tooltipData) { return null; } const value = tooltipData.point[dataKey]; if (typeof value !== "number") { return null; } return segmentLegendIndex(value >= 0); }, [dataKey, hoveredIndex, tooltipData]); const segments = useMemo( () => splitProfitLossSegments({ data: renderData, dataKey, xDataKey, xAccessor, }), [dataKey, renderData, xAccessor, xDataKey] ); const getX = useCallback( (d: Record) => xScale(xAccessor(d)) ?? 0, [xAccessor, xScale] ); const getY = useCallback( (d: Record) => { const value = d[dataKey]; return typeof value === "number" ? (yScale(value) ?? 0) : 0; }, [dataKey, yScale] ); return ( <> {fadeStops ? ( {fadeStops.map((stop) => ( ))} {fadeStops.map((stop) => ( ))} ) : null} {segments.map((segment) => { const isDimmed = focusedLegendIndex !== null && focusedLegendIndex !== segmentLegendIndex(segment.isPositive); const firstPoint = segment.data[0]; const lastPoint = segment.data.at(-1); const segmentKey = `${dataKey}-${segment.isPositive ? "pos" : "neg"}-${String(firstPoint?.[xDataKey])}-${String(lastPoint?.[xDataKey])}`; const stroke = segment.isPositive ? positiveColor : negativeColor; const segmentStroke = fadeStops ? `url(#${segment.isPositive ? positiveGradientId : negativeGradientId})` : stroke; return ( ); })} ); } ProfitLossLine.displayName = "ProfitLossLine"; 53:Taf0,type SegmentSign = "positive" | "negative"; export interface ProfitLossSegment { data: Record[]; isPositive: boolean; } function resolveSign(value: number, fallback: SegmentSign): SegmentSign { if (value > 0) { return "positive"; } if (value < 0) { return "negative"; } return fallback; } function findInitialSign( data: Record[], dataKey: string ): SegmentSign { for (const row of data) { const value = row[dataKey]; if (typeof value !== "number") { continue; } if (value > 0) { return "positive"; } if (value < 0) { return "negative"; } } return "positive"; } function interpolateZeroCrossing( a: Record, b: Record, dataKey: string, xDataKey: string, xAccessor: (d: Record) => Date ): Record { const ya = a[dataKey] as number; const yb = b[dataKey] as number; const t = ya / (ya - yb); const start = xAccessor(a).getTime(); const end = xAccessor(b).getTime(); const crossDate = new Date(start + t * (end - start)); return { ...a, [xDataKey]: crossDate, [dataKey]: 0, }; } /** Split a single series into contiguous segments above/below zero. */ export function splitProfitLossSegments({ data, dataKey, xDataKey = "date", xAccessor, }: { data: Record[]; dataKey: string; xDataKey?: string; xAccessor: (d: Record) => Date; }): ProfitLossSegment[] { if (data.length === 0) { return []; } const segments: ProfitLossSegment[] = []; let currentSign = findInitialSign(data, dataKey); const firstPoint = data[0]; if (!firstPoint) { return []; } let currentSegment: Record[] = [firstPoint]; for (let i = 0; i < data.length - 1; i++) { const a = data[i]; const b = data[i + 1]; if (!(a && b)) { continue; } const ya = a[dataKey] as number; const yb = b[dataKey] as number; if ( typeof ya === "number" && typeof yb === "number" && ya !== 0 && yb !== 0 && Math.sign(ya) !== Math.sign(yb) ) { const cross = interpolateZeroCrossing(a, b, dataKey, xDataKey, xAccessor); currentSegment.push(cross); segments.push({ data: currentSegment, isPositive: currentSign === "positive", }); currentSegment = [cross, b]; currentSign = resolveSign(yb, currentSign); continue; } currentSegment.push(b); if (typeof yb === "number" && yb !== 0) { currentSign = resolveSign(yb, currentSign); } } if (currentSegment.length > 0) { segments.push({ data: currentSegment, isPositive: currentSign === "positive", }); } return segments; } 54:T5ba,"use client"; import { cn } from "@/lib/utils"; import { Legend, LegendItem, LegendLabel, LegendMarker } from "./legend/index"; import { PROFIT_LOSS_NEGATIVE_COLOR, PROFIT_LOSS_POSITIVE_COLOR, } from "./profit-loss-line"; export const PROFIT_LOSS_LEGEND_ITEMS = [ { label: "Profit", value: 0, color: PROFIT_LOSS_POSITIVE_COLOR }, { label: "Loss", value: 0, color: PROFIT_LOSS_NEGATIVE_COLOR }, ] as const; export interface ProfitLossLegendProps { hoveredIndex?: number | null; onHoverChange?: (index: number | null) => void; align?: "start" | "center" | "end"; className?: string; } const LEGEND_ALIGN_CLASSES: Record< NonNullable, string > = { start: "justify-start", center: "justify-center", end: "justify-end", }; export function ProfitLossLegend({ hoveredIndex = null, onHoverChange, align = "start", className, }: ProfitLossLegendProps) { return (

); } 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/curve@4.0.1-alpha.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40visx%2Fcurve","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/curve@4.0.1-alpha.0"}]]}]}],["$","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"}]]}]}]]}],["$","$L50",null,{"namespace":"@bklit","registryDependencies":["@bklit/line-chart","@bklit/grid","@bklit/x-axis","@bklit/chart-tooltip","@bklit/legend","@bklit/utils"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/charts/profit-loss-line.tsx","content":"$52","type":"registry:component","target":"components/charts/profit-loss-line.tsx"},{"path":"src/charts/profit-loss-segments.ts","content":"$53","type":"registry:lib","target":"lib/profit-loss-segments.ts"},{"path":"src/charts/profit-loss-legend-hover.tsx","content":"\"use client\";\n\nimport { createContext, type ReactNode, useContext } from \"react\";\n\ninterface ProfitLossLegendHoverContextValue {\n hoveredIndex: number | null;\n}\n\nconst ProfitLossLegendHoverContext =\n createContext(null);\n\nexport function ProfitLossLegendHoverProvider({\n hoveredIndex,\n children,\n}: {\n hoveredIndex: number | null;\n children: ReactNode;\n}) {\n return (\n \n {children}\n \n );\n}\n\nexport function useProfitLossLegendHover(): ProfitLossLegendHoverContextValue {\n const context = useContext(ProfitLossLegendHoverContext);\n return context ?? { hoveredIndex: null };\n}\n","type":"registry:component","target":"components/charts/profit-loss-legend-hover.tsx"},{"path":"src/charts/profit-loss-legend.tsx","content":"$54","type":"registry:component","target":"components/charts/profit-loss-legend.tsx"}],"className":"h-[70svh] min-h-80"}]]}]