@stacksjs/ts-analytics 0.1.6

package/src/dashboard/components/EngagementMetrics.stx

@@ -0,0 +1,183 @@
+<script server>
+/**
+ * EngagementMetrics Component
+ *
+ * Displays user engagement metrics with visual indicators.
+ */
+import { defineProps, withDefaults } from 'stx'
+import { formatCompact, formatDuration, formatPercentage } from '../utils'
+
+export interface EngagementData {
+  avgSessionDuration: number // in seconds
+  avgPagesPerSession: number
+  bounceRate: number // 0-1
+  returningVisitorRate: number // 0-1
+  avgTimeOnPage: number // in seconds
+  exitRate: number // 0-1
+}
+
+interface EngagementMetricsProps {
+  data: EngagementData | null
+  loading?: boolean
+  title?: string
+}
+
+const { data, loading, title } = withDefaults(
+  defineProps<EngagementMetricsProps>(),
+  {
+    loading: false,
+    title: 'Engagement',
+  }
+)
+
+interface MetricConfig {
+  label: string
+  key: keyof EngagementData
+  format: 'duration' | 'number' | 'percentage'
+  icon: string
+  good: 'high' | 'low'
+  benchmark?: number
+}
+
+const metrics: MetricConfig[] = [
+  {
+    label: 'Avg. Session Duration',
+    key: 'avgSessionDuration',
+    format: 'duration',
+    icon: 'M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z',
+    good: 'high',
+    benchmark: 180,
+  },
+  {
+    label: 'Pages / Session',
+    key: 'avgPagesPerSession',
+    format: 'number',
+    icon: 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z',
+    good: 'high',
+    benchmark: 3,
+  },
+  {
+    label: 'Bounce Rate',
+    key: 'bounceRate',
+    format: 'percentage',
+    icon: 'M13 7h8m0 0v8m0-8l-8 8-4-4-6 6',
+    good: 'low',
+    benchmark: 0.4,
+  },
+  {
+    label: 'Returning Visitors',
+    key: 'returningVisitorRate',
+    format: 'percentage',
+    icon: 'M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15',
+    good: 'high',
+    benchmark: 0.3,
+  },
+  {
+    label: 'Avg. Time on Page',
+    key: 'avgTimeOnPage',
+    format: 'duration',
+    icon: 'M15 12a3 3 0 11-6 0 3 3 0 016 0z M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z',
+    good: 'high',
+    benchmark: 60,
+  },
+  {
+    label: 'Exit Rate',
+    key: 'exitRate',
+    format: 'percentage',
+    icon: 'M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1',
+    good: 'low',
+    benchmark: 0.5,
+  },
+]
+
+function formatValue(value: number, format: string): string {
+  switch (format) {
+    case 'duration':
+      return formatDuration(value)
+    case 'percentage':
+      return formatPercentage(value)
+    default:
+      return formatCompact(value)
+  }
+}
+
+function getPerformanceClass(metric: MetricConfig, value: number): string {
+  if (metric.benchmark === undefined)
+    return 'text-gray-600'
+
+  const isGood = metric.good === 'high'
+    ? value >= metric.benchmark
+    : value <= metric.benchmark
+
+  return isGood ? 'text-green-600' : 'text-amber-600'
+}
+
+function getBarClass(metric: MetricConfig, value: number): string {
+  if (metric.benchmark === undefined)
+    return 'bg-gray-600'
+
+  const isGood = metric.good === 'high'
+    ? value >= metric.benchmark
+    : value <= metric.benchmark
+
+  return isGood ? 'bg-green-600' : 'bg-amber-600'
+}
+
+function getBarWidth(metric: MetricConfig, value: number): number {
+  if (metric.format === 'percentage') {
+    return Math.min(value * 100, 100)
+  }
+  const max = (metric.benchmark ?? value) * 2
+  return Math.min((value / max) * 100, 100)
+}
+</script>
+
+<div class="engagement-metrics card-hover p-6">
+  <h3 class="text-sm font-medium text-gray-900 mb-4">{{ title }}</h3>
+
+  @if (loading)
+    <div class="grid grid-cols-2 gap-4">
+      @foreach ([1, 2, 3, 4, 5, 6] as i)
+        <div class="animate-pulse">
+          <div class="skeleton h-4 w-24 mb-2"></div>
+          <div class="skeleton h-8 w-16 mb-2"></div>
+          <div class="skeleton h-2 w-full"></div>
+        </div>
+      @endforeach
+    </div>
+  @elseif (!data)
+    <div class="text-center py-8 text-gray-500">
+      No engagement data available
+    </div>
+  @else
+    <div class="grid grid-cols-2 lg:grid-cols-3 gap-6">
+      @foreach (metrics as metric)
+        <div class="space-y-2">
+          <div class="flex items-center gap-2 text-sm text-gray-500">
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="{{ metric.icon }}" />
+            </svg>
+            <span>{{ metric.label }}</span>
+          </div>
+
+          <div class="text-2xl font-semibold {{ getPerformanceClass(metric, data[metric.key]) }}">
+            {{ formatValue(data[metric.key], metric.format) }}
+          </div>
+
+          <div class="h-1.5 bg-gray-100 rounded-full overflow-hidden">
+            <div
+              class="h-full rounded-full transition-all duration-500 {{ getBarClass(metric, data[metric.key]) }}"
+              style="width: {{ getBarWidth(metric, data[metric.key]) }}%"
+            ></div>
+          </div>
+
+          @if (metric.benchmark)
+            <div class="text-xs text-gray-400">
+              Benchmark: {{ formatValue(metric.benchmark, metric.format) }}
+            </div>
+          @endif
+        </div>
+      @endforeach
+    </div>
+  @endif
+</div>

