@stacksjs/ts-analytics 0.1.6

package/src/dashboard/components/AlertCard.stx

@@ -0,0 +1,177 @@
+<script server>
+/**
+ * AlertCard Component
+ *
+ * Displays alerts for threshold breaches or important notifications.
+ */
+import { defineProps, withDefaults } from 'stx'
+import { formatCompact } from '../utils'
+
+export type AlertSeverity = 'info' | 'success' | 'warning' | 'danger'
+
+export interface Alert {
+  id: string
+  title: string
+  message: string
+  severity: AlertSeverity
+  metric?: string
+  value?: number
+  threshold?: number
+  timestamp?: Date
+}
+
+interface AlertCardProps {
+  alerts: Alert[]
+  title?: string
+  loading?: boolean
+  maxAlerts?: number
+  dismissible?: boolean
+}
+
+const { alerts, title, loading, maxAlerts, dismissible } = withDefaults(
+  defineProps<AlertCardProps>(),
+  {
+    title: 'Alerts',
+    loading: false,
+    maxAlerts: 5,
+    dismissible: true,
+  }
+)
+
+const displayedAlerts = alerts.slice(0, maxAlerts)
+
+const severityConfig: Record<AlertSeverity, { bg: string, border: string, icon: string, text: string }> = {
+  info: {
+    bg: 'bg-blue-50',
+    border: 'border-blue-200',
+    icon: 'text-blue-500',
+    text: 'text-blue-800',
+  },
+  success: {
+    bg: 'bg-green-50',
+    border: 'border-green-200',
+    icon: 'text-green-500',
+    text: 'text-green-800',
+  },
+  warning: {
+    bg: 'bg-amber-50',
+    border: 'border-amber-200',
+    icon: 'text-amber-500',
+    text: 'text-amber-800',
+  },
+  danger: {
+    bg: 'bg-red-50',
+    border: 'border-red-200',
+    icon: 'text-red-500',
+    text: 'text-red-800',
+  },
+}
+
+const severityIcons: Record<AlertSeverity, string> = {
+  info: 'M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z',
+  success: 'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z',
+  warning: 'M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z',
+  danger: 'M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z',
+}
+
+function formatTimestamp(date?: Date): string {
+  if (!date)
+    return ''
+  const now = new Date()
+  const diff = now.getTime() - date.getTime()
+  const minutes = Math.floor(diff / 60000)
+
+  if (minutes < 1)
+    return 'Just now'
+  if (minutes < 60)
+    return `${minutes}m ago`
+  const hours = Math.floor(minutes / 60)
+  if (hours < 24)
+    return `${hours}h ago`
+  const days = Math.floor(hours / 24)
+  return `${days}d ago`
+}
+</script>
+
+<div class="alert-card card-hover p-6">
+  <div class="flex items-center justify-between mb-4">
+    <h3 class="text-sm font-medium text-gray-900">{{ title }}</h3>
+    @if (alerts.length > maxAlerts)
+      <span class="text-xs text-gray-500">
+        +{{ alerts.length - maxAlerts }} more
+      </span>
+    @endif
+  </div>
+
+  @if (loading)
+    <div class="space-y-3 animate-pulse">
+      @foreach ([1, 2, 3] as i)
+        <div class="skeleton h-16 rounded-lg"></div>
+      @endforeach
+    </div>
+  @elseif (!alerts.length)
+    <div class="text-center py-8">
+      <Icon name="check-circle" size="48" class="mx-auto text-green-300 mb-3" />
+      <p class="text-gray-500">All systems normal</p>
+      <p class="text-sm text-gray-400 mt-1">No alerts at this time</p>
+    </div>
+  @else
+    <script client>
+      const dismissedAlerts = state([])
+    </script>
+    <div class="space-y-3">
+      @foreach (displayedAlerts as alert)
+        <div
+          class="p-3 rounded-lg border cursor-pointer transition-all hover:shadow-sm {{ severityConfig[alert.severity].bg }} {{ severityConfig[alert.severity].border }}"
+          :show="!dismissedAlerts().includes('{{ alert.id }}')"
+        >
+          <div class="flex items-start gap-3">
+            <svg
+              class="w-5 h-5 flex-shrink-0 mt-0.5 {{ severityConfig[alert.severity].icon }}"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="{{ severityIcons[alert.severity] }}" />
+            </svg>
+
+            <div class="flex-1 min-w-0">
+              <div class="flex items-start justify-between gap-2">
+                <h4 class="text-sm font-medium {{ severityConfig[alert.severity].text }}">
+                  {{ alert.title }}
+                </h4>
+                @if (dismissible)
+                  <button
+                    type="button"
+                    class="flex-shrink-0 p-1 rounded hover:bg-black/5 transition-colors {{ severityConfig[alert.severity].text }}"
+                    @click.stop="dismissedAlerts.set([...dismissedAlerts(), '{{ alert.id }}'])"
+                  >
+                    <Icon name="x" size="16" />
+                  </button>
+                @endif
+              </div>
+
+              <p class="text-sm mt-0.5 {{ severityConfig[alert.severity].text }}" style="opacity: 0.8">
+                {{ alert.message }}
+              </p>
+
+              @if (alert.value !== undefined)
+                <div class="flex items-center gap-4 mt-2 text-xs {{ severityConfig[alert.severity].text }}" style="opacity: 0.7">
+                  @if (alert.metric)
+                    <span>{{ alert.metric }}: {{ formatCompact(alert.value) }}</span>
+                  @endif
+                  @if (alert.threshold)
+                    <span>Threshold: {{ formatCompact(alert.threshold) }}</span>
+                  @endif
+                  @if (alert.timestamp)
+                    <span>{{ formatTimestamp(alert.timestamp) }}</span>
+                  @endif
+                </div>
+              @endif
+            </div>
+          </div>
+        </div>
+      @endforeach
+    </div>
+  @endif
+</div>

