@stacksjs/ts-analytics 0.1.6

package/src/dashboard/components/BarChart.stx

@@ -0,0 +1,220 @@
+<script server>
+/**
+ * BarChart Component
+ *
+ * Horizontal or vertical bar chart for comparing values.
+ * Uses Canvas for rendering with Alpine.js for initialization.
+ */
+import { defineProps, withDefaults } from 'stx'
+import type { DashboardTheme } from '../types'
+import { defaultTheme } from '../types'
+import { formatCompact } from '../utils'
+
+export interface BarChartItem {
+  label: string
+  value: number
+  color?: string
+  previousValue?: number
+}
+
+interface BarChartProps {
+  data: BarChartItem[]
+  title?: string
+  height?: number
+  orientation?: 'horizontal' | 'vertical'
+  showValues?: boolean
+  showComparison?: boolean
+  loading?: boolean
+  theme?: DashboardTheme
+}
+
+const { data, title, height, orientation, showValues, showComparison, loading, theme } = withDefaults(
+  defineProps<BarChartProps>(),
+  {
+    height: 300,
+    orientation: 'horizontal',
+    showValues: true,
+    showComparison: false,
+    loading: false,
+    theme: () => defaultTheme,
+  }
+)
+
+const defaultColors = [
+  '#6366f1',
+  '#22c55e',
+  '#f59e0b',
+  '#ef4444',
+  '#8b5cf6',
+  '#06b6d4',
+]
+
+const maxValue = Math.max(...data.flatMap(d => [d.value, d.previousValue ?? 0]), 1)
+
+const chartData = JSON.stringify(data)
+const chartTheme = JSON.stringify(theme)
+</script>
+
+<div class="bar-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" style="height: {{ height }}px">
+      <div class="skeleton h-full"></div>
+    </div>
+  @elseif (!data.length)
+    <div
+      class="flex items-center justify-center text-gray-500"
+      style="height: {{ height }}px"
+    >
+      No data available
+    </div>
+  @else
+    <script client>
+      const barChartData = {{ chartData }}
+      const barChartTheme = {{ chartTheme }}
+      const barChartMaxValue = {{ maxValue }}
+      const barChartOrientation = '{{ orientation }}'
+      const barChartShowValues = {{ showValues ? 'true' : 'false' }}
+      const barChartShowComparison = {{ showComparison ? 'true' : 'false' }}
+      const barChartDefaultColors = ['#6366f1', '#22c55e', '#f59e0b', '#ef4444', '#8b5cf6', '#06b6d4']
+
+      function formatCompactClient(val) {
+        if (val >= 1e6) return (val / 1e6).toFixed(1).replace(/\.0$/, '') + 'M'
+        if (val >= 1e3) return (val / 1e3).toFixed(1).replace(/\.0$/, '') + 'k'
+        return val.toLocaleString()
+      }
+
+      function drawHorizontalBars(ctx, width, height) {
+        const padding = { left: 100, right: 60, top: 20, bottom: 20 }
+        const chartWidth = width - padding.left - padding.right
+        const barH = barChartShowComparison ? 16 : 24
+        const barGap = barChartShowComparison ? 4 : 0
+        const groupHeight = barH * (barChartShowComparison ? 2 : 1) + barGap
+        const groupGap = 16
+
+        barChartData.forEach((item, index) => {
+          const y = padding.top + index * (groupHeight + groupGap)
+          const barWidth = (item.value / barChartMaxValue) * chartWidth
+          const color = item.color || barChartDefaultColors[index % barChartDefaultColors.length]
+
+          ctx.fillStyle = barChartTheme.text
+          ctx.font = '13px system-ui, sans-serif'
+          ctx.textAlign = 'right'
+          ctx.textBaseline = 'middle'
+          ctx.fillText(item.label, padding.left - 12, y + groupHeight / 2)
+
+          ctx.fillStyle = color
+          ctx.beginPath()
+          ctx.roundRect(padding.left, y, barWidth, barH, 4)
+          ctx.fill()
+
+          if (barChartShowComparison && item.previousValue !== undefined) {
+            const prevBarWidth = (item.previousValue / barChartMaxValue) * chartWidth
+            ctx.fillStyle = color + '60'
+            ctx.beginPath()
+            ctx.roundRect(padding.left, y + barH + barGap, prevBarWidth, barH, 4)
+            ctx.fill()
+          }
+
+          if (barChartShowValues) {
+            ctx.fillStyle = barChartTheme.textSecondary
+            ctx.font = '12px system-ui, sans-serif'
+            ctx.textAlign = 'left'
+            ctx.fillText(formatCompactClient(item.value), padding.left + barWidth + 8, y + barH / 2)
+          }
+        })
+      }
+
+      function drawVerticalBars(ctx, width, height) {
+        const padding = { left: 50, right: 20, top: 20, bottom: 60 }
+        const chartWidth = width - padding.left - padding.right
+        const chartHeight = height - padding.top - padding.bottom
+        const barW = barChartShowComparison ? 20 : 32
+        const barGap = barChartShowComparison ? 4 : 0
+        const groupWidth = barW * (barChartShowComparison ? 2 : 1) + barGap
+        const groupGap = (chartWidth - groupWidth * barChartData.length) / (barChartData.length + 1)
+
+        ctx.strokeStyle = barChartTheme.border
+        ctx.lineWidth = 1
+        ctx.beginPath()
+        ctx.moveTo(padding.left, padding.top)
+        ctx.lineTo(padding.left, height - padding.bottom)
+        ctx.stroke()
+
+        barChartData.forEach((item, index) => {
+          const x = padding.left + groupGap + index * (groupWidth + groupGap)
+          const barHeight = (item.value / barChartMaxValue) * chartHeight
+          const color = item.color || barChartDefaultColors[index % barChartDefaultColors.length]
+
+          ctx.fillStyle = color
+          ctx.beginPath()
+          ctx.roundRect(x, height - padding.bottom - barHeight, barW, barHeight, [4, 4, 0, 0])
+          ctx.fill()
+
+          ctx.fillStyle = barChartTheme.textSecondary
+          ctx.font = '12px system-ui, sans-serif'
+          ctx.textAlign = 'center'
+          ctx.fillText(item.label, x + groupWidth / 2, height - padding.bottom + 16)
+
+          if (barChartShowValues) {
+            ctx.fillStyle = barChartTheme.text
+            ctx.fillText(formatCompactClient(item.value), x + barW / 2, height - padding.bottom - barHeight - 8)
+          }
+        })
+      }
+
+      function drawBarChart() {
+        const canvas = document.getElementById('barChartCanvas')
+        const ctx = canvas?.getContext('2d')
+        if (!ctx) return
+
+        const dpr = window.devicePixelRatio || 1
+        const rect = canvas.getBoundingClientRect()
+
+        canvas.width = rect.width * dpr
+        canvas.height = rect.height * dpr
+        ctx.scale(dpr, dpr)
+
+        const width = rect.width
+        const height = rect.height
+        ctx.clearRect(0, 0, width, height)
+
+        if (barChartOrientation === 'horizontal') {
+          drawHorizontalBars(ctx, width, height)
+        } else {
+          drawVerticalBars(ctx, width, height)
+        }
+      }
+
+      onMount(() => {
+        drawBarChart()
+        const canvas = document.getElementById('barChartCanvas')
+        if (canvas?.parentElement) {
+          new ResizeObserver(() => drawBarChart()).observe(canvas.parentElement)
+        }
+      })
+    </script>
+    <canvas
+      id="barChartCanvas"
+      style="width: 100%; height: {{ height }}px"
+    ></canvas>
+
+    @if (showComparison && !loading && data.length)
+      <div class="flex items-center justify-end gap-4 mt-4 text-sm">
+        <div class="flex items-center gap-2">
+          <div class="w-3 h-3 rounded bg-primary-500"></div>
+          <span class="text-gray-600">Current period</span>
+        </div>
+        <div class="flex items-center gap-2">
+          <div class="w-3 h-3 rounded bg-primary-500/40"></div>
+          <span class="text-gray-600">Previous period</span>
+        </div>
+      </div>
+    @endif
+  @endif
+</div>

