@stacksjs/ts-analytics 0.1.6

package/src/dashboard/components/CampaignTable.stx

@@ -0,0 +1,238 @@
+{{-- CampaignTable Component --}}
+{{-- Props: campaigns (by campaign name), sources (utm_source), mediums (utm_medium), contents (utm_content), terms (utm_term), activeTab --}}
+<div class="data-panel">
+  <div class="tabs">
+    <button class="tab-btn @if(activeTab === 'campaign') active @endif" data-tab="campaign" type="button">
+      Campaign
+    </button>
+    <button class="tab-btn @if(activeTab === 'source') active @endif" data-tab="source" type="button">
+      Source
+    </button>
+    <button class="tab-btn @if(activeTab === 'medium') active @endif" data-tab="medium" type="button">
+      Medium
+    </button>
+    <button class="tab-btn @if(activeTab === 'content') active @endif" data-tab="content" type="button">
+      Content
+    </button>
+    <button class="tab-btn @if(activeTab === 'term') active @endif" data-tab="term" type="button">
+      Term
+    </button>
+  </div>
+
+  <!-- Campaign Tab -->
+  <div class="tab-content" data-content="campaign" @if(activeTab !== 'campaign') style="display:none" @endif>
+    <table class="data-table">
+      <thead>
+        <tr>
+          <th>Campaign</th>
+          <th class="text-right">Visitors</th>
+          <th class="text-right">Views</th>
+        </tr>
+      </thead>
+      <tbody>
+        @forelse(campaigns as item)
+          <tr>
+            <td class="name" title="{{ item.name }}">{{ item.name }}</td>
+            <td class="value">{{ item.visitors | fmt }}</td>
+            <td class="value">{{ item.views | fmt }}</td>
+          </tr>
+        @empty
+          <tr>
+            <td colspan="3" class="empty-cell">No campaign data</td>
+          </tr>
+        @endforelse
+      </tbody>
+    </table>
+  </div>
+
+  <!-- Source Tab -->
+  <div class="tab-content" data-content="source" @if(activeTab !== 'source') 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 item)
+          <tr>
+            <td class="name" title="{{ item.name }}">{{ item.name }}</td>
+            <td class="value">{{ item.visitors | fmt }}</td>
+            <td class="value">{{ item.views | fmt }}</td>
+          </tr>
+        @empty
+          <tr>
+            <td colspan="3" class="empty-cell">No source data</td>
+          </tr>
+        @endforelse
+      </tbody>
+    </table>
+  </div>
+
+  <!-- Medium Tab -->
+  <div class="tab-content" data-content="medium" @if(activeTab !== 'medium') style="display:none" @endif>
+    <table class="data-table">
+      <thead>
+        <tr>
+          <th>Medium</th>
+          <th class="text-right">Visitors</th>
+          <th class="text-right">Views</th>
+        </tr>
+      </thead>
+      <tbody>
+        @forelse(mediums as item)
+          <tr>
+            <td class="name" title="{{ item.name }}">{{ item.name }}</td>
+            <td class="value">{{ item.visitors | fmt }}</td>
+            <td class="value">{{ item.views | fmt }}</td>
+          </tr>
+        @empty
+          <tr>
+            <td colspan="3" class="empty-cell">No medium data</td>
+          </tr>
+        @endforelse
+      </tbody>
+    </table>
+  </div>
+
+  <!-- Content Tab -->
+  <div class="tab-content" data-content="content" @if(activeTab !== 'content') style="display:none" @endif>
+    <table class="data-table">
+      <thead>
+        <tr>
+          <th>Content</th>
+          <th class="text-right">Visitors</th>
+          <th class="text-right">Views</th>
+        </tr>
+      </thead>
+      <tbody>
+        @forelse(contents as item)
+          <tr>
+            <td class="name" title="{{ item.name }}">{{ item.name }}</td>
+            <td class="value">{{ item.visitors | fmt }}</td>
+            <td class="value">{{ item.views | fmt }}</td>
+          </tr>
+        @empty
+          <tr>
+            <td colspan="3" class="empty-cell">No content data</td>
+          </tr>
+        @endforelse
+      </tbody>
+    </table>
+  </div>
+
+  <!-- Term Tab -->
+  <div class="tab-content" data-content="term" @if(activeTab !== 'term') style="display:none" @endif>
+    <table class="data-table">
+      <thead>
+        <tr>
+          <th>Term</th>
+          <th class="text-right">Visitors</th>
+          <th class="text-right">Views</th>
+        </tr>
+      </thead>
+      <tbody>
+        @forelse(terms as item)
+          <tr>
+            <td class="name" title="{{ item.name }}">{{ item.name }}</td>
+            <td class="value">{{ item.visitors | fmt }}</td>
+            <td class="value">{{ item.views | fmt }}</td>
+          </tr>
+        @empty
+          <tr>
+            <td colspan="3" class="empty-cell">No term data</td>
+          </tr>
+        @endforelse
+      </tbody>
+    </table>
+  </div>
+</div>
+
+
+<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;
+  flex-wrap: wrap;
+}
+
+.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: 150px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.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/CountryList.stx

