@stacksjs/ts-analytics 0.1.6

package/src/dashboard/components/PagesTable.stx

@@ -0,0 +1,127 @@
+{{-- PagesTable Component --}}
+{{-- Props: pages (array of {path, entries, visitors, views}) --}}
+<div class="data-panel">
+  <div class="panel-header">
+    <span class="panel-title">Pages</span>
+  </div>
+  <table class="data-table">
+    <thead>
+      <tr>
+        <th>Path</th>
+        <th class="text-right">Entries</th>
+        <th class="text-right">Visitors</th>
+        <th class="text-right">Views</th>
+      </tr>
+    </thead>
+    <tbody>
+      @forelse(pages as page)
+        <tr>
+          <td class="name" title="{{ page.path }}">{{ page.path }}</td>
+          <td class="value">{{ page.entries | fmt }}</td>
+          <td class="value">{{ page.visitors | fmt }}</td>
+          <td class="value">{{ page.views | fmt }}</td>
+        </tr>
+      @empty
+        <tr>
+          <td colspan="4" class="empty-cell">No page data available</td>
+        </tr>
+      @endforelse
+    </tbody>
+  </table>
+  @if(pages.length >= 10)
+    <div class="panel-footer">
+      <button class="view-more-btn" type="button">View all pages</button>
+    </div>
+  @endif
+</div>
+
+
+<style>
+.data-panel {
+  background: var(--bg-secondary);
+  border-radius: 8px;
+  padding: 1rem;
+}
+
+.panel-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+.panel-title {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--text-primary);
+}
+
+.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,
+.data-table td.value {
+  text-align: right;
+}
+
+.data-table td {
+  padding: 0.625rem 0;
+  border-bottom: 1px solid var(--bg-tertiary);
+}
+
+.data-table tr:last-child td {
+  border-bottom: none;
+}
+
+.data-table .name {
+  color: var(--text-primary);
+  max-width: 180px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.data-table .value {
+  color: var(--text-secondary);
+}
+
+.empty-cell {
+  text-align: center;
+  color: var(--text-muted);
+  padding: 1.5rem 0;
+}
+
+.panel-footer {
+  margin-top: 1rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--border);
+  text-align: center;
+}
+
+.view-more-btn {
+  background: transparent;
+  border: none;
+  color: var(--accent);
+  font-size: 0.75rem;
+  cursor: pointer;
+  padding: 0.25rem 0.5rem;
+}
+
+.view-more-btn:hover {
+  text-decoration: underline;
+}
+</style>

package/src/dashboard/components/ProgressRing.stx

