@stacksjs/ts-analytics 0.1.6

package/src/dashboard/components/StatCard.stx

@@ -0,0 +1,90 @@
+<script server>
+/**
+ * StatCard Component
+ *
+ * Displays a single stat with optional change indicator.
+ */
+import { defineProps, withDefaults } from 'stx'
+
+interface StatCardProps {
+  title: string
+  value: string | number
+  format?: 'number' | 'percentage' | 'duration' | 'currency'
+  change?: number
+  changeLabel?: string
+  icon?: string
+  loading?: boolean
+}
+
+const { title, value, format, change, changeLabel, icon, loading } = withDefaults(
+  defineProps<StatCardProps>(),
+  {
+    format: 'number',
+    loading: false,
+  }
+)
+
+function formatValue(val: string | number, fmt: string): string {
+  if (typeof val === 'string') return val
+
+  switch (fmt) {
+    case 'percentage':
+      return `${val}%`
+    case 'duration':
+      const mins = Math.floor(val / 60)
+      const secs = val % 60
+      return `${mins}:${secs.toString().padStart(2, '0')}`
+    case 'currency':
+      return `$${val.toLocaleString()}`
+    case 'number':
+    default:
+      if (val >= 1e6) return `${(val / 1e6).toFixed(1)}M`
+      if (val >= 1e3) return `${(val / 1e3).toFixed(1)}k`
+      return val.toLocaleString()
+  }
+}
+
+function formatChange(val: number): string {
+  const sign = val >= 0 ? '+' : ''
+  return `${sign}${val}%`
+}
+
+const formattedValue = formatValue(value, format || 'number')
+const formattedChange = change !== undefined ? formatChange(change) : ''
+const isPositiveGood = title.toLowerCase() !== 'bounce rate'
+const changeClass = change !== undefined
+  ? (isPositiveGood ? (change >= 0 ? 'text-green-600' : 'text-red-600') : (change <= 0 ? 'text-green-600' : 'text-red-600'))
+  : ''
+</script>
+
+<div class="stat-card card-hover p-6">
+  <div class="flex items-center justify-between">
+    <h3 class="stat-title text-sm font-medium text-gray-500">
+      {{ title }}
+    </h3>
+    @if (icon)
+      <span class="text-gray-400">{{ icon }}</span>
+    @endif
+  </div>
+
+  <div class="mt-2">
+    @if (loading)
+      <div class="animate-pulse">
+        <div class="skeleton h-8 w-24 bg-gray-200 rounded"></div>
+        <div class="skeleton h-4 w-16 mt-2 bg-gray-200 rounded"></div>
+      </div>
+    @else
+      <p class="stat-value text-2xl font-semibold text-gray-900">
+        {{ formattedValue }}
+      </p>
+      @if (change !== undefined)
+        <p class="mt-1 text-sm {{ changeClass }}">
+          <span>{{ formattedChange }}</span>
+          @if (changeLabel)
+            <span class="text-gray-500 ml-1">{{ changeLabel }}</span>
+          @endif
+        </p>
+      @endif
+    @endif
+  </div>
+</div>

package/src/dashboard/components/SummaryStats.stx