@@ -0,0 +1,101 @@
+<script server>
+/**
+ * CountryList Component
+ *
+ * Displays country breakdown with flags using emoji flags.
+ */
+import { defineProps, withDefaults } from 'stx'
+import type { TopItem } from '../types'
+import { formatCompact, formatPercentage } from '../utils'
+
+export interface CountryItem extends TopItem {
+  countryCode?: string
+}
+
+interface CountryListProps {
+  countries: CountryItem[]
+  loading?: boolean
+  maxItems?: number
+  title?: string
+}
+
+const { countries, loading, maxItems, title } = withDefaults(
+  defineProps<CountryListProps>(),
+  {
+    loading: false,
+    maxItems: 10,
+    title: 'Top Countries',
+  }
+)
+
+const sortedCountries = [...countries]
+  .sort((a, b) => b.value - a.value)
+  .slice(0, maxItems)
+
+const maxValue = Math.max(...countries.map(c => c.value), 1)
+
+function getFlag(countryCode?: string): string {
+  if (!countryCode || countryCode.length !== 2)
+    return '🌍'
+
+  const codePoints = countryCode
+    .toUpperCase()
+    .split('')
+    .map(char => 127397 + char.charCodeAt(0))
+
+  return String.fromCodePoint(...codePoints)
+}
+</script>
+
+<div class="country-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 items-center justify-between mb-1">
+            <div class="flex items-center gap-2">
+              <div class="skeleton w-6 h-6 rounded"></div>
+              <div class="skeleton h-4 w-24"></div>
+            </div>
+            <div class="skeleton h-4 w-16"></div>
+          </div>
+          <div class="skeleton h-2"></div>
+        </div>
+      @endforeach
+    </div>
+  @elseif (!countries.length)
+    <div class="text-center py-8 text-gray-500">
+      No geographic data available
+    </div>
+  @else
+    <div class="space-y-3">
+      @foreach (sortedCountries as country)
+        <div class="group">
+          <div class="list-item mb-1">
+            <div class="flex items-center gap-2 min-w-0">
+              <span class="text-lg flex-shrink-0">{{ getFlag(country.countryCode) }}</span>
+              <span class="list-label" title="{{ country.name }}">
+                {{ country.name }}
+              </span>
+            </div>
+            <span class="list-value">
+              {{ formatCompact(country.value) }}
+              <span class="text-gray-400 ml-1">({{ formatPercentage(country.percentage) }})</span>
+            </span>
+          </div>
+
+          <div class="progress-bar">
+            <div
+              class="progress-fill bg-primary-500"
+              style="width: {{ (country.value / maxValue) * 100 }}%"
+            ></div>
+          </div>
+        </div>
+      @endforeach
+    </div>
+  @endif
+</div>

package/src/dashboard/components/DataTable.stx