@@ -0,0 +1,89 @@
+<script server>
+/**
+ * ProgressRing Component
+ *
+ * Circular progress indicator with optional center content.
+ */
+import { defineProps, withDefaults } from 'stx'
+
+interface ProgressRingProps {
+  value: number // 0-100
+  size?: number
+  strokeWidth?: number
+  color?: string
+  bgColor?: string
+  showValue?: boolean
+  label?: string
+  loading?: boolean
+}
+
+const { value, size, strokeWidth, color, bgColor, showValue, label, loading } = withDefaults(
+  defineProps<ProgressRingProps>(),
+  {
+    size: 120,
+    strokeWidth: 8,
+    color: '#6366f1',
+    bgColor: '#e5e7eb',
+    showValue: true,
+    loading: false,
+  }
+)
+
+const radius = (size - strokeWidth) / 2
+const circumference = 2 * Math.PI * radius
+const progress = Math.min(Math.max(value, 0), 100)
+const offset = circumference - (progress / 100) * circumference
+const center = size / 2
+</script>
+
+<div
+  class="progress-ring relative inline-flex items-center justify-center"
+  style="width: {{ size }}px; height: {{ size }}px"
+>
+  @if (loading)
+    <div class="absolute inset-0 animate-pulse">
+      <div class="w-full h-full rounded-full bg-gray-200"></div>
+    </div>
+  @else
+    <svg
+      width="{{ size }}"
+      height="{{ size }}"
+      class="transform -rotate-90"
+    >
+      <circle
+        cx="{{ center }}"
+        cy="{{ center }}"
+        r="{{ radius }}"
+        stroke="{{ bgColor }}"
+        stroke-width="{{ strokeWidth }}"
+        fill="none"
+      />
+
+      <circle
+        cx="{{ center }}"
+        cy="{{ center }}"
+        r="{{ radius }}"
+        stroke="{{ color }}"
+        stroke-width="{{ strokeWidth }}"
+        stroke-dasharray="{{ circumference }}"
+        stroke-dashoffset="{{ offset }}"
+        stroke-linecap="round"
+        fill="none"
+        class="transition-all duration-500 ease-out"
+      />
+    </svg>
+
+    <div class="absolute inset-0 flex flex-col items-center justify-center">
+      @if (showValue)
+        <span class="text-2xl font-bold text-gray-900">
+          {{ Math.round(value) }}%
+        </span>
+      @endif
+      @if (label)
+        <span class="text-xs text-gray-500 mt-0.5">
+          {{ label }}
+        </span>
+      @endif
+    </div>
+  @endif
+</div>

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

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import RealtimeCounter from './RealtimeCounter.stx'
+
+const meta = {
+  title: 'Components/Core/RealtimeCounter',
+  component: RealtimeCounter,
+  tags: ['autodocs'],
+  argTypes: {
+    count: { control: { type: 'number', min: 0, max: 1000 } },
+    label: { control: 'text' },
+    loading: { control: 'boolean' },
+  },
+} satisfies Meta<typeof RealtimeCounter>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    count: 42,
+    label: 'Active Visitors',
+  },
+}
+
+export const HighCount: Story = {
+  args: {
+    count: 847,
+    label: 'Current Users',
+  },
+}
+
+export const ZeroCount: Story = {
+  args: {
+    count: 0,
+    label: 'Active Sessions',
+  },
+}
+
+export const Loading: Story = {
+  args: {
+    count: 0,
+    label: 'Active Visitors',
+    loading: true,
+  },
+}

package/src/dashboard/components/RealtimeCounter.stx

@@ -0,0 +1,46 @@
+<script server>
+/**
+ * RealtimeCounter Component
+ *
+ * Displays current visitor count with pulsing indicator.
+ */
+import { defineProps, withDefaults } from 'stx'
+import type { RealtimeCounterProps } from '../types'
+import { formatCompact } from '../utils'
+
+const { count, label, pulseColor, loading } = withDefaults(
+  defineProps<RealtimeCounterProps>(),
+  {
+    label: 'visitors right now',
+    pulseColor: '#22c55e',
+    loading: false,
+  }
+)
+
+const formattedCount = formatCompact(count)
+</script>
+
+<div class="realtime-counter card-hover p-6">
+  <div class="flex items-center gap-3">
+    <div class="relative">
+      <div class="pulse-dot animate-pulse" style="background-color: {{ pulseColor }}"></div>
+      <div class="pulse-ring" style="background-color: {{ pulseColor }}"></div>
+    </div>
+
+    @if (loading)
+      <div class="animate-pulse">
+        <div class="skeleton h-10 w-16"></div>
+        <div class="skeleton h-4 w-24 mt-1"></div>
+      </div>
+    @else
+      <div>
+        <span class="text-4xl font-bold text-gray-900">
+          {{ formattedCount }}
+        </span>
+        <span class="ml-2 text-gray-500 text-sm">
+          {{ label }}
+        </span>
+      </div>
+    @endif
+  </div>
+</div>

package/src/dashboard/components/ReferrersTable.stx

