X Axis

1"use client";
2 
3import { memo, useEffect, useMemo, useState } from "react";
4import { createPortal } from "react-dom";
5import { cn } from "@/lib/utils";
6import { useChart, useChartStable } from "./chart-context";
7import { shortDateFmt } from "./chart-formatters";
8import { DEFAULT_Y_DOMAIN_TWEEN_MS } from "./chart-phase";
9import { LINE_LOADING_PULSE_EASE } from "./line-loading-timing";
10 
11const X_AXIS_POSITION_TWEEN_MS = DEFAULT_Y_DOMAIN_TWEEN_MS;
12 
13export interface XAxisProps {
14  /** Number of ticks to show (including first and last). Default: 5. */
15  numTicks?: number;
16  /** Width of the date ticker box for fade calculation. Default: 50 */
17  tickerHalfWidth?: number;
18  /**
19   * `"data"` — tick labels snap to data rows so crosshair and tooltip stay aligned (default).
20   * `"domain"` — evenly spaced ticks across the time domain (may not align with hover).
21   */
22  tickMode?: "domain" | "data";
23}
24 
25interface AxisTick {
26  date: Date;
27  x: number;
28  label: string;
29}
30 
31interface XAxisLabelProps {
32  label: string;
33  x: number;
34  crosshairX: number | null;
35  hoveredLabel: string | null;
36  isHovering: boolean;
37  tickerHalfWidth: number;
38  animatePosition: boolean;
39}
40 
41function XAxisLabel({
42  label,
43  x,
44  crosshairX,
45  hoveredLabel,
46  isHovering,
47  tickerHalfWidth,
48  animatePosition,
49}: XAxisLabelProps) {
50  const fadeBuffer = 20;
51  const fadeRadius = tickerHalfWidth + fadeBuffer;
52 
53  let opacity = 1;
54  if (isHovering && crosshairX !== null) {
55    const distance = Math.abs(x - crosshairX);
56    if (distance < tickerHalfWidth) {
57      opacity = 0;
58    } else if (hoveredLabel && label === hoveredLabel) {
59      opacity = 0;
60    } else if (distance < fadeRadius) {
61      opacity = (distance - tickerHalfWidth) / fadeBuffer;
62    }
63  }
64 
65  return (
66    <div
67      className="absolute"
68      style={{
69        left: x,
70        bottom: 12,
71        width: 0,
72        display: "flex",
73        justifyContent: "center",
74        transition: animatePosition
75          ? `left ${X_AXIS_POSITION_TWEEN_MS}ms cubic-bezier(${LINE_LOADING_PULSE_EASE.join(", ")})`
76          : undefined,
77      }}
78    >
79      <span
80        className={cn("whitespace-nowrap text-chart-label text-xs")}
81        style={{
82          opacity,
83          transition: "opacity 0.4s ease-in-out",
84        }}
85      >
86        {label}
87      </span>
88    </div>
89  );
90}
91 
92const MAX_GAP_LAYOUTS = 400;
93 
94function binomial(n: number, k: number): number {
95  if (k < 0 || k > n) {
96    return 0;
97  }
98  let result = 1;
99// … truncated