package/src/dashboard/components/AnalyticsDashboard.stx

@@ -0,0 +1,354 @@
+<script server>
+/**
+ * AnalyticsDashboard Component
+ *
+ * Main dashboard layout combining all analytics components.
+ */
+import { defineProps, withDefaults } from 'stx'
+import type {
+  AnalyticsApiConfig,
+  DashboardSummary,
+  TimeSeriesDataPoint,
+  TopItem,
+} from '../types'
+
+interface AnalyticsDashboardProps {
+  config: AnalyticsApiConfig
+  refreshInterval?: number
+  realtimeInterval?: number
+  stats?: DashboardSummary | null
+  timeSeries?: TimeSeriesDataPoint[]
+  topPages?: TopItem[]
+  topReferrers?: TopItem[]
+  devices?: TopItem[]
+  realtimeVisitors?: number
+  realtimePageViews?: number
+  loading?: boolean
+  error?: string | null
+}
+
+const {
+  config,
+  refreshInterval,
+  realtimeInterval,
+  stats,
+  timeSeries,
+  topPages,
+  topReferrers,
+  devices,
+  realtimeVisitors,
+  realtimePageViews,
+  loading,
+  error,
+} = withDefaults(
+  defineProps<AnalyticsDashboardProps>(),
+  {
+    refreshInterval: 60000,
+    realtimeInterval: 5000,
+    stats: null,
+    timeSeries: () => [],
+    topPages: () => [],
+    topReferrers: () => [],
+    devices: () => [],
+    realtimeVisitors: 0,
+    realtimePageViews: 0,
+    loading: false,
+    error: null,
+  }
+)
+</script>
+
+<script client>
+  const isLoading = state({{ loading ? 'true' : 'false' }})
+  const dateRange = state('7d')
+
+  function refresh() {
+    isLoading.set(true)
+    document.dispatchEvent(new CustomEvent('refresh'))
+  }
+</script>
+<div
+  class="analytics-dashboard min-h-screen bg-gray-50 p-6"
+  style="max-width: 1400px; margin: 0 auto"
+>
+  <header class="flex items-center justify-between mb-6">
+    <div>
+      <h1 class="text-2xl font-bold text-gray-900">
+        Analytics Dashboard
+      </h1>
+      <p class="text-gray-500 text-sm mt-1">
+        Track your website performance
+      </p>
+    </div>
+
+    <div class="flex items-center gap-4">
+      <select
+        class="bg-white border border-gray-200 text-gray-900 px-4 py-2 rounded-lg text-sm cursor-pointer hover:border-indigo-500"
+        :model="dateRange"
+        @change="document.dispatchEvent(new CustomEvent('date-change', { detail: { range: dateRange() } }))"
+      >
+        <option value="today">Today</option>
+        <option value="yesterday">Yesterday</option>
+        <option value="7d">Last 7 days</option>
+        <option value="30d">Last 30 days</option>
+        <option value="90d">Last 90 days</option>
+      </select>
+
+      <button
+        type="button"
+        class="btn-icon p-2 rounded-lg hover:bg-gray-100"
+        title="Refresh"
+        x-disabled="isLoading"
+        @click="refresh()"
+      >
+        <Icon name="refresh-cw" size="20" x-class="{ 'animate-spin': isLoading() }" />
+      </button>
+    </div>
+  </header>
+
+  @if (error)
+    <div class="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg text-red-700">
+      <p class="font-medium">Error loading analytics</p>
+      <p class="text-sm mt-1">{{ error }}</p>
+      <button
+        type="button"
+        class="mt-2 text-sm text-red-600 hover:text-red-800 underline"
+        @click="refresh()"
+      >
+        Try again
+      </button>
+    </div>
+  @endif
+
+  <section class="mb-6">
+    <div class="realtime-counter card-hover p-6">
+      <div class="flex items-center gap-3">
+        <div class="relative">
+          <div class="w-3 h-3 rounded-full bg-green-500 animate-pulse"></div>
+          <div class="absolute inset-0 w-3 h-3 rounded-full bg-green-500 animate-ping"></div>
+        </div>
+        <div>
+          <span class="text-4xl font-bold text-gray-900">{{ realtimeVisitors }}</span>
+          <span class="ml-2 text-gray-500 text-sm">visitors right now</span>
+        </div>
+      </div>
+      @if (realtimePageViews > 0)
+        <p class="mt-2 text-sm text-gray-500">
+          {{ realtimePageViews }} page views in the last hour
+        </p>
+      @endif
+    </div>
+  </section>
+
+  <section class="dashboard-grid mb-6">
+    <div class="stat-card card-hover p-6">
+      <h3 class="text-sm font-medium text-gray-500">Page Views</h3>
+      @if (loading)
+        <div class="animate-pulse"><div class="skeleton h-8 w-24 mt-2"></div></div>
+      @else
+        <p class="text-3xl font-bold text-gray-900 mt-2">{{ stats?.pageViews ?? 0 }}</p>
+        @if (stats?.change?.pageViews !== undefined)
+          <p class="text-sm mt-1 {{ stats.change.pageViews >= 0 ? 'text-green-600' : 'text-red-600' }}">
+            {{ stats.change.pageViews >= 0 ? '+' : '' }}{{ stats.change.pageViews.toFixed(1) }}% vs previous period
+          </p>
+        @endif
+      @endif
+    </div>
+
+    <div class="stat-card card-hover p-6">
+      <h3 class="text-sm font-medium text-gray-500">Unique Visitors</h3>
+      @if (loading)
+        <div class="animate-pulse"><div class="skeleton h-8 w-24 mt-2"></div></div>
+      @else
+        <p class="text-3xl font-bold text-gray-900 mt-2">{{ stats?.uniqueVisitors ?? 0 }}</p>
+        @if (stats?.change?.uniqueVisitors !== undefined)
+          <p class="text-sm mt-1 {{ stats.change.uniqueVisitors >= 0 ? 'text-green-600' : 'text-red-600' }}">
+            {{ stats.change.uniqueVisitors >= 0 ? '+' : '' }}{{ stats.change.uniqueVisitors.toFixed(1) }}% vs previous period
+          </p>
+        @endif
+      @endif
+    </div>
+
+    <div class="stat-card card-hover p-6">
+      <h3 class="text-sm font-medium text-gray-500">Bounce Rate</h3>
+      @if (loading)
+        <div class="animate-pulse"><div class="skeleton h-8 w-24 mt-2"></div></div>
+      @else
+        <p class="text-3xl font-bold text-gray-900 mt-2">{{ ((stats?.bounceRate ?? 0) * 100).toFixed(1) }}%</p>
+        @if (stats?.change?.bounceRate !== undefined)
+          <p class="text-sm mt-1 {{ stats.change.bounceRate <= 0 ? 'text-green-600' : 'text-red-600' }}">
+            {{ stats.change.bounceRate >= 0 ? '+' : '' }}{{ stats.change.bounceRate.toFixed(1) }}% vs previous period
+          </p>
+        @endif
+      @endif
+    </div>
+
+    <div class="stat-card card-hover p-6">
+      <h3 class="text-sm font-medium text-gray-500">Avg. Session Duration</h3>
+      @if (loading)
+        <div class="animate-pulse"><div class="skeleton h-8 w-24 mt-2"></div></div>
+      @else
+        <p class="text-3xl font-bold text-gray-900 mt-2">{{ Math.floor((stats?.avgSessionDuration ?? 0) / 60) }}m {{ Math.floor((stats?.avgSessionDuration ?? 0) % 60) }}s</p>
+        @if (stats?.change?.avgSessionDuration !== undefined)
+          <p class="text-sm mt-1 {{ stats.change.avgSessionDuration >= 0 ? 'text-green-600' : 'text-red-600' }}">
+            {{ stats.change.avgSessionDuration >= 0 ? '+' : '' }}{{ stats.change.avgSessionDuration.toFixed(1) }}% vs previous period
+          </p>
+        @endif
+      @endif
+    </div>
+  </section>
+
+  <section class="mb-6">
+    <div class="card-hover p-6">
+      <h3 class="text-sm font-medium text-gray-900 mb-4">Traffic Overview</h3>
+      @if (loading)
+        <div class="animate-pulse"><div class="skeleton h-80 w-full"></div></div>
+      @elseif (timeSeries.length === 0)
+        <div class="flex items-center justify-center h-80 text-gray-400">
+          <p>No data available for selected period</p>
+        </div>
+      @else
+        <script client>
+          onMount(() => {
+            const canvas = document.getElementById('trafficChart')
+            const ctx = canvas?.getContext('2d')
+            if (!ctx) return
+
+            const chartData = {{ JSON.stringify(timeSeries) }}
+            const labels = chartData.map(d => new Date(d.date).toLocaleDateString())
+
+            new Chart(ctx, {
+              type: 'line',
+              data: {
+                labels,
+                datasets: [
+                  {
+                    label: 'Page Views',
+                    data: chartData.map(d => d.pageViews || d.views || 0),
+                    borderColor: '#6366f1',
+                    backgroundColor: '#6366f120',
+                    fill: true,
+                    tension: 0.3,
+                  },
+                  {
+                    label: 'Unique Visitors',
+                    data: chartData.map(d => d.uniqueVisitors || d.visitors || 0),
+                    borderColor: '#22c55e',
+                    backgroundColor: '#22c55e20',
+                    fill: true,
+                    tension: 0.3,
+                  }
+                ]
+              },
+              options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                plugins: { legend: { display: true, position: 'top' } },
+                scales: {
+                  y: { beginAtZero: true, grid: { color: '#e5e7eb' } },
+                  x: { grid: { display: false } }
+                }
+              }
+            })
+          })
+        </script>
+        <canvas
+          id="trafficChart"
+          style="height: 320px"
+        ></canvas>
+      @endif
+    </div>
+  </section>
+
+  <section class="dashboard-grid-3">
+    <div class="card-hover p-6">
+      <h3 class="text-sm font-medium text-gray-900 mb-4">Top Pages</h3>
+      @if (loading)
+        <div class="space-y-3">
+          @foreach ([1, 2, 3, 4, 5] as i)
+            <div class="animate-pulse">
+              <div class="skeleton h-4 w-full mb-1"></div>
+              <div class="skeleton h-2 w-3/4"></div>
+            </div>
+          @endforeach
+        </div>
+      @elseif (topPages.length === 0)
+        <p class="text-gray-500 text-center py-8">No page views yet</p>
+      @else
+        <div class="space-y-3">
+          @foreach (topPages as page)
+            <div>
+              <div class="flex justify-between text-sm mb-1">
+                <span class="text-gray-900 truncate" title="{{ page.name }}">{{ page.name }}</span>
+                <span class="text-gray-500">{{ page.value }}</span>
+              </div>
+              <div class="progress-bar">
+                <div class="progress-fill bg-indigo-500" style="width: {{ page.percentage * 100 }}%"></div>
+              </div>
+            </div>
+          @endforeach
+        </div>
+      @endif
+    </div>
+
+    <div class="card-hover p-6">
+      <h3 class="text-sm font-medium text-gray-900 mb-4">Top Referrers</h3>
+      @if (loading)
+        <div class="space-y-3">
+          @foreach ([1, 2, 3, 4, 5] as i)
+            <div class="animate-pulse">
+              <div class="skeleton h-4 w-full mb-1"></div>
+              <div class="skeleton h-2 w-3/4"></div>
+            </div>
+          @endforeach
+        </div>
+      @elseif (topReferrers.length === 0)
+        <p class="text-gray-500 text-center py-8">No referrer data</p>
+      @else
+        <div class="space-y-3">
+          @foreach (topReferrers as referrer)
+            <div>
+              <div class="flex justify-between text-sm mb-1">
+                <span class="text-gray-900 truncate" title="{{ referrer.name }}">{{ referrer.name }}</span>
+                <span class="text-gray-500">{{ referrer.value }}</span>
+              </div>
+              <div class="progress-bar">
+                <div class="progress-fill bg-indigo-500" style="width: {{ referrer.percentage * 100 }}%"></div>
+              </div>
+            </div>
+          @endforeach
+        </div>
+      @endif
+    </div>
+
+    <div class="card-hover p-6">
+      <h3 class="text-sm font-medium text-gray-900 mb-4">Devices</h3>
+      @if (loading)
+        <div class="space-y-3">
+          @foreach ([1, 2, 3] as i)
+            <div class="animate-pulse">
+              <div class="skeleton h-4 w-full mb-1"></div>
+              <div class="skeleton h-2 w-3/4"></div>
+            </div>
+          @endforeach
+        </div>
+      @elseif (devices.length === 0)
+        <p class="text-gray-500 text-center py-8">No device data</p>
+      @else
+        <div class="space-y-3">
+          @foreach (devices as device)
+            <div>
+              <div class="flex justify-between text-sm mb-1">
+                <span class="text-gray-900">{{ device.name }}</span>
+                <span class="text-gray-500">{{ (device.percentage * 100).toFixed(1) }}%</span>
+              </div>
+              <div class="progress-bar">
+                <div class="progress-fill bg-indigo-500" style="width: {{ device.percentage * 100 }}%"></div>
+              </div>
+            </div>
+          @endforeach
+        </div>
+      @endif
+    </div>
+  </section>
+</div>

