astro-tractstack 2.0.0-rc.0

package/templates/src/components/storykeep/state/FetchAnalytics.tsx

@@ -0,0 +1,350 @@
+import { useEffect, useCallback, useRef, useState } from 'react';
+import { useStore } from '@nanostores/react';
+import { epinetCustomFilters } from '@/stores/analytics';
+import { TractStackAPI } from '@/utils/api';
+
+const VERBOSE = false;
+
+interface AnalyticsState {
+  dashboard: any;
+  leads: any;
+  epinet: any;
+  userCounts: any[];
+  hourlyNodeActivity: any;
+  isLoading: boolean;
+  status: string;
+  error: string | null;
+}
+
+interface FetchAnalyticsProps {
+  onAnalyticsUpdate: (analytics: AnalyticsState) => void;
+}
+
+export default function FetchAnalytics({
+  onAnalyticsUpdate,
+}: FetchAnalyticsProps) {
+  const $epinetCustomFilters = useStore(epinetCustomFilters);
+  const isInitialized = useRef<boolean>(false);
+  const isInitializing = useRef<boolean>(false);
+  const fetchCount = useRef<number>(0);
+
+  // Add polling state
+  const [pollingTimer, setPollingTimer] = useState<NodeJS.Timeout | null>(null);
+  const [pollingAttempts, setPollingAttempts] = useState(0);
+  const [pollingStartTime, setPollingStartTime] = useState<number | null>(null);
+  const MAX_POLLING_ATTEMPTS = 3;
+  const POLLING_DELAYS = [2000, 5000, 10000]; // 2s, 5s, 10s
+  const MAX_POLLING_TIME = 30000; // 30 seconds total max
+
+  if (VERBOSE)
+    console.log('🔄 FetchAnalytics RENDER', {
+      renderCount: ++fetchCount.current,
+      filters: {
+        startTimeUTC: $epinetCustomFilters.startTimeUTC,
+        endTimeUTC: $epinetCustomFilters.endTimeUTC,
+        visitorType: $epinetCustomFilters.visitorType,
+        selectedUserId: $epinetCustomFilters.selectedUserId,
+      },
+      isInitialized: isInitialized.current,
+      storeObjectRef: $epinetCustomFilters,
+    });
+
+  // Clear polling timer on unmount
+  useEffect(() => {
+    return () => {
+      if (pollingTimer) {
+        clearTimeout(pollingTimer);
+      }
+    };
+  }, [pollingTimer]);
+
+  // Fetch all analytics data
+  const fetchAllAnalytics = useCallback(async () => {
+    if (VERBOSE)
+      console.log('🚀 fetchAllAnalytics CALLED', {
+        timestamp: new Date().toISOString(),
+        filters: {
+          startTimeUTC: $epinetCustomFilters.startTimeUTC,
+          endTimeUTC: $epinetCustomFilters.endTimeUTC,
+          visitorType: $epinetCustomFilters.visitorType,
+          selectedUserId: $epinetCustomFilters.selectedUserId,
+        },
+      });
+
+    try {
+      // Clear existing timer
+      if (pollingTimer) {
+        clearTimeout(pollingTimer);
+        setPollingTimer(null);
+      }
+
+      // Set loading state
+      if (VERBOSE) console.log('📤 Setting loading state');
+      onAnalyticsUpdate({
+        dashboard: null,
+        leads: null,
+        epinet: null,
+        userCounts: [],
+        hourlyNodeActivity: {},
+        isLoading: true,
+        status: 'loading',
+        error: null,
+      });
+
+      const { startTimeUTC, endTimeUTC, visitorType, selectedUserId } =
+        $epinetCustomFilters;
+
+      // Build URL parameters for TractStackAPI
+      const params = new URLSearchParams();
+
+      if (startTimeUTC && endTimeUTC) {
+        // Convert UTC timestamps to hours-back integers (what backend expects)
+        const now = new Date();
+        const startTime = new Date(startTimeUTC);
+        const endTime = new Date(endTimeUTC);
+
+        const startHour = Math.ceil(
+          (now.getTime() - startTime.getTime()) / (1000 * 60 * 60)
+        );
+        const endHour = Math.floor(
+          (now.getTime() - endTime.getTime()) / (1000 * 60 * 60)
+        );
+
+        params.append('startHour', startHour.toString());
+        params.append('endHour', endHour.toString());
+
+        if (VERBOSE)
+          console.log('⏰ Time calculations', {
+            now: now.toISOString(),
+            startTime: startTime.toISOString(),
+            endTime: endTime.toISOString(),
+            startHour,
+            endHour,
+          });
+      }
+
+      if (visitorType) params.append('visitorType', visitorType);
+      if (selectedUserId) params.append('userId', selectedUserId);
+
+      // Use TractStackAPI
+      const api = new TractStackAPI(
+        window.TRACTSTACK_CONFIG?.tenantId || 'default'
+      );
+      const endpoint = `/api/v1/analytics/all${params.toString() ? `?${params.toString()}` : ''}`;
+
+      if (VERBOSE) console.log('📡 Making API request', { endpoint });
+      const response = await api.get(endpoint);
+
+      if (!response.success) {
+        throw new Error(response.error || 'Failed to fetch analytics data');
+      }
+
+      const data = response.data;
+      if (VERBOSE)
+        console.log('✅ API response received', {
+          hasData: !!data,
+          dataKeys: data ? Object.keys(data) : [],
+          userCountsLength: data?.userCounts?.length || 0,
+          hasHourlyNodeActivity: !!data?.hourlyNodeActivity,
+        });
+
+      // Check if data is still loading - add polling logic here
+      const isStillLoading =
+        data?.status === 'loading' ||
+        data?.status === 'refreshing' ||
+        data?.dashboard?.status === 'loading' ||
+        data?.dashboard?.status === 'refreshing' ||
+        data?.leads?.status === 'loading' ||
+        data?.leads?.status === 'refreshing' ||
+        data?.epinet?.status === 'loading' ||
+        data?.epinet?.status === 'refreshing';
+
+      if (VERBOSE) {
+        console.log('🔍 Loading status check', {
+          overallStatus: data?.status,
+          dashboardStatus: data?.dashboard?.status,
+          leadsStatus: data?.leads?.status,
+          epinetStatus: data?.epinet?.status,
+          isStillLoading,
+          pollingAttempts,
+        });
+      }
+
+      if (isStillLoading && pollingAttempts < MAX_POLLING_ATTEMPTS) {
+        // Check if we've been polling too long
+        const now = Date.now();
+        if (pollingStartTime && now - pollingStartTime > MAX_POLLING_TIME) {
+          if (VERBOSE) console.log('⏰ Max polling time reached, stopping');
+          setPollingStartTime(null);
+          // Continue with data even if still loading
+        } else {
+          if (VERBOSE)
+            console.log('⏳ Analytics data still loading, polling...', {
+              attempt: pollingAttempts + 1,
+            });
+
+          // Set start time if this is the first poll
+          if (!pollingStartTime) {
+            setPollingStartTime(now);
+          }
+
+          const delayMs =
+            POLLING_DELAYS[pollingAttempts] ||
+            POLLING_DELAYS[POLLING_DELAYS.length - 1];
+
+          const newTimer = setTimeout(() => {
+            setPollingAttempts(pollingAttempts + 1);
+            fetchAllAnalytics();
+          }, delayMs);
+
+          setPollingTimer(newTimer);
+
+          // Update with partial data but keep loading state
+          onAnalyticsUpdate({
+            dashboard: data.dashboard,
+            leads: data.leads,
+            epinet: data.epinet,
+            userCounts: data.userCounts || [],
+            hourlyNodeActivity: data.hourlyNodeActivity || {},
+            status: 'loading',
+            error: null,
+            isLoading: true,
+          });
+
+          return;
+        }
+      }
+
+      const newAnalytics = {
+        dashboard: data.dashboard,
+        leads: data.leads,
+        epinet: data.epinet,
+        userCounts: data.userCounts || [],
+        hourlyNodeActivity: data.hourlyNodeActivity || {},
+        status: 'complete',
+        error: null,
+        isLoading: false,
+      };
+
+      if (VERBOSE) console.log('📤 Calling onAnalyticsUpdate');
+      onAnalyticsUpdate(newAnalytics);
+
+      // Update epinetCustomFilters with additional data from response
+      if (VERBOSE)
+        console.log('🔄 BEFORE store update', {
+          currentStoreRef: epinetCustomFilters.get(),
+          aboutToSet: {
+            userCounts: data.userCounts?.length || 0,
+            hourlyNodeActivity: !!data.hourlyNodeActivity,
+          },
+        });
+
+      epinetCustomFilters.set(window.TRACTSTACK_CONFIG?.tenantId || 'default', {
+        ...$epinetCustomFilters,
+        userCounts: data.userCounts || [],
+        hourlyNodeActivity: data.hourlyNodeActivity || {},
+      });
+
+      // Reset polling attempts and start time on success
+      setPollingAttempts(0);
+      setPollingStartTime(null);
+
+      if (VERBOSE)
+        console.log('🔄 AFTER store update', {
+          newStoreRef: epinetCustomFilters.get(),
+        });
+    } catch (error) {
+      console.error('❌ Analytics fetch error:', error);
+
+      const errorMessage =
+        error instanceof Error ? error.message : 'Unknown error occurred';
+
+      onAnalyticsUpdate({
+        dashboard: null,
+        leads: null,
+        epinet: null,
+        userCounts: [],
+        hourlyNodeActivity: {},
+        status: 'error',
+        error: errorMessage,
+        isLoading: false,
+      });
+
+      // Schedule retry if we haven't reached max attempts
+      if (pollingAttempts < MAX_POLLING_ATTEMPTS) {
+        if (VERBOSE)
+          console.log(
+            '🔄 Scheduling retry due to error, attempt',
+            pollingAttempts + 1
+          );
+
+        const delayMs =
+          POLLING_DELAYS[pollingAttempts] ||
+          POLLING_DELAYS[POLLING_DELAYS.length - 1];
+
+        const newTimer = setTimeout(() => {
+          setPollingAttempts(pollingAttempts + 1);
+          fetchAllAnalytics();
+        }, delayMs);
+
+        setPollingTimer(newTimer);
+      }
+    }
+  }, [
+    $epinetCustomFilters.startTimeUTC,
+    $epinetCustomFilters.endTimeUTC,
+    $epinetCustomFilters.visitorType,
+    $epinetCustomFilters.selectedUserId,
+    pollingAttempts,
+  ]);
+
+  // Initialize on first mount
+  useEffect(() => {
+    if (!isInitialized.current && !isInitializing.current) {
+      if (VERBOSE) console.log('🏁 Initializing FetchAnalytics');
+      isInitializing.current = true;
+
+      const nowUTC = new Date();
+      const oneWeekAgoUTC = new Date(
+        nowUTC.getTime() - 7 * 24 * 60 * 60 * 1000
+      );
+
+      epinetCustomFilters.set(window.TRACTSTACK_CONFIG?.tenantId || 'default', {
+        enabled: true,
+        visitorType: 'all',
+        selectedUserId: null,
+        startTimeUTC: oneWeekAgoUTC.toISOString(),
+        endTimeUTC: nowUTC.toISOString(),
+        userCounts: [],
+        hourlyNodeActivity: {},
+      });
+
+      isInitialized.current = true;
+      isInitializing.current = false;
+    }
+  }, []);
+
+  // Fetch when filters change
+  useEffect(() => {
+    if (
+      isInitialized.current &&
+      $epinetCustomFilters.enabled &&
+      $epinetCustomFilters.visitorType !== null &&
+      $epinetCustomFilters.startTimeUTC !== null &&
+      $epinetCustomFilters.endTimeUTC !== null
+    ) {
+      if (VERBOSE) console.log('🔄 Filters changed, fetching analytics');
+      setPollingAttempts(0); // Reset polling attempts when filters change
+      setPollingStartTime(null); // Reset polling start time
+      fetchAllAnalytics();
+    }
+  }, [
+    $epinetCustomFilters.enabled,
+    $epinetCustomFilters.visitorType,
+    $epinetCustomFilters.selectedUserId,
+    $epinetCustomFilters.startTimeUTC,
+    $epinetCustomFilters.endTimeUTC,
+  ]);
+
+  return null;
+}