package/src/dashboard/components/BrowserBreakdown.stx

@@ -0,0 +1,98 @@
+<script server>
+/**
+ * BrowserBreakdown Component
+ *
+ * Displays browser usage breakdown with icons.
+ */
+import { defineProps, withDefaults } from 'stx'
+import type { TopItem } from '../types'
+import { formatPercentage } from '../utils'
+
+interface BrowserBreakdownProps {
+  browsers: TopItem[]
+  loading?: boolean
+}
+
+const { browsers, loading } = withDefaults(
+  defineProps<BrowserBreakdownProps>(),
+  {
+    loading: false,
+  }
+)
+
+const browserIcons: Record<string, string> = {
+  chrome: `<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C8.21 0 4.831 1.757 2.632 4.501l3.953 6.848A5.454 5.454 0 0 1 12 6.545h10.691A12 12 0 0 0 12 0zM1.931 5.47A11.943 11.943 0 0 0 0 12c0 6.012 4.42 10.991 10.189 11.864l3.953-6.847a5.45 5.45 0 0 1-6.865-2.29zm13.342 2.166a5.446 5.446 0 0 1 1.45 7.09l.002.001h-.002l-3.952 6.848a12.014 12.014 0 0 0 9.229-9.006zM12 16.364a4.364 4.364 0 1 1 0-8.728 4.364 4.364 0 0 1 0 8.728z"/></svg>`,
+  firefox: `<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor"><path d="M8.824 7.287c.008 0 .004 0 0 0zm-2.8-1.4c.006 0 .003 0 0 0zm16.754 2.161c-.505-1.215-1.53-2.528-2.333-2.943.654 1.283 1.033 2.57 1.177 3.53l.002.02c-1.314-3.278-3.544-4.6-5.366-7.477-.091-.147-.184-.292-.273-.446a3.545 3.545 0 0 1-.13-.24 2.118 2.118 0 0 1-.172-.46.03.03 0 0 0-.027-.03.038.038 0 0 0-.021 0l-.006.001-.006.001-.008.001c-2.044 1.193-2.734 3.393-2.8 4.494a3.946 3.946 0 0 0-2.18.825 2.364 2.364 0 0 0-.203-.148 3.687 3.687 0 0 1-.07-1.959 5.706 5.706 0 0 0-1.89 1.458 3.95 3.95 0 0 0-.67-.063c-.014 0-.027-.001-.04-.001l-.062-.02a3.26 3.26 0 0 1-.07-.672c0-.453.057-.888.164-1.296l-.005-.006c-.396.224-.75.504-1.048.828-.327-.29-.617-.633-.864-1.025a6.485 6.485 0 0 0-.578-.265c-.081-.033-.166-.066-.254-.1-.1-.04-.201-.078-.306-.117-.1-.038-.204-.076-.309-.113l-.103-.037c-.101-.037-.204-.074-.309-.11C3.22 23.007.213 17.37 1.635 11.17c.336-1.504.855-2.726 1.616-3.744.247.392.537.735.864 1.025a5.02 5.02 0 0 1-.123 1.403 6.2 6.2 0 0 1 1.636-1.48c-.127.662-.046 1.351.233 1.96.08.175.175.341.284.496a2.384 2.384 0 0 1 .66-.617 2.11 2.11 0 0 1-.142-.686c-.007-.153.003-.306.028-.458.015-.1.037-.197.065-.293.055-.186.137-.362.243-.523.098-.148.212-.286.34-.41a5.44 5.44 0 0 1 .775-.612c.297-.196.623-.35.969-.46a3.949 3.949 0 0 1 1.14-.17h.031a3.94 3.94 0 0 1 1.14.169c.346.11.672.264.969.46.263.173.513.377.775.612.128.124.242.262.34.41.106.161.188.337.243.523.028.096.05.193.065.293.025.152.035.305.028.458a2.11 2.11 0 0 1-.142.686 2.384 2.384 0 0 1 .66.617c.109-.155.204-.321.284-.496.279-.609.36-1.298.233-1.96a6.2 6.2 0 0 1 1.636 1.48 5.02 5.02 0 0 1-.123-1.403c.327-.29.617-.633.864-1.025z"/></svg>`,
+  safari: `<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor"><path d="M12 24C5.373 24 0 18.627 0 12S5.373 0 12 0s12 5.373 12 12-5.373 12-12 12zm0-2c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zm-1.276-4.768l-.246-.612 5.852-9.606.474.114-5.852 9.606-.228.498z"/></svg>`,
+  edge: `<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor"><path d="M21.86 17.86q.14 0 .25.12.1.13.1.25t-.11.33l-.32.46-.43.53-.44.5q-.21.25-.38.42l-.22.23q-.58.53-1.34 1.04-.76.51-1.6.91-.86.4-1.74.64t-1.67.24q-.9 0-1.69-.28-.8-.28-1.48-.78-.68-.5-1.22-1.17-.53-.66-.92-1.44-.38-.77-.6-1.63-.2-.85-.2-1.73 0-1.17.27-2.26.28-1.1.8-2.08.51-.98 1.23-1.82.71-.83 1.61-1.48.9-.65 1.94-1.06 1.05-.41 2.2-.54l.14-.02q.14 0 .27.07t.2.2q.08.13.08.28 0 .15-.08.28-.14.22-.34.42-.2.2-.42.39-.22.18-.44.35l-.42.3q-.2.14-.37.25-.17.12-.28.19l-.14.09q-.12.07-.27.13-.14.06-.3.1-.16.05-.34.07-.18.02-.37.02-1.02 0-1.87.44-.84.43-1.45 1.15-.6.72-.95 1.66-.34.94-.34 1.99 0 1.24.4 2.26.4 1.02 1.07 1.75.68.73 1.55 1.13.88.4 1.82.4 1.15 0 2.14-.38 1-.39 1.83-.99.84-.6 1.5-1.32t1.13-1.41q.09-.13.21-.18.12-.05.25-.05z"/></svg>`,
+  opera: `<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor"><path d="M8.51 7.04C9.44 5.57 10.67 4.62 12 4.62s2.56.95 3.49 2.42c.66.97 1.16 2.15 1.48 3.48.27 1.15.42 2.42.42 3.76s-.15 2.61-.42 3.76c-.32 1.33-.82 2.51-1.48 3.48-.93 1.47-2.16 2.42-3.49 2.42s-2.56-.95-3.49-2.42c-.66-.97-1.16-2.15-1.48-3.48-.27-1.15-.42-2.42-.42-3.76s.15-2.61.42-3.76c.32-1.33.82-2.51 1.48-3.48zM12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0z"/></svg>`,
+  other: `<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"/></svg>`,
+}
+
+const browserColors: Record<string, string> = {
+  chrome: 'bg-yellow-100 text-yellow-600',
+  firefox: 'bg-orange-100 text-orange-600',
+  safari: 'bg-blue-100 text-blue-600',
+  edge: 'bg-cyan-100 text-cyan-600',
+  opera: 'bg-red-100 text-red-600',
+  other: 'bg-gray-100 text-gray-600',
+}
+
+const sortedBrowsers = [...browsers].sort((a, b) => b.value - a.value)
+
+function getBrowserIcon(name: string): string {
+  const key = name.toLowerCase()
+  return browserIcons[key] || browserIcons.other
+}
+
+function getBrowserColor(name: string): string {
+  const key = name.toLowerCase()
+  return browserColors[key] || browserColors.other
+}
+</script>
+
+<div class="browser-breakdown card-hover p-6">
+  <h3 class="text-sm font-medium text-gray-900 mb-4">
+    Browsers
+  </h3>
+
+  @if (loading)
+    <div class="space-y-4">
+      @foreach ([1, 2, 3, 4] as i)
+        <div class="animate-pulse flex items-center gap-4">
+          <div class="skeleton w-10 h-10 rounded-lg"></div>
+          <div class="flex-1">
+            <div class="skeleton h-4 w-20 mb-2"></div>
+            <div class="skeleton h-2 w-full"></div>
+          </div>
+        </div>
+      @endforeach
+    </div>
+  @elseif (!browsers.length)
+    <div class="text-center py-8 text-gray-500">
+      No browser data available
+    </div>
+  @else
+    <div class="space-y-4">
+      @foreach (sortedBrowsers as browser)
+        <div class="flex items-center gap-4">
+          <div class="w-10 h-10 rounded-lg flex items-center justify-center {{ getBrowserColor(browser.name) }}">
+            {!! getBrowserIcon(browser.name) !!}
+          </div>
+          <div class="flex-1">
+            <div class="flex items-center justify-between">
+              <span class="font-medium text-gray-900 capitalize">{{ browser.name }}</span>
+              <span class="text-sm text-gray-600">{{ formatPercentage(browser.percentage) }}</span>
+            </div>
+            <div class="progress-bar mt-1">
+              <div
+                class="progress-fill bg-gray-400"
+                style="width: {{ browser.percentage * 100 }}%"
+              ></div>
+            </div>
+          </div>
+        </div>
+      @endforeach
+    </div>
+  @endif
+</div>

