[{"_1":2,"_183":-5,"_184":-5},"loaderData",{"_3":4,"_93":94},"root",{"_5":6,"_36":37,"_66":67},"ctx",{"_7":8,"_23":-5,"_24":25,"_26":27,"_28":20,"_29":20,"_30":20,"_31":-5,"_32":33,"_34":20,"_35":20},"auth",{"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":20,"_21":22},"sessionClaims","sessionId","sessionStatus","userId","actor","orgId","orgRole","orgSlug","orgPermissions","factorVerificationAge","isAuthenticated",false,"tokenType","session_token","user","preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesChatPanelState","notificationCount",0,"flagDenols","isTeamOrgMember","ENV",{"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":49,"_50":51,"_52":53,"_54":55,"_56":57,"_58":59,"_60":61,"_62":63,"_64":65},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","VAL_RUNTIME_NAME","prod","RENDER_GIT_COMMIT","807fcf9310514ac3300af510441b05f48071d6f0","RENDER_GIT_BRANCH","main","CLERK_PUBLISHABLE_KEY","pk_live_Y2xlcmsudmFsLnRvd24k","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","API_URL","https://api.val.town","clerkState",{"_68":69},"__internal_clerk_state",{"_70":71,"_72":47,"_73":74,"_75":74,"_76":20,"_77":74,"_78":74,"_79":74,"_80":74,"_81":82,"_91":20,"_92":20},"__clerk_ssr_state",{"_21":22,"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":20},"__publishableKey","__proxyUrl","","__domain","__isSatellite","__signInUrl","__signUpUrl","__afterSignInUrl","__afterSignUpUrl","__clerk_debug",{"_83":20,"_19":20,"_84":74,"_85":86,"_87":74,"_88":47,"_89":20,"_90":74},"isSignedIn","proxyUrl","reason","session-token-and-uat-missing","message","publishableKey","isSatellite","domain","__telemetryDisabled","__telemetryDebug","routes/embed.x.$handle.$name.$",{"_95":96,"_97":98,"_99":100,"_101":102,"_157":158,"_180":181,"_182":-5},"handle","nbbaier","name","counterTown","path","frontend/contexts/AnalyticsContext.tsx","project",{"_103":104,"_97":98,"_105":106,"_107":-5,"_108":20,"_109":110,"_111":74,"_112":-5,"_12":113,"_114":115,"_116":117,"_118":-5,"_119":-5,"_120":33,"_14":121,"_122":123,"_124":125,"_126":127,"_128":127,"_129":130,"_131":130,"_132":130,"_133":127,"_134":127,"_23":135,"_138":139,"_143":144,"_156":20},"id","85235054-fae8-11f0-bfaf-42dde27851f2","createdAt",["D",1769453702149],"deletedAt","legacyEnvVars","privacy","public","description","imageUrl","5d1042a9-7b0b-499d-8a72-3a8ac7a4e185","pinnedFileId","250e6e80-faf0-11f0-b714-42dde27851f2","pinPreview",true,"pinMigrated","screenshotVersion","likeCount","5f80108f-7ca4-4327-b77b-089dbe4b5a82","tursoName","85235054fae811f0bfaf42dde27851f2","tursoHostname","85235054fae811f0bfaf42dde27851f2-val-town.aws-us-east-2.turso.io","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm",{"_95":96,"_136":137},"profileImageUrl","https://secure.gravatar.com/avatar/0129a541b7b3574e92c4afd06c5e32da&d=identicon","org",{"_95":96,"_140":137,"_12":113,"_141":142},"avatar","tier","pro","branch",{"_145":146,"_97":45,"_103":147,"_148":104,"_149":-5,"_150":-5,"_151":-5,"_152":-5,"_153":-5,"_154":98,"_155":96},"version",152,"85239762-fae8-11f0-bfaf-42dde27851f2","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","isOwned","file",{"_103":159,"_97":160,"_161":162,"_163":164,"_165":147,"_166":167,"_168":117,"_105":169,"_145":170,"_171":172,"_173":174,"_175":20,"_176":-5,"_99":177},"24db7f0c-faf0-11f0-bde7-42dde27851f2","AnalyticsContext.tsx","fileId","88f10ece-fae8-11f0-8b50-42dde27851f2","parentId","23e73988-faf0-11f0-bde7-42dde27851f2","branchId","branchVersion",107,"latest",["D",1769456976575],1,"fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createContext, useContext, useMemo, useState, useEffect, useRef, useCallback, type ReactNode, type FC } from '../deps.ts';\nimport { subDays, subWeeks, subMonths, isAfter, parseISO } from 'https://cdn.jsdelivr.net/npm/date-fns@3.6.0/+esm';\nimport { formatSiteName, normalizeSiteName } from '../../shared/utils.ts';\nimport type { AnalyticsData, SiteStats } from '../../shared/types.ts';\n\ninterface AnalyticsContextType {\n overallStats: {\n totalSites: number;\n totalViews: number;\n totalPaths: number;\n dayViews: number;\n weekViews: number;\n monthViews: number;\n dayPercentage: number;\n weekPercentage: number;\n monthPercentage: number;\n uniqueVisitors: number;\n };\n sitesData: AnalyticsData;\n topPaths: Array<{ site: string; fullSite: string; path: string; views: number }>;\n topReferrers: Array<{ referrer: string; visits: number }>;\n visitorOrigins: Record;\n viewsOverTime: Record;\n chartData: {\n browsers: Record;\n os: Record;\n screenSizes: Record;\n countries: Record;\n timeData: Record;\n };\n allSites: Array<{ name: string; fullName: string; totalViews: number }>;\n error: string | null;\n connectionStatus: string;\n analyticsData: AnalyticsData;\n currentSite: string | null;\n setCurrentSite: (site: string | null) => void;\n siteExists: (siteName: string) => boolean;\n retryConnection: () => void;\n}\n\nconst AnalyticsContext = createContext(undefined);\n\nexport const useAnalytics = () => {\n const context = useContext(AnalyticsContext);\n if (!context) {\n throw new Error('useAnalytics must be used within an AnalyticsProvider');\n }\n return context;\n};\n\nconst findMatchingSite = (siteName: string | null, analyticsData: AnalyticsData): string | undefined => {\n if (!siteName) return undefined;\n const normalizedSiteName = normalizeSiteName(siteName);\n return Object.keys(analyticsData).find(site =>\n normalizeSiteName(site) === normalizedSiteName\n );\n};\n\nconst browserMap: Record = {\n 'Chrome': ['Chrome', 'Chromium'],\n 'Firefox': ['Firefox'],\n 'Safari': ['Safari'],\n 'Edge': ['Edge', 'Edg'],\n 'Opera': ['Opera'],\n 'IE': ['Internet Explorer', 'IE'],\n 'Other': ['Other']\n};\n\nconst osMap: Record = {\n 'Windows': ['Windows'],\n 'macOS': ['Mac', 'macOS'],\n 'iOS': ['iPhone', 'iPad', 'iOS'],\n 'Android': ['Android'],\n 'Linux': ['Linux', 'Ubuntu', 'Debian', 'Fedora', 'Red Hat', 'CentOS'],\n 'Other': ['Other']\n};\n\nfunction mapName(name: string, map: Record): string {\n for (const [key, values] of Object.entries(map)) {\n if (values.some(value => name.includes(value))) {\n return key;\n }\n }\n return 'Other';\n}\n\nfunction categorizeScreenSize(width: number): string {\n if (width < 768) return 'Phone';\n if (width < 1024) return 'Tablet';\n if (width < 1440) return 'Laptop';\n return 'Desktop';\n}\n\nconst calculatePercentages = (siteData: AnalyticsData) => {\n let dayViews = 0, weekViews = 0, monthViews = 0;\n const uniqueVisitors = new Set();\n const now = new Date();\n const oneDayAgo = subDays(now, 1);\n const oneWeekAgo = subWeeks(now, 1);\n const oneMonthAgo = subMonths(now, 1);\n\n Object.entries(siteData).forEach(([siteName, site]) => {\n Object.entries(site.paths || {}).forEach(([pathName, pathData]) => {\n (pathData.viewTimestamps || []).forEach((timestamp) => {\n const date = parseISO(timestamp);\n if (!isNaN(date.getTime())) {\n uniqueVisitors.add(`${siteName}-${pathName}-${timestamp.split('T')[0]}`);\n if (isAfter(date, oneDayAgo)) dayViews++;\n if (isAfter(date, oneWeekAgo)) weekViews++;\n if (isAfter(date, oneMonthAgo)) monthViews++;\n }\n });\n });\n });\n\n const totalViews = Object.values(siteData).reduce((sum, site) => sum + site.totalViews, 0);\n\n const dayPercentage = totalViews > 0 ? (dayViews / totalViews) * 100 : 0;\n const weekPercentage = totalViews > 0 ? (weekViews / totalViews) * 100 : 0;\n const monthPercentage = totalViews > 0 ? (monthViews / totalViews) * 100 : 0;\n\n return {\n dayPercentage,\n weekPercentage,\n monthPercentage,\n dayViews,\n weekViews,\n monthViews,\n totalViews,\n uniqueVisitors: uniqueVisitors.size\n };\n};\n\nconst aggregateData = (siteData: AnalyticsData, key: string): Record => {\n return Object.values(siteData).reduce((aggregatedData, site) => {\n Object.values(site.paths || {}).forEach(path => {\n Object.entries((path as any)[key] || {}).forEach(([item, count]) => {\n let mappedItem: string;\n switch (key) {\n case 'browsers':\n mappedItem = mapName(item, browserMap);\n break;\n case 'os':\n mappedItem = mapName(item, osMap);\n break;\n case 'screenSizes':\n mappedItem = categorizeScreenSize(parseInt(item.split('x')[0]));\n break;\n default:\n mappedItem = item;\n }\n aggregatedData[mappedItem] = (aggregatedData[mappedItem] || 0) + (count as number);\n });\n });\n return aggregatedData;\n }, {} as Record);\n};\n\nconst aggregateViewsOverTime = (siteData: AnalyticsData): Record => {\n const timeData: Record = {};\n Object.values(siteData).forEach(site => {\n Object.values(site.paths || {}).forEach(path => {\n (path.viewTimestamps || []).forEach(timestamp => {\n const date = timestamp.split('T')[0];\n timeData[date] = (timeData[date] || 0) + 1;\n });\n });\n });\n return timeData;\n};\n\nconst aggregateReferrers = (siteData: AnalyticsData): Array<{ referrer: string; visits: number }> => {\n const referrers: Record = {};\n Object.values(siteData).forEach(site => {\n Object.values(site.paths || {}).forEach(pathData => {\n Object.entries(pathData.referrers || {}).forEach(([referrer, count]) => {\n referrers[referrer] = (referrers[referrer] || 0) + count;\n });\n });\n });\n\n return Object.entries(referrers)\n .map(([referrer, visits]) => ({ referrer: referrer || '(direct)', visits }))\n .sort((a, b) => b.visits - a.visits)\n .slice(0, 10);\n};\n\nconst defaultData = {\n overallStats: { totalSites: 0, totalViews: 0, totalPaths: 0, dayViews: 0, weekViews: 0, monthViews: 0, dayPercentage: 0, weekPercentage: 0, monthPercentage: 0, uniqueVisitors: 0 },\n sitesData: {} as AnalyticsData,\n topPaths: [],\n topReferrers: [],\n visitorOrigins: {},\n viewsOverTime: {},\n chartData: { browsers: {}, os: {}, screenSizes: {}, countries: {}, timeData: {} },\n allSites: []\n};\n\nconst saveToLocalStorage = (key: string, value: any) => {\n localStorage.setItem(key, JSON.stringify(value));\n};\n\nconst loadFromLocalStorage = (key: string): any => {\n const data = localStorage.getItem(key);\n return data ? JSON.parse(data) : null;\n};\n\ninterface AnalyticsProviderProps {\n children: ReactNode;\n site?: string | null;\n}\n\n// Parse initial data from server-injected JSON script tag (XSS-safe pattern)\nconst getInitialAnalyticsData = (): AnalyticsData => {\n if (typeof window === 'undefined') return {};\n \n // First try server-injected data (faster initial load, no extra request)\n const initialDataElement = document.getElementById('initial-data');\n if (initialDataElement?.textContent?.trim()) {\n try {\n const serverData = JSON.parse(initialDataElement.textContent);\n if (Object.keys(serverData).length > 0) {\n saveToLocalStorage('analyticsData', serverData);\n return serverData;\n }\n } catch (e) {\n console.warn('Failed to parse server-injected initial data:', e);\n }\n }\n \n // Fall back to localStorage cache\n return loadFromLocalStorage('analyticsData') || {};\n};\n\nexport const AnalyticsProvider: FC = ({ children, site }) => {\n const [analyticsData, setAnalyticsData] = useState(getInitialAnalyticsData);\n const [error, setError] = useState(null);\n const [connectionStatus, setConnectionStatus] = useState('Connecting');\n const eventSourceRef = useRef(null);\n const retryTimeoutRef = useRef(null);\n const retryCountRef = useRef(0);\n const [currentSite, setCurrentSite] = useState(site || null);\n\n const MAX_RETRIES = 5;\n const INITIAL_RETRY_DELAY = 3000; // 3 seconds\n\n const setupDataStream = useCallback(() => {\n if (eventSourceRef.current) {\n return eventSourceRef.current;\n }\n\n const CLIENT_IDENTIFIER = 'counterTown-Dashboard';\n const STREAM_URL = `${window.location.origin}/stream?client=${CLIENT_IDENTIFIER}`;\n const eventSource = new EventSource(STREAM_URL);\n eventSourceRef.current = eventSource;\n\n let isInitialConnection = true;\n\n eventSource.onopen = () => {\n console.log('SSE connection opened');\n setConnectionStatus('Connected');\n retryCountRef.current = 0;\n isInitialConnection = false;\n };\n\n eventSource.onmessage = (event) => {\n try {\n const newData = JSON.parse(event.data);\n setAnalyticsData(prevData => {\n if (JSON.stringify(prevData) !== JSON.stringify(newData)) {\n saveToLocalStorage('analyticsData', newData);\n return newData;\n }\n return prevData;\n });\n setError(null);\n } catch (error) {\n console.error('Error parsing SSE data:', error);\n setError('Failed to parse analytics data.');\n }\n };\n\n eventSource.onerror = (error) => {\n if (isInitialConnection) {\n isInitialConnection = false;\n return;\n }\n\n if (document.visibilityState === 'hidden') {\n return;\n }\n\n console.warn('SSE Error:', error);\n setConnectionStatus('Error - Reconnecting');\n retryConnection();\n };\n\n return eventSource;\n }, []);\n\n const retryConnection = useCallback(() => {\n if (retryCountRef.current >= MAX_RETRIES) {\n console.error('Max retries reached. Please refresh the page.');\n setConnectionStatus('Connection Failed');\n return;\n }\n\n const retryDelay = Math.min(INITIAL_RETRY_DELAY * (2 ** retryCountRef.current), 30000);\n console.log(`Retrying connection in ${retryDelay}ms (Attempt ${retryCountRef.current + 1}/${MAX_RETRIES})`);\n\n if (retryTimeoutRef.current !== null) {\n clearTimeout(retryTimeoutRef.current);\n }\n retryTimeoutRef.current = window.setTimeout(() => {\n retryCountRef.current += 1;\n if (eventSourceRef.current) {\n eventSourceRef.current.close();\n }\n eventSourceRef.current = null;\n setupDataStream();\n }, retryDelay);\n }, [setupDataStream]);\n\n useEffect(() => {\n const eventSource = setupDataStream();\n\n const handleVisibilityChange = () => {\n if (document.visibilityState === 'visible' && !eventSourceRef.current) {\n console.log('Page became visible, re-establishing SSE connection');\n setupDataStream();\n }\n };\n\n window.addEventListener('visibilitychange', handleVisibilityChange);\n\n return () => {\n window.removeEventListener('visibilitychange', handleVisibilityChange);\n };\n }, [setupDataStream]);\n\n const processedData = useMemo(() => {\n if (!analyticsData) return defaultData;\n\n try {\n const matchingSite = findMatchingSite(currentSite, analyticsData);\n const siteData = matchingSite ? { [matchingSite]: analyticsData[matchingSite] } : analyticsData;\n\n const {\n dayPercentage, weekPercentage, monthPercentage,\n dayViews, weekViews, monthViews,\n totalViews, uniqueVisitors\n } = calculatePercentages(siteData);\n\n const totalSites = Object.keys(siteData).length;\n const totalPaths = Object.values(siteData).reduce((sum, site) => sum + Object.keys(site?.paths || {}).length, 0);\n\n const topPaths = Object.entries(siteData).flatMap(([site, siteData]) =>\n Object.entries(siteData?.paths || {}).map(([path, pathData]) => ({\n site: formatSiteName(site),\n fullSite: site,\n path,\n views: pathData.views || 0\n }))\n ).sort((a, b) => b.views - a.views).slice(0, 10);\n\n const topReferrers = aggregateReferrers(siteData);\n\n const visitorOrigins = aggregateData(siteData, 'countries');\n\n const viewsOverTime = aggregateViewsOverTime(siteData);\n\n const chartData = {\n browsers: aggregateData(siteData, 'browsers'),\n os: aggregateData(siteData, 'os'),\n screenSizes: aggregateData(siteData, 'screenSizes'),\n countries: visitorOrigins,\n timeData: viewsOverTime\n };\n\n const allSites = Object.keys(analyticsData).map(site => ({\n name: formatSiteName(site),\n fullName: site,\n totalViews: analyticsData[site].totalViews || 0\n })).sort((a, b) => b.totalViews - a.totalViews);\n\n return {\n overallStats: {\n totalSites, totalViews, totalPaths,\n dayViews, weekViews, monthViews,\n dayPercentage, weekPercentage, monthPercentage,\n uniqueVisitors\n },\n sitesData: siteData,\n topPaths,\n topReferrers,\n visitorOrigins,\n viewsOverTime,\n chartData,\n allSites\n };\n } catch (error) {\n console.error('Error processing analytics data:', error);\n return defaultData;\n }\n }, [analyticsData, currentSite]);\n\n const siteExists = useCallback((siteName: string) => {\n return !!findMatchingSite(siteName, analyticsData);\n }, [analyticsData]);\n\n const contextValue = useMemo(() => ({\n ...processedData,\n error,\n connectionStatus,\n analyticsData,\n currentSite,\n setCurrentSite,\n siteExists,\n retryConnection: () => {\n retryCountRef.current = 0;\n retryConnection();\n }\n }), [processedData, error, connectionStatus, analyticsData, retryConnection, currentSite, siteExists]);\n\n return (\n \n {children}\n \n );\n};\n","deleted","label",[178,179,160],"frontend","contexts","permalink","https://www.val.town/x/nbbaier/counterTown/code/frontend/contexts/AnalyticsContext.tsx","extension","actionData","errors"]