ChartActiveDot.js
3 months ago
ChartCrosshair.js
3 months ago
ChartTooltip.js
3 months ago
EngagementAreaChart.js
3 months ago
RetentionTooltip.js
3 months ago
chartTheme.js
3 months ago
index.js
3 months ago
ChartActiveDot.js
43 lines
| 1 | import { |
| 2 | CHART_COLOR, |
| 3 | ACTIVE_DOT_RADIUS, |
| 4 | ACTIVE_DOT_GLOW_RADIUS, |
| 5 | ACTIVE_DOT_GLOW_OPACITY, |
| 6 | } from "./chartTheme"; |
| 7 | |
| 8 | /** |
| 9 | * Stripe-inspired ringed active dot with glow. |
| 10 | * Used as the `activeDot` prop on Recharts <Area>. |
| 11 | * |
| 12 | * Renders: |
| 13 | * - Outer glow circle (brand color at 0.12 opacity) |
| 14 | * - Inner dot (white fill with brand color stroke ring) |
| 15 | * |
| 16 | * Recharts passes cx, cy, and other props automatically. |
| 17 | */ |
| 18 | const ChartActiveDot = ({ cx, cy, color = CHART_COLOR }) => { |
| 19 | if (cx == null || cy == null) return null; |
| 20 | |
| 21 | return ( |
| 22 | <g style={{ transition: "opacity 150ms ease-out" }}> |
| 23 | <circle |
| 24 | cx={cx} |
| 25 | cy={cy} |
| 26 | r={ACTIVE_DOT_GLOW_RADIUS} |
| 27 | fill={color} |
| 28 | opacity={ACTIVE_DOT_GLOW_OPACITY} |
| 29 | /> |
| 30 | <circle |
| 31 | cx={cx} |
| 32 | cy={cy} |
| 33 | r={ACTIVE_DOT_RADIUS} |
| 34 | fill="#FFFFFF" |
| 35 | stroke={color} |
| 36 | strokeWidth={2} |
| 37 | /> |
| 38 | </g> |
| 39 | ); |
| 40 | }; |
| 41 | |
| 42 | export default ChartActiveDot; |
| 43 |