| 1 | "use client"; |
| 2 | |
| 3 | import { usePresentationTheme } from "@/components/presentation/providers/PresentationThemeProvider"; |
| 4 | import { useMemo } from "react"; |
| 5 | |
| 6 | // Default chart colors - vibrant, visible colors |
| 7 | export const CHART_COLORS = [ |
| 8 | "#2563eb", // Blue |
| 9 | "#16a34a", // Green |
| 10 | "#ea580c", // Orange |
| 11 | "#8b5cf6", // Purple |
| 12 | "#ec4899", // Pink |
| 13 | "#14b8a6", // Teal |
| 14 | "#f59e0b", // Amber |
| 15 | "#ef4444", // Red |
| 16 | "#06b6d4", // Cyan |
| 17 | "#84cc16", // Lime |
| 18 | ]; |
| 19 | |
| 20 | export function getChartColor(index: number): string { |
| 21 | return CHART_COLORS[index % CHART_COLORS.length] ?? CHART_COLORS[0]!; |
| 22 | } |
| 23 | |
| 24 | export interface ChartThemeConfig { |
| 25 | /** AG Charts base theme name */ |
| 26 | theme: "ag-default" | "ag-default-dark"; |
| 27 | } |
| 28 | |
| 29 | /** |
| 30 | * Hook to get theme-aware chart configuration based on presentation theme |
| 31 | * Returns configuration for light/dark mode that can be applied to AG Charts |
| 32 | */ |
| 33 | export function useChartTheme(): ChartThemeConfig { |
| 34 | const { resolvedTheme } = usePresentationTheme(); |
| 35 | |
| 36 | return useMemo(() => { |
| 37 | const isDark = resolvedTheme === "dark"; |
| 38 | |
| 39 | return { |
| 40 | theme: isDark ? "ag-default-dark" : "ag-default", |
| 41 | }; |
| 42 | }, [resolvedTheme]); |
| 43 | } |
| 44 |