@@ -0,0 +1,226 @@
+<script server>
+/**
+ * DataTable Component
+ *
+ * A flexible table component for displaying analytics data.
+ */
+import { defineProps, withDefaults } from 'stx'
+
+export interface TableColumn {
+  key: string
+  label: string
+  align?: 'left' | 'center' | 'right'
+  format?: 'number' | 'percentage' | 'currency' | 'duration' | 'date'
+  sortable?: boolean
+  width?: string
+}
+
+export interface TableRow {
+  [key: string]: string | number | boolean | null | undefined
+}
+
+interface DataTableProps {
+  columns: TableColumn[]
+  rows: TableRow[]
+  loading?: boolean
+  title?: string
+  emptyMessage?: string
+  sortable?: boolean
+  pageSize?: number
+}
+
+const { columns, rows, loading, title, emptyMessage, sortable, pageSize } = withDefaults(
+  defineProps<DataTableProps>(),
+  {
+    loading: false,
+    emptyMessage: 'No data available',
+    sortable: true,
+    pageSize: 10,
+  }
+)
+
+const totalPages = Math.ceil(rows.length / pageSize)
+
+function formatValue(value: unknown, format?: string): string {
+  if (value === null || value === undefined)
+    return '-'
+
+  switch (format) {
+    case 'number':
+      return typeof value === 'number' ? value.toLocaleString() : String(value)
+    case 'percentage':
+      return typeof value === 'number' ? `${(value * 100).toFixed(1)}%` : String(value)
+    case 'currency':
+      return typeof value === 'number' ? `$${value.toLocaleString()}` : String(value)
+    case 'duration': {
+      if (typeof value !== 'number')
+        return String(value)
+      const mins = Math.floor(value / 60)
+      const secs = Math.floor(value % 60)
+      return mins > 0 ? `${mins}m ${secs}s` : `${secs}s`
+    }
+    case 'date':
+      return value instanceof Date ? value.toLocaleDateString() : String(value)
+    default:
+      return String(value)
+  }
+}
+
+const rowsJson = JSON.stringify(rows)
+const columnsJson = JSON.stringify(columns)
+</script>
+
+<div class="data-table 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 (rows.length)
+        <span class="text-sm text-gray-500">
+          {{ rows.length }} {{ rows.length === 1 ? 'row' : 'rows' }}
+        </span>
+      @endif
+    </div>
+  @endif
+
+  @if (loading)
+    <div class="animate-pulse">
+      <div class="skeleton h-10 mb-2"></div>
+      @foreach ([1, 2, 3, 4, 5] as i)
+        <div class="skeleton h-12 mb-1"></div>
+      @endforeach
+    </div>
+  @elseif (!rows.length)
+    <div class="text-center py-12 text-gray-500">
+      {{ emptyMessage }}
+    </div>
+  @else
+    <script client>
+      const tableRows = {{ rowsJson }}
+      const tableColumns = {{ columnsJson }}
+      const sortKey = state(null)
+      const sortOrder = state('desc')
+      const currentPage = state(1)
+      const tablePgSize = {{ pageSize }}
+
+      const sortedRows = derived(() => {
+        if (!sortKey()) return tableRows
+        return [...tableRows].sort((a, b) => {
+          const aVal = a[sortKey()]
+          const bVal = b[sortKey()]
+          if (aVal === bVal) return 0
+          if (aVal === null || aVal === undefined) return 1
+          if (bVal === null || bVal === undefined) return -1
+          const comparison = aVal < bVal ? -1 : 1
+          return sortOrder() === 'asc' ? comparison : -comparison
+        })
+      })
+
+      const paginatedRows = derived(() => {
+        const start = (currentPage() - 1) * tablePgSize
+        return sortedRows().slice(start, start + tablePgSize)
+      })
+
+      const totalPagesComputed = derived(() => Math.ceil(sortedRows().length / tablePgSize))
+
+      function toggleSort(key) {
+        if (sortKey() === key) {
+          sortOrder.set(sortOrder() === 'asc' ? 'desc' : 'asc')
+        } else {
+          sortKey.set(key)
+          sortOrder.set('desc')
+        }
+      }
+
+      function formatValueClient(value, format) {
+        if (value === null || value === undefined) return '-'
+        switch (format) {
+          case 'number': return typeof value === 'number' ? value.toLocaleString() : String(value)
+          case 'percentage': return typeof value === 'number' ? (value * 100).toFixed(1) + '%' : String(value)
+          case 'currency': return typeof value === 'number' ? '$' + value.toLocaleString() : String(value)
+          case 'duration':
+            if (typeof value !== 'number') return String(value)
+            const mins = Math.floor(value / 60)
+            const secs = Math.floor(value % 60)
+            return mins >= 1 ? mins + 'm ' + secs + 's' : secs + 's'
+          default: return String(value)
+        }
+      }
+    </script>
+    <div class="overflow-x-auto">
+      <table class="w-full">
+        <thead>
+          <tr class="border-b border-gray-200">
+            <div :for="column in tableColumns" :key="column.key">
+              <th
+                class="px-4 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:text-gray-700"
+                x-class="{
+                  'text-right': column.align === 'right',
+                  'text-center': column.align === 'center',
+                  'text-left': column.align !== 'right' && column.align !== 'center'
+                }"
+                @click="toggleSort(column.key)"
+              >
+                <div class="flex items-center gap-1" x-class="{ 'justify-end': column.align === 'right' }">
+                  <span>{{ column.label }}</span>
+                  <svg
+                    :show="sortKey() === column.key"
+                    class="w-4 h-4"
+                    x-class="{ 'rotate-180': sortOrder() === 'asc' }"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+                  </svg>
+                </div>
+              </th>
+            </div>
+          </tr>
+        </thead>
+        <tbody>
+          <div :for="(row, index) in paginatedRows()" :key="index">
+            <tr class="border-b border-gray-100 hover:bg-gray-50">
+              <div :for="column in tableColumns" :key="column.key">
+                <td
+                  class="px-4 py-3 text-sm"
+                  x-class="{
+                    'text-right': column.align === 'right',
+                    'text-center': column.align === 'center',
+                    'tabular-nums': column.format === 'number' || column.format === 'currency'
+                  }"
+                >{{ formatValueClient(row[column.key], column.format) }}</td>
+              </div>
+            </tr>
+          </div>
+        </tbody>
+      </table>
+
+      <div :show="totalPagesComputed() >= 2" class="flex items-center justify-between mt-4 pt-4 border-t border-gray-200">
+        <div class="text-sm text-gray-500">
+          Showing <span>{{ (currentPage() - 1) * tablePgSize + 1 }}</span> to <span>{{ Math.min(currentPage() * tablePgSize, tableRows.length) }}</span> of <span>{{ tableRows.length }}</span>
+        </div>
+        <div class="flex items-center gap-2">
+          <button
+            type="button"
+            class="btn-icon"
+            x-disabled="currentPage() === 1"
+            @click="currentPage.set(currentPage() - 1)"
+          >
+            <Icon name="chevron-left" size="20" />
+          </button>
+          <span class="text-sm text-gray-600">
+            Page <span>{{ currentPage() }}</span> of <span>{{ totalPagesComputed() }}</span>
+          </span>
+          <button
+            type="button"
+            class="btn-icon"
+            x-disabled="currentPage() === totalPagesComputed()"
+            @click="currentPage.set(currentPage() + 1)"
+          >
+            <Icon name="chevron-right" size="20" />
+          </button>
+        </div>
+      </div>
+    </div>
+  @endif
+</div>

