@ossy/analytics 3.7.1 → 3.8.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ossy/analytics",
   "description": "Analytics module — workspace insight KPIs",
-  "version": "3.7.1",
+  "version": "3.8.0",
   "type": "module",
   "main": "./src/index.js",
   "module": "./src/index.js",
@@ -25,8 +25,8 @@
     "README.md"
   ],
   "dependencies": {
-    "@ossy/event-store": "^3.7.0",
-    "@ossy/workspaces": "^3.7.1"
+    "@ossy/event-store": "^3.8.0",
+    "@ossy/workspaces": "^3.8.0"
   },
   "peerDependencies": {
     "@ossy/app": "*",
@@ -42,5 +42,5 @@
     "@jest/globals": "^30.2.0",
     "jest": "^30.2.0"
   },
-  "gitHead": "1ee220424da6b065034a7f52f52aa4a6ce7c88d5"
+  "gitHead": "14548dfc2019e7258e8c75db527acbf66fe829bd"
 }

package/src/AnalyticsProductHome.jsx

@@ -3,16 +3,37 @@ import { Text, View, Page, useLocale } from '@ossy/design-system'
 import { usePageViewStats } from './usePageViewStats.js'
 import { useWorkspaceKpis } from './useWorkspaceKpis.js'
 
+function SectionPanel ({ title, children }) {
+  return (
+    <View surface="primary" roundness="xs" style={{ minWidth: 0, overflow: 'hidden' }}>
+      <View stack bordered>
+        <View.Item
+          data-surface="primary"
+          layout="row"
+          style={{
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            padding: 'var(--space-s) var(--space-m)',
+            gap: 'var(--space-m)',
+            height: '48px',
+            flexShrink: 0,
+          }}
+        >
+          <Text variant="small" as="h2" style={{ fontWeight: 'bold' }} text={title} />
+        </View.Item>
+        <View.Item>
+          {children}
+        </View.Item>
+      </View>
+    </View>
+  )
+}
+
 function SummaryCard ({ label, value }) {
   return (
-    <View
-      surface="primary"
-      roundness="m"
-      inset="m"
-      style={{ border: '1px solid var(--separator)' }}
-    >
+    <View gap="xs" style={{ minWidth: 140, flex: '1 1 140px' }}>
       <Text variant="small" style={{ opacity: 0.75 }}>{label}</Text>
-      <Text variant="heading-secondary" as="h2">{value}</Text>
+      <Text variant="heading-secondary" as="p">{value}</Text>
     </View>
   )
 }