package/src/dashboard/components/EventsSection.stx

@@ -0,0 +1,192 @@
+{{-- EventsSection Component --}}
+{{-- Props: events (array of {name, count, unique, value}) --}}
+<div class="events-section">
+  <div class="events-header">
+    <span class="events-title">Events</span>
+    @if(events.length > 0)
+      <button class="add-event-btn" type="button">
+        <Icon name="plus" size="16" />
+        Add event
+      </button>
+    @endif
+  </div>
+
+  @if(events.length > 0)
+    <table class="data-table">
+      <thead>
+        <tr>
+          <th>Event Name</th>
+          <th class="text-right">Count</th>
+          <th class="text-right">Unique</th>
+          <th class="text-right">Avg Value</th>
+        </tr>
+      </thead>
+      <tbody>
+        @foreach(events as event)
+          <tr>
+            <td class="name">
+              <span class="event-indicator"></span>
+              {{ event.name }}
+            </td>
+            <td class="value">{{ event.count | fmt }}</td>
+            <td class="value">{{ event.unique | fmt }}</td>
+            <td class="value">
+              @if(event.avgValue)
+                {{ formatCurrency(event.avgValue) }}
+              @else
+                -
+              @endif
+            </td>
+          </tr>
+        @endforeach
+      </tbody>
+    </table>
+  @else
+    <div class="empty-state">
+      <div class="empty-icon">
+        <Icon name="zap" size="48" />
+      </div>
+      <p class="empty-title">You haven't created any events yet.</p>
+      <p class="empty-description">
+        Events let you track custom actions like button clicks, form submissions, and purchases.
+      </p>
+      <a href="/docs/events" class="learn-link">Learn how to use events</a>
+    </div>
+  @endif
+</div>
+
+@ts
+function formatCurrency(num: number): string {
+  return '$' + num.toFixed(2)
+}
+@endts
+
+<style>
+.events-section {
+  background: var(--bg-secondary);
+  border-radius: 8px;
+  padding: 1.5rem;
+}
+
+.events-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+}
+
+.events-title {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--text-primary);
+}
+
+.add-event-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  background: transparent;
+  border: 1px solid var(--border);
+  color: var(--text-secondary);
+  padding: 0.5rem 1rem;
+  border-radius: 6px;
+  font-size: 0.75rem;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.add-event-btn:hover {
+  border-color: var(--accent);
+  color: var(--accent);
+}
+
+.data-table {
+  width: 100%;
+  font-size: 0.8125rem;
+  border-collapse: collapse;
+}
+
+.data-table th {
+  text-align: left;
+  color: var(--text-muted);
+  font-weight: 500;
+  padding: 0.5rem 0;
+  border-bottom: 1px solid var(--border);
+  font-size: 0.6875rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.data-table th.text-right {
+  text-align: right;
+}
+
+.data-table td {
+  padding: 0.75rem 0;
+  border-bottom: 1px solid var(--bg-tertiary);
+}
+
+.data-table tr:last-child td {
+  border-bottom: none;
+}
+
+.data-table .name {
+  color: var(--text-primary);
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.event-indicator {
+  width: 8px;
+  height: 8px;
+  background: var(--accent);
+  border-radius: 50%;
+}
+
+.data-table .value {
+  color: var(--text-secondary);
+  text-align: right;
+}
+
+.empty-state {
+  text-align: center;
+  padding: 3rem 2rem;
+}
+
+.empty-icon {
+  color: var(--text-muted);
+  margin-bottom: 1rem;
+  opacity: 0.5;
+}
+
+.empty-title {
+  color: var(--text-primary);
+  font-size: 1rem;
+  font-weight: 500;
+  margin-bottom: 0.5rem;
+}
+
+.empty-description {
+  color: var(--text-muted);
+  font-size: 0.875rem;
+  margin-bottom: 1.5rem;
+  max-width: 400px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.learn-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--accent);
+  text-decoration: none;
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.learn-link:hover {
+  text-decoration: underline;
+}
+</style>

package/src/dashboard/components/FilterBar.stx

@@ -0,0 +1,104 @@
+<script server>
+/**
+ * FilterBar Component
+ *
+ * Search and filter bar for analytics data.
+ */
+import { defineProps, withDefaults } from 'stx'
+
+export interface FilterOption {
+  id: string
+  label: string
+  options: { value: string, label: string }[]
+}
+
+interface FilterBarProps {
+  placeholder?: string
+  filters?: FilterOption[]
+  showExport?: boolean
+}
+
+const { placeholder, filters, showExport } = withDefaults(
+  defineProps<FilterBarProps>(),
+  {
+    placeholder: 'Search...',
+    filters: () => [],
+    showExport: false,
+  }
+)
+
+const filtersJson = JSON.stringify(filters)
+</script>
+
+<script client>
+  const searchQuery = state('')
+  const activeFilters = state({})
+  const showExportMenu = state(false)
+
+  const hasActiveFilters = derived(() => Object.values(activeFilters()).some(v => v !== ''))
+
+  function clearFilters() {
+    searchQuery.set('')
+    activeFilters.set({})
+  }
+</script>
+<div class="filter-bar flex flex-wrap items-center gap-3 p-4 bg-white rounded-lg border border-gray-200">
+  <div class="relative flex-1 min-w-48">
+    <Icon name="search" size="16" class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
+    <input
+      type="text"
+      :model="searchQuery"
+      placeholder="{{ placeholder }}"
+      class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent"
+    >
+  </div>
+
+  @foreach (filters as filter)
+    <div class="relative">
+      <select
+        :model="activeFilters"
+        class="appearance-none pl-3 pr-8 py-2 border border-gray-300 rounded-lg text-sm bg-white focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent cursor-pointer"
+      >
+        <option value="">{{ filter.label }}</option>
+        @foreach (filter.options as option)
+          <option value="{{ option.value }}">{{ option.label }}</option>
+        @endforeach
+      </select>
+      <Icon name="chevron-down" size="16" class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none" />
+    </div>
+  @endforeach
+
+  <button
+    :show="hasActiveFilters() || searchQuery()"
+    type="button"
+    class="px-3 py-2 text-sm text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg transition-colors"
+    @click="clearFilters()"
+  >
+    Clear
+  </button>
+
+  @if (showExport)
+    <div class="relative">
+      <button
+        type="button"
+        class="btn-secondary flex items-center gap-2"
+        @click="showExportMenu.set(!showExportMenu())"
+      >
+        <Icon name="download" size="16" />
+        Export
+      </button>
+
+      <div
+        :show="showExportMenu"
+        class="dropdown w-32 absolute right-0 mt-2 bg-white rounded-lg shadow-lg border border-gray-200 z-10"
+      >
+        <button type="button" class="dropdown-item w-full text-left px-4 py-2 text-sm hover:bg-gray-50">
+          Export CSV
+        </button>
+        <button type="button" class="dropdown-item w-full text-left px-4 py-2 text-sm hover:bg-gray-50">
+          Export JSON
+        </button>
+      </div>
+    </div>
+  @endif
+</div>