@@ -0,0 +1,81 @@
+{{-- SummaryStats Component --}}
+{{-- Props: stats (object with realtime, people, views, avgTime, bounceRate, events) --}}
+<div class="summary-stats">
+  <div class="stat-card">
+    <div class="stat-value">{{ stats.realtime }}</div>
+    <div class="stat-label">Realtime</div>
+  </div>
+  <div class="stat-card">
+    <div class="stat-value">{{ stats.people | fmt }}</div>
+    <div class="stat-label">People</div>
+  </div>
+  <div class="stat-card">
+    <div class="stat-value">{{ stats.views | fmt }}</div>
+    <div class="stat-label">Views</div>
+  </div>
+  <div class="stat-card">
+    <div class="stat-value">{{ stats.avgTime }}</div>
+    <div class="stat-label">Avg time</div>
+  </div>
+  <div class="stat-card">
+    <div class="stat-value">{{ stats.bounceRate }}%</div>
+    <div class="stat-label">Bounce</div>
+  </div>
+  <div class="stat-card">
+    <div class="stat-value">{{ stats.events | fmt }}</div>
+    <div class="stat-label">Events</div>
+  </div>
+</div>
+
+
+<style>
+.summary-stats {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+}
+
+.stat-card {
+  background: var(--bg-secondary);
+  padding: 1.25rem;
+  border-radius: 8px;
+  text-align: center;
+  transition: transform 0.15s, box-shadow 0.15s;
+}
+
+.stat-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
+.stat-value {
+  font-size: 1.75rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-bottom: 0.25rem;
+}
+
+.stat-label {
+  font-size: 0.75rem;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+@media (max-width: 1024px) {
+  .summary-stats {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+@media (max-width: 640px) {
+  .summary-stats {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .stat-value {
+    font-size: 1.5rem;
+  }
+}
+</style>

package/src/dashboard/components/TabNav.stx

@@ -0,0 +1,66 @@
+{{-- TabNav Component --}}
+{{-- Props: tabs (array of {id, label}), activeTab --}}
+<div class="tabs" data-tab-group="{{ tabGroup || 'default' }}">
+  @foreach(tabs as tab)
+    <button
+      class="tab-btn @if(tab.id === activeTab) active @endif"
+      data-tab="{{ tab.id }}"
+      type="button"
+    >
+      {{ tab.label }}
+    </button>
+  @endforeach
+</div>
+
+<script>
+  (function() {
+    var d = window['document'];
+    d['querySelectorAll']('.tabs').forEach(tabContainer => {
+    const buttons = tabContainer.querySelectorAll('.tab-btn')
+    buttons.forEach(btn => {
+      btn.addEventListener('click', () => {
+        buttons.forEach(b => b.classList.remove('active'))
+        btn.classList.add('active')
+
+        const tabId = btn.dataset.tab
+        const group = tabContainer.dataset.tabGroup
+        const event = new CustomEvent('tabchange', {
+          detail: { tabId, group },
+          bubbles: true
+        })
+        tabContainer.dispatchEvent(event)
+      })
+    })
+  })
+  })();
+</script>
+
+<style>
+.tabs {
+  display: flex;
+  gap: 0.25rem;
+  border-bottom: 1px solid var(--border);
+  margin-bottom: 1rem;
+}
+
+.tab-btn {
+  background: transparent;
+  border: none;
+  color: var(--text-secondary);
+  padding: 0.5rem 0.75rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+  transition: all 0.15s;
+}
+
+.tab-btn:hover {
+  color: var(--text-primary);
+}
+
+.tab-btn.active {
+  color: var(--accent);
+  border-bottom-color: var(--accent);
+}
+</style>

package/src/dashboard/components/ThemeSwitcher.stx

@@ -0,0 +1,124 @@
+<script server>
+/**
+ * ThemeSwitcher Component
+ *
+ * Toggle between light, dark, and system theme modes.
+ */
+import { defineProps, withDefaults } from 'stx'
+
+export type ThemeMode = 'light' | 'dark' | 'system'
+
+interface ThemeSwitcherProps {
+  initialMode?: ThemeMode
+  showLabels?: boolean
+  persist?: boolean
+  storageKey?: string
+}
+
+const { initialMode, showLabels, persist, storageKey } = withDefaults(
+  defineProps<ThemeSwitcherProps>(),
+  {
+    initialMode: 'system',
+    showLabels: false,
+    persist: true,
+    storageKey: 'analytics-theme',
+  }
+)
+</script>
+
+<script client>
+  const mode = state('{{ initialMode }}')
+  const shouldPersist = {{ persist ? 'true' : 'false' }}
+  const themeStorageKey = '{{ storageKey }}'
+
+  const isDark = derived(() => {
+    if (mode() === 'system') {
+      return window.matchMedia('(prefers-color-scheme: dark)').matches
+    }
+    return mode() === 'dark'
+  })
+
+  function updateDocumentClass() {
+    if (isDark()) {
+      document.documentElement.classList.add('dark')
+    } else {
+      document.documentElement.classList.remove('dark')
+    }
+  }
+
+  function setMode(newMode) {
+    mode.set(newMode)
+    if (shouldPersist) {
+      localStorage.setItem(themeStorageKey, newMode)
+    }
+    updateDocumentClass()
+  }
+
+  function cycleMode() {
+    const modes = ['light', 'dark', 'system']
+    const currentIndex = modes.indexOf(mode())
+    const nextIndex = (currentIndex + 1) % modes.length
+    setMode(modes[nextIndex])
+  }
+
+  onMount(() => {
+    if (shouldPersist) {
+      const stored = localStorage.getItem(themeStorageKey)
+      if (stored && ['light', 'dark', 'system'].includes(stored)) {
+        mode.set(stored)
+      }
+    }
+    updateDocumentClass()
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+      if (mode() === 'system') {
+        updateDocumentClass()
+      }
+    })
+  })
+</script>
+<div class="theme-switcher">
+  @if (!showLabels)
+    <button
+      type="button"
+      class="btn-icon relative"
+      :title="'Theme: ' + mode()"
+      @click="cycleMode()"
+    >
+      <Icon name="sun" size="20" :show="mode() === 'light'" />
+      <Icon name="moon" size="20" :show="mode() === 'dark'" />
+      <Icon name="monitor" size="20" :show="mode() === 'system'" />
+    </button>
+  @else
+    <div class="inline-flex rounded-lg border border-gray-200 p-1 bg-white">
+      <button
+        type="button"
+        class="px-3 py-1.5 text-sm rounded-md transition-colors"
+        x-class="mode() === 'light' ? 'bg-gray-100 text-gray-900' : 'text-gray-500 hover:text-gray-700'"
+        @click="setMode('light')"
+      >
+        <Icon name="sun" size="16" class="inline-block mr-1" />
+        Light
+      </button>
+
+      <button
+        type="button"
+        class="px-3 py-1.5 text-sm rounded-md transition-colors"
+        x-class="mode() === 'dark' ? 'bg-gray-100 text-gray-900' : 'text-gray-500 hover:text-gray-700'"
+        @click="setMode('dark')"
+      >
+        <Icon name="moon" size="16" class="inline-block mr-1" />
+        Dark
+      </button>
+
+      <button
+        type="button"
+        class="px-3 py-1.5 text-sm rounded-md transition-colors"
+        x-class="mode() === 'system' ? 'bg-gray-100 text-gray-900' : 'text-gray-500 hover:text-gray-700'"
+        @click="setMode('system')"
+      >
+        <Icon name="monitor" size="16" class="inline-block mr-1" />
+        System
+      </button>
+    </div>
+  @endif
+</div>

package/src/dashboard/components/TimeSeriesChart.stx

@@ -0,0 +1,106 @@
+<script server>
+/**
+ * TimeSeriesChart Component
+ *
+ * Displays time series data as a line chart.
+ */
+import { defineProps, withDefaults } from 'stx'
+import type { TimeSeriesDataPoint } from '../types'
+
+interface TimeSeriesChartProps {
+  data: TimeSeriesDataPoint[]
+  metrics?: string[]
+  height?: number
+  loading?: boolean
+}
+
+const { data, metrics, height, loading } = withDefaults(
+  defineProps<TimeSeriesChartProps>(),
+  {
+    metrics: () => ['pageViews', 'uniqueVisitors'],
+    height: 300,
+    loading: false,
+  }
+)
+</script>
+
+<div class="chart-container card-hover p-6">
+  @if (loading)
+    <div class="animate-pulse">
+      <div class="skeleton" style="height: {{ height }}px"></div>
+    </div>
+  @elseif (data.length > 0)
+    <div class="chart-header mb-4">
+      <div class="chart-legend flex justify-end gap-6 text-xs">
+        <span class="legend-item views flex items-center gap-2 text-gray-600">
+          <span class="legend-dot w-2.5 h-2.5 rounded-sm bg-indigo-500"></span>
+          Views
+        </span>
+        <span class="legend-item visitors flex items-center gap-2 text-gray-600">
+          <span class="legend-dot w-2.5 h-2.5 rounded-sm bg-green-500"></span>
+          Visitors
+        </span>
+      </div>
+    </div>
+    <script client>
+      onMount(() => {
+        const canvas = document.getElementById('timeSeriesChart')
+        const ctx = canvas?.getContext('2d')
+        if (!ctx) return
+
+        const chartData = {{ JSON.stringify(data) }}
+        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: false }
+            },
+            scales: {
+              y: {
+                beginAtZero: true,
+                grid: { color: '#e5e7eb' }
+              },
+              x: {
+                grid: { display: false }
+              }
+            }
+          }
+        })
+      })
+    </script>
+    <canvas
+      id="timeSeriesChart"
+      style="height: {{ height }}px"
+    ></canvas>
+  @else
+    <div class="chart-placeholder flex flex-col items-center justify-center text-gray-400 gap-4" style="height: {{ height }}px">
+      <Icon name="bar-chart-2" size="48" />
+      <p>No data available for selected period</p>
+    </div>
+  @endif
+</div>