@@ -0,0 +1,180 @@
+{{-- ReferrersTable Component --}}
+{{-- Props: referrers, sources, activeTab --}}
+<div class="data-panel">
+  <div class="tabs">
+    <button class="tab-btn @if(activeTab === 'referrers') active @endif" data-tab="referrers" type="button">
+      Referrers
+    </button>
+    <button class="tab-btn @if(activeTab === 'sources') active @endif" data-tab="sources" type="button">
+      Sources
+    </button>
+  </div>
+
+  <div class="tab-content" data-content="referrers" @if(activeTab !== 'referrers') style="display:none" @endif>
+    <table class="data-table">
+      <thead>
+        <tr>
+          <th>Referrer</th>
+          <th class="text-right">Visitors</th>
+          <th class="text-right">Views</th>
+        </tr>
+      </thead>
+      <tbody>
+        @forelse(referrers as ref)
+          <tr>
+            <td class="name" title="{{ ref.url }}">
+              @if(ref.favicon)
+                <img src="{{ ref.favicon }}" alt="" class="favicon" />
+              @endif
+              {{ ref.source }}
+            </td>
+            <td class="value">{{ ref.visitors | fmt }}</td>
+            <td class="value">{{ ref.views | fmt }}</td>
+          </tr>
+        @empty
+          <tr>
+            <td colspan="3" class="empty-cell">No referrer data</td>
+          </tr>
+        @endforelse
+      </tbody>
+    </table>
+  </div>
+
+  <div class="tab-content" data-content="sources" @if(activeTab !== 'sources') style="display:none" @endif>
+    <table class="data-table">
+      <thead>
+        <tr>
+          <th>Source</th>
+          <th class="text-right">Visitors</th>
+          <th class="text-right">Views</th>
+        </tr>
+      </thead>
+      <tbody>
+        @forelse(sources as src)
+          <tr>
+            <td class="name">{{ src.name }}</td>
+            <td class="value">{{ src.visitors | fmt }}</td>
+            <td class="value">{{ src.views | fmt }}</td>
+          </tr>
+        @empty
+          <tr>
+            <td colspan="3" class="empty-cell">No source data</td>
+          </tr>
+        @endforelse
+      </tbody>
+    </table>
+  </div>
+</div>
+
+
+<script>
+  document.querySelectorAll('.data-panel').forEach(panel => {
+    const tabs = panel.querySelectorAll('.tab-btn')
+    const contents = panel.querySelectorAll('.tab-content')
+
+    tabs.forEach(tab => {
+      tab.addEventListener('click', () => {
+        const targetTab = tab.dataset.tab
+        tabs.forEach(t => t.classList.remove('active'))
+        tab.classList.add('active')
+        contents.forEach(c => {
+          c.style.display = c.dataset.content === targetTab ? 'block' : 'none'
+        })
+      })
+    })
+  })
+</script>
+
+<style>
+.data-panel {
+  background: var(--bg-secondary);
+  border-radius: 8px;
+  padding: 1rem;
+}
+
+.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);
+}
+
+.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.625rem 0;
+  border-bottom: 1px solid var(--bg-tertiary);
+}
+
+.data-table tr:last-child td {
+  border-bottom: none;
+}
+
+.data-table .name {
+  color: var(--text-primary);
+  max-width: 180px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.favicon {
+  width: 16px;
+  height: 16px;
+  border-radius: 2px;
+}
+
+.data-table .value {
+  color: var(--text-secondary);
+  text-align: right;
+}
+
+.empty-cell {
+  text-align: center;
+  color: var(--text-muted);
+  padding: 1.5rem 0;
+}
+</style>

package/src/dashboard/components/SparklineChart.stx

@@ -0,0 +1,160 @@
+<script server>
+/**
+ * SparklineChart Component
+ *
+ * A minimal inline sparkline chart for showing trends.
+ * Uses SVG for crisp rendering at any size.
+ */
+import { defineProps, withDefaults } from 'stx'
+
+interface SparklineChartProps {
+  data: number[]
+  width?: number
+  height?: number
+  color?: string
+  fillColor?: string
+  showArea?: boolean
+  strokeWidth?: number
+  loading?: boolean
+}
+
+const { data, width, height, color, fillColor, showArea, strokeWidth, loading } = withDefaults(
+  defineProps<SparklineChartProps>(),
+  {
+    width: 100,
+    height: 32,
+    color: '#6366f1',
+    fillColor: '#6366f120',
+    showArea: true,
+    strokeWidth: 2,
+    loading: false,
+  }
+)
+
+function computePathData(): string {
+  if (!data.length)
+    return ''
+
+  const min = Math.min(...data)
+  const max = Math.max(...data)
+  const range = max - min || 1
+
+  const padding = strokeWidth
+  const chartWidth = width - padding * 2
+  const chartHeight = height - padding * 2
+
+  const points = data.map((value, index) => {
+    const x = padding + (index / (data.length - 1)) * chartWidth
+    const y = padding + chartHeight - ((value - min) / range) * chartHeight
+    return `${x},${y}`
+  })
+
+  return `M${points.join(' L')}`
+}
+
+function computeAreaPath(): string {
+  if (!data.length || !showArea)
+    return ''
+
+  const min = Math.min(...data)
+  const max = Math.max(...data)
+  const range = max - min || 1
+
+  const padding = strokeWidth
+  const chartWidth = width - padding * 2
+  const chartHeight = height - padding * 2
+
+  const points = data.map((value, index) => {
+    const x = padding + (index / (data.length - 1)) * chartWidth
+    const y = padding + chartHeight - ((value - min) / range) * chartHeight
+    return `${x},${y}`
+  })
+
+  const firstX = padding
+  const lastX = padding + chartWidth
+  const bottomY = padding + chartHeight
+
+  return `M${firstX},${bottomY} L${points.join(' L')} L${lastX},${bottomY} Z`
+}
+
+function computeTrend(): number {
+  if (data.length < 2)
+    return 0
+
+  const first = data[0]
+  const last = data[data.length - 1]
+
+  if (first === 0)
+    return last > 0 ? 100 : 0
+
+  return ((last - first) / first) * 100
+}
+
+function getTrendColor(trend: number): string {
+  if (trend > 0)
+    return '#22c55e'
+  if (trend < 0)
+    return '#ef4444'
+  return '#6b7280'
+}
+
+const pathData = computePathData()
+const areaPath = computeAreaPath()
+const trend = computeTrend()
+const trendColor = getTrendColor(trend)
+</script>
+
+<div class="sparkline-chart inline-flex items-center gap-2">
+  @if (loading)
+    <div class="animate-pulse">
+      <div class="skeleton" style="width: {{ width }}px; height: {{ height }}px"></div>
+    </div>
+  @elseif (!data.length)
+    <div
+      class="flex items-center justify-center text-gray-300"
+      style="width: {{ width }}px; height: {{ height }}px"
+    >
+      <Icon name="trending-up" size="16" />
+    </div>
+  @else
+    <svg
+      width="{{ width }}"
+      height="{{ height }}"
+      class="overflow-visible"
+    >
+      @if (showArea && areaPath)
+        <path
+          d="{{ areaPath }}"
+          fill="{{ fillColor }}"
+        />
+      @endif
+
+      <path
+        d="{{ pathData }}"
+        stroke="{{ color }}"
+        stroke-width="{{ strokeWidth }}"
+        fill="none"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+
+      @if (data.length)
+        <circle
+          cx="{{ width - strokeWidth }}"
+          cy="{{ height / 2 }}"
+          r="{{ strokeWidth }}"
+          fill="{{ color }}"
+        />
+      @endif
+    </svg>
+
+    @if (data.length >= 2)
+      <span
+        class="text-xs font-medium"
+        style="color: {{ trendColor }}"
+      >
+        {{ trend >= 0 ? '+' : '' }}{{ trend.toFixed(1) }}%
+      </span>
+    @endif
+  @endif
+</div>

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

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import StatCard from './StatCard.stx'
+
+const meta = {
+  title: 'Components/Core/StatCard',
+  component: StatCard,
+  tags: ['autodocs'],
+  argTypes: {
+    label: { control: 'text' },
+    value: { control: 'text' },
+    change: { control: { type: 'number', min: -1, max: 1, step: 0.01 } },
+    icon: { control: 'text' },
+    loading: { control: 'boolean' },
+  },
+} satisfies Meta<typeof StatCard>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    label: 'Total Visitors',
+    value: '24,847',
+  },
+}
+
+export const WithChange: Story = {
+  args: {
+    label: 'Page Views',
+    value: '89,234',
+    change: 0.12,
+  },
+}
+
+export const NegativeChange: Story = {
+  args: {
+    label: 'Bounce Rate',
+    value: '42.3%',
+    change: -0.05,
+  },
+}
+
+export const Loading: Story = {
+  args: {
+    label: 'Total Visitors',
+    value: '24,847',
+    loading: true,
+  },
+}
+
+export const WithIcon: Story = {
+  args: {
+    label: 'Active Users',
+    value: '1,234',
+    change: 0.08,
+    icon: 'M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z',
+  },
+}