package/src/dashboard/components/BrowsersTable.stx

@@ -0,0 +1,125 @@
+{{-- BrowsersTable Component --}}
+{{-- Props: browsers (array of {name, visitors}) --}}
+<div class="data-panel">
+  <div class="panel-header">
+    <span class="panel-title">Browsers</span>
+  </div>
+  <table class="data-table">
+    <thead>
+      <tr>
+        <th>Browser</th>
+        <th class="text-right">Visitors</th>
+      </tr>
+    </thead>
+    <tbody>
+      @forelse(browsers as browser)
+        <tr>
+          <td class="name">
+            <span class="browser-icon" data-browser="{{ browser.name.toLowerCase() }}"></span>
+            {{ browser.name }}
+          </td>
+          <td class="value">{{ browser.visitors | fmt }}</td>
+        </tr>
+      @empty
+        <tr>
+          <td colspan="2" class="empty-cell">No browser data</td>
+        </tr>
+      @endforelse
+    </tbody>
+  </table>
+</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 {
+  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;
+}
+
+.browser-icon {
+  width: 16px;
+  height: 16px;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+  border-radius: 2px;
+}
+
+.browser-icon[data-browser="chrome"] {
+  background-color: #4285F4;
+}
+
+.browser-icon[data-browser="firefox"] {
+  background-color: #FF7139;
+}
+
+.browser-icon[data-browser="safari"] {
+  background-color: #006CFF;
+}
+
+.browser-icon[data-browser="edge"] {
+  background-color: #0078D7;
+}
+
+.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/CampaignBreakdown.stx