package/src/dashboard/components/TopList.stories.ts

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import TopList from './TopList.stx'
+
+const meta = {
+  title: 'Components/Lists/TopList',
+  component: TopList,
+  tags: ['autodocs'],
+  argTypes: {
+    title: { control: 'text' },
+    valueLabel: { control: 'text' },
+    maxItems: { control: { type: 'number', min: 1, max: 20 } },
+    loading: { control: 'boolean' },
+  },
+} satisfies Meta<typeof TopList>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const sampleItems = [
+  { name: '/home', value: 12847, change: 0.12 },
+  { name: '/products', value: 8923, change: 0.08 },
+  { name: '/about', value: 5634, change: 0.24 },
+  { name: '/blog', value: 4521, change: -0.05 },
+  { name: '/contact', value: 2134, change: 0.03 },
+]
+
+export const Default: Story = {
+  args: {
+    items: sampleItems,
+    title: 'Top Pages',
+    valueLabel: 'Views',
+  },
+}
+
+export const WithoutChanges: Story = {
+  args: {
+    items: sampleItems.map(({ name, value }) => ({ name, value })),
+    title: 'Top Referrers',
+    valueLabel: 'Visitors',
+  },
+}
+
+export const Loading: Story = {
+  args: {
+    items: [],
+    title: 'Top Pages',
+    loading: true,
+  },
+}
+
+export const LimitedItems: Story = {
+  args: {
+    items: sampleItems,
+    title: 'Top 3 Pages',
+    valueLabel: 'Views',
+    maxItems: 3,
+  },
+}