package/src/dashboard/components/AnimatedNumber.stx

@@ -0,0 +1,86 @@
+<script server>
+/**
+ * AnimatedNumber Component
+ *
+ * Animated counting number with formatting options.
+ * Uses Alpine.js for client-side animation.
+ */
+import { defineProps, withDefaults } from 'stx'
+import { formatCompact, formatCurrency, formatPercentage } from '../utils'
+
+interface AnimatedNumberProps {
+  value: number
+  format?: 'number' | 'compact' | 'percentage' | 'currency'
+  duration?: number
+  decimals?: number
+  prefix?: string
+  suffix?: string
+  animate?: boolean
+}
+
+const { value, format, duration, decimals, prefix, suffix, animate } = withDefaults(
+  defineProps<AnimatedNumberProps>(),
+  {
+    format: 'compact',
+    duration: 1000,
+    decimals: 0,
+    prefix: '',
+    suffix: '',
+    animate: true,
+  }
+)
+
+function formatNumber(num: number): string {
+  switch (format) {
+    case 'percentage':
+      return formatPercentage(num)
+    case 'currency':
+      return formatCurrency(num)
+    case 'compact':
+      return formatCompact(num)
+    default:
+      return num.toLocaleString(undefined, {
+        minimumFractionDigits: decimals,
+        maximumFractionDigits: decimals,
+      })
+  }
+}
+
+const formattedValue = `${prefix}${formatNumber(value)}${suffix}`
+</script>
+
+@if (animate)
+  <script client>
+    const current = state(0)
+    const isAnimating = state(true)
+
+    function formatNum(n) {
+      return '{{ prefix }}' + n.toLocaleString() + '{{ suffix }}'
+    }
+
+    onMount(() => {
+      const target = {{ value }}
+      const animDuration = {{ duration }}
+      const start = performance.now()
+      const step = (now) => {
+        const elapsed = now - start
+        const progress = Math.min(elapsed / animDuration, 1)
+        const eased = 1 - Math.pow(1 - progress, 3)
+        current.set(Math.round(eased * target))
+        if (progress < 1) {
+          requestAnimationFrame(step)
+        } else {
+          isAnimating.set(false)
+        }
+      }
+      requestAnimationFrame(step)
+    })
+  </script>
+  <span
+    class="animated-number tabular-nums"
+    :text="formatNum(current())"
+    x-class="{ 'opacity-80': isAnimating() }"
+  >{{ formattedValue }}</span>
+@else
+  <span class="animated-number tabular-nums">{{ formattedValue }}</span>
+@endif