import { useState, useMemo } from 'react'; import type { ChartOptions } from 'chart.js'; import { buildChartData, type ChartData } from '@/utils/usage'; import { buildChartOptions } from '@/utils/usage/chartConfig'; import type { UsagePayload } from './useUsageData'; export interface UseChartDataOptions { usage: UsagePayload | null; chartLines: string[]; isDark: boolean; isMobile: boolean; } export interface UseChartDataReturn { requestsPeriod: 'hour' | 'day'; setRequestsPeriod: (period: 'hour' | 'day') => void; tokensPeriod: 'hour' | 'day'; setTokensPeriod: (period: 'hour' | 'day') => void; requestsChartData: ChartData; tokensChartData: ChartData; requestsChartOptions: ChartOptions<'line'>; tokensChartOptions: ChartOptions<'line'>; } export function useChartData({ usage, chartLines, isDark, isMobile }: UseChartDataOptions): UseChartDataReturn { const [requestsPeriod, setRequestsPeriod] = useState<'hour' | 'day'>('day'); const [tokensPeriod, setTokensPeriod] = useState<'hour' | 'day'>('day'); const requestsChartData = useMemo(() => { if (!usage) return { labels: [], datasets: [] }; return buildChartData(usage, requestsPeriod, 'requests', chartLines); }, [usage, requestsPeriod, chartLines]); const tokensChartData = useMemo(() => { if (!usage) return { labels: [], datasets: [] }; return buildChartData(usage, tokensPeriod, 'tokens', chartLines); }, [usage, tokensPeriod, chartLines]); const requestsChartOptions = useMemo( () => buildChartOptions({ period: requestsPeriod, labels: requestsChartData.labels, isDark, isMobile }), [requestsPeriod, requestsChartData.labels, isDark, isMobile] ); const tokensChartOptions = useMemo( () => buildChartOptions({ period: tokensPeriod, labels: tokensChartData.labels, isDark, isMobile }), [tokensPeriod, tokensChartData.labels, isDark, isMobile] ); return { requestsPeriod, setRequestsPeriod, tokensPeriod, setTokensPeriod, requestsChartData, tokensChartData, requestsChartOptions, tokensChartOptions }; }