@@ -0,0 +1,163 @@
+<script server>
+/**
+ * CampaignBreakdown Component
+ *
+ * Displays UTM campaign data with source, medium, and campaign breakdown.
+ */
+import { defineProps, withDefaults } from 'stx'
+import { formatCompact, formatPercentage } from '../utils'
+
+export interface CampaignData {
+  name: string
+  source?: string
+  medium?: string
+  visitors: number
+  conversions: number
+  conversionRate: number
+  revenue?: number
+}
+
+interface CampaignBreakdownProps {
+  campaigns: CampaignData[]
+  loading?: boolean
+  title?: string
+  maxItems?: number
+}
+
+const { campaigns, loading, title, maxItems } = withDefaults(
+  defineProps<CampaignBreakdownProps>(),
+  {
+    loading: false,
+    title: 'Campaigns',
+    maxItems: 10,
+  }
+)
+
+const sortedCampaigns = [...campaigns]
+  .sort((a, b) => b.visitors - a.visitors)
+  .slice(0, maxItems)
+
+const totals = {
+  visitors: campaigns.reduce((sum, c) => sum + c.visitors, 0),
+  conversions: campaigns.reduce((sum, c) => sum + c.conversions, 0),
+  revenue: campaigns.reduce((sum, c) => sum + (c.revenue ?? 0), 0),
+}
+
+const sourceIcons: Record<string, string> = {
+  google: 'M12.545 10.239v3.821h5.445c-.712 2.315-2.647 3.972-5.445 3.972a6.033 6.033 0 110-12.064c1.498 0 2.866.549 3.921 1.453l2.814-2.814A9.969 9.969 0 0012.545 2C7.021 2 2.543 6.477 2.543 12s4.478 10 10.002 10c8.396 0 10.249-7.85 9.426-11.748l-9.426-.013z',
+  facebook: 'M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z',
+  twitter: 'M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z',
+  linkedin: 'M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z',
+  email: 'M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z',
+  direct: 'M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1',
+}
+
+function getSourceIcon(source?: string): string {
+  if (!source)
+    return sourceIcons.direct
+  const key = source.toLowerCase()
+  return sourceIcons[key] || sourceIcons.direct
+}
+</script>
+
+<div class="campaign-breakdown 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 && campaigns.length)
+      <span class="text-xs text-gray-500">
+        {{ campaigns.length }} campaigns
+      </span>
+    @endif
+  </div>
+
+  @if (loading)
+    <div class="space-y-3 animate-pulse">
+      <div class="skeleton h-10 rounded"></div>
+      @foreach ([1, 2, 3, 4, 5] as i)
+        <div class="skeleton h-14 rounded"></div>
+      @endforeach
+    </div>
+  @elseif (!campaigns.length)
+    <div class="text-center py-8 text-gray-500">
+      <Icon name="pie-chart" size="48" class="mx-auto text-gray-300 mb-3" />
+      <p>No campaign data available</p>
+    </div>
+  @else
+    <script client>
+      const sortBy = state('visitors')
+      const sortOrder = state('desc')
+    </script>
+    <div class="overflow-x-auto">
+      <table class="w-full">
+        <thead>
+          <tr class="border-b border-gray-200">
+            <th class="text-left text-xs font-medium text-gray-500 uppercase py-2">Campaign</th>
+            <th
+              class="text-right text-xs font-medium text-gray-500 uppercase py-2 cursor-pointer hover:text-gray-700"
+              @click="sortBy.set('visitors'); sortOrder.set(sortOrder() === 'desc' ? 'asc' : 'desc')"
+            >
+              <span class="inline-flex items-center gap-1">
+                Visitors
+                <svg :show="sortBy() === 'visitors'" class="w-3 h-3" x-class="{ 'rotate-180': sortOrder() === 'asc' }" fill="currentColor" viewBox="0 0 20 20">
+                  <path d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" />
+                </svg>
+              </span>
+            </th>
+            <th class="text-right text-xs font-medium text-gray-500 uppercase py-2 cursor-pointer hover:text-gray-700">
+              Conv.
+            </th>
+            <th class="text-right text-xs font-medium text-gray-500 uppercase py-2 cursor-pointer hover:text-gray-700">
+              Rate
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          @foreach (sortedCampaigns as campaign)
+            <tr class="border-b border-gray-100 hover:bg-gray-50">
+              <td class="py-3">
+                <div class="flex items-center gap-3">
+                  <div class="w-8 h-8 rounded-lg bg-gray-100 flex items-center justify-center text-gray-500">
+                    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
+                      <path d="{{ getSourceIcon(campaign.source) }}" />
+                    </svg>
+                  </div>
+                  <div>
+                    <div class="text-sm font-medium text-gray-900 truncate max-w-48">
+                      {{ campaign.name }}
+                    </div>
+                    @if (campaign.source || campaign.medium)
+                      <div class="text-xs text-gray-500">
+                        {{ [campaign.source, campaign.medium].filter(Boolean).join(' / ') }}
+                      </div>
+                    @endif
+                  </div>
+                </div>
+              </td>
+              <td class="text-right text-sm tabular-nums py-3">
+                {{ formatCompact(campaign.visitors) }}
+              </td>
+              <td class="text-right text-sm tabular-nums py-3">
+                {{ formatCompact(campaign.conversions) }}
+              </td>
+              <td class="text-right text-sm tabular-nums py-3">
+                <span class="{{ campaign.conversionRate >= 0.03 ? 'text-green-600' : 'text-gray-600' }}">
+                  {{ formatPercentage(campaign.conversionRate) }}
+                </span>
+              </td>
+            </tr>
+          @endforeach
+        </tbody>
+        <tfoot>
+          <tr class="border-t border-gray-200 font-medium">
+            <td class="py-3 text-sm text-gray-900">Total</td>
+            <td class="text-right text-sm tabular-nums py-3">{{ formatCompact(totals.visitors) }}</td>
+            <td class="text-right text-sm tabular-nums py-3">{{ formatCompact(totals.conversions) }}</td>
+            <td class="text-right text-sm tabular-nums py-3">
+              {{ formatPercentage(totals.visitors > 0 ? totals.conversions / totals.visitors : 0) }}
+            </td>
+          </tr>
+        </tfoot>
+      </table>
+    </div>
+  @endif
+</div>