Chart Tooltip

1"use client";
2 
3import { motion, useSpring } from "motion/react";
4import { memo, useEffect, useMemo, useState } from "react";
5import { createPortal } from "react-dom";
6import {
7  resolveTooltipBoxMotion,
8  type SpringConfig,
9  useChartConfig,
10} from "../chart-config-context";
11import {
12  chartCssVars,
13  type LineConfig,
14  useChart,
15  useChartStable,
16} from "../chart-context";
17import { weekdayDateFmt } from "../chart-formatters";
18import type { IndicatorFadeEdges } from "../indicator-fade";
19import { DateTicker } from "./date-ticker";
20import { TooltipBox } from "./tooltip-box";
21import { TooltipContent, type TooltipRow } from "./tooltip-content";
22import { TooltipDot } from "./tooltip-dot";
23import { TooltipIndicator } from "./tooltip-indicator";
24 
25export interface ChartTooltipProps {
26  /** Whether to show the date pill at bottom. Default: true */
27  showDatePill?: boolean;
28  /** Whether to show the vertical crosshair line. Default: true */
29  showCrosshair?: boolean;
30  /** Whether to show dots on the lines. Default: true */
31  showDots?: boolean;
32  /** Dot style: filled circle or transparent ring. Default: "dot" */
33  dotVariant?: "dot" | "ring";
34  /** Dot / ring radius in pixels. Default: 5 */
35  dotSize?: number;
36  /** Ring corner radius as a fraction of side length (0 = square, 0.5 = circle). */
37  dotRadiusFraction?: number;
38  /** Multiplier applied to the computed dot / ring pixel radius. Default: 1 */
39  dotScale?: number;
40  /** Ring stroke width in pixels. Default: 1.5 for ring variant */
41  dotStrokeWidth?: number;
42  /**
43   * Color for the crosshair/indicator line. When a function, receives the hovered point
44   * (e.g. for candlestick: match candle color from close vs open). Default: --chart-crosshair.
45   */
46  indicatorColor?: string | ((point: Record<string, unknown>) => string);
47  /** Custom content renderer for the tooltip box */
48  content?: (props: {
49    point: Record<string, unknown>;
50    index: number;
51  }) => React.ReactNode;
52  /** Custom row renderer - return array of TooltipRow */
53  rows?: (point: Record<string, unknown>) => TooltipRow[];
54  /**
55   * Override tooltip dot fill. When omitted and `rows` is set, dot colors match row colors.
56   * When a function, receives the hovered point and line config.
57   */
58  dotColor?:
59    | string
60    | ((point: Record<string, unknown>, line: LineConfig) => string);
61  /** Additional content to show below rows (e.g., markers) */
62  children?: React.ReactNode;
63  /** Custom class name */
64  className?: string;
65// … truncated