ahoy_analytics 0.1.0

data/app/frontend/pages/admin/analytics/ui/devices-panel.tsx

@@ -0,0 +1,474 @@
+import { useCallback, useEffect, useMemo, useState } from 'react'
+
+import { fetchDevices } from '../api'
+import { useQueryContext } from '../query-context'
+import type { DevicesPayload, ListMetricKey } from '../types'
+import { useSiteContext } from '../site-context'
+import { MetricTable } from './list-table'
+import { PanelTab, PanelTabs } from './panel-tabs'
+import RemoteDetailsDialog from './remote-details-dialog'
+import {
+  parseDialogFromPath,
+  buildDialogPath,
+  baseAnalyticsPath,
+  devicesSegmentForMode,
+  devicesModeForSegment
+} from '../lib/dialog-path'
+import { analyticsPath } from '../lib/base-path'
+import DetailsButton from './details-button'
+
+const DEVICE_TABS: Array<{ value: 'browser' | 'os' | 'size'; label: string }> = [
+  { value: 'browser', label: 'Browser' },
+  { value: 'os', label: 'OS' },
+  { value: 'size', label: 'Size' }
+]
+
+const TAB_TO_MODE: Record<'browser' | 'os' | 'size', string> = {
+  browser: 'browsers',
+  os: 'operating-systems',
+  size: 'screen-sizes'
+}
+
+const MODE_TO_TAB: Record<string, 'browser' | 'os' | 'size'> = {
+  browsers: 'browser',
+  'browser-versions': 'browser',
+  'operating-systems': 'os',
+  'operating-system-versions': 'os',
+  'screen-sizes': 'size'
+}
+
+const STORAGE_PREFIX = 'admin.analytics.devices'
+
+type DevicesPanelProps = {
+  initialData: DevicesPayload
+}
+
+export default function DevicesPanel({ initialData }: DevicesPanelProps) {
+  const { query, updateQuery } = useQueryContext()
+  const site = useSiteContext()
+
+  const [mode, setMode] = useState(() => {
+    if (typeof window === 'undefined') {
+      return 'browsers'
+    }
+    const stored = localStorage.getItem(`${STORAGE_PREFIX}.${site.domain}`)
+    if (stored && Object.keys(MODE_TO_TAB).includes(stored)) {
+      return stored
+    }
+    return 'browsers'
+  })
+  const [data, setData] = useState<DevicesPayload>(initialData)
+  const [loading, setLoading] = useState(false)
+  const [detailsOpen, setDetailsOpen] = useState(false)
+
+  useEffect(() => {
+    const controller = new AbortController()
+    setLoading(true)
+    fetchDevices(query, { mode }, controller.signal)
+      .then(setData)
+      .catch((error) => {
+        if (error.name !== 'AbortError') console.error(error)
+      })
+      .finally(() => setLoading(false))
+
+    return () => controller.abort()
+  }, [mode, query])
+
+  // Deep-link: open Devices dialog for /_/browsers, /_/operating-systems, /_/screen-sizes
+  useEffect(() => {
+    const parsed = parseDialogFromPath(window.location.pathname)
+    if (parsed.type === 'segment') {
+      const modeFromSeg = devicesModeForSegment(parsed.segment)
+      if (modeFromSeg) {
+        if (mode !== modeFromSeg) setMode(modeFromSeg)
+        setDetailsOpen(true)
+      }
+    }
+  }, [])
+
+  const highlightMetric = useMemo<ListMetricKey>(() => 'visitors', [])
+
+  const activeTitle = useMemo(() => {
+    switch (mode) {
+      case 'browser-versions':
+        return 'Browser Versions'
+      case 'operating-systems':
+        return 'Operating Systems'
+      case 'operating-system-versions':
+        return 'OS Versions'
+      case 'screen-sizes':
+        return 'Screen Sizes'
+      case 'browsers':
+      default:
+        return 'Browsers'
+    }
+  }, [mode])
+
+  const activeTab = useMemo(() => MODE_TO_TAB[mode] ?? 'browser', [mode])
+
+  const firstColumnLabel = useMemo(() => {
+    switch (activeTab) {
+      case 'browser':
+        return 'Browser'
+      case 'os':
+        return 'OS'
+      case 'size':
+        return 'Screen Size'
+      default:
+        return 'Item'
+    }
+  }, [activeTab])
+
+  const setAndStoreMode = useCallback(
+    (next: string) => {
+      setMode(next)
+      if (typeof window !== 'undefined') {
+        localStorage.setItem(`${STORAGE_PREFIX}.${site.domain}`, next)
+      }
+    },
+    [site.domain]
+  )
+
+  const handleSelect = useCallback(
+    (itemName: string) => {
+      updateQuery((current) => {
+        const filters = { ...current.filters }
+        if (mode === 'browser-versions') {
+          filters.browser_version = itemName
+        } else if (mode === 'operating-system-versions') {
+          filters.os_version = itemName
+        } else if (mode === 'operating-systems') {
+          filters.os = itemName
+        } else if (mode === 'screen-sizes') {
+          filters.size = itemName
+        } else {
+          filters.browser = itemName
+        }
+        return { ...current, filters }
+      })
+    },
+    [mode, updateQuery]
+  )
+
+  // Limit card view to top 9 by the first metric; Details keeps full list
+  const limitedData = useMemo((): DevicesPayload => {
+    const metricKey = 'visitors'
+    const sorted = [...data.results].sort((a, b) => {
+      const av = Number(a[metricKey] ?? 0)
+      const bv = Number(b[metricKey] ?? 0)
+      if (av === bv) return String(a.name).localeCompare(String(b.name))
+      return bv - av
+    })
+    const sliced = sorted.slice(0, 9)
+    const cardMetrics: ListMetricKey[] = (data.metrics.includes('percentage' as ListMetricKey)
+      ? (['visitors', 'percentage'] as ListMetricKey[])
+      : (['visitors'] as ListMetricKey[]))
+    return { ...data, metrics: cardMetrics, results: sliced, meta: { ...data.meta, hasMore: data.results.length > 9 } }
+  }, [data])
+
+  return (
+    <section className="flex flex-col gap-5 rounded-xl border border-border bg-card p-5 shadow-[0_12px_26px_rgba(7,9,16,0.32)]" data-testid="devices-panel">
+      <header className="flex flex-wrap items-center justify-between gap-3">
+        <h2 className="text-lg/6 font-semibold text-foreground/80">Devices</h2>
+        <PanelTabs>
+          {DEVICE_TABS.map((tab) => (
+            <PanelTab
+              key={tab.value}
+              active={activeTab === tab.value}
+              onClick={() => setAndStoreMode(TAB_TO_MODE[tab.value])}
+            >
+              {tab.label}
+            </PanelTab>
+          ))}
+        </PanelTabs>
+      </header>
+
+      {loading ? (
+        <div className="flex h-40 items-center justify-center text-sm text-muted-foreground">Loading…</div>
+      ) : data.results.length === 0 ? (
+        <div className="flex h-40 items-center justify-center text-sm text-muted-foreground">No data yet</div>
+      ) : (
+        <>
+          <MetricTable
+            data={limitedData}
+            highlightedMetric={highlightMetric ?? 'percentage'}
+            onRowClick={(item) => handleSelect(String(item.name))}
+            renderLeading={(item) => renderDeviceLeading(mode, item)}
+            displayBars={false}
+            firstColumnLabel={firstColumnLabel}
+            barColorTheme="cyan"
+            testId="devices"
+          />
+          <div className="mt-auto flex justify-center pt-3">
+            <DetailsButton data-testid="devices-details-btn" onClick={() => {
+              setDetailsOpen(true)
+              try {
+                const sp = new URLSearchParams(window.location.search)
+                sp.delete('dialog'); sp.delete('mode')
+                const seg = devicesSegmentForMode(mode as 'browsers' | 'operating-systems' | 'screen-sizes')
+                window.history.pushState({}, '', buildDialogPath(seg, sp.toString()))
+              } catch {}
+            }}>Details</DetailsButton>
+          </div>
+        </>
+      )}
+
+      <RemoteDetailsDialog
+        open={detailsOpen}
+        onOpenChange={(open) => {
+          setDetailsOpen(open)
+          try {
+            const sp = new URLSearchParams(window.location.search)
+            sp.delete('dialog'); sp.delete('mode')
+            const qs = sp.toString()
+            if (open) {
+              const seg = devicesSegmentForMode(mode as 'browsers' | 'operating-systems' | 'screen-sizes')
+              window.history.pushState({}, '', buildDialogPath(seg, qs))
+            } else {
+              window.history.pushState({}, '', baseAnalyticsPath(qs))
+            }
+          } catch {}
+        }}
+        title={`Top ${activeTitle}`}
+        endpoint={analyticsPath('devices')}
+        extras={{ mode }}
+        firstColumnLabel={firstColumnLabel}
+        defaultSortKey={'visitors'}
+        onRowClick={(item) => {
+          handleSelect(String(item.name))
+          setDetailsOpen(false)
+        }}
+        renderLeading={(item) => renderDeviceLeading(mode, item)}
+      />
+    </section>
+  )
+}
+
+// Icons copied from https://github.com/alrra/browser-logos (same as Plausible)
+const BROWSER_ICONS: Record<string, string> = {
+  Chrome: 'chrome.svg',
+  Safari: 'safari.png',
+  Firefox: 'firefox.svg',
+  'Microsoft Edge': 'edge.svg',
+  Edge: 'edge.svg',
+  Vivaldi: 'vivaldi.svg',
+  Opera: 'opera.svg',
+  'Samsung Browser': 'samsung-internet.svg',
+  Chromium: 'chromium.svg',
+  'UC Browser': 'uc.svg',
+  'Yandex Browser': 'yandex.png',
+  'DuckDuckGo Privacy Browser': 'duckduckgo.svg',
+  Brave: 'brave.svg'
+}
+
+function getBrowserIcon(name: string): string {
+  // Extract base browser name (e.g., "Chrome 120" -> "Chrome")
+  const baseName = name.split(/\s+\d/)[0].trim()
+
+  // Check exact match first
+  if (BROWSER_ICONS[baseName]) {
+    return BROWSER_ICONS[baseName]
+  }
+
+  // Check if name contains browser keyword
+  for (const [browserName, filename] of Object.entries(BROWSER_ICONS)) {
+    if (name.toLowerCase().includes(browserName.toLowerCase())) {
+      return filename
+    }
+  }
+
+  return 'fallback.svg'
+}
+
+// Icons copied from https://github.com/ngeenx/operating-system-logos (same as Plausible)
+const OS_ICONS: Record<string, string> = {
+  iOS: 'ios.png',
+  Mac: 'mac.png',
+  macOS: 'mac.png',
+  Windows: 'windows.png',
+  'Windows Phone': 'windows.png',
+  Android: 'android.png',
+  'GNU/Linux': 'gnu_linux.png',
+  Linux: 'gnu_linux.png',
+  Ubuntu: 'ubuntu.png',
+  'Chrome OS': 'chrome_os.png',
+  iPadOS: 'ipad_os.png',
+  Fedora: 'fedora.png',
+  FreeBSD: 'freebsd.png'
+}
+
+function getOSIcon(name: string): string {
+  // Extract base OS name (e.g., "macOS 15" -> "macOS")
+  const baseName = name.split(/\s+\d/)[0].trim()
+
+  // Check exact match first
+  if (OS_ICONS[baseName]) {
+    return OS_ICONS[baseName]
+  }
+
+  // Check if name contains OS keyword
+  for (const [osName, filename] of Object.entries(OS_ICONS)) {
+    if (name.toLowerCase().includes(osName.toLowerCase())) {
+      return filename
+    }
+  }
+
+  return 'fallback.svg'
+}
+
+function renderDeviceLeading(mode: string, item: Record<string, unknown>) {
+  const tab = MODE_TO_TAB[mode] ?? 'browser'
+
+  if (tab === 'browser') {
+    const name = String((item as Record<string, unknown>).browser ?? item.name ?? '')
+    return <BrowserIcon name={name} />
+  }
+
+  if (tab === 'os') {
+    const name = String((item as Record<string, unknown>).os ?? item.name ?? '')
+    return <OSIcon name={name} />
+  }
+
+  // Screen sizes - use SVG icons like Plausible
+  const name = String(item.name ?? '')
+  return <ScreenSizeIcon screenSize={name} />
+}
+
+// Match Plausible's exact icon rendering approach
+function BrowserIcon({ name }: { name: string }) {
+  const filename = getBrowserIcon(name)
+  return (
+    <img
+      alt=""
+      src={analyticsPath(`images/icon/browser/${filename}`)}
+      className="h-5 w-5 mr-2 shrink-0 object-contain"
+    />
+  )
+}
+
+function OSIcon({ name }: { name: string }) {
+  const filename = getOSIcon(name)
+  return (
+    <img
+      alt=""
+      src={analyticsPath(`images/icon/os/${filename}`)}
+      className="h-5 w-5 mr-2 shrink-0 object-contain"
+    />
+  )
+}
+
+// Screen size icons - SVG from Feather Icons (same as Plausible)
+function ScreenSizeIcon({ screenSize }: { screenSize: string }) {
+  // Categorize by screen size dimensions
+  const category = categorizeScreenSize(screenSize)
+
+  if (category === 'Mobile') {
+    return (
+      <span className="mr-2">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          className="size-4"
+        >
+          <rect x="5" y="2" width="14" height="20" rx="2" ry="2" />
+          <line x1="12" y1="18" x2="12" y2="18" />
+        </svg>
+      </span>
+    )
+  }
+
+  if (category === 'Tablet') {
+    return (
+      <span className="mr-2">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          className="size-4"
+        >
+          <rect x="4" y="2" width="16" height="20" rx="2" ry="2" transform="rotate(180 12 12)" />
+          <line x1="12" y1="18" x2="12" y2="18" />
+        </svg>
+      </span>
+    )
+  }
+
+  if (category === 'Laptop') {
+    return (
+      <span className="mr-2">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          className="size-4"
+        >
+          <rect x="2" y="3" width="20" height="14" rx="2" ry="2" />
+          <line x1="2" y1="20" x2="22" y2="20" />
+        </svg>
+      </span>
+    )
+  }
+
+  if (category === 'Desktop') {
+    return (
+      <span className="mr-2">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          className="size-4"
+        >
+          <rect x="2" y="3" width="20" height="14" rx="2" ry="2" />
+          <line x1="8" y1="21" x2="16" y2="21" />
+          <line x1="12" y1="17" x2="12" y2="21" />
+        </svg>
+      </span>
+    )
+  }
+
+  return null
+}
+
+function categorizeScreenSize(screenSize: string): string {
+  // Handle already categorized sizes (from Plausible data)
+  if (['Mobile', 'Tablet', 'Laptop', 'Desktop'].includes(screenSize)) {
+    return screenSize
+  }
+
+  // Parse dimensions (e.g., "1920x1080")
+  const match = screenSize.match(/(\d+)x(\d+)/)
+  if (!match) return 'Desktop'
+
+  const width = parseInt(match[1], 10)
+
+  // Categorization based on width (following common breakpoints)
+  if (width <= 768) return 'Mobile'
+  if (width <= 1024) return 'Tablet'
+  if (width <= 1440) return 'Laptop'
+  return 'Desktop'
+}