4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T1339,"use client"; import { memo, useEffect, useMemo, useState } from "react"; import { createPortal } from "react-dom"; import { useChartStable, useYScale } from "./chart-context"; import { DEFAULT_Y_DOMAIN_TWEEN_MS } from "./chart-phase"; import { LINE_LOADING_PULSE_EASE } from "./line-loading-timing"; import { resolveReferenceDataRange } from "./reference-area-geometry"; import type { YAxisOrientation } from "./y-axis-scales"; import { normalizeYAxisId } from "./y-axis-scales"; import { resolveYAxisTickCount, Y_AXIS_DEFAULT_TICK_COUNT, } from "./y-axis-ticks"; const Y_AXIS_POSITION_TWEEN_MS = DEFAULT_Y_DOMAIN_TWEEN_MS; export interface YAxisProps { /** Scale group id (Recharts `yAxisId`). Default: `"left"`. */ yAxisId?: string | number; /** Which side of the chart to render labels. Default: `"left"`. */ orientation?: YAxisOrientation; /** * Approximate tick count hint for `scale.ticks()` (d3). Actual label count may differ. * Clamped to {@link Y_AXIS_MIN_TICK_COUNT}–{@link Y_AXIS_MAX_TICK_COUNT}. Default: 5. */ numTicks?: number; /** Format large numbers (e.g. 1000 as "1k"). Default: true */ formatLargeNumbers?: boolean; /** Custom formatter for tick labels (e.g. USD). Overrides formatLargeNumbers when set. */ formatValue?: (value: number) => string; } function formatLabel( value: number, formatLargeNumbers: boolean, formatValue?: (value: number) => string ): string { if (formatValue) { return formatValue(value); } if (formatLargeNumbers && value >= 1000) { return `${(value / 1000).toFixed(0)}k`; } return String(value); } function resolveTickLabelColor( tickY: number, axisId: string, yScale: ReturnType, referenceAreas: ReturnType["referenceAreas"] ): string | undefined { for (const area of referenceAreas) { if (!area.axisLabelColor) { continue; } if (normalizeYAxisId(area.yAxisId) !== axisId) { continue; } const [low, high] = resolveReferenceDataRange( area.y1, area.y2, yScale.domain() as [number, number] ); const topPixel = yScale(high) ?? 0; const bottomPixel = yScale(low) ?? 0; const bandTop = Math.min(topPixel, bottomPixel); const bandBottom = Math.max(topPixel, bottomPixel); if (tickY >= bandTop && tickY <= bandBottom) { return area.axisLabelColor; } } return undefined; } export function YAxis(props: YAxisProps) { const { containerRef } = useChartStable(); const [mounted, setMounted] = useState(false); useEffect(() => { setMounted(true); }, []); const container = containerRef.current; if (!(mounted && container)) { return null; } return ; } const YAxisInner = memo(function YAxisInner({ yAxisId, orientation = "left", numTicks = Y_AXIS_DEFAULT_TICK_COUNT, formatLargeNumbers = true, formatValue, container, }: YAxisProps & { container: HTMLDivElement }) { const { margin, referenceAreas } = useChartStable(); const yScale = useYScale(yAxisId); const isLeft = orientation === "left"; const axisId = normalizeYAxisId(yAxisId); const ticks = useMemo(() => { const tickValues = yScale.ticks(resolveYAxisTickCount(numTicks)); return tickValues.map((value) => { const y = (yScale(value) ?? 0) + margin.top; return { value, y, label: formatLabel(value, formatLargeNumbers, formatValue), labelColor: resolveTickLabelColor( y - margin.top, axisId, yScale, referenceAreas ), }; }); }, [ yScale, margin.top, numTicks, formatLargeNumbers, formatValue, axisId, referenceAreas, ]); return createPortal(

{ticks.map((tick) => (

{tick.label}

))}

, container ); }); YAxis.displayName = "YAxis"; export default YAxis; 51:Tc67,export type ReferenceAreaIfOverflow = "hidden" | "visible" | "discard"; export interface ReferenceAreaRect { x: number; y: number; width: number; height: number; } export interface ComputeReferenceAreaRectOptions { innerWidth: number; innerHeight: number; x1?: Date | number; x2?: Date | number; y1?: number; y2?: number; ifOverflow?: ReferenceAreaIfOverflow; xScale: (value: Date) => number; yScale: (value: number) => number; } function toDate(value: Date | number): Date { return value instanceof Date ? value : new Date(value); } function resolveXPixel( xScale: (value: Date) => number, value: Date | number | undefined, fallback: number ): number { if (value == null) { return fallback; } return xScale(toDate(value)); } function resolveYPixel( yScale: (value: number) => number, value: number | undefined, fallback: number ): number { if (value == null) { return fallback; } return yScale(value); } function clampRectToPlot( rect: ReferenceAreaRect, innerWidth: number, innerHeight: number ): ReferenceAreaRect | null { const x1 = Math.max(0, rect.x); const y1 = Math.max(0, rect.y); const x2 = Math.min(innerWidth, rect.x + rect.width); const y2 = Math.min(innerHeight, rect.y + rect.height); const width = x2 - x1; const height = y2 - y1; if (width <= 0 || height <= 0) { return null; } return { x: x1, y: y1, width, height }; } function isFullyInsidePlot( rect: ReferenceAreaRect, innerWidth: number, innerHeight: number ): boolean { return ( rect.x >= 0 && rect.y >= 0 && rect.x + rect.width <= innerWidth && rect.y + rect.height <= innerHeight ); } /** Map data bounds to plot pixels for a reference rectangle. */ export function computeReferenceAreaRect( options: ComputeReferenceAreaRectOptions ): ReferenceAreaRect | null { const { innerWidth, innerHeight, x1, x2, y1, y2, ifOverflow = "hidden", xScale, yScale, } = options; if (innerWidth <= 0 || innerHeight <= 0) { return null; } const left = resolveXPixel(xScale, x1, 0); const right = resolveXPixel(xScale, x2, innerWidth); const top = resolveYPixel(yScale, y1, 0); const bottom = resolveYPixel(yScale, y2, innerHeight); const x = Math.min(left, right); const y = Math.min(top, bottom); const width = Math.abs(right - left); const height = Math.abs(bottom - top); if (width <= 0 || height <= 0) { return null; } const rect: ReferenceAreaRect = { x, y, width, height }; if (ifOverflow === "visible") { return rect; } if (ifOverflow === "discard") { return isFullyInsidePlot(rect, innerWidth, innerHeight) ? rect : null; } return clampRectToPlot(rect, innerWidth, innerHeight); } /** Inclusive data range for axis label highlighting. */ export function resolveReferenceDataRange( y1: number | undefined, y2: number | undefined, domain: [number, number] ): [number, number] { const dMin = Math.min(domain[0], domain[1]); const dMax = Math.max(domain[0], domain[1]); const low = y1 ?? dMin; const high = y2 ?? dMax; return [Math.min(low, high), Math.max(low, high)]; } 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L4e",null,{"namespace":"@bklit","registryDependencies":["@bklit/chart-context","@bklit/utils"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"src/charts/y-axis.tsx","content":"$50","type":"registry:component","target":"components/charts/y-axis.tsx"},{"path":"src/charts/reference-area-geometry.ts","content":"$51","type":"registry:lib","target":"components/charts/reference-area-geometry.ts"}],"className":"h-[70svh] min-h-80"}]]}]