package/src/dashboard/components/TopList.stx

@@ -0,0 +1,74 @@
+<script server>
+/**
+ * TopList Component
+ *
+ * Displays a list of top items (pages, referrers, etc.) with bars.
+ */
+import { defineProps, withDefaults } from 'stx'
+import type { TopListProps } from '../types'
+import { formatCompact, formatPercentage } from '../utils'
+
+const { title, items, showPercentage, maxItems, emptyMessage, loading } = withDefaults(
+  defineProps<TopListProps>(),
+  {
+    showPercentage: true,
+    maxItems: 10,
+    emptyMessage: 'No data available',
+    loading: false,
+  }
+)
+
+const displayItems = items.slice(0, maxItems)
+const maxValue = Math.max(...items.map(item => item.value), 1)
+</script>
+
+<div class="top-list card-hover p-6">
+  <h3 class="text-sm font-medium text-gray-900 mb-4">
+    {{ title }}
+  </h3>
+
+  @if (loading)
+    <div class="space-y-3">
+      @foreach ([1, 2, 3, 4, 5] as i)
+        <div class="animate-pulse">
+          <div class="flex justify-between mb-1">
+            <div class="skeleton h-4 w-32"></div>
+            <div class="skeleton h-4 w-12"></div>
+          </div>
+          <div class="skeleton h-2"></div>
+        </div>
+      @endforeach
+    </div>
+  @elseif (items.length === 0)
+    <div class="text-center py-8 text-gray-500">
+      {{ emptyMessage }}
+    </div>
+  @else
+    <div class="space-y-3">
+      @foreach (displayItems as item)
+        <div class="group">
+          <div class="list-item mb-1">
+            <span class="list-label" title="{{ item.name }}">
+              {{ item.name }}
+            </span>
+            <span class="list-value">
+              {{ formatCompact(item.value) }}
+              @if (showPercentage)
+                <span class="text-gray-400 ml-1">
+                  ({{ formatPercentage(item.percentage) }})
+                </span>
+              @endif
+            </span>
+          </div>
+
+          <div class="progress-bar">
+            <div
+              class="progress-fill bg-indigo-500"
+              style="width: {{ (item.value / maxValue) * 100 }}%"
+            ></div>
+          </div>
+        </div>
+      @endforeach
+    </div>
+  @endif
+</div>

