ChartActiveDot.js
2 months ago
ChartCrosshair.js
2 months ago
ChartTooltip.js
2 months ago
EngagementAreaChart.js
2 months ago
RetentionTooltip.js
2 months ago
chartTheme.js
2 months ago
index.js
2 months ago
chartTheme.js
42 lines
| 1 | import { useId } from "@wordpress/element"; |
| 2 | |
| 3 | // Colors |
| 4 | export const CHART_COLOR = "#9a20f8"; |
| 5 | export const ALL_TIME_CHART_COLOR = "#2563EB"; |
| 6 | export const GRID_COLOR = "#E3E8EE"; |
| 7 | export const AXIS_LABEL_COLOR = "#6B7280"; |
| 8 | export const TOOLTIP_BG = "#FFFFFF"; |
| 9 | export const TOOLTIP_BORDER = "#E6E8EB"; |
| 10 | export const TOOLTIP_TEXT_PRIMARY = "#111827"; |
| 11 | export const TOOLTIP_TEXT_SECONDARY = "#6B7280"; |
| 12 | export const CROSSHAIR_COLOR = "#D3D8DE"; |
| 13 | export const POSITIVE_TREND = "#059669"; |
| 14 | export const NEGATIVE_TREND = "#DC2626"; |
| 15 | |
| 16 | // Dimensions |
| 17 | export const STROKE_WIDTH = 2; |
| 18 | export const ACTIVE_DOT_RADIUS = 4; |
| 19 | export const ACTIVE_DOT_GLOW_RADIUS = 6; |
| 20 | export const ACTIVE_DOT_GLOW_OPACITY = 0.12; |
| 21 | export const TOOLTIP_RADIUS = 8; |
| 22 | export const GRADIENT_OPACITY = 0.12; |
| 23 | export const RETENTION_GRADIENT_OPACITY = 0.10; |
| 24 | |
| 25 | // Tooltip shadow (CSS) |
| 26 | export const TOOLTIP_SHADOW = |
| 27 | "0 1px 1px rgba(0,0,0,0.03), 0 3px 6px rgba(18,42,66,0.02), 0 8px 24px rgba(0,0,0,0.08)"; |
| 28 | |
| 29 | // Animation |
| 30 | export const ANIMATION_DURATION = 400; |
| 31 | export const TAB_SWITCH_DURATION = 200; |
| 32 | export const ANIMATION_EASING = "ease-out"; |
| 33 | |
| 34 | /** |
| 35 | * Returns a unique SVG gradient ID per component instance. |
| 36 | * Prevents collisions when multiple charts render on the same page. |
| 37 | */ |
| 38 | export const useChartGradientId = (prefix = "chart") => { |
| 39 | const id = useId(); |
| 40 | return `${prefix}-gradient-${id}`; |
| 41 | }; |
| 42 |