// Launch in parallel:
Subagent 1: "Find frontend/src/components/plots/Stats/. Return: all files, component structure, imports."
Subagent 2: "Find StatCard.tsx. Return: full component code, props interface, styling patterns."
Subagent 3: "Find StatsDarkModeContext.tsx. Return: context usage pattern, hook export."
Subagent 4: "Find frontend/src/styles/design-system.ts. Return: theme object structure, color tokens."

Stats/
├── View.tsx              # Main container, provides dark mode context
├── Top.tsx               # Section header with title and description
├── Bottom.tsx            # Container for stat cards
├── StatCard.tsx          # Reusable card component with info tooltip
└── StatsDarkModeContext.tsx  # Theme context for dark/light mode

import type { RollingAverageRecordList } from '../classes/RollingAverageRecord.js';

export interface MyStatDetails {
    value: number | null;
    displayValue: string;
    // ... other computed properties
}

/**
 * Calculate [statistic description] from daily climate data.
 * 
 * @param data - Daily climate records with date, tas, tasmin, tasmax
 * @returns Calculated statistic details or null if insufficient data
 */
export function calculateMyStat(data: RollingAverageRecordList): MyStatDetails | null {
    if (!data || data.length === 0) {
        return null;
    }

    // Calculation logic here
    const value = /* ... calculation ... */;

    return {
        value,
        displayValue: `${value.toFixed(1)}°C`,
    };
}

import { describe, it, expect } from 'vitest';
import { calculateMyStat } from './MyStatUtils.js';
import type { RollingAverageRecordList } from '../classes/RollingAverageRecord.js';

describe('calculateMyStat', () => {
    it('returns null for empty data', () => {
        expect(calculateMyStat([])).toBeNull();
    });

    it('calculates correctly for valid data', () => {
        const data: RollingAverageRecordList = [
            { date: '2024-01-01', tasmin: -5, tasmax: 5, tas: 0 },
            // ... test data
        ];
        
        const result = calculateMyStat(data);
        
        expect(result).not.toBeNull();
        expect(result?.value).toBe(/* expected value */);
    });

    // Add edge case tests
});

import { useMemo } from 'react';
import { useAppSelector } from '../store/hooks/useAppSelector.js';
import { useSelectedStationId } from '../store/hooks/hooks.js';
import {
    selectDailyAverageData,
    selectDailyAverageDataStatus,
    selectDailyAverageDataError,
} from '../store/slices/dailyAverageDataSlice.js';
import { calculateMyStat } from '../utils/MyStatUtils.js';

export interface MyStatState {
    value: string;
    subtitle: string;
    isLoading: boolean;
    error: string | null;
}

/**
 * Custom hook to calculate [statistic] for the currently selected station.
 */
export function useMyStat(): MyStatState {
    const stationId = useSelectedStationId();
    const dailyData = useAppSelector(selectDailyAverageData);
    const status = useAppSelector(selectDailyAverageDataStatus);
    const errorFromSlice = useAppSelector(selectDailyAverageDataError);

    const isLoading = status === 'loading' || status === 'idle';

    const statDetails = useMemo(() => {
        if (!stationId || status !== 'succeeded' || dailyData.length === 0) {
            return null;
        }
        return calculateMyStat(dailyData);
    }, [stationId, status, dailyData]);

    const error = useMemo(() => {
        if (errorFromSlice) return errorFromSlice;
        if (status === 'succeeded' && !statDetails) {
            return 'Nicht genügend Daten für die Berechnung verfügbar.';
        }
        return null;
    }, [errorFromSlice, status, statDetails]);

    return {
        value: statDetails?.displayValue ?? '—',
        subtitle: statDetails ? 'Beschreibung der Statistik' : '',
        isLoading,
        error,
    };
}

export default useMyStat;

import { useMyStat } from '../../../hooks/useMyStat.js';

const StatsBottom = memo(() => {
    const myStat = useMyStat();
    // ... existing hooks

    return (
        <section style={sectionStyle}>
            {/* Existing cards */}
            
            <StatCard
                title="Mein Statistik-Titel"
                value={myStat.value}
                subtitle={myStat.subtitle}
                footnote="Basierend auf Wetterstationsdaten YYYY–YYYY"
                infoText="Erklärung der Statistik für Benutzer. Was bedeutet dieser Wert und wie wird er berechnet?"
                isLoading={myStat.isLoading}
                error={myStat.error}
            />
        </section>
    );
});

// Set to false for light mode, true for dark mode
const DARK_MODE = false;

import { theme } from '../../../styles/design-system.js';

// Dark mode
const darkColors = {
    text: theme.colors.textLight,
    value: theme.colors.textWhite,
};

// Light mode  
const lightColors = {
    text: theme.colors.textDark,
    value: theme.colors.textDark,
};

const myStyle = useMemo(() => ({
    fontSize: theme.typography.fontSize.md,
    fontWeight: theme.typography.fontWeight.medium,
    // ... other properties
}), [/* dependencies */]);

const sectionStyle: CSSProperties = {
    display: 'flex',
    flexDirection: 'row',
    flexWrap: 'wrap',
    gap: theme.spacing.lg,
    justifyContent: 'center',
    padding: theme.spacing.lg,
};