@stacksjs/ts-analytics 0.1.6

package/src/dashboard/components/FullAnalyticsDashboard.stx

@@ -0,0 +1,455 @@
+<script server>
+/**
+ * FullAnalyticsDashboard Component
+ *
+ * A comprehensive analytics dashboard with tabbed navigation
+ * for Overview, Audience, Behavior, and Conversions views.
+ */
+import { defineProps, withDefaults } from 'stx'
+import type {
+  AnalyticsApiConfig,
+  DashboardSummary,
+  GoalConversion,
+  TimeSeriesDataPoint,
+  TopItem,
+} from '../types'
+
+type TabId = 'overview' | 'audience' | 'behavior' | 'conversions'
+
+interface Tab {
+  id: TabId
+  label: string
+  icon: string
+}
+
+interface FullAnalyticsDashboardProps {
+  config: AnalyticsApiConfig
+  refreshInterval?: number
+  realtimeInterval?: number
+  defaultTab?: TabId
+  stats?: DashboardSummary | null
+  timeSeries?: TimeSeriesDataPoint[]
+  topPages?: TopItem[]
+  topReferrers?: TopItem[]
+  devices?: TopItem[]
+  browsers?: TopItem[]
+  countries?: TopItem[]
+  goals?: GoalConversion[]
+  realtimeVisitors?: number
+  realtimePageViews?: number
+  loading?: boolean
+  error?: string | null
+}
+
+const {
+  config,
+  refreshInterval,
+  realtimeInterval,
+  defaultTab,
+  stats,
+  timeSeries,
+  topPages,
+  topReferrers,
+  devices,
+  browsers,
+  countries,
+  goals,
+  realtimeVisitors,
+  realtimePageViews,
+  loading,
+  error,
+} = withDefaults(
+  defineProps<FullAnalyticsDashboardProps>(),
+  {
+    refreshInterval: 60000,
+    realtimeInterval: 5000,
+    defaultTab: 'overview',
+    stats: null,
+    timeSeries: () => [],
+    topPages: () => [],
+    topReferrers: () => [],
+    devices: () => [],
+    browsers: () => [],
+    countries: () => [],
+    goals: () => [],
+    realtimeVisitors: 0,
+    realtimePageViews: 0,
+    loading: false,
+    error: null,
+  }
+)
+
+const tabs: Tab[] = [
+  { id: 'overview', label: 'Overview', icon: 'M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6' },
+  { id: 'audience', label: 'Audience', icon: 'M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z' },
+  { id: 'behavior', label: 'Behavior', icon: 'M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z' },
+  { id: 'conversions', label: 'Conversions', icon: 'M13 7h8m0 0v8m0-8l-8 8-4-4-6 6' },
+]
+
+const totalConversions = goals.reduce((sum, g) => sum + g.conversions, 0)
+const avgConversionRate = goals.length ? goals.reduce((sum, g) => sum + g.conversionRate, 0) / goals.length : 0
+const totalRevenue = goals.reduce((sum, g) => sum + g.revenue, 0)
+</script>
+
+<script client>
+  const activeTab = state('{{ defaultTab }}')
+  const isLoading = state({{ loading ? 'true' : 'false' }})
+
+  function refresh() {
+    isLoading.set(true)
+    document.dispatchEvent(new CustomEvent('refresh'))
+  }
+</script>
+<div class="full-analytics-dashboard min-h-screen bg-gray-50">
+  <header class="bg-white border-b border-gray-200 sticky top-0 z-20">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <div class="flex items-center justify-between h-16">
+        <div>
+          <h1 class="text-xl font-semibold text-gray-900">Analytics</h1>
+        </div>
+
+        <div class="flex items-center gap-4">
+          @if (realtimeVisitors > 0)
+            <div class="flex items-center gap-2 px-3 py-1.5 bg-green-50 rounded-full">
+              <div class="relative">
+                <div class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></div>
+                <div class="absolute inset-0 w-2 h-2 rounded-full bg-green-500 animate-ping"></div>
+              </div>
+              <span class="text-sm font-medium text-green-700">
+                {{ realtimeVisitors }} online
+              </span>
+            </div>
+          @endif
+
+          <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"
+            @change="document.dispatchEvent(new CustomEvent('date-change', { detail: { range: event.target.value } }))"
+          >
+            <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>
+      </div>
+
+      <nav class="flex gap-6 -mb-px">
+        @foreach (tabs as tab)
+          <button
+            type="button"
+            class="flex items-center gap-2 px-1 py-4 text-sm font-medium border-b-2 transition-colors"
+            x-class="activeTab() === '{{ tab.id }}'
+              ? 'border-indigo-500 text-indigo-600'
+              : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
+            @click="activeTab.set('{{ tab.id }}')"
+          >
+            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="{{ tab.icon }}" />
+            </svg>
+            {{ tab.label }}
+          </button>
+        @endforeach
+      </nav>
+    </div>
+  </header>
+
+  <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+    @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
+
+    <!-- Overview Tab -->
+    <div :show="activeTab() === 'overview'" class="space-y-6">
+      <section class="dashboard-grid">
+        <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>
+          @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>
+          @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>
+          @endif
+        </div>
+        <div class="stat-card card-hover p-6">
+          <h3 class="text-sm font-medium text-gray-500">Avg. Session</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</p>
+          @endif
+        </div>
+      </section>
+
+      <section 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">No data available</div>
+        @else
+          <script client>
+            onMount(() => {
+              const canvas = document.getElementById('overviewChart')
+              const ctx = canvas?.getContext('2d')
+              if (ctx) {
+                const chartData = {{ JSON.stringify(timeSeries) }}
+                new Chart(ctx, {
+                  type: 'line',
+                  data: {
+                    labels: chartData.map(d => new Date(d.date).toLocaleDateString()),
+                    datasets: [{
+                      label: 'Page Views',
+                      data: chartData.map(d => d.pageViews || 0),
+                      borderColor: '#6366f1',
+                      backgroundColor: '#6366f120',
+                      fill: true,
+                      tension: 0.3,
+                    }]
+                  },
+                  options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    plugins: { legend: { display: false } },
+                    scales: { y: { beginAtZero: true } }
+                  }
+                })
+              }
+            })
+          </script>
+          <canvas
+            id="overviewChart"
+            style="height: 320px"
+          ></canvas>
+        @endif
+      </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 (topPages.length === 0)
+            <p class="text-gray-500 text-center py-8">No data</p>
+          @else
+            <div class="space-y-3">
+              @foreach (topPages.slice(0, 5) as page)
+                <div class="flex justify-between text-sm">
+                  <span class="text-gray-900 truncate">{{ page.name }}</span>
+                  <span class="text-gray-500">{{ page.value }}</span>
+                </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 (topReferrers.length === 0)
+            <p class="text-gray-500 text-center py-8">No data</p>
+          @else
+            <div class="space-y-3">
+              @foreach (topReferrers.slice(0, 5) as referrer)
+                <div class="flex justify-between text-sm">
+                  <span class="text-gray-900 truncate">{{ referrer.name }}</span>
+                  <span class="text-gray-500">{{ referrer.value }}</span>
+                </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 (devices.length === 0)
+            <p class="text-gray-500 text-center py-8">No data</p>
+          @else
+            <div class="space-y-3">
+              @foreach (devices as device)
+                <div class="flex justify-between text-sm">
+                  <span class="text-gray-900">{{ device.name }}</span>
+                  <span class="text-gray-500">{{ (device.percentage * 100).toFixed(1) }}%</span>
+                </div>
+              @endforeach
+            </div>
+          @endif
+        </div>
+      </section>
+    </div>
+
+    <!-- Audience Tab -->
+    <div :show="activeTab() === 'audience'" class="space-y-6">
+      <section class="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>
+          <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
+      </section>
+
+      <section class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <div class="card-hover p-6">
+          <h3 class="text-sm font-medium text-gray-900 mb-4">Countries</h3>
+          @if (countries.length === 0)
+            <p class="text-gray-500 text-center py-8">No country data</p>
+          @else
+            <div class="space-y-3">
+              @foreach (countries as country)
+                <div class="flex justify-between text-sm">
+                  <span class="text-gray-900">{{ country.name }}</span>
+                  <span class="text-gray-500">{{ country.value }}</span>
+                </div>
+              @endforeach
+            </div>
+          @endif
+        </div>
+        <div class="card-hover p-6">
+          <h3 class="text-sm font-medium text-gray-900 mb-4">Browsers</h3>
+          @if (browsers.length === 0)
+            <p class="text-gray-500 text-center py-8">No browser data</p>
+          @else
+            <div class="space-y-3">
+              @foreach (browsers as browser)
+                <div class="flex justify-between text-sm">
+                  <span class="text-gray-900">{{ browser.name }}</span>
+                  <span class="text-gray-500">{{ (browser.percentage * 100).toFixed(1) }}%</span>
+                </div>
+              @endforeach
+            </div>
+          @endif
+        </div>
+      </section>
+    </div>
+
+    <!-- Behavior Tab -->
+    <div :show="activeTab() === 'behavior'" class="space-y-6">
+      <section class="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <div class="stat-card card-hover p-6">
+          <h3 class="text-sm font-medium text-gray-500">Pages / Session</h3>
+          <p class="text-3xl font-bold text-gray-900 mt-2">{{ (stats?.avgPagesPerSession ?? 0).toFixed(1) }}</p>
+        </div>
+        <div class="stat-card card-hover p-6">
+          <h3 class="text-sm font-medium text-gray-500">Avg. Session Duration</h3>
+          <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>
+        </div>
+        <div class="stat-card card-hover p-6">
+          <h3 class="text-sm font-medium text-gray-500">Bounce Rate</h3>
+          <p class="text-3xl font-bold text-gray-900 mt-2">{{ ((stats?.bounceRate ?? 0) * 100).toFixed(1) }}%</p>
+        </div>
+      </section>
+
+      <section class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <div class="card-hover p-6">
+          <h3 class="text-sm font-medium text-gray-900 mb-4">Most Viewed Pages</h3>
+          @if (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 class="flex justify-between text-sm">
+                  <span class="text-gray-900 truncate">{{ page.name }}</span>
+                  <span class="text-gray-500">{{ page.value }}</span>
+                </div>
+              @endforeach
+            </div>
+          @endif
+        </div>
+        <div class="card-hover p-6">
+          <h3 class="text-sm font-medium text-gray-900 mb-4">Traffic Sources</h3>
+          @if (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 class="flex justify-between text-sm">
+                  <span class="text-gray-900 truncate">{{ referrer.name }}</span>
+                  <span class="text-gray-500">{{ referrer.value }}</span>
+                </div>
+              @endforeach
+            </div>
+          @endif
+        </div>
+      </section>
+    </div>
+
+    <!-- Conversions Tab -->
+    <div :show="activeTab() === 'conversions'" class="space-y-6">
+      <section class="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <div class="stat-card card-hover p-6">
+          <h3 class="text-sm font-medium text-gray-500">Total Conversions</h3>
+          <p class="text-3xl font-bold text-gray-900 mt-2">{{ totalConversions }}</p>
+        </div>
+        <div class="stat-card card-hover p-6">
+          <h3 class="text-sm font-medium text-gray-500">Conversion Rate</h3>
+          <p class="text-3xl font-bold text-gray-900 mt-2">{{ (avgConversionRate * 100).toFixed(2) }}%</p>
+        </div>
+        <div class="stat-card card-hover p-6">
+          <h3 class="text-sm font-medium text-gray-500">Total Revenue</h3>
+          <p class="text-3xl font-bold text-gray-900 mt-2">${{ totalRevenue.toLocaleString() }}</p>
+        </div>
+      </section>
+
+      <section class="card-hover p-6">
+        <h3 class="text-sm font-medium text-gray-900 mb-4">Conversion Goals</h3>
+        @if (goals.length === 0)
+          <div class="text-center py-8 text-gray-500">
+            <p>No goals configured</p>
+            <p class="text-sm text-gray-400 mt-1">Set up conversion goals to track performance</p>
+          </div>
+        @else
+          <div class="space-y-4">
+            @foreach (goals as goal)
+              <div class="p-4 bg-gray-50 rounded-lg">
+                <div class="flex items-center justify-between mb-2">
+                  <span class="font-medium text-gray-900">{{ goal.goalName }}</span>
+                  <span class="text-lg font-semibold text-gray-900">{{ goal.conversions }}</span>
+                </div>
+                <div class="progress-bar mb-2">
+                  <div class="progress-fill bg-green-500" style="width: {{ Math.min(goal.conversionRate * 100, 100) }}%"></div>
+                </div>
+                <div class="flex items-center justify-between text-sm">
+                  <span class="text-gray-500">{{ (goal.conversionRate * 100).toFixed(2) }}% conversion rate</span>
+                  @if (goal.revenue > 0)
+                    <span class="text-green-600 font-medium">${{ goal.revenue.toLocaleString() }}</span>
+                  @endif
+                </div>
+              </div>
+            @endforeach
+          </div>
+        @endif
+      </section>
+    </div>
+  </main>
+</div>

package/src/dashboard/components/FunnelChart.stx

@@ -0,0 +1,142 @@
+<script server>
+/**
+ * FunnelChart Component
+ *
+ * Displays conversion funnel stages with drop-off visualization.
+ */
+import { defineProps, withDefaults } from 'stx'
+import { formatCompact, formatPercentage } from '../utils'
+
+export interface FunnelStage {
+  name: string
+  value: number
+  color?: string
+}
+
+interface FunnelChartProps {
+  stages: FunnelStage[]
+  title?: string
+  loading?: boolean
+  showDropoff?: boolean
+}
+
+const { stages, title, loading, showDropoff } = withDefaults(
+  defineProps<FunnelChartProps>(),
+  {
+    loading: false,
+    showDropoff: true,
+  }
+)
+
+const defaultColors = [
+  '#6366f1', // indigo
+  '#8b5cf6', // purple
+  '#a855f7', // violet
+  '#d946ef', // fuchsia
+  '#ec4899', // pink
+]
+
+const firstValue = stages[0]?.value ?? 1
+
+const stagesWithData = stages.map((stage, index) => {
+  const prevValue = index > 0 ? stages[index - 1].value : stage.value
+  const dropoff = prevValue > 0 ? ((prevValue - stage.value) / prevValue) * 100 : 0
+  const conversionFromStart = firstValue > 0 ? (stage.value / firstValue) * 100 : 0
+  const widthPercent = firstValue > 0 ? (stage.value / firstValue) * 100 : 0
+
+  return {
+    ...stage,
+    color: stage.color || defaultColors[index % defaultColors.length],
+    dropoff,
+    conversionFromStart,
+    widthPercent: Math.max(widthPercent, 20),
+    actualWidthPercent: widthPercent,
+  }
+})
+
+const overallConversion = stages.length > 0 && stages[0].value > 0
+  ? (stages[stages.length - 1].value / stages[0].value) * 100
+  : 0
+</script>
+
+<div class="funnel-chart card-hover p-6">
+  @if (title)
+    <div class="flex items-center justify-between mb-4">
+      <h3 class="text-sm font-medium text-gray-900">{{ title }}</h3>
+      @if (!loading && stages.length)
+        <span class="text-sm text-gray-500">
+          {{ formatPercentage(overallConversion / 100) }} overall conversion
+        </span>
+      @endif
+    </div>
+  @endif
+
+  @if (loading)
+    <div class="space-y-4 animate-pulse">
+      @foreach ([1, 2, 3, 4] as i)
+        <div class="flex items-center gap-4">
+          <div class="skeleton h-12 flex-1" style="max-width: {{ 100 - i * 15 }}%"></div>
+          <div class="skeleton h-4 w-20"></div>
+        </div>
+      @endforeach
+    </div>
+  @elseif (!stages.length)
+    <div class="text-center py-12 text-gray-500">
+      No funnel data available
+    </div>
+  @else
+    <div class="space-y-2">
+      @foreach (stagesWithData as stage)
+        <div class="relative">
+          <div class="flex items-center gap-4">
+            <div
+              class="h-12 rounded-lg flex items-center justify-center transition-all duration-500"
+              style="width: {{ stage.widthPercent }}%; background-color: {{ stage.color }}; min-width: 120px"
+            >
+              <span class="text-white font-medium text-sm px-3 truncate">
+                {{ stage.name }}
+              </span>
+            </div>
+
+            <div class="flex items-center gap-3 text-sm">
+              <span class="font-semibold text-gray-900">
+                {{ formatCompact(stage.value) }}
+              </span>
+              <span class="text-gray-500">
+                ({{ formatPercentage(stage.conversionFromStart / 100) }})
+              </span>
+            </div>
+          </div>
+
+          @if (showDropoff && stage.dropoff > 0)
+            <div class="absolute -top-1 flex items-center gap-1 text-xs text-red-500" style="right: {{ 100 - stage.widthPercent }}%">
+              <Icon name="arrow-down" size="12" />
+              <span>-{{ stage.dropoff.toFixed(1) }}%</span>
+            </div>
+          @endif
+        </div>
+      @endforeach
+    </div>
+
+    @if (stages.length > 1)
+      <div class="mt-6 pt-4 border-t border-gray-200">
+        <div class="grid grid-cols-3 gap-4 text-center">
+          <div>
+            <p class="text-2xl font-bold text-gray-900">{{ formatCompact(stages[0].value) }}</p>
+            <p class="text-xs text-gray-500">Started</p>
+          </div>
+          <div>
+            <p class="text-2xl font-bold text-gray-900">{{ formatCompact(stages[stages.length - 1].value) }}</p>
+            <p class="text-xs text-gray-500">Completed</p>
+          </div>
+          <div>
+            <p class="text-2xl font-bold {{ overallConversion >= 10 ? 'text-green-600' : 'text-amber-600' }}">
+              {{ formatPercentage(overallConversion / 100) }}
+            </p>
+            <p class="text-xs text-gray-500">Conversion</p>
+          </div>
+        </div>
+      </div>
+    @endif
+  @endif
+</div>