@stacksjs/ts-analytics 0.1.6

package/src/dashboard/components/GeoTable.stx

@@ -0,0 +1,337 @@
+{{-- GeoTable Component --}}
+{{-- Props: countries, regions, cities, activeTab, onFetchRegions, onFetchCities --}}
+<div class="data-panel">
+  <div class="tabs">
+    <button class="tab-btn @if(activeTab === 'countries') active @endif" data-tab="countries" type="button" @click="handleTabChange('countries')">
+      Countries
+    </button>
+    <button class="tab-btn @if(activeTab === 'regions') active @endif" data-tab="regions" type="button" @click="handleTabChange('regions')">
+      Regions
+      @if(selectedCountry)
+        <span class="filter-badge">{{ selectedCountry }}</span>
+      @endif
+    </button>
+    <button class="tab-btn @if(activeTab === 'cities') active @endif" data-tab="cities" type="button" @click="handleTabChange('cities')">
+      Cities
+      @if(selectedRegion)
+        <span class="filter-badge">{{ selectedRegion }}</span>
+      @endif
+    </button>
+  </div>
+
+  {{-- Breadcrumb navigation for drill-down --}}
+  @if(selectedCountry || selectedRegion)
+    <div class="breadcrumb">
+      <button class="breadcrumb-btn" type="button" @click="clearFilters">All</button>
+      @if(selectedCountry)
+        <span class="breadcrumb-sep">/</span>
+        <button class="breadcrumb-btn @if(!selectedRegion) active @endif" type="button" @click="clearRegionFilter">{{ selectedCountry }}</button>
+      @endif
+      @if(selectedRegion)
+        <span class="breadcrumb-sep">/</span>
+        <span class="breadcrumb-current">{{ selectedRegion }}</span>
+      @endif
+    </div>
+  @endif
+
+  <div class="tab-content" data-content="countries" @if(activeTab !== 'countries') style="display:none" @endif>
+    <table class="data-table">
+      <thead>
+        <tr>
+          <th>Country</th>
+          <th class="text-right">Visitors</th>
+        </tr>
+      </thead>
+      <tbody>
+        @forelse(countries as country)
+          <tr class="clickable-row" @click="drillDownToRegions(country)">
+            <td class="name">
+              <span class="flag" data-country="{{ country.code }}">{{ country.flag }}</span>
+              {{ country.name }}
+              <span class="drill-icon">&#8250;</span>
+            </td>
+            <td class="value">{{ country.visitors | fmt }}</td>
+          </tr>
+        @empty
+          <tr>
+            <td colspan="2" class="empty-cell">No country data</td>
+          </tr>
+        @endforelse
+      </tbody>
+    </table>
+  </div>
+
+  <div class="tab-content" data-content="regions" @if(activeTab !== 'regions') style="display:none" @endif>
+    <table class="data-table">
+      <thead>
+        <tr>
+          <th>Region</th>
+          <th class="text-right">Visitors</th>
+        </tr>
+      </thead>
+      <tbody>
+        @forelse(regions as region)
+          <tr class="clickable-row" @click="drillDownToCities(region)">
+            <td class="name">
+              {{ region.name }}
+              <span class="drill-icon">&#8250;</span>
+            </td>
+            <td class="value">{{ region.visitors | fmt }}</td>
+          </tr>
+        @empty
+          <tr>
+            <td colspan="2" class="empty-cell">
+              @if(selectedCountry)
+                No region data for {{ selectedCountry }}
+              @else
+                Select a country to view regions
+              @endif
+            </td>
+          </tr>
+        @endforelse
+      </tbody>
+    </table>
+  </div>
+
+  <div class="tab-content" data-content="cities" @if(activeTab !== 'cities') style="display:none" @endif>
+    <table class="data-table">
+      <thead>
+        <tr>
+          <th>City</th>
+          <th class="text-right">Visitors</th>
+        </tr>
+      </thead>
+      <tbody>
+        @forelse(cities as city)
+          <tr>
+            <td class="name">{{ city.name }}</td>
+            <td class="value">{{ city.visitors | fmt }}</td>
+          </tr>
+        @empty
+          <tr>
+            <td colspan="2" class="empty-cell">
+              @if(selectedRegion)
+                No city data for {{ selectedRegion }}
+              @elseif(selectedCountry)
+                Select a region to view cities
+              @else
+                Select a country and region to view cities
+              @endif
+            </td>
+          </tr>
+        @endforelse
+      </tbody>
+    </table>
+  </div>
+</div>
+
+<script server>
+import { defineProps } from 'stx'
+
+interface GeoTableProps {
+  countries: Array<{ name: string, code: string, flag?: string, visitors: number }>
+  regions: Array<{ name: string, country: string, visitors: number }>
+  cities: Array<{ name: string, region: string, country: string, visitors: number }>
+  activeTab: 'countries' | 'regions' | 'cities'
+  onFetchRegions?: (country: string) => void
+  onFetchCities?: (country: string, region: string) => void
+  onTabChange?: (tab: 'countries' | 'regions' | 'cities') => void
+}
+
+const props = defineProps<GeoTableProps>()
+
+let selectedCountry: string | null = null
+let selectedRegion: string | null = null
+
+function handleTabChange(tab: 'countries' | 'regions' | 'cities') {
+  props.onTabChange?.(tab)
+}
+
+function drillDownToRegions(country: { name: string, code: string }) {
+  selectedCountry = country.name
+  selectedRegion = null
+  props.onFetchRegions?.(country.code)
+  props.onTabChange?.('regions')
+}
+
+function drillDownToCities(region: { name: string, country: string }) {
+  selectedRegion = region.name
+  // Use the country code from the selected country context
+  const countryCode = props.countries.find(c => c.name === selectedCountry)?.code || selectedCountry || ''
+  props.onFetchCities?.(countryCode, region.name)
+  props.onTabChange?.('cities')
+}
+
+function clearFilters() {
+  selectedCountry = null
+  selectedRegion = null
+  props.onTabChange?.('countries')
+}
+
+function clearRegionFilter() {
+  selectedRegion = null
+  if (selectedCountry) {
+    const countryCode = props.countries.find(c => c.name === selectedCountry)?.code || selectedCountry
+    props.onFetchRegions?.(countryCode)
+  }
+  props.onTabChange?.('regions')
+}
+</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;
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+.tab-btn:hover {
+  color: var(--text-primary);
+}
+
+.tab-btn.active {
+  color: var(--accent);
+  border-bottom-color: var(--accent);
+}
+
+.filter-badge {
+  background: var(--accent);
+  color: white;
+  font-size: 0.625rem;
+  padding: 0.125rem 0.375rem;
+  border-radius: 9999px;
+  font-weight: 600;
+}
+
+.breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.5rem 0;
+  margin-bottom: 0.5rem;
+  font-size: 0.75rem;
+}
+
+.breadcrumb-btn {
+  background: transparent;
+  border: none;
+  color: var(--accent);
+  cursor: pointer;
+  padding: 0.125rem 0.25rem;
+  border-radius: 4px;
+  transition: background 0.15s;
+}
+
+.breadcrumb-btn:hover {
+  background: var(--bg-tertiary);
+}
+
+.breadcrumb-btn.active {
+  color: var(--text-primary);
+  font-weight: 500;
+}
+
+.breadcrumb-sep {
+  color: var(--text-muted);
+}
+
+.breadcrumb-current {
+  color: var(--text-primary);
+  font-weight: 500;
+}
+
+.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);
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.clickable-row {
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.clickable-row:hover {
+  background: var(--bg-tertiary);
+}
+
+.clickable-row:hover .drill-icon {
+  opacity: 1;
+}
+
+.drill-icon {
+  margin-left: auto;
+  color: var(--text-muted);
+  opacity: 0;
+  transition: opacity 0.15s;
+  font-size: 1rem;
+}
+
+.flag {
+  font-size: 1rem;
+}
+
+.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/GoalsPanel.stx

@@ -0,0 +1,109 @@
+<script server>
+/**
+ * GoalsPanel Component
+ *
+ * Displays conversion goals with progress and revenue.
+ */
+import { defineProps, withDefaults } from 'stx'
+import type { GoalConversion } from '../types'
+import { formatCompact, formatCurrency, formatPercentage } from '../utils'
+
+interface GoalsPanelProps {
+  goals: GoalConversion[]
+  loading?: boolean
+  title?: string
+}
+
+const { goals, loading, title } = withDefaults(
+  defineProps<GoalsPanelProps>(),
+  {
+    loading: false,
+    title: 'Conversion Goals',
+  }
+)
+
+const sortedGoals = [...goals].sort((a, b) => b.conversions - a.conversions)
+
+const totalConversions = goals.reduce((sum, g) => sum + g.conversions, 0)
+
+const totalRevenue = goals.reduce((sum, g) => sum + g.revenue, 0)
+</script>
+
+<div class="goals-panel 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 (!loading && goals.length)
+      <div class="text-sm text-gray-500">
+        {{ formatCompact(totalConversions) }} total
+      </div>
+    @endif
+  </div>
+
+  @if (loading)
+    <div class="space-y-4">
+      @foreach ([1, 2, 3] as i)
+        <div class="animate-pulse">
+          <div class="flex items-center justify-between mb-2">
+            <div class="skeleton h-5 w-32"></div>
+            <div class="skeleton h-5 w-20"></div>
+          </div>
+          <div class="skeleton h-2"></div>
+          <div class="flex items-center justify-between mt-2">
+            <div class="skeleton h-4 w-24"></div>
+            <div class="skeleton h-4 w-16"></div>
+          </div>
+        </div>
+      @endforeach
+    </div>
+  @elseif (!goals.length)
+    <div class="text-center py-8 text-gray-500">
+      <Icon name="bar-chart-2" size="48" class="mx-auto text-gray-300 mb-3" />
+      <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 (sortedGoals as goal)
+        <div class="p-4 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors">
+          <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">
+              {{ formatCompact(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">
+              {{ formatPercentage(goal.conversionRate) }} conversion rate
+            </span>
+            @if (goal.revenue > 0)
+              <span class="text-green-600 font-medium">
+                {{ formatCurrency(goal.revenue) }}
+              </span>
+            @endif
+          </div>
+        </div>
+      @endforeach
+    </div>
+
+    @if (totalRevenue > 0)
+      <div class="mt-4 pt-4 border-t border-gray-200">
+        <div class="flex items-center justify-between">
+          <span class="text-sm text-gray-500">Total Revenue</span>
+          <span class="text-lg font-semibold text-green-600">
+            {{ formatCurrency(totalRevenue) }}
+          </span>
+        </div>
+      </div>
+    @endif
+  @endif
+</div>

package/src/dashboard/components/Header.stx

@@ -0,0 +1,39 @@
+{{-- Header Component --}}
+{{-- Props: siteName, sites, realtimeCount --}}
+<header class="flex justify-between items-center py-4 border-b border-border mb-4">
+  <div>
+    <select id="site-select" class="filter-select bg-bg-2 border border-border text-text px-4 py-2 rounded-md text-sm cursor-pointer">
+      @foreach(sites as site)
+        <option value="{{ site.id }}" @if(site.id === siteId) selected @endif>
+          {{ site.name }}
+        </option>
+      @endforeach
+    </select>
+  </div>
+  <div class="flex items-center gap-4">
+    <div class="badge flex items-center gap-2 bg-bg-2 px-4 py-2 rounded-full text-sm">
+      <span class="pulse-dot w-2 h-2 bg-success rounded-full"></span>
+      <span>{{ realtimeCount }} current visitors</span>
+    </div>
+    <button class="icon-btn" title="Notifications">
+      <Icon name="bell" size="20" />
+    </button>
+    <button class="icon-btn" title="Options">
+      <Icon name="more-vertical" size="20" />
+    </button>
+    <button class="icon-btn" title="Settings">
+      <Icon name="settings" size="20" />
+    </button>
+  </div>
+</header>
+
+<style>
+.pulse-dot {
+  animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+</style>

package/src/dashboard/components/HeatmapChart.stx

@@ -0,0 +1,140 @@
+<script server>
+/**
+ * HeatmapChart Component
+ *
+ * Displays activity data as a heatmap grid (e.g., hours x days).
+ */
+import { defineProps, withDefaults } from 'stx'
+import { formatCompact } from '../utils'
+
+export interface HeatmapDataPoint {
+  x: number // Column index (e.g., hour 0-23)
+  y: number // Row index (e.g., day 0-6)
+  value: number
+}
+
+interface HeatmapChartProps {
+  data: HeatmapDataPoint[]
+  xLabels?: string[]
+  yLabels?: string[]
+  title?: string
+  colorStart?: string
+  colorEnd?: string
+  loading?: boolean
+}
+
+const { data, xLabels, yLabels, title, colorStart, colorEnd, loading } = withDefaults(
+  defineProps<HeatmapChartProps>(),
+  {
+    xLabels: () => ['12a', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12p', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11'],
+    yLabels: () => ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    colorStart: '#e0e7ff',
+    colorEnd: '#4f46e5',
+    loading: false,
+  }
+)
+
+const maxValue = data.length ? Math.max(...data.map(d => d.value), 1) : 1
+const minValue = data.length ? Math.min(...data.map(d => d.value)) : 0
+
+const dataMap = new Map<string, number>()
+for (const point of data) {
+  dataMap.set(`${point.x}-${point.y}`, point.value)
+}
+
+function getValue(x: number, y: number): number {
+  return dataMap.get(`${x}-${y}`) ?? 0
+}
+
+function hexToRgb(hex: string): { r: number, g: number, b: number } | null {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
+  return result
+    ? {
+        r: Number.parseInt(result[1], 16),
+        g: Number.parseInt(result[2], 16),
+        b: Number.parseInt(result[3], 16),
+      }
+    : null
+}
+
+function getColor(value: number): string {
+  if (maxValue === minValue)
+    return colorStart
+
+  const ratio = (value - minValue) / (maxValue - minValue)
+
+  const startRgb = hexToRgb(colorStart)
+  const endRgb = hexToRgb(colorEnd)
+
+  if (!startRgb || !endRgb)
+    return colorStart
+
+  const r = Math.round(startRgb.r + (endRgb.r - startRgb.r) * ratio)
+  const g = Math.round(startRgb.g + (endRgb.g - startRgb.g) * ratio)
+  const b = Math.round(startRgb.b + (endRgb.b - startRgb.b) * ratio)
+
+  return `rgb(${r}, ${g}, ${b})`
+}
+
+const legendColors = [0, 1, 2, 3, 4].map(i => getColor(minValue + ((maxValue - minValue) * i) / 4))
+</script>
+
+<div class="heatmap-chart card-hover p-6">
+  @if (title)
+    <h3 class="text-sm font-medium text-gray-900 mb-4">
+      {{ title }}
+    </h3>
+  @endif
+
+  @if (loading)
+    <div class="animate-pulse">
+      <div class="skeleton h-48 w-full"></div>
+    </div>
+  @elseif (!data.length)
+    <div class="text-center py-12 text-gray-500">
+      No activity data available
+    </div>
+  @else
+    <div class="overflow-x-auto">
+      <div class="min-w-max">
+        <div class="flex ml-12 mb-1">
+          @foreach (xLabels as label)
+            <div class="flex-1 text-center text-xs text-gray-500" style="min-width: 24px">
+              {{ loop.index % 3 === 0 ? label : '' }}
+            </div>
+          @endforeach
+        </div>
+
+        <div class="space-y-1">
+          @foreach (yLabels as yLabel)
+            <div class="flex items-center gap-2">
+              <div class="w-10 text-xs text-gray-500 text-right">
+                {{ yLabel }}
+              </div>
+
+              <div class="flex-1 flex gap-0.5">
+                @foreach (xLabels as xLabel)
+                  <div
+                    class="flex-1 aspect-square rounded-sm cursor-pointer transition-transform hover:scale-110 hover:z-10"
+                    style="min-width: 20px; min-height: 20px; background-color: {{ getColor(getValue(loop.index, loop.parent.index)) }}"
+                    title="{{ yLabel }} {{ xLabel }}: {{ formatCompact(getValue(loop.index, loop.parent.index)) }}"
+                  ></div>
+                @endforeach
+              </div>
+            </div>
+          @endforeach
+        </div>
+
+        <div class="flex items-center justify-end mt-4 gap-2">
+          <span class="text-xs text-gray-500">Less</span>
+          <div class="flex gap-0.5">
+            @foreach (legendColors as color)
+              <div class="w-4 h-4 rounded-sm" style="background-color: {{ color }}"></div>
+            @endforeach
+          </div>
+          <span class="text-xs text-gray-500">More</span>
+        </div>
+      </div>
+    </div>
+  @endif
+</div>