package/templates/src/components/storykeep/widgets/ResponsiveLine.tsx

@@ -0,0 +1,319 @@
+import {
+  LineChart,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ResponsiveContainer,
+} from 'recharts';
+import { colors } from '@/constants';
+import { useState, useEffect, useMemo } from 'react';
+import { useStore } from '@nanostores/react';
+import { epinetCustomFilters } from '@/stores/analytics';
+
+interface Point {
+  y: number;
+}
+
+interface Series {
+  id: string;
+  data: Point[];
+}
+
+interface DataProps {
+  data: Series[];
+}
+
+interface RechartsDataPoint {
+  name: number;
+  [key: string]: number | undefined;
+}
+
+const MOBILE_BREAKPOINT = 768;
+
+const ResponsiveLine = ({ data }: DataProps) => {
+  const [windowWidth, setWindowWidth] = useState(
+    typeof window !== 'undefined' ? window.innerWidth : 0
+  );
+  const $epinetCustomFilters = useStore(epinetCustomFilters);
+  const isMobile = windowWidth < MOBILE_BREAKPOINT;
+
+  useEffect(() => {
+    const handleResize = () => setWindowWidth(window.innerWidth);
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  // Calculate time context from epinetCustomFilters using actual data length
+  const timeContext = useMemo(() => {
+    const { startTimeUTC, endTimeUTC } = $epinetCustomFilters;
+
+    // Get actual number of data points
+    const dataLength = data?.[0]?.data?.length || 0;
+
+    if (!startTimeUTC || !endTimeUTC || dataLength === 0) {
+      // Default fallback
+      return {
+        xTickValues: [0, 1, 2, 3, 4, 5, 6, 7],
+        xAxisLegend: 'Time ago',
+        formatXAxisTick: (value: number) => `${value}`,
+      };
+    }
+
+    const startTime = new Date(startTimeUTC);
+    const endTime = new Date(endTimeUTC);
+    const totalMs = Math.abs(endTime.getTime() - startTime.getTime());
+    const totalHours = totalMs / (1000 * 60 * 60);
+
+    // For small datasets (≤8 bins), label each bin individually
+    // For larger datasets, generate max 8 evenly spaced tick positions
+    let tickPositions = [];
+
+    if (dataLength <= 8) {
+      // Label every data point for small datasets
+      tickPositions = Array.from({ length: dataLength }, (_, i) => i);
+    } else {
+      // Generate max 8 evenly spaced positions for larger datasets
+      const maxTicks = 8;
+      for (let i = 0; i < maxTicks; i++) {
+        const position = Math.floor((i * (dataLength - 1)) / (maxTicks - 1));
+        tickPositions.push(position);
+      }
+    }
+
+    if (totalHours <= 48) {
+      // Hours: Backend data is reverse chronological (newest first)
+      const formatTick = (value: number) => {
+        // Handle single data point edge case
+        if (dataLength <= 1) {
+          return '0h';
+        }
+        const hoursAgo = Math.round((value / (dataLength - 1)) * totalHours);
+        return `${hoursAgo}h`;
+      };
+
+      // Remove duplicates
+      const uniqueLabels = new Set();
+      const uniqueTicks = tickPositions.filter((pos) => {
+        const label = formatTick(pos);
+        if (uniqueLabels.has(label)) return false;
+        uniqueLabels.add(label);
+        return true;
+      });
+
+      return {
+        xTickValues: uniqueTicks,
+        xAxisLegend: 'Hours ago',
+        formatXAxisTick: formatTick,
+      };
+    } else if (totalHours <= 336) {
+      // <= 14 days
+      // Days: Backend data is reverse chronological (newest first)
+      const totalDays = totalHours / 24;
+      const formatTick = (value: number) => {
+        // Handle single data point edge case
+        if (dataLength <= 1) {
+          return '0d';
+        }
+        const daysAgo = Math.round((value / (dataLength - 1)) * totalDays);
+        return `${daysAgo}d`;
+      };
+
+      // Remove duplicates
+      const uniqueLabels = new Set();
+      const uniqueTicks = tickPositions.filter((pos) => {
+        const label = formatTick(pos);
+        if (uniqueLabels.has(label)) return false;
+        uniqueLabels.add(label);
+        return true;
+      });
+
+      return {
+        xTickValues: uniqueTicks,
+        xAxisLegend: 'Days ago',
+        formatXAxisTick: formatTick,
+      };
+    } else {
+      // Weeks: Backend data is reverse chronological (newest first)
+      const totalWeeks = totalHours / 168;
+      const formatTick = (value: number) => {
+        // Handle single data point edge case
+        if (dataLength <= 1) {
+          return '0w';
+        }
+        const weeksAgo = Math.round((value / (dataLength - 1)) * totalWeeks);
+        return `${weeksAgo}w`;
+      };
+
+      // Remove duplicates
+      const uniqueLabels = new Set();
+      const uniqueTicks = tickPositions.filter((pos) => {
+        const label = formatTick(pos);
+        if (uniqueLabels.has(label)) return false;
+        uniqueLabels.add(label);
+        return true;
+      });
+
+      return {
+        xTickValues: uniqueTicks,
+        xAxisLegend: 'Weeks ago',
+        formatXAxisTick: formatTick,
+      };
+    }
+  }, [
+    $epinetCustomFilters.startTimeUTC,
+    $epinetCustomFilters.endTimeUTC,
+    data,
+  ]);
+
+  const rechartsData: RechartsDataPoint[] = data
+    .map((series) => {
+      return series.data.map((point, index) => ({
+        name: index,
+        [series.id]: point.y,
+      }));
+    })
+    .reduce((acc, curr) => {
+      curr.forEach((obj, index) => {
+        if (!acc[index]) {
+          acc[index] = { name: index };
+        }
+        acc[index] = { ...acc[index], ...obj };
+      });
+      return acc;
+    }, [] as RechartsDataPoint[]);
+
+  const maxY = Math.max(
+    ...data.flatMap((series) => series.data.map((point) => point.y))
+  );
+
+  const getLineStyle = (index: number) => {
+    const patterns = [
+      { strokeDasharray: '0', pattern: 'Solid' },
+      { strokeDasharray: '8 4', pattern: 'Long dash' },
+      { strokeDasharray: '2 2', pattern: 'Dot' },
+      { strokeDasharray: '6 2 2 2', pattern: 'Dash-dot' },
+      { strokeDasharray: '12 4', pattern: 'Extra long dash' },
+      { strokeDasharray: '4 4', pattern: 'Medium dash' },
+      { strokeDasharray: '8 2 2 2 2 2', pattern: 'Dash-dot-dot' },
+      { strokeDasharray: '16 2', pattern: 'Very long dash' },
+      { strokeDasharray: '2 6', pattern: 'Sparse dot' },
+      { strokeDasharray: '12 2 2 2', pattern: 'Long dash-dot' },
+      { strokeDasharray: '4 2 4', pattern: 'Dash gap dash' },
+      { strokeDasharray: '8 2 2 2 2', pattern: 'Dash double-dot' },
+    ];
+
+    return {
+      stroke: colors[index % colors.length],
+      strokeDasharray: patterns[index % patterns.length].strokeDasharray,
+      pattern: patterns[index % patterns.length].pattern,
+    };
+  };
+
+  return (
+    <div className="flex h-full w-full flex-col">
+      <ResponsiveContainer width="100%" height="100%">
+        <LineChart
+          data={rechartsData}
+          margin={
+            isMobile
+              ? { top: 5, right: 5, left: 0, bottom: 5 }
+              : { top: 20, right: 20, left: 20, bottom: 20 }
+          }
+          style={{
+            borderRadius: '0.375rem',
+            backgroundColor: '#282C34',
+            color: '#ABB2BF',
+          }}
+        >
+          <CartesianGrid strokeDasharray="3 3" stroke="#3E4451" />
+          <XAxis
+            dataKey="name"
+            type="number"
+            domain={[0, Math.max(...timeContext.xTickValues, 1)]}
+            ticks={timeContext.xTickValues}
+            tickFormatter={timeContext.formatXAxisTick}
+            label={
+              !isMobile
+                ? {
+                    value: timeContext.xAxisLegend,
+                    position: 'bottom',
+                    offset: 20,
+                    style: { fill: '#ABB2BF' },
+                  }
+                : undefined
+            }
+            padding={{ left: 10, right: 10 }}
+            stroke="#ABB2BF"
+            tick={{ fontSize: isMobile ? 12 : 14 }}
+          />
+          <YAxis
+            domain={[0, maxY]}
+            tickCount={5}
+            label={
+              !isMobile
+                ? {
+                    value: 'Events',
+                    angle: -90,
+                    position: 'insideLeft',
+                    offset: 10,
+                    dy: 10,
+                    style: { fill: '#ABB2BF' },
+                  }
+                : undefined
+            }
+            padding={{ top: 10, bottom: 10 }}
+            stroke="#ABB2BF"
+            tick={{ fontSize: isMobile ? 12 : 14 }}
+          />
+          <Tooltip
+            contentStyle={{
+              backgroundColor: '#21252B',
+              border: '1px solid #3E4451',
+              color: '#ABB2BF',
+              fontSize: isMobile ? 12 : 14,
+            }}
+          />
+          <Legend
+            verticalAlign={isMobile ? 'bottom' : 'top'}
+            height={isMobile ? 100 : 80}
+            wrapperStyle={{
+              color: '#ABB2BF',
+              fontSize: isMobile ? 11 : 16,
+              paddingTop: isMobile ? '0.5rem' : 0,
+              paddingBottom: isMobile ? '0.5rem' : 0,
+              display: 'flex',
+              flexWrap: 'wrap',
+              justifyContent: 'center',
+            }}
+          />
+          {data.map((series, index) => {
+            const lineStyle = getLineStyle(index);
+            return (
+              <Line
+                key={series.id}
+                type="monotone"
+                dataKey={series.id}
+                name={`${series.id} (${lineStyle.pattern})`}
+                stroke={lineStyle.stroke}
+                strokeDasharray={lineStyle.strokeDasharray}
+                strokeWidth={2}
+                dot={false}
+                activeDot={{
+                  r: 8,
+                  strokeWidth: 2,
+                  fill: lineStyle.stroke,
+                  stroke: '#282C34',
+                }}
+              />
+            );
+          })}
+        </LineChart>
+      </ResponsiveContainer>
+    </div>
+  );
+};
+
+export default ResponsiveLine;