Wired up member counts to stats growth page (#23139)

ref https://linear.app/ghost/issue/PROD-658/

The growth tab currently has fixture data for demo purposes. This wires
up the member counts endpoint used by the Admin Dashboard. We had to
make a small adjustment to allow for a start date, as it was previously
always looking back 91 days. We will probably want to make some
additional adjustments to this down the road.

Author: 9larsons

apps/admin-x-framework/src/api/stats.ts

@@ -15,11 +15,37 @@ export type TopContentResponseType = {
     meta: Meta;
 }
 
+export type MemberStatusItem = {
+    date: string;
+    paid: number;
+    free: number;
+    comped: number;
+    paid_subscribed: number;
+    paid_canceled: number;
+}
+
+export type MemberCountHistoryResponseType = {
+    stats: MemberStatusItem[];
+    meta: {
+        totals: {
+            paid: number;
+            free: number;
+            comped: number;
+        }
+    };
+}
+
 // Requests
 
 const dataType = 'TopContentResponseType';
+const memberCountHistoryDataType = 'MemberCountHistoryResponseType';
 
 export const useTopContent = createQuery<TopContentResponseType>({
     dataType,
     path: '/stats/top-content/'
+});
+
+export const useMemberCountHistory = createQuery<MemberCountHistoryResponseType>({
+    dataType: memberCountHistoryDataType,
+    path: '/stats/member_count/'
 });

apps/stats/src/hooks/useGrowthStats.ts

@@ -0,0 +1,153 @@
+import moment from 'moment';
+import {MemberStatusItem, useMemberCountHistory} from '@tryghost/admin-x-framework/api/stats';
+import {formatNumber} from '@tryghost/shade';
+import {useMemo} from 'react';
+
+// Type for direction values
+export type DiffDirection = 'up' | 'down' | 'same';
+
+// Helper function to convert range to date parameters
+export const getRangeDates = (rangeInDays: number) => {
+    // Always use UTC to stay aligned with the backend’s date arithmetic
+    const endDate = moment.utc().format('YYYY-MM-DD');
+    let dateFrom;
+    
+    if (rangeInDays === 1) {
+        // Today
+        dateFrom = endDate;
+    } else if (rangeInDays === 1000) {
+        // All time - use a far past date
+        dateFrom = '2010-01-01';
+    } else {
+        // Specific range
+        // Guard against invalid ranges
+        const safeRange = Math.max(1, rangeInDays);
+        dateFrom = moment.utc().subtract(safeRange - 1, 'days').format('YYYY-MM-DD');
+    }
+    
+    return {dateFrom, endDate};
+};
+
+// Calculate totals from member data
+const calculateTotals = (memberData: MemberStatusItem[]) => {
+    if (!memberData.length) {
+        return {
+            totalMembers: 0,
+            freeMembers: 0,
+            paidMembers: 0,
+            percentChanges: {
+                total: '0%',
+                free: '0%',
+                paid: '0%'
+            },
+            directions: {
+                total: 'same' as DiffDirection,
+                free: 'same' as DiffDirection,
+                paid: 'same' as DiffDirection
+            }
+        };
+    }
+    
+    // Get latest values
+    const latest = memberData[memberData.length - 1];
+    
+    // Calculate total members
+    const totalMembers = latest.free + latest.paid + latest.comped;
+    
+    // Calculate percentage changes if we have enough data
+    const percentChanges = {
+        total: '0%',
+        free: '0%',
+        paid: '0%'
+    };
+    
+    const directions = {
+        total: 'same' as DiffDirection,
+        free: 'same' as DiffDirection,
+        paid: 'same' as DiffDirection
+    };
+    
+    if (memberData.length > 1) {
+        // Get first day in range
+        const first = memberData[0];
+        const firstTotal = first.free + first.paid + first.comped;
+        
+        if (firstTotal > 0) {
+            const totalChange = ((totalMembers - firstTotal) / firstTotal) * 100;
+            percentChanges.total = `${Math.abs(totalChange).toFixed(1)}%`;
+            directions.total = totalChange > 0 ? 'up' : totalChange < 0 ? 'down' : 'same';
+        }
+        
+        if (first.free > 0) {
+            const freeChange = ((latest.free - first.free) / first.free) * 100;
+            percentChanges.free = `${Math.abs(freeChange).toFixed(1)}%`;
+            directions.free = freeChange > 0 ? 'up' : freeChange < 0 ? 'down' : 'same';
+        }
+        
+        if (first.paid > 0) {
+            const paidChange = ((latest.paid - first.paid) / first.paid) * 100;
+            percentChanges.paid = `${Math.abs(paidChange).toFixed(1)}%`;
+            directions.paid = paidChange > 0 ? 'up' : paidChange < 0 ? 'down' : 'same';
+        }
+    }
+    
+    return {
+        totalMembers,
+        freeMembers: latest.free,
+        paidMembers: latest.paid,
+        percentChanges,
+        directions
+    };
+};
+
+// Format chart data 
+const formatChartData = (memberData: MemberStatusItem[]) => {
+    return memberData.map(item => ({
+        date: item.date,
+        value: item.free + item.paid + item.comped,
+        free: item.free,
+        paid: item.paid,
+        comped: item.comped,
+        formattedValue: formatNumber(item.free + item.paid + item.comped),
+        label: 'Total members'
+    }));
+};
+
+export const useGrowthStats = (range: number) => {
+    // Calculate date range
+    const {dateFrom, endDate} = useMemo(() => getRangeDates(range), [range]);
+    
+    // Fetch member count history from API
+    const {data: memberCountResponse, isLoading} = useMemberCountHistory({
+        searchParams: {
+            date_from: dateFrom
+        }
+    });
+    
+    // Process member data with stable reference
+    const memberData = useMemo(() => {
+        // Check the structure of the response and extract data
+        if (memberCountResponse?.stats) {
+            return memberCountResponse.stats;
+        } else if (Array.isArray(memberCountResponse)) {
+            // If response is directly an array
+            return memberCountResponse;
+        }
+        return [];
+    }, [memberCountResponse]);
+    
+    // Calculate totals
+    const totalsData = useMemo(() => calculateTotals(memberData), [memberData]);
+    
+    // Format chart data
+    const chartData = useMemo(() => formatChartData(memberData), [memberData]);
+    
+    return {
+        isLoading,
+        memberData,
+        dateFrom,
+        endDate,
+        totals: totalsData,
+        chartData
+    };
+};