package/src/dashboard/components/DateRangePicker.stx

@@ -0,0 +1,77 @@
+<script server>
+/**
+ * DateRangePicker Component
+ *
+ * Date range selector with presets and comparison options.
+ */
+import { defineProps, withDefaults } from 'stx'
+
+interface DateRangePickerProps {
+  dateRange?: string
+  comparison?: string
+  granularity?: string
+}
+
+const { dateRange, comparison, granularity } = withDefaults(
+  defineProps<DateRangePickerProps>(),
+  {
+    dateRange: '7d',
+    comparison: 'none',
+    granularity: 'auto',
+  }
+)
+</script>
+
+<script client>
+  const dateRangeVal = state('{{ dateRange }}')
+  const comparisonVal = state('{{ comparison }}')
+  const granularityVal = state('{{ granularity }}')
+
+  function onDateChange() {
+    document.dispatchEvent(new CustomEvent('date-change', {
+      detail: {
+        dateRange: dateRangeVal(),
+        comparison: comparisonVal(),
+        granularity: granularityVal()
+      }
+    }))
+  }
+</script>
+<div class="date-bar flex items-center gap-4 py-3 mb-4 flex-wrap">
+  <select
+    class="date-select bg-white border border-gray-200 text-gray-900 px-4 py-2 rounded-lg text-sm cursor-pointer hover:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+    :model="dateRangeVal"
+    @change="onDateChange()"
+  >
+    <option value="today">Today</option>
+    <option value="yesterday">Yesterday</option>
+    <option value="7d">Last 7 days</option>
+    <option value="30d">Last 30 days</option>
+    <option value="90d">Last 90 days</option>
+    <option value="12m">Last 12 months</option>
+    <option value="custom">Custom range</option>
+  </select>
+
+  <span class="text-gray-500 text-sm">compared to</span>
+
+  <select
+    class="date-select bg-white border border-gray-200 text-gray-900 px-4 py-2 rounded-lg text-sm cursor-pointer hover:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+    :model="comparisonVal"
+    @change="onDateChange()"
+  >
+    <option value="none">No comparison</option>
+    <option value="previous">Previous period</option>
+    <option value="year">Same period last year</option>
+  </select>
+
+  <select
+    class="date-select bg-white border border-gray-200 text-gray-900 px-4 py-2 rounded-lg text-sm cursor-pointer hover:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+    :model="granularityVal"
+    @change="onDateChange()"
+  >
+    <option value="auto">Auto</option>
+    <option value="hour">Hourly</option>
+    <option value="day">Daily</option>
+    <option value="month">Monthly</option>
+  </select>
+</div>