package/src/dashboard/components/TrendIndicator.stx

@@ -0,0 +1,84 @@
+<script server>
+/**
+ * TrendIndicator Component
+ *
+ * Compact trend indicator showing direction and percentage change.
+ */
+import { defineProps, withDefaults } from 'stx'
+
+interface TrendIndicatorProps {
+  value: number // Percentage change (-100 to +100+)
+  size?: 'sm' | 'md' | 'lg'
+  showValue?: boolean
+  invertColors?: boolean // For metrics where decrease is good
+  neutral?: number // Threshold for neutral (default 0)
+}
+
+const { value, size, showValue, invertColors, neutral } = withDefaults(
+  defineProps<TrendIndicatorProps>(),
+  {
+    size: 'md',
+    showValue: true,
+    invertColors: false,
+    neutral: 0,
+  }
+)
+
+const isPositive = value > neutral
+const isNegative = value < neutral
+const isNeutral = value === neutral
+
+function getColorClass(): string {
+  if (isNeutral)
+    return 'text-gray-500 bg-gray-100'
+
+  const positive = isPositive
+  const goodTrend = invertColors ? !positive : positive
+
+  return goodTrend
+    ? 'text-green-600 bg-green-100'
+    : 'text-red-600 bg-red-100'
+}
+
+function getSizeClasses(): { wrapper: string, icon: string } {
+  switch (size) {
+    case 'sm':
+      return { wrapper: 'text-xs px-1.5 py-0.5 gap-0.5', icon: 'w-3 h-3' }
+    case 'lg':
+      return { wrapper: 'text-base px-3 py-1.5 gap-1.5', icon: 'w-5 h-5' }
+    default:
+      return { wrapper: 'text-sm px-2 py-1 gap-1', icon: 'w-4 h-4' }
+  }
+}
+
+function formatValue(): string {
+  const abs = Math.abs(value)
+  if (abs >= 1000)
+    return `${(abs / 1000).toFixed(1)}k`
+  if (abs >= 100)
+    return abs.toFixed(0)
+  if (abs >= 10)
+    return abs.toFixed(1)
+  return abs.toFixed(2)
+}
+
+const colorClass = getColorClass()
+const sizeClasses = getSizeClasses()
+const formattedValue = formatValue()
+</script>
+
+<span class="inline-flex items-center rounded-full font-medium {{ colorClass }} {{ sizeClasses.wrapper }}">
+  @if (isPositive)
+    <Icon name="arrow-up" class="{{ sizeClasses.icon }}" />
+  @elseif (isNegative)
+    <Icon name="arrow-down" class="{{ sizeClasses.icon }}" />
+  @else
+    <Icon name="minus" class="{{ sizeClasses.icon }}" />
+  @endif
+
+  @if (showValue)
+    <span>
+      {{ isPositive ? '+' : '' }}{{ formattedValue }}%
+    </span>
+  @endif
+</span>