Chart Series Layer

1"use client";
2 
3import { type MotionValue, motion } from "motion/react";
4import { type RefObject, useId } from "react";
5 
6// Hover-highlight overlay: re-strokes the base path `d`, clipped to a vertical
7// band whose x/width spring to track the hovered point, so only the segment
8// around the dot shows brighter. The band comes from `useHighlightSegment`;
9// because the bright stroke reuses the base `d`, it follows whatever curve is
10// drawn (see `highlight-segment-bounds.ts` for the band-extent caveat).
11 
12export interface HighlightSegmentProps {
13  /** Ref to the rendered base stroke `<path>` — its `d` is re-used verbatim. */
14  pathRef: RefObject<SVGPathElement | null>;
15  /** Whether to render (caller gates on showHighlight + active + loaded). */
16  visible: boolean;
17  stroke: string;
18  strokeWidth: number;
19  /** Plot height — the clip band spans it fully. */
20  height: number;
21  /** Spring-eased left edge of the clip band (px). */
22  x: MotionValue<number>;
23  /** Spring-eased width of the clip band (px). */
24  width: MotionValue<number>;
25}
26 
27export function HighlightSegment({
28  pathRef,
29  visible,
30  stroke,
31  strokeWidth,
32  height,
33  x,
34  width,
35}: HighlightSegmentProps) {
36  const clipId = useId();
37  if (!(visible && pathRef.current)) {
38    return null;
39  }
40  return (
41    <>
42      <defs>
43        <clipPath id={clipId}>
44          <motion.rect height={height} width={width} x={x} y={0} />
45        </clipPath>
46      </defs>
47      <motion.path
48        animate={{ opacity: 1 }}
49        clipPath={`url(#${clipId})`}
50        d={pathRef.current.getAttribute("d") || ""}
51        exit={{ opacity: 0 }}
52        fill="none"
53        initial={{ opacity: 0 }}
54        stroke={stroke}
55        strokeLinecap="round"
56        strokeWidth={strokeWidth}
57        transition={{ duration: 0.4, ease: "easeInOut" }}
58      />
59    </>
60  );
61}
62 
63HighlightSegment.displayName = "HighlightSegment";
64 
65export default HighlightSegment;