import React from 'react' import { Head, usePage } from '@inertiajs/react' function MetricCard({ label, value, delta, icon }) { return (
{label}
{Number(value || 0).toLocaleString()}
{Number(delta || 0).toLocaleString()} in the selected range
) } function TimelineChart({ timeline }) { const safeTimeline = Array.isArray(timeline) ? timeline : [] const maxValue = safeTimeline.reduce((largest, item) => Math.max(largest, item.views || 0, item.likes || 0, item.saves || 0), 0) || 1 return (

Timeline

Engagement trend

{safeTimeline.length} days
{safeTimeline.length ? (
{safeTimeline.map((point) => (
{String(point.date || '').slice(5)}
))}
) : (
Analytics are enabled, but there are not enough daily snapshots yet to render a timeline.
)}
Views Likes Saves
) } export default function CollectionAnalytics() { const { props } = usePage() const collection = props.collection || {} const analytics = props.analytics || {} const totals = analytics.totals || {} const range = analytics.range || {} const topArtworks = Array.isArray(analytics.top_artworks) ? analytics.top_artworks : [] const seo = props.seo || {} return ( <> {seo.title || `${collection.title || 'Collection'} Analytics — Skinbase Nova`} {seo.canonical ? : null}