From de267f27871d1f40e7c0b1bd0583ad5ecbb5d0c6 Mon Sep 17 00:00:00 2001 From: Codify Technologies Limited Date: Sun, 29 Mar 2026 19:56:24 +0100 Subject: [PATCH] feat: implement theme-aware chart colors for all Recharts components --- TODO.md | 42 +++++++ frontend/src/app/layout.tsx | 21 ++-- .../src/components/ChartThemeProvider.tsx | 43 ++++++++ frontend/src/components/OddsChart.tsx | 23 ++-- .../src/components/PoolOwnershipChart.tsx | 44 +++----- frontend/src/components/ProbabilityChart.tsx | 21 ++-- frontend/src/components/SimulatorPanel.tsx | 11 +- frontend/src/components/WhatIfSimulator.tsx | 31 +++--- .../__tests__/ChartThemeProvider.test.tsx | 64 +++++++++++ .../src/components/lp/LPEarningsChart.tsx | 12 +- .../hooks/__tests__/useChartColors.test.ts | 104 ++++++++++++++++++ frontend/src/hooks/useChartColors.ts | 97 ++++++++++++++++ 12 files changed, 436 insertions(+), 77 deletions(-) create mode 100644 TODO.md create mode 100644 frontend/src/components/ChartThemeProvider.tsx create mode 100644 frontend/src/components/__tests__/ChartThemeProvider.test.tsx create mode 100644 frontend/src/hooks/__tests__/useChartColors.test.ts create mode 100644 frontend/src/hooks/useChartColors.ts diff --git a/TODO.md b/TODO.md new file mode 100644 index 00000000..032bf1ad --- /dev/null +++ b/TODO.md @@ -0,0 +1,42 @@ +# Dark Mode Aware Recharts Charts - Implementation TODO + +Current progress: 0/18 ✅ + +## Phase 1: Core Hooks & Provider (4 steps) + +1. [✅] Create `frontend/src/hooks/useChartColors.ts` - Theme detection hook + MutationObserver + palettes +2. [✅] Create `frontend/src/hooks/__tests__/useChartColors.test.ts` - Unit tests (>90% coverage) +3. [✅] Create `frontend/src/components/ChartThemeProvider.tsx` - Context provider +4. [✅] Create `frontend/src/components/__tests__/ChartThemeProvider.test.tsx` - Provider tests + +## Phase 2: Update Chart Components (5 steps) + +5. [✅] Update OddsChart.tsx - Replace hardcoded colors with hook values +6. [✅] Update ProbabilityChart.tsx - OUTCOME_COLORS → slices[] +7. [✅] Update PoolOwnershipChart.tsx - SLICE_COLORS → slices/others +8. [✅] Update SimulatorPanel.tsx - BarChart colors + tooltip +9. [✅] Update LPEarningsChart.tsx - Custom SVG earnings color + +## Phase 3: Integration & App-Wrapping (3 steps) + +10. [✅] Import/use ChartThemeProvider in layout.tsx (app-wide) +11. [✅] Search for other Recharts: Found WhatIfSimulator.tsx BarChart (updated with colors.stake='#6366f1'→indigo, projected='#22c55e'→yes, axis #9ca3af→axis, tooltip #1f2937→tooltipBg) +12. [✅] All Recharts charts updated + +## Phase 4: Testing & Polish (4 steps) + +13. [ ] Run tests: `cd frontend && npm test` - Fix failures +14. [ ] Run lint: `cd frontend && npm run lint -- --fix` +15. [ ] Manual test: Theme toggle + chart reactivity/accessibility +16. [ ] Update this TODO.md with ✓ for completed steps + +## Phase 5: Finalization (2 steps) + +17. [ ] Verify DoD: No hardcoded colors, instant updates, tests >90%, dark/light accessible +18. [ ] attempt_completion with demo command + +**Notes**: + +- Provider app-wide preferred (layout.tsx). +- Colors finalized as planned. +- Progress updates after each step. diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx index f99add97..5e90c076 100644 --- a/frontend/src/app/layout.tsx +++ b/frontend/src/app/layout.tsx @@ -24,6 +24,7 @@ export const metadata: Metadata = { }; import { ToastProvider } from "../components/ToastProvider"; +import { ChartThemeProvider } from "../components/ChartThemeProvider"; export default function RootLayout({ children }: { children: React.ReactNode }) { return ( @@ -43,15 +44,17 @@ export default function RootLayout({ children }: { children: React.ReactNode }) {/* WalletProvider lifts wallet state globally so BettingSlip can submit */} - -
- {children} -
- {/* BettingSlip mounted globally — persists across all pages */} - - {/* Global keyboard shortcuts (B, /, Esc, ?) */} - - + + +
+ {children} +
+ {/* BettingSlip mounted globally — persists across all pages */} + + {/* Global keyboard shortcuts (B, /, Esc, ?) */} + + + diff --git a/frontend/src/components/ChartThemeProvider.tsx b/frontend/src/components/ChartThemeProvider.tsx new file mode 100644 index 00000000..36aad3d5 --- /dev/null +++ b/frontend/src/components/ChartThemeProvider.tsx @@ -0,0 +1,43 @@ +import React, { createContext, useContext, ReactNode, useMemo } from "react"; +import { useChartColors, type ChartColors } from "../hooks/useChartColors"; + +/** + * ChartThemeContext — Provides theme-aware colors to all descendant charts. + * Wrap root layout or page: + * + * Issue #429: Centralizes color management, auto-re-renders charts on theme toggle. + */ +interface ChartThemeContextType { + colors: ChartColors; +} + +const ChartThemeContext = createContext(undefined); + +interface Props { + children: ReactNode; +} + +export function ChartThemeProvider({ children }: Props) { + const rawColors = useChartColors(); + + // Memoize to prevent unnecessary re-renders + const value = useMemo( + () => ({ + colors: rawColors, + }), + [rawColors] + ); + + return {children}; +} + +/** + * useChartTheme — Consuming hook for charts. Throws if used outside provider. + */ +export function useChartTheme(): ChartColors { + const context = useContext(ChartThemeContext); + if (context === undefined) { + throw new Error("useChartTheme must be used within ChartThemeProvider"); + } + return context.colors; +} diff --git a/frontend/src/components/OddsChart.tsx b/frontend/src/components/OddsChart.tsx index 1eb0e5ea..78ff39b1 100644 --- a/frontend/src/components/OddsChart.tsx +++ b/frontend/src/components/OddsChart.tsx @@ -12,6 +12,7 @@ import { TooltipProps, } from "recharts"; import Skeleton from "./Skeleton"; +import { useChartTheme } from "./ChartThemeProvider"; // ── Types ───────────────────────────────────────────────────────────────────── @@ -35,9 +36,6 @@ interface Props { const RANGES: TimeRange[] = ["1H", "6H", "1D", "All"]; -const YES_COLOR = "#22c55e"; // green-500 -const NO_COLOR = "#f97316"; // orange-500 - // ── Mock data generator (used until real API exists) ────────────────────────── function generateMockData(range: TimeRange): OddsPoint[] { @@ -81,22 +79,28 @@ async function defaultFetcher(marketId: number, range: TimeRange): Promise) { + const colors = useChartTheme(); if (!active || !payload?.length) return null; const yes = payload.find((p) => p.dataKey === "yes"); const no = payload.find((p) => p.dataKey === "no"); return (

{label}

{yes && ( -

+

YES: {yes.value}%

)} {no && ( -

+

NO: {no.value}%

)} @@ -110,6 +114,7 @@ export default function OddsChart({ marketId, initialData, fetcher = defaultFetc const [range, setRange] = useState("1D"); const [data, setData] = useState(initialData ?? []); const [loading, setLoading] = useState(!initialData); + const colors = useChartTheme(); const loadData = useCallback( async (r: TimeRange) => { @@ -170,14 +175,14 @@ export default function OddsChart({ marketId, initialData, fetcher = defaultFetc YES NO @@ -205,7 +210,7 @@ export default function OddsChart({ marketId, initialData, fetcher = defaultFetc - +

{slice.label}

{slice.wallet && ( @@ -107,13 +96,16 @@ export default function PoolOwnershipChart({ marketId }: Props) { paddingAngle={2} strokeWidth={0} > - {slices.map((slice, i) => ( - - ))} + {slices.map((slice, i) => { + const colors = useChartTheme(); + return ( + + ); + })} } /> +

{label}

{payload.map((p: any) => (

@@ -82,6 +82,7 @@ type TimeRange = "1H" | "6H" | "24H" | "7D" | "ALL"; export default function ProbabilityChart({ marketId, outcomes, initialData }: Props) { const [data, setData] = useState(initialData ?? []); const [range, setRange] = useState("24H"); + const colors = useChartTheme(); const containerRef = useRef(null); useEffect(() => { @@ -124,24 +125,24 @@ export default function ProbabilityChart({ marketId, outcomes, initialData }: Pr - {outcomes.map((o, i) => ( +{outcomes.map((o, i) => ( - - + + ))} - + `${v}%`} @@ -157,7 +158,7 @@ export default function ProbabilityChart({ marketId, outcomes, initialData }: Pr key={o} type="monotone" dataKey={o} - stroke={OUTCOME_COLORS[i % OUTCOME_COLORS.length]} + stroke={colors.slices[i % colors.slices.length]} strokeWidth={2} fill={`url(#grad-${i})`} dot={false} diff --git a/frontend/src/components/SimulatorPanel.tsx b/frontend/src/components/SimulatorPanel.tsx index 7e33aaf3..9cfd90f5 100644 --- a/frontend/src/components/SimulatorPanel.tsx +++ b/frontend/src/components/SimulatorPanel.tsx @@ -1,7 +1,8 @@ "use client"; import React, { useState, useEffect, useMemo } from "react"; -import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, Cell } from "recharts"; +} from "recharts"; +import { useChartTheme } from "./ChartThemeProvider"; interface SimulatorPanelProps { market: { @@ -43,9 +44,11 @@ export default function SimulatorPanel({ market, selectedOutcomeIndex = 0 }: Sim const payoutXlm = Number(payoutBig) / 1e7; const impliedProb = (100 / market.outcomes.length).toFixed(1); + const colors = useChartTheme(); + const chartData = [ - { name: "Profit if Correct", value: Math.max(0, payoutXlm - parseFloat(stake || "0")), color: "#4ade80" }, - { name: "Stake at Risk", value: parseFloat(stake || "0"), color: "#f87171" }, + { name: "Profit if Correct", value: Math.max(0, payoutXlm - parseFloat(stake || "0")), color: colors.profit }, + { name: "Stake at Risk", value: parseFloat(stake || "0"), color: colors.risk }, ]; const handleStakeChange = (e: React.ChangeEvent) => { @@ -115,7 +118,7 @@ export default function SimulatorPanel({ market, selectedOutcomeIndex = 0 }: Sim diff --git a/frontend/src/components/WhatIfSimulator.tsx b/frontend/src/components/WhatIfSimulator.tsx index cdbe890a..5ace2ec8 100644 --- a/frontend/src/components/WhatIfSimulator.tsx +++ b/frontend/src/components/WhatIfSimulator.tsx @@ -2,15 +2,8 @@ import { useState, useEffect, useRef } from "react"; // Named imports — webpack tree-shakes unused recharts components via the // package's sideEffects:false declaration, keeping the bundle lean. -import { - BarChart, - Bar, - XAxis, - YAxis, - Tooltip, - ResponsiveContainer, - Cell, -} from "recharts"; +import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, Cell } from "recharts"; +import { useChartTheme } from "./ChartThemeProvider"; import { calculateSimulator } from "../utils/simulatorCalc"; interface Props { @@ -27,13 +20,13 @@ const DEBOUNCE_MS = 200; export default function WhatIfSimulator({ poolForOutcome, totalPool, maxStake }: Props) { const [open, setOpen] = useState(false); const [stake, setStake] = useState(10); - const [result, setResult] = useState(() => - calculateSimulator(10, poolForOutcome, totalPool) - ); + const [result, setResult] = useState(() => calculateSimulator(10, poolForOutcome, totalPool)); const debounceRef = useRef | null>(null); const sliderMax = maxStake ?? Math.max(totalPool * 2, 1000); + const colors = useChartTheme(); + // Recalculate with debounce on every stake or pool change useEffect(() => { if (debounceRef.current) clearTimeout(debounceRef.current); @@ -149,10 +142,20 @@ export default function WhatIfSimulator({ poolForOutcome, totalPool, maxStake }:

- + [`${Number(v ?? 0).toFixed(2)} XLM`] as [string]} /> diff --git a/frontend/src/components/__tests__/ChartThemeProvider.test.tsx b/frontend/src/components/__tests__/ChartThemeProvider.test.tsx new file mode 100644 index 00000000..dc8c1b4d --- /dev/null +++ b/frontend/src/components/__tests__/ChartThemeProvider.test.tsx @@ -0,0 +1,64 @@ +import { render, screen } from "@testing-library/react"; +import { ChartThemeProvider, useChartTheme } from "../ChartThemeProvider"; +import { useChartColors } from "../../hooks/useChartColors"; + +// Mock the hook +jest.mock("../../hooks/useChartColors"); + +const mockUseChartColors = useChartColors as jest.MockedFunction; +const mockDarkColors = { yes: "#22c55e", no: "#f97316" /* abbreviated */ }; + +describe("ChartThemeProvider", () => { + beforeEach(() => { + mockUseChartColors.mockReturnValue(mockDarkColors); + }); + + it("provides colors via context", () => { + const TestComponent = () => { + const colors = useChartTheme(); + return
{colors.yes}
; + }; + + render( + + + + ); + + expect(screen.getByTestId("colors")).toHaveTextContent("#22c55e"); + }); + + it("re-renders children when colors change", () => { + const TestComponent = jest.fn(() => ( +
{mockUseChartColors().yes}
+ )); + + const { rerender } = render( + + + + ); + + mockUseChartColors.mockReturnValue({ yes: "#059669", no: "#dc2626" }); + + rerender( + + + + ); + + expect(TestComponent).toHaveBeenCalledTimes(2); + expect(screen.getByTestId("consumer")).toHaveTextContent("#059669"); + }); + + it("throws when useChartTheme used outside provider", () => { + const TestComponent = () => { + useChartTheme(); // Should throw + return null; + }; + + expect(() => render()).toThrow( + "useChartTheme must be used within ChartThemeProvider" + ); + }); +}); diff --git a/frontend/src/components/lp/LPEarningsChart.tsx b/frontend/src/components/lp/LPEarningsChart.tsx index b8874e1e..41fed608 100644 --- a/frontend/src/components/lp/LPEarningsChart.tsx +++ b/frontend/src/components/lp/LPEarningsChart.tsx @@ -1,6 +1,7 @@ "use client"; import { useState } from "react"; +import { useChartTheme } from "../../ChartThemeProvider"; interface LPPool { id: string; @@ -21,6 +22,7 @@ interface Props { } export function LPEarningsChart({ pools }: Props) { + const colors = useChartTheme(); const [timeframe, setTimeframe] = useState<"7d" | "30d" | "90d" | "1y">("30d"); // Mock earnings data - replace with actual API data @@ -156,11 +158,11 @@ export function LPEarningsChart({ pools }: Props) {
{/* Line chart */} - + - - + + @@ -188,7 +190,7 @@ export function LPEarningsChart({ pools }: Props) { ) .join(" ")} fill="none" - stroke="rgb(34, 197, 94)" + stroke={colors.earnings} strokeWidth="2" /> @@ -207,7 +209,7 @@ export function LPEarningsChart({ pools }: Props) { {/* Legend */}
-
+
Cumulative Earnings
diff --git a/frontend/src/hooks/__tests__/useChartColors.test.ts b/frontend/src/hooks/__tests__/useChartColors.test.ts new file mode 100644 index 00000000..93853b30 --- /dev/null +++ b/frontend/src/hooks/__tests__/useChartColors.test.ts @@ -0,0 +1,104 @@ +import { renderHook, act } from '@testing-library/react'; +import { useChartColors, type ChartColors } from '../useChartColors'; + +// Mock document for theme detection +const mockDocument = { + documentElement: { + dataset: { theme: 'dark' } + } +} as unknown as Document; + +Object.defineProperty(global, 'document', { + value: mockDocument, + writable: true +}); + +// Reference palettes for assertions +const DARK_PALETTE: ChartColors = { + yes: '#22c55e', no: '#f97316', grid: '#1f2937', axis: '#6b7280', + tooltipBg: '#111827', tooltipBorder: '#374151', cursor: '#4b5563', + profit: '#4ade80', risk: '#f87171', + slices: ['#3b82f6','#22c55e','#a855f7','#f59e0b','#ef4444','#06b6d4','#ec4899','#84cc16','#6366f1','#f97316'], + others: '#4b5563', earnings: 'rgb(34, 197, 94)' +}; + +const LIGHT_PALETTE: ChartColors = { + yes: '#059669', no: '#dc2626', grid: '#e5e7eb', axis: '#6b7280', + tooltipBg: '#f9fafb', tooltipBorder: '#d1d5db', cursor: '#d1d5db', + profit: '#16a34a', risk: '#b91c1c', + slices: ['#2563eb','#059669','#8b5cf6','#d97706','#ef4444','#0ea5e9','#ec4899','#65a30d','#6366f1','#f97316'], + others: '#9ca3af', earnings: 'rgb(34, 197, 94)' +}; + +describe('useChartColors', () => { + beforeEach(() => { + // Reset to dark default + mockDocument.documentElement.dataset.theme = 'dark'; + jest.useFakeTimers(); + }); + + afterEach(() => { + jest.runOnlyPendingTimers(); + jest.useRealTimers(); + }); + + it('returns dark palette by default', () => { + const { result } = renderHook(() => useChartColors()); + expect(result.current).toEqual(DARK_PALETTE); + }); + + it('returns light palette when theme is light', () => { + mockDocument.documentElement.dataset.theme = 'light'; + const { result } = renderHook(() => useChartColors()); + expect(result.current).toEqual(LIGHT_PALETTE); + }); + + it('switches to light palette when data-theme changes to light', async () => { + const { result } = renderHook(() => useChartColors()); + + // Trigger theme change + mockDocument.documentElement.dataset.theme = 'light'; + mockDocument.dispatchEvent(new Event('attributeschange')); // Simulate observer + + await act(async () => { + jest.advanceTimersByTime(0); + }); + + expect(result.current).toEqual(LIGHT_PALETTE); + }); + + it('switches back to dark when theme changes back', async () => { + const { result } = renderHook(() => useChartColors()); + + // Light → Dark + mockDocument.documentElement.dataset.theme = 'light'; + await act(async () => jest.advanceTimersByTime(0)); + + mockDocument.documentElement.dataset.theme = 'dark'; + await act(async () => jest.advanceTimersByTime(0)); + + expect(result.current).toEqual(DARK_PALETTE); + }); + + it('falls back to dark when invalid theme', () => { + mockDocument.documentElement.dataset.theme = 'invalid' as any; + const { result } = renderHook(() => useChartColors()); + expect(result.current).toEqual(DARK_PALETTE); + }); + + it('handles no dataset.theme gracefully', () => { + delete mockDocument.documentElement.dataset.theme; + const { result } = renderHook(() => useChartColors()); + expect(result.current).toEqual(DARK_PALETTE); + }); + + it.each([ + { theme: 'dark', expected: DARK_PALETTE.yes }, + { theme: 'light', expected: LIGHT_PALETTE.yes } + ])('returns correct $theme yes color', ({ theme, expected }) => { + mockDocument.documentElement.dataset.theme = theme; + const { result } = renderHook(() => useChartColors()); + expect(result.current.yes).toBe(expected); + }); +}); + diff --git a/frontend/src/hooks/useChartColors.ts b/frontend/src/hooks/useChartColors.ts new file mode 100644 index 00000000..6f57ecb1 --- /dev/null +++ b/frontend/src/hooks/useChartColors.ts @@ -0,0 +1,97 @@ +import { useState, useEffect, useCallback } from 'react'; + +export interface ChartColors { + yes: string; + no: string; + grid: string; + axis: string; + tooltipBg: string; + tooltipBorder: string; + cursor: string; + profit: string; + risk: string; + slices: string[]; + others: string; + earnings: string; +} + +const DARK_PALETTE: ChartColors = { + yes: '#22c55e', + no: '#f97316', + grid: '#1f2937', + axis: '#6b7280', + tooltipBg: '#111827', + tooltipBorder: '#374151', + cursor: '#4b5563', + profit: '#4ade80', + risk: '#f87171', + slices: [ + '#3b82f6', '#22c55e', '#a855f7', '#f59e0b', '#ef4444', + '#06b6d4', '#ec4899', '#84cc16', '#6366f1', '#f97316' + ], + others: '#4b5563', + earnings: 'rgb(34, 197, 94)' +}; + +const LIGHT_PALETTE: ChartColors = { + yes: '#059669', + no: '#dc2626', + grid: '#e5e7eb', + axis: '#6b7280', + tooltipBg: '#f9fafb', + tooltipBorder: '#d1d5db', + cursor: '#d1d5db', + profit: '#16a34a', + risk: '#b91c1c', + slices: [ + '#2563eb', '#059669', '#8b5cf6', '#d97706', '#ef4444', + '#0ea5e9', '#ec4899', '#65a30d', '#6366f1', '#f97316' + ], + others: '#9ca3af', + earnings: 'rgb(34, 197, 94)' +}; + +/** + * useChartColors — Reactively returns theme-aware chart color palette. + * Detects current theme from document.documentElement.dataset.theme. + * Auto-updates via MutationObserver when theme toggles. + * + * Issue #429: Dark/Light mode chart color adaptation + */ +export function useChartColors(): ChartColors { + const [colors, setColors] = useState(DARK_PALETTE); + + const getTheme = useCallback((): 'dark' | 'light' => { + return (document.documentElement.dataset.theme as 'dark' | 'light') || 'dark'; + }, []); + + const updateColors = useCallback(() => { + const theme = getTheme(); + setColors(theme === 'light' ? LIGHT_PALETTE : DARK_PALETTE); + }, [getTheme]); + + useEffect(() => { + updateColors(); + + // MutationObserver for instant theme change detection + const observer = new MutationObserver((mutations) => { + mutations.forEach((mutation) => { + if (mutation.type === 'attributes' && mutation.attributeName === 'data-theme') { + updateColors(); + } + }); + }); + + observer.observe(document.documentElement, { + attributes: true, + attributeFilter: ['data-theme'] + }); + + return () => { + observer.disconnect(); + }; + }, [updateColors]); + + return colors; +} +