Projection Line

1"use client";
2 
3import { curveLinear } from "@visx/curve";
4import { LinePath } from "@visx/shape";
5import { useCallback, useId, useMemo } from "react";
6import { useChartStable, useYScale } from "./chart-context";
7import {
8  buildHorizontalTangentBezierPath,
9  type ProjectionCurveKind,
10  type ProjectionPoint,
11} from "./projection-utils";
12 
13// biome-ignore lint/suspicious/noExplicitAny: d3 curve factory type
14type CurveFactory = any;
15 
16export type ProjectionStrokeStyle = "solid" | "gradient";
17 
18export interface ProjectionLineProps {
19  /** Projection path points — anchor (last data row) + horizon end. */
20  data: ProjectionPoint[];
21  /** Y-scale group id. Default: `"left"`. */
22  yAxisId?: string | number;
23  /** Solid stroke color. Default: var(--chart-3) */
24  stroke?: string;
25  /** Solid or path-aligned gradient stroke. Default: solid */
26  strokeStyle?: ProjectionStrokeStyle;
27  /** Gradient start color when `strokeStyle` is gradient. Default: `stroke` */
28  gradientStart?: string;
29  /** Gradient end color when `strokeStyle` is gradient. Default: var(--chart-5) */
30  gradientEnd?: string;
31  /** Stroke width. Default: 2 */
32  strokeWidth?: number;
33  /** Straight segment or horizontal-tangent S-curve. Default: linear */
34  curveKind?: ProjectionCurveKind;
35  /** Advanced curve override (used when `curveKind` is omitted). */
36  curve?: CurveFactory;
37  /** Dash pattern. Default: "6,4" */
38  strokeDasharray?: string;
39  /** Stroke opacity. Default: 1 */
40  strokeOpacity?: number;
41  /** Show horizon endpoint marker. Default: true */
42  showEndMarker?: boolean;
43  /** @deprecated Use `showEndMarker`. */
44  showEndpoints?: boolean;
45  /** Endpoint marker radius. Default: 5 */
46  endpointRadius?: number;
47  className?: string;
48}
49 
50function resolveVisibleEndX(
51  endX: number,
52  innerWidth: number,
53  endpointRadius: number,
54  strokeWidth: number
55): number {
56  const edgePadding = endpointRadius + strokeWidth * 0.5 + 1;
57  return Math.min(endX, Math.max(0, innerWidth - edgePadding));
58}
59 
60function renderProjectionStroke({
61  bezierPath,
62  curve,
63  curveKind,
64  data,
65  getX,
66  getY,
67  linearPath,
68  strokeProps,
69}: {
70  bezierPath: string | null;
71  curve: CurveFactory | undefined;
72  curveKind: ProjectionCurveKind;
73  data: ProjectionPoint[];
74  getX: (point: ProjectionPoint) => number;
75  getY: (point: ProjectionPoint) => number;
76  linearPath: string | null;
77  strokeProps: {
78    stroke: string;
79    strokeDasharray: string;
80    strokeLinecap: "round";
81    strokeOpacity: number;
82    strokeWidth: number;
83// … truncated