recharts-dot

1import { cn } from "@/lib/utils";
2import * as React from "react";
3 
4export type DotVariant = "default" | "border" | "colored-border";
5 
6type ChartDotProps = {
7  cx?: number;
8  cy?: number;
9  dataKey: string;
10  chartId: string;
11  className?: string;
12  fillOpacity?: number;
13  type?: DotVariant;
14  /** Optional SVG <mask> id — lets the dot share an area's intro reveal wipe. */
15  maskId?: string;
16};
17 
18const ChartDot = React.memo(function ChartDot({
19  cx,
20  cy,
21  dataKey,
22  chartId,
23  className,
24  fillOpacity = 1,
25  type = "default",
26  maskId,
27}: ChartDotProps) {
28  const dotId = React.useId().replace(/:/g, "");
29  const gradientUrl = `url(#${chartId}-colors-${String(dataKey)})`;
30 
31  if (cx === undefined || cy === undefined) return null;
32 
33  switch (type) {
34    case "border":
35      return (
36        <PrimaryBorderDot
37          cx={cx}
38          cy={cy}
39          dotId={dotId}
40          fillOpacity={fillOpacity}
41          gradientUrl={gradientUrl}
42          className={className}
43          maskId={maskId}
44        />
45      );
46    case "colored-border":
47      return (
48        <ColoredBorderDot
49          cx={cx}
50          cy={cy}
51          dotId={dotId}
52          fillOpacity={fillOpacity}
53          gradientUrl={gradientUrl}
54          className={className}
55          maskId={maskId}
56        />
57      );
58    default:
59      return (
60        <DefaultDot
61          cx={cx}
62          cy={cy}
63          dotId={dotId}
64          fillOpacity={fillOpacity}
65          gradientUrl={gradientUrl}
66          className={className}
67          maskId={maskId}
68        />
69      );
70  }
71});
72 
73type DotVariantProps = {
74  cx: number;
75  cy: number;
76  dotId: string;
77  fillOpacity: number;
78  gradientUrl: string;
79  className?: string;
80  maskId?: string;
81};
82 
83const DefaultDot = React.memo(
84  ({ cx, cy, dotId, fillOpacity, gradientUrl, className, maskId }: DotVariantProps) => {
85    const r = 3;
86    return (
87      <g className={className} mask={maskId ? `url(#${maskId})` : undefined}>
88        <defs>
89          <clipPath id={`dot-clip-${dotId}`}>
90            <circle cx={cx} cy={cy} r={r} />
91          </clipPath>
92        </defs>
93        {/* Full-width gradient rectangle clipped to dot shape */}
94        <rect
95          x="0"
96          y={cy - r}
97          width="100%"
98          height={r * 2}
99          fill={gradientUrl}
100          fillOpacity={fillOpacity}
101          clipPath={`url(#dot-clip-${dotId})`}
102        />
103      </g>
104    );
105  },
106);
107 
108DefaultDot.displayName = "DefaultDot";
109 
110const PrimaryBorderDot = React.memo(
111// … truncated