diff --git a/src/api/adminSalesStats.ts b/src/api/adminSalesStats.ts index 8985faf..26c902a 100644 --- a/src/api/adminSalesStats.ts +++ b/src/api/adminSalesStats.ts @@ -119,6 +119,11 @@ export interface DailyAddonItem { total_gb: number; } +export interface DailyDeviceItem { + date: string; + count: number; +} + export interface AddonsStats { total_purchases: number; total_gb_purchased: number; @@ -127,6 +132,7 @@ export interface AddonsStats { device_revenue_kopeks: number; by_package: AddonByPackageItem[]; daily: DailyAddonItem[]; + daily_devices: DailyDeviceItem[]; } // ============ Deposits ============ diff --git a/src/components/sales-stats/AddonsTab.tsx b/src/components/sales-stats/AddonsTab.tsx index 73a1d1a..bf6ccbb 100644 --- a/src/components/sales-stats/AddonsTab.tsx +++ b/src/components/sales-stats/AddonsTab.tsx @@ -1,3 +1,4 @@ +import { useMemo } from 'react'; import { useQuery } from '@tanstack/react-query'; import { useTranslation } from 'react-i18next'; @@ -7,7 +8,7 @@ import { SALES_STATS } from '../../constants/salesStats'; import { useCurrency } from '../../hooks/useCurrency'; import { StatCard } from '../stats'; -import { SimpleAreaChart } from './SimpleAreaChart'; +import { DualAreaChart } from './DualAreaChart'; import { SimpleBarChart } from './SimpleBarChart'; interface AddonsTabProps { @@ -24,6 +25,18 @@ export function AddonsTab({ params }: AddonsTabProps) { staleTime: SALES_STATS.STALE_TIME, }); + const dailyChartData = useMemo(() => { + if (!data) return []; + const trafficByDate = new Map(data.daily.map((d) => [d.date, d.count])); + const deviceByDate = new Map(data.daily_devices.map((d) => [d.date, d.count])); + const allDates = Array.from(new Set([...trafficByDate.keys(), ...deviceByDate.keys()])).sort(); + return allDates.map((date) => ({ + date, + series1: trafficByDate.get(date) ?? 0, + series2: deviceByDate.get(date) ?? 0, + })); + }, [data]); + if (isLoading) { return (