Chart Markers

1"use client";
2 
3import { useCallback, useMemo } from "react";
4import { chartCssVars, useChart, useChartHover } from "../chart-context";
5import { type ChartMarker, MarkerGroup } from "./marker-group";
6 
7export interface ChartMarkersProps {
8  /** Array of markers to display */
9  items: ChartMarker[];
10  /** Size of each marker circle. Default: 28 */
11  size?: number;
12  /** Whether to show vertical guide lines. Default: true */
13  showLines?: boolean;
14  /** Whether to animate markers on entrance. Default: true */
15  animate?: boolean;
16}
17 
18// Tooltip content for markers
19export interface MarkerTooltipContentProps {
20  markers: ChartMarker[];
21}
22 
23const MAX_TOOLTIP_MARKERS = 2;
24 
25export function MarkerTooltipContent({ markers }: MarkerTooltipContentProps) {
26  if (markers.length === 0) {
27    return null;
28  }
29 
30  const visibleMarkers = markers.slice(0, MAX_TOOLTIP_MARKERS);
31  const hiddenCount = markers.length - MAX_TOOLTIP_MARKERS;
32 
33  return (
34    <div className="mt-2 space-y-2 border-chart-tooltip-muted border-t pt-2">
35      {visibleMarkers.map((marker) => {
36        const isClickable = !!(marker.onClick || marker.href);
37        return (
38          <div className="flex items-start gap-2" key={marker.title}>
39            <div
40              className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full"
41              style={{
42                backgroundColor: marker.color || chartCssVars.markerBackground,
43                border: `1px solid ${chartCssVars.markerBorder}`,
44              }}
45            >
46              <span
47                className="text-xs"
48                style={{ color: chartCssVars.markerForeground }}
49              >
50                {marker.icon}
51              </span>
52            </div>
53            <div className="min-w-0 flex-1">
54              {marker.content ? (
55                marker.content
56              ) : (
57                <>
58                  <div className="flex items-center gap-1.5 truncate font-medium text-chart-tooltip-foreground text-sm">
59                    {marker.title}
60                    {isClickable && (
61                      <span className="text-[10px] text-chart-tooltip-muted">
62                        ↗
63                      </span>
64                    )}
65                  </div>
66                  {marker.description && (
67                    <div className="truncate text-chart-tooltip-muted text-xs">
68                      {marker.description}
69                    </div>
70                  )}
71                </>
72              )}
73// … truncated