@ossy/analytics 1.1.0 → 1.2.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ossy/analytics",
   "description": "Analytics module — workspace analytics for website traffic",
-  "version": "1.1.0",
+  "version": "1.2.1",
   "type": "module",
   "main": "./src/index.js",
   "module": "./src/index.js",
@@ -21,5 +21,10 @@
     "/src",
     "README.md"
   ],
-  "gitHead": "ccbb5575213d2703e3cad5608b85c3478fc421bc"
+  "peerDependencies": {
+    "@ossy/design-system": "*",
+    "@ossy/sdk-react": "*",
+    "react": "*"
+  },
+  "gitHead": "b976fdb88970a76f135238baa970c20f9f357dc9"
 }

package/src/analytics.page.jsx

@@ -0,0 +1,112 @@
+import React, { useMemo } from 'react'
+import { useWorkspace } from '@ossy/sdk-react'
+import { Definition } from '@ossy/analytics'
+import { Text, Title, View } from '@ossy/design-system'
+import { usePageViewStats } from './usePageViewStats.js'
+
+export const metadata = {
+  id: 'analytics/home',
+  title: 'Analytics',
+  path: {
+    sv: '/analys',
+    en: '/analytics',
+  },
+}
+
+function SummaryCard({ label, value }) {
+  return (
+    <View
+      surface="primary"
+      roundness="m"
+      inset="m"
+      style={{ border: '1px solid var(--separator)' }}
+    >
+      <Text variant="small" style={{ opacity: 0.75 }}>{label}</Text>
+      <Title variant="secondary">{value}</Title>
+    </View>
+  )
+}
+
+export default function AnalyticsPage() {
+  const { workspace } = useWorkspace()
+  // Snapshot once per mount: Date.now() on every render changed `from`/`to` every tick and
+  // retriggered usePageViewStats (params → useEffect) in a fetch/setState loop.
+  const { from, to } = useMemo(() => {
+    const t = Date.now()
+    return { from: t - 30 * 24 * 60 * 60 * 1000, to: t }
+  }, [])
+
+  const { status, totalViews, dailyViews, topPaths } = usePageViewStats({
+    workspaceId: workspace?.id,
+    from,
+    to,
+    limit: 10,
+  })
+
+  return (
+    <View inset="l" gap="l" style={{ width: '100%', boxSizing: 'border-box' }}>
+      <View gap="s">
+        <Title>{Definition.title}</Title>
+        <Text>{Definition.description}</Text>
+      </View>
+
+      {status === 'loading' && (
+        <View surface="primary" roundness="m" inset="m">
+          <Text>Loading analytics...</Text>
+        </View>
+      )}
+
+      {status === 'error' && (
+        <View surface="primary" roundness="m" inset="m">
+          <Text>Could not load analytics data.</Text>
+        </View>
+      )}
+
+      {status === 'success' && (
+        <>
+          <View layout="row" gap="m">
+            <SummaryCard label="Total page views (30 days)" value={`${totalViews}`} />
+            <SummaryCard label="Tracked pages (30 days)" value={`${topPaths.length}`} />
+            <SummaryCard label="Days with traffic" value={`${dailyViews.length}`} />
+          </View>
+
+          <View layout="row" gap="m" style={{ alignItems: 'flex-start' }}>
+            <View
+              surface="primary"
+              roundness="m"
+              inset="m"
+              gap="s"
+              style={{ border: '1px solid var(--separator)', flex: 1 }}
+            >
+              <Title variant="secondary">Top paths</Title>
+              {topPaths.length === 0 && <Text variant="small">No page views yet.</Text>}
+              {topPaths.map((item) => (
+                <View key={item.path || 'unknown'} layout="row" justifyContent="space-between">
+                  <Text variant="small">{item.path || '(unknown path)'}</Text>
+                  <Text variant="small">{item.views}</Text>
+                </View>
+              ))}
+            </View>
+
+            <View
+              surface="primary"
+              roundness="m"
+              inset="m"
+              gap="s"
+              style={{ border: '1px solid var(--separator)', flex: 1 }}
+            >
+              <Title variant="secondary">Daily page views</Title>
+              {dailyViews.length === 0 && <Text variant="small">No daily data yet.</Text>}
+              {dailyViews.map((item) => (
+                <View key={item.date} layout="row" justifyContent="space-between">
+                  <Text variant="small">{item.date}</Text>
+                  <Text variant="small">{item.views}</Text>
+                </View>
+              ))}
+            </View>
+          </View>
+        </>
+      )}
+    </View>
+  )
+}

package/src/usePageViewStats.js

@@ -0,0 +1,52 @@
+import { useEffect, useMemo, useState } from 'react'
+
+const API_URL = '/@ossy'
+
+export function usePageViewStats({ workspaceId, from, to, limit = 10 }) {
+  const [status, setStatus] = useState('loading')
+  const [data, setData] = useState({
+    totalViews: 0,
+    dailyViews: [],
+    topPaths: [],
+  })
+
+  const params = useMemo(() => {
+    const sp = new URLSearchParams()
+    if (from) sp.set('from', `${from}`)
+    if (to) sp.set('to', `${to}`)
+    if (limit) sp.set('limit', `${limit}`)
+    return sp.toString()
+  }, [from, to, limit])
+
+  useEffect(() => {
+    if (!workspaceId) return
+
+    setStatus('loading')
+    fetch(`${API_URL}/resources/page-views/stats?${params}`, {
+      method: 'GET',
+      headers: {
+        workspaceId,
+      },
+    })
+      .then(res => {
+        if (!res.ok) return Promise.reject(new Error('Failed to fetch stats'))
+        return res.json()
+      })
+      .then(json => {
+        setData({
+          totalViews: json?.totalViews || 0,
+          dailyViews: json?.dailyViews || [],
+          topPaths: json?.topPaths || [],
+        })
+        setStatus('success')
+      })
+      .catch(() => {
+        setStatus('error')
+      })
+  }, [workspaceId, params])
+
+  return {
+    status,
+    ...data,
+  }
+}