| 1 | "use client" |
| 2 | |
| 3 | import { useChart } from "./chart-context" |
| 4 | import { rgb, type |
| 5 | import { useSeries } |
| 6 | |
| 7 | export type DotVariant |
| 8 | |
| 9 | function dotPaint(variant: |
| 10 | switch (variant) { |
| 11 | case "colored-border": |
| 12 | return { |
| 13 | fill: "var(--card, #0b0b0c)", |
| 14 | stroke: rgb(seed |
| 15 | strokeWidth: 1.5, |
| 16 | } |
| 17 | case "filled": |
| 18 | return { fill: |
| 19 | default: |
| 20 | return { |
| 21 | fill: "var(--card, #0b0b0c)", |
| 22 | stroke: rgb(seed |
| 23 | strokeWidth: 1, |
| 24 | } |
| 25 | } |
| 26 | } |
| 27 | |
| 28 | /** A marker at every data point along the series' top line. */ |
| 29 | export function Dot({ |
| 30 | variant = "border" |
| 31 | r = 2, |
| 32 | }: { |
| 33 | variant?: DotVariant |
| 34 | r?: number |
| 35 | }) { |
| 36 | const ctx = |
| 37 | const { dataKey, |
| 38 | const band = |
| 39 | if (!ctx.ready |
| 40 | const paint = |
| 41 | |
| 42 | return ( |
| 43 | // Fade in once the fill has drawn so dots don't float over the entrance. |
| 44 | <g |
| 45 | style={{ |
| 46 | opacity: ctx.entranceDone |
| 47 | transition: "opacity 300ms ease", |
| 48 | }} |
| 49 | > |
| 50 | {band.map(( |
| 51 | <circle |
| 52 | {...paint} |
| 53 | // biome-ignore lint/suspicious/noArrayIndexKey: index is the stable x position |
| 54 | key={i} |
| 55 | cx={ctx.xCenter |
| 56 | cy={ctx.y |
| 57 | r={r} |
| 58 | /> |
| 59 | ))} |
| 60 | </g> |
| 61 | ) |
| 62 | } |
| 63 | |
| 64 | /** A single marker at the hovered point — keys off the shared hover index. */ |
| 65 | export function ActiveDot({ |
| 66 | variant = "colored-border" |
| 67 | r = 3, |
| 68 | }: { |
| 69 | variant?: DotVariant |
| 70 | r?: number |
| 71 | }) { |
| 72 | const ctx = |
| 73 | const { dataKey, |
| 74 | const band = |
| 75 | if (!ctx.ready |
| 76 | return null |
| 77 | const b = |
| 78 | if (!b) |
| 79 | const paint = |
| 80 | const cx = |
| 81 | const cy = |
| 82 | |
| 83 | return ( |
| 84 | <g> |
| 85 | {/* Soft halo so the active point is unmistakable over the dither. */ |
| 86 | <circle cx={cx |
| 87 | <circle cx={cx |
| 88 | </g> |
| 89 | ) |
| 90 | } |