@@ -38,6 +59,9 @@ export default function AnalyticsProductHome ({ workspace }) {
   const workspaceKpis = useWorkspaceKpis({ workspaceId: workspace?.id })
 
   const { status, totalViews, dailyViews, topPaths } = pageViews
+  const kpisSettled = workspaceKpis.status === 'success' || workspaceKpis.status === 'error'
+  const viewsSettled = status === 'success' || status === 'error'
+  const pageLoading = !kpisSettled || !viewsSettled
 
   return (
     <Page
@@ -45,72 +69,76 @@ export default function AnalyticsProductHome ({ workspace }) {
       description="analytics.home.description"
     >
       <View gap="m">
-        {(workspaceKpis.status === 'loading' || status === 'loading') && (
-          <View surface="primary" roundness="m" inset="m">
-            <Text>{t('analytics.home.loading')}</Text>
-          </View>
+        {pageLoading && (
+          <SectionPanel title="analytics.home.overview">
+            <View inset="m">
+              <Text>{t('analytics.home.loading')}</Text>
+            </View>
+          </SectionPanel>
         )}
 
-        {workspaceKpis.status === 'error' && (
-          <View surface="primary" roundness="m" inset="m">
-            <Text>{t('analytics.home.workspaceKpisError')}</Text>
-          </View>
+        {!pageLoading && workspaceKpis.status === 'error' && (
+          <SectionPanel title="analytics.home.overview">
+            <View inset="m">
+              <Text>{t('analytics.home.workspaceKpisError')}</Text>
+            </View>
+          </SectionPanel>
         )}
 
-        {workspaceKpis.status === 'success' && (
-          <View layout="row" gap="m">
-            <SummaryCard label={t('analytics.home.members')} value={`${workspaceKpis.members}`} />
-            <SummaryCard label={t('analytics.home.resources')} value={`${workspaceKpis.resources}`} />
-          </View>
+        {!pageLoading && workspaceKpis.status === 'success' && (
+          <SectionPanel title="analytics.home.overview">
+            <View layout="row-wrap" gap="m" inset="m">
+              <SummaryCard label={t('analytics.home.members')} value={`${workspaceKpis.members}`} />
+              <SummaryCard label={t('analytics.home.resources')} value={`${workspaceKpis.resources}`} />
+            </View>
+          </SectionPanel>
         )}
 
-        {status === 'error' && (
-          <View surface="primary" roundness="m" inset="m">
-            <Text>{t('analytics.home.error')}</Text>
-          </View>
+        {!pageLoading && status === 'error' && (
+          <SectionPanel title="analytics.home.traffic">
+            <View inset="m">
+              <Text>{t('analytics.home.error')}</Text>
+            </View>
+          </SectionPanel>
         )}
 
-        {status === 'success' && (
+        {!pageLoading && status === 'success' && (
           <>
-            <View layout="row" gap="m">
-              <SummaryCard label={t('analytics.home.totalPageViews')} value={`${totalViews}`} />
-              <SummaryCard label={t('analytics.home.trackedPages')} value={`${topPaths.length}`} />
-              <SummaryCard label={t('analytics.home.daysWithTraffic')} value={`${dailyViews.length}`} />
-            </View>
+            <SectionPanel title="analytics.home.traffic">
+              <View layout="row-wrap" gap="m" inset="m">
+                <SummaryCard label={t('analytics.home.totalPageViews')} value={`${totalViews}`} />
+                <SummaryCard label={t('analytics.home.trackedPages')} value={`${topPaths.length}`} />
+                <SummaryCard label={t('analytics.home.daysWithTraffic')} value={`${dailyViews.length}`} />
+              </View>
+            </SectionPanel>
 
             <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 }}
-              >
-                <Text variant="heading-secondary" as="h2" text="analytics.home.topPaths" />
-                {topPaths.length === 0 && <Text variant="small" text="analytics.home.noPageViews" />}
-                {topPaths.map((item) => (
-                  <View key={item.path || 'unknown'} layout="row" justifyContent="space-between">
-                    <Text variant="small">{item.path || t('analytics.home.unknownPath')}</Text>
-                    <Text variant="small">{item.views}</Text>
+              <View style={{ flex: 1, minWidth: 0 }}>
+                <SectionPanel title="analytics.home.topPaths">
+                  <View gap="s" inset="m">
+                    {topPaths.length === 0 && <Text variant="small" text="analytics.home.noPageViews" />}
+                    {topPaths.map((item) => (
+                      <View key={item.path || 'unknown'} layout="row" justifyContent="space-between">
+                        <Text variant="small">{item.path || t('analytics.home.unknownPath')}</Text>
+                        <Text variant="small">{item.views}</Text>
+                      </View>
+                    ))}
                   </View>
-                ))}
+                </SectionPanel>
               </View>
 
-              <View
-                surface="primary"
-                roundness="m"
-                inset="m"
-                gap="s"
-                style={{ border: '1px solid var(--separator)', flex: 1 }}
-              >
-                <Text variant="heading-secondary" as="h2" text="analytics.home.dailyPageViews" />
-                {dailyViews.length === 0 && <Text variant="small" text="analytics.home.noDailyData" />}
-                {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 style={{ flex: 1, minWidth: 0 }}>
+                <SectionPanel title="analytics.home.dailyPageViews">
+                  <View gap="s" inset="m">
+                    {dailyViews.length === 0 && <Text variant="small" text="analytics.home.noDailyData" />}
+                    {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>
-                ))}
+                </SectionPanel>
               </View>
             </View>
           </>

package/src/en.translations.json

@@ -2,6 +2,8 @@
   "analytics/home.documentTitle": "Analytics",
   "analytics.home.title": "Analytics",
   "analytics.home.description": "Workspace insight KPIs for members, resources, and traffic.",
+  "analytics.home.overview": "Overview",
+  "analytics.home.traffic": "Traffic",
   "analytics.home.loading": "Loading analytics...",
   "analytics.home.error": "Could not load analytics data.",
   "analytics.home.members": "Members",

package/src/sv.translations.json

@@ -2,6 +2,8 @@
   "analytics/home.documentTitle": "Analys",
   "analytics.home.title": "Analys",
   "analytics.home.description": "Workspace-KPIer för medlemmar, resurser och trafik.",
+  "analytics.home.overview": "Översikt",
+  "analytics.home.traffic": "Trafik",
   "analytics.home.loading": "Laddar analys...",
   "analytics.home.error": "Kunde inte ladda analysdata.",
   "analytics.home.members": "Medlemmar",

package/src/usePageViewStats.js

@@ -1,28 +1,28 @@
-import { useEffect, useMemo, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { GetPageViewStats } from '@ossy/resources'
 import { useSdk } from '@ossy/sdk-react'
 
 export function usePageViewStats({ workspaceId, from, to, limit = 10 }) {
   const sdk = useSdk()
-  const [status, setStatus] = useState('loading')
+  const invokeRef = useRef(sdk.invoke)
+  invokeRef.current = sdk.invoke
+
+  const [status, setStatus] = useState('idle')
   const [data, setData] = useState({
     totalViews: 0,
     dailyViews: [],
     topPaths: [],
   })
 
-  const payload = useMemo(() => ({
-    from,
-    to,
-    limit,
-  }), [from, to, limit])
-
   useEffect(() => {
-    if (!workspaceId) return
+    if (!workspaceId) return undefined
 
-    setStatus('loading')
-    sdk.invoke(GetPageViewStats, payload)
-      .then(json => {
+    let cancelled = false
+    setStatus((current) => (current === 'success' ? current : 'loading'))
+
+    invokeRef.current(GetPageViewStats, { from, to, limit })
+      .then((json) => {
+        if (cancelled) return
         setData({
           totalViews: json?.totalViews || 0,
           dailyViews: json?.dailyViews || [],
@@ -31,9 +31,14 @@ export function usePageViewStats({ workspaceId, from, to, limit = 10 }) {
         setStatus('success')
       })
       .catch(() => {
+        if (cancelled) return
         setStatus('error')
       })
-  }, [sdk, workspaceId, payload])
+
+    return () => {
+      cancelled = true
+    }
+  }, [workspaceId, from, to, limit])
 
   return {
     status,

package/src/useWorkspaceKpis.js

@@ -1,9 +1,12 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { useSdk } from '@ossy/sdk-react'
 import { metadata as GetWorkspaceKpis } from './get-workspace-kpis.action.js'
 
 export function useWorkspaceKpis({ workspaceId }) {
   const sdk = useSdk()
+  const invokeRef = useRef(sdk.invoke)
+  invokeRef.current = sdk.invoke
+
   const [status, setStatus] = useState('idle')
   const [data, setData] = useState({
     members: 0,
@@ -11,11 +14,14 @@ export function useWorkspaceKpis({ workspaceId }) {
   })
 
   useEffect(() => {
-    if (!workspaceId) return
+    if (!workspaceId) return undefined
+
+    let cancelled = false
+    setStatus((current) => (current === 'success' ? current : 'loading'))
 
-    setStatus('loading')
-    sdk.invoke(GetWorkspaceKpis, {})
+    invokeRef.current(GetWorkspaceKpis, {})
       .then((json) => {
+        if (cancelled) return
         setData({
           members: json?.members || 0,
           resources: json?.resources || 0,
@@ -23,9 +29,14 @@ export function useWorkspaceKpis({ workspaceId }) {
         setStatus('success')
       })
       .catch(() => {
+        if (cancelled) return
         setStatus('error')
       })
-  }, [sdk, workspaceId])
+
+    return () => {
+      cancelled = true
+    }
+  }, [workspaceId])
 
   return {
     status,