Y Axis

1"use client";
2 
3import { memo, useEffect, useMemo, useState } from "react";
4import { createPortal } from "react-dom";
5import { useChartStable, useYScale } from "./chart-context";
6import { DEFAULT_Y_DOMAIN_TWEEN_MS } from "./chart-phase";
7import { LINE_LOADING_PULSE_EASE } from "./line-loading-timing";
8import { resolveReferenceDataRange } from "./reference-area-geometry";
9import type { YAxisOrientation } from "./y-axis-scales";
10import { normalizeYAxisId } from "./y-axis-scales";
11import {
12  resolveYAxisTickCount,
13  Y_AXIS_DEFAULT_TICK_COUNT,
14} from "./y-axis-ticks";
15 
16const Y_AXIS_POSITION_TWEEN_MS = DEFAULT_Y_DOMAIN_TWEEN_MS;
17 
18export interface YAxisProps {
19  /** Scale group id (Recharts `yAxisId`). Default: `"left"`. */
20  yAxisId?: string | number;
21  /** Which side of the chart to render labels. Default: `"left"`. */
22  orientation?: YAxisOrientation;
23  /**
24   * Approximate tick count hint for `scale.ticks()` (d3). Actual label count may differ.
25   * Clamped to {@link Y_AXIS_MIN_TICK_COUNT}–{@link Y_AXIS_MAX_TICK_COUNT}. Default: 5.
26   */
27  numTicks?: number;
28  /** Format large numbers (e.g. 1000 as "1k"). Default: true */
29  formatLargeNumbers?: boolean;
30  /** Custom formatter for tick labels (e.g. USD). Overrides formatLargeNumbers when set. */
31  formatValue?: (value: number) => string;
32}
33 
34function formatLabel(
35  value: number,
36  formatLargeNumbers: boolean,
37  formatValue?: (value: number) => string
38): string {
39  if (formatValue) {
40    return formatValue(value);
41  }
42  if (formatLargeNumbers && value >= 1000) {
43    return `${(value / 1000).toFixed(0)}k`;
44  }
45  return String(value);
46}
47 
48function resolveTickLabelColor(
49  tickY: number,
50  axisId: string,
51  yScale: ReturnType<typeof useYScale>,
52  referenceAreas: ReturnType<typeof useChartStable>["referenceAreas"]
53): string | undefined {
54  for (const area of referenceAreas) {
55    if (!area.axisLabelColor) {
56      continue;
57    }
58    if (normalizeYAxisId(area.yAxisId) !== axisId) {
59      continue;
60    }
61    const [low, high] = resolveReferenceDataRange(
62      area.y1,
63      area.y2,
64      yScale.domain() as [number, number]
65    );
66    const topPixel = yScale(high) ?? 0;
67    const bottomPixel = yScale(low) ?? 0;
68    const bandTop = Math.min(topPixel, bottomPixel);
69    const bandBottom = Math.max(topPixel, bottomPixel);
70    if (tickY >= bandTop && tickY <= bandBottom) {
71      return area.axisLabelColor;
72    }
73  }
74  return undefined;
75}
76 
77export function YAxis(props: YAxisProps) {
78// … truncated