Analytics Components

import { AnalyticsDashboard } from '@sylphx/platform-sdk/react'

export default function DashboardPage() {
  return (
    <AnalyticsDashboard
      title="App Analytics"
      dateRange="last_7_days"
    />
  )
}

import { EventViewer } from '@sylphx/platform-sdk/react'

export function RecentEvents() {
  return (
    <EventViewer
      title="Recent Events"
      limit={50}
    />
  )
}

import { StatsCard } from '@sylphx/platform-sdk/react'

<StatsCard
  title="Total Users"
  value={12847}
  change={12.5}
  changeLabel="vs last month"
/>

import { StatsGrid } from '@sylphx/platform-sdk/react'

const stats = [
  { title: 'Total Users', value: 12847, change: 12.5 },
  { title: 'Active Today', value: 1429, change: -3.1 },
  { title: 'Revenue', value: 84329, format: 'currency', change: 8.2 },
  { title: 'Conversion', value: 3.24, format: 'percent', change: 0.5 },
]

<StatsGrid stats={stats} />

interface StatConfig {
  title: string
  value: number | string
  change?: number
  changeLabel?: string
  format?: 'number' | 'currency' | 'percent' | 'compact'
  currency?: string
  icon?: ReactNode
  variant?: 'default' | 'primary' | 'success' | 'warning' | 'danger'
  href?: string
}

import { SimpleChart } from '@sylphx/platform-sdk/react'

const data = [
  { date: '2024-01-01', value: 100 },
  { date: '2024-01-02', value: 120 },
  { date: '2024-01-03', value: 115 },
  { date: '2024-01-04', value: 140 },
  { date: '2024-01-05', value: 135 },
  { date: '2024-01-06', value: 160 },
  { date: '2024-01-07', value: 175 },
]

<SimpleChart
  data={data}
  type="line"
  title="Daily Active Users"
/>

interface ChartDataPoint {
  date: string      // ISO date string or formatted date
  value: number     // Primary metric value
  [key: string]: any // Additional data for multi-series charts
}

import { SimpleChart } from '@sylphx/platform-sdk/react'

const multiSeriesData = [
  { date: '2024-01-01', pageViews: 1200, uniqueVisitors: 450 },
  { date: '2024-01-02', pageViews: 1350, uniqueVisitors: 520 },
  { date: '2024-01-03', pageViews: 1180, uniqueVisitors: 480 },
  { date: '2024-01-04', pageViews: 1420, uniqueVisitors: 590 },
  { date: '2024-01-05', pageViews: 1560, uniqueVisitors: 640 },
]

<SimpleChart
  data={multiSeriesData}
  type="line"
  title="Traffic Overview"
  series={[
    { key: 'pageViews', label: 'Page Views', color: '#6366f1' },
    { key: 'uniqueVisitors', label: 'Unique Visitors', color: '#10b981' },
  ]}
  showLegend={true}
/>

'use client'

import {
  AnalyticsDashboard,
  StatsGrid,
  SimpleChart,
  EventViewer,
} from '@sylphx/platform-sdk/react'
import { useAnalytics } from '@sylphx/platform-sdk/react'
import { Users, DollarSign, Activity, TrendingUp } from 'lucide-react'

export default function AnalyticsPage() {
  const { data, loading } = useAnalytics({
    metrics: ['users.total', 'revenue.total', 'events.count', 'conversion.rate'],
    dateRange: 'last_7_days',
  })

  const stats = [
    {
      icon: <Users className="w-5 h-5" />,
      title: 'Total Users',
      value: data?.users?.total ?? 0,
      change: data?.users?.change ?? 0,
      variant: 'primary' as const,
    },
    {
      icon: <DollarSign className="w-5 h-5" />,
      title: 'Revenue',
      value: data?.revenue?.total ?? 0,
      format: 'currency' as const,
      change: data?.revenue?.change ?? 0,
      variant: 'success' as const,
    },
    {
      icon: <Activity className="w-5 h-5" />,
      title: 'Events',
      value: data?.events?.count ?? 0,
      format: 'compact' as const,
      change: data?.events?.change ?? 0,
    },
    {
      icon: <TrendingUp className="w-5 h-5" />,
      title: 'Conversion',
      value: data?.conversion?.rate ?? 0,
      format: 'percent' as const,
      change: data?.conversion?.change ?? 0,
    },
  ]

  return (
    <div className="space-y-8 p-6">
      <h1 className="text-3xl font-bold">Analytics Dashboard</h1>

      {/* Key Metrics */}
      <StatsGrid stats={stats} loading={loading} columns={4} />

      {/* Charts */}
      <div className="grid grid-cols-2 gap-6">
        <SimpleChart
          data={data?.userGrowth ?? []}
          type="area"
          title="User Growth"
          color="#6366f1"
          height={300}
          loading={loading}
        />

        <SimpleChart
          data={data?.revenue ?? []}
          type="bar"
          title="Daily Revenue"
          color="#10b981"
          formatValue={(v) => `$${v.toLocaleString()}`}
          height={300}
          loading={loading}
        />
      </div>

      {/* Event Stream */}
      <EventViewer
        title="Recent Events"
        limit={25}
        showFilters={true}
        realtime={true}
      />
    </div>
  )
}

import { SylphxProvider, StatsCard, SimpleChart } from '@sylphx/platform-sdk/react'

// Global theming via provider
<SylphxProvider
  theme={{
    colorPrimary: '#6366f1',
    colorSuccess: '#10b981',
    colorWarning: '#f59e0b',
    colorDanger: '#ef4444',
    borderRadius: '0.75rem',
  }}
>
  <StatsCard title="Revenue" value={12500} />
  <SimpleChart data={data} type="line" />
</SylphxProvider>

// Individual component styling
<StatsCard
  title="Custom Card"
  value={100}
  className="bg-gradient-to-br from-purple-500/10 to-pink-500/10"
/>

<SimpleChart
  data={data}
  type="area"
  color="#8b5cf6"
  className="rounded-2xl shadow-lg"
/>