@stacksjs/ts-analytics 0.1.6

package/src/dashboard/components/DeviceBreakdown.stx

@@ -0,0 +1,94 @@
+<script server>
+/**
+ * DeviceBreakdown Component
+ *
+ * Displays device type breakdown with icons and percentages.
+ */
+import { defineProps, withDefaults } from 'stx'
+import type { TopItem } from '../types'
+import { formatPercentage } from '../utils'
+
+interface DeviceBreakdownProps {
+  devices: TopItem[]
+  loading?: boolean
+}
+
+const { devices, loading } = withDefaults(
+  defineProps<DeviceBreakdownProps>(),
+  {
+    loading: false,
+  }
+)
+
+const deviceIcons: Record<string, string> = {
+  desktop: `<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /></svg>`,
+  mobile: `<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" /></svg>`,
+  tablet: `<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z" /></svg>`,
+  unknown: `<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" /></svg>`,
+}
+
+const deviceColors: Record<string, { bg: string, fill: string }> = {
+  desktop: { bg: 'bg-blue-100 text-blue-600', fill: 'bg-blue-500' },
+  mobile: { bg: 'bg-green-100 text-green-600', fill: 'bg-green-500' },
+  tablet: { bg: 'bg-purple-100 text-purple-600', fill: 'bg-purple-500' },
+  unknown: { bg: 'bg-gray-100 text-gray-600', fill: 'bg-gray-500' },
+}
+
+const sortedDevices = [...devices].sort((a, b) => b.value - a.value)
+
+function getDeviceIcon(name: string): string {
+  const key = name.toLowerCase()
+  return deviceIcons[key] || deviceIcons.unknown
+}
+
+function getDeviceColor(name: string): { bg: string, fill: string } {
+  const key = name.toLowerCase()
+  return deviceColors[key] || deviceColors.unknown
+}
+</script>
+
+<div class="device-breakdown card-hover p-6">
+  <h3 class="text-sm font-medium text-gray-900 mb-4">
+    Devices
+  </h3>
+
+  @if (loading)
+    <div class="space-y-4">
+      @foreach ([1, 2, 3] as i)
+        <div class="animate-pulse flex items-center gap-4">
+          <div class="skeleton w-12 h-12 rounded-lg"></div>
+          <div class="flex-1">
+            <div class="skeleton h-4 w-20 mb-2"></div>
+            <div class="skeleton h-3 w-12"></div>
+          </div>
+        </div>
+      @endforeach
+    </div>
+  @elseif (!devices.length)
+    <div class="text-center py-8 text-gray-500">
+      No device data available
+    </div>
+  @else
+    <div class="space-y-4">
+      @foreach (sortedDevices as device)
+        <div class="flex items-center gap-4">
+          <div class="w-12 h-12 rounded-lg flex items-center justify-center {{ getDeviceColor(device.name).bg }}">
+            {!! getDeviceIcon(device.name) !!}
+          </div>
+          <div class="flex-1">
+            <div class="flex items-center justify-between">
+              <span class="font-medium text-gray-900 capitalize">{{ device.name }}</span>
+              <span class="text-sm text-gray-600">{{ formatPercentage(device.percentage) }}</span>
+            </div>
+            <div class="progress-bar mt-1">
+              <div
+                class="progress-fill {{ getDeviceColor(device.name).fill }}"
+                style="width: {{ device.percentage * 100 }}%"
+              ></div>
+            </div>
+          </div>
+        </div>
+      @endforeach
+    </div>
+  @endif
+</div>

package/src/dashboard/components/DevicesTable.stx

@@ -0,0 +1,163 @@
+{{-- DevicesTable Component --}}
+{{-- Props: deviceTypes, operatingSystems, activeTab --}}
+<div class="data-panel">
+  <div class="tabs">
+    <button class="tab-btn @if(activeTab === 'types') active @endif" data-tab="types" type="button">
+      Device Types
+    </button>
+    <button class="tab-btn @if(activeTab === 'os') active @endif" data-tab="os" type="button">
+      OS
+    </button>
+  </div>
+
+  <div class="tab-content" data-content="types" @if(activeTab !== 'types') style="display:none" @endif>
+    <table class="data-table">
+      <thead>
+        <tr>
+          <th>Type</th>
+          <th class="text-right">Visitors</th>
+        </tr>
+      </thead>
+      <tbody>
+        @forelse(deviceTypes as device)
+          <tr>
+            <td class="name">
+              @switch(device.type)
+                @case('desktop')
+                  <Icon name="monitor" size="16" class="device-icon" />
+                  @break
+                @case('mobile')
+                  <Icon name="smartphone" size="16" class="device-icon" />
+                  @break
+                @case('tablet')
+                  <Icon name="tablet" size="16" class="device-icon" />
+                  @break
+                @default
+                  <Icon name="help-circle" size="16" class="device-icon" />
+              @endswitch
+              {{ device.type }}
+            </td>
+            <td class="value">{{ device.visitors | fmt }}</td>
+          </tr>
+        @empty
+          <tr>
+            <td colspan="2" class="empty-cell">No device data</td>
+          </tr>
+        @endforelse
+      </tbody>
+    </table>
+  </div>
+
+  <div class="tab-content" data-content="os" @if(activeTab !== 'os') style="display:none" @endif>
+    <table class="data-table">
+      <thead>
+        <tr>
+          <th>Operating System</th>
+          <th class="text-right">Visitors</th>
+        </tr>
+      </thead>
+      <tbody>
+        @forelse(operatingSystems as os)
+          <tr>
+            <td class="name">{{ os.name }}</td>
+            <td class="value">{{ os.visitors | fmt }}</td>
+          </tr>
+        @empty
+          <tr>
+            <td colspan="2" class="empty-cell">No OS 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;
+}
+
+.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);
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  text-transform: capitalize;
+}
+
+.device-icon {
+  color: var(--text-muted);
+}
+
+.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/DonutChart.stories.ts

@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import DonutChart from './DonutChart.stx'
+
+const meta = {
+  title: 'Components/Charts/DonutChart',
+  component: DonutChart,
+  tags: ['autodocs'],
+  argTypes: {
+    title: { control: 'text' },
+    loading: { control: 'boolean' },
+    showLegend: { control: 'boolean' },
+  },
+} satisfies Meta<typeof DonutChart>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const sampleData = [
+  { label: 'Direct', value: 4234, color: '#3b82f6' },
+  { label: 'Organic Search', value: 3456, color: '#10b981' },
+  { label: 'Social', value: 2134, color: '#8b5cf6' },
+  { label: 'Referral', value: 1234, color: '#f59e0b' },
+  { label: 'Email', value: 567, color: '#ef4444' },
+]
+
+export const Default: Story = {
+  args: {
+    data: sampleData,
+    title: 'Traffic Sources',
+  },
+}
+
+export const WithoutTitle: Story = {
+  args: {
+    data: sampleData,
+  },
+}
+
+export const Loading: Story = {
+  args: {
+    data: [],
+    title: 'Traffic Sources',
+    loading: true,
+  },
+}
+
+export const TwoSegments: Story = {
+  args: {
+    data: [
+      { label: 'Desktop', value: 6500, color: '#3b82f6' },
+      { label: 'Mobile', value: 3500, color: '#10b981' },
+    ],
+    title: 'Device Split',
+  },
+}

package/src/dashboard/components/DonutChart.stx

@@ -0,0 +1,157 @@
+<script server>
+/**
+ * DonutChart Component
+ *
+ * Displays data as a donut/pie chart with legend.
+ * Uses Canvas for rendering - fast and lightweight.
+ */
+import { defineProps, withDefaults } from 'stx'
+import type { DashboardTheme } from '../types'
+import { defaultTheme } from '../types'
+import { formatCompact, formatPercentage } from '../utils'
+
+export interface DonutChartItem {
+  name: string
+  value: number
+  color?: string
+}
+
+interface DonutChartProps {
+  items: DonutChartItem[]
+  title?: string
+  size?: number
+  thickness?: number
+  loading?: boolean
+  showLegend?: boolean
+  showTotal?: boolean
+  totalLabel?: string
+  theme?: DashboardTheme
+}
+
+const { items, title, size, thickness, loading, showLegend, showTotal, totalLabel, theme } = withDefaults(
+  defineProps<DonutChartProps>(),
+  {
+    size: 180,
+    thickness: 24,
+    loading: false,
+    showLegend: true,
+    showTotal: true,
+    totalLabel: 'Total',
+    theme: () => defaultTheme,
+  }
+)
+
+const defaultColors = [
+  '#6366f1', // indigo
+  '#22c55e', // green
+  '#f59e0b', // amber
+  '#ef4444', // red
+  '#8b5cf6', // purple
+  '#06b6d4', // cyan
+  '#ec4899', // pink
+  '#14b8a6', // teal
+]
+
+const total = items.reduce((sum, item) => sum + item.value, 0)
+
+const itemsWithColors = items.map((item, index) => ({
+  ...item,
+  color: item.color || defaultColors[index % defaultColors.length],
+  percentage: total > 0 ? item.value / total : 0,
+}))
+
+const itemsJson = JSON.stringify(itemsWithColors)
+</script>
+
+<div class="donut-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 flex items-center gap-6">
+      <div class="skeleton rounded-full" style="width: {{ size }}px; height: {{ size }}px"></div>
+      <div class="flex-1 space-y-2">
+        @foreach ([1, 2, 3, 4] as i)
+          <div class="skeleton h-4 w-24"></div>
+        @endforeach
+      </div>
+    </div>
+  @elseif (!items.length)
+    <div class="text-center py-8 text-gray-500">
+      No data available
+    </div>
+  @else
+    <div class="flex items-center gap-6">
+      <div class="relative" style="width: {{ size }}px; height: {{ size }}px">
+        <script client>
+          onMount(() => {
+            const canvas = document.getElementById('donutChartCanvas')
+            const ctx = canvas?.getContext('2d')
+            if (!ctx) return
+
+            const donutItems = {{ itemsJson }}
+            const donutSize = {{ size }}
+            const donutThickness = {{ thickness }}
+
+            const dpr = window.devicePixelRatio || 1
+            canvas.width = donutSize * dpr
+            canvas.height = donutSize * dpr
+            ctx.scale(dpr, dpr)
+            ctx.clearRect(0, 0, donutSize, donutSize)
+
+            const centerX = donutSize / 2
+            const centerY = donutSize / 2
+            const radius = (donutSize - donutThickness) / 2
+            const innerRadius = radius - donutThickness
+
+            let startAngle = -Math.PI / 2
+
+            for (const item of donutItems) {
+              const sliceAngle = item.percentage * 2 * Math.PI
+
+              ctx.beginPath()
+              ctx.arc(centerX, centerY, radius, startAngle, startAngle + sliceAngle)
+              ctx.arc(centerX, centerY, innerRadius, startAngle + sliceAngle, startAngle, true)
+              ctx.closePath()
+
+              ctx.fillStyle = item.color
+              ctx.fill()
+
+              startAngle += sliceAngle
+            }
+          })
+        </script>
+        <canvas
+          id="donutChartCanvas"
+          style="width: {{ size }}px; height: {{ size }}px"
+        ></canvas>
+        @if (showTotal)
+          <div class="absolute inset-0 flex flex-col items-center justify-center">
+            <span class="text-2xl font-bold text-gray-900">{{ formatCompact(total) }}</span>
+            <span class="text-xs text-gray-500">{{ totalLabel }}</span>
+          </div>
+        @endif
+      </div>
+
+      @if (showLegend)
+        <div class="flex-1 space-y-2">
+          @foreach (itemsWithColors as item)
+            <div class="flex items-center justify-between text-sm">
+              <div class="flex items-center gap-2">
+                <div class="w-3 h-3 rounded-full" style="background-color: {{ item.color }}"></div>
+                <span class="text-gray-700">{{ item.name }}</span>
+              </div>
+              <div class="text-gray-500 tabular-nums">
+                {{ formatCompact(item.value) }}
+                <span class="text-gray-400 ml-1">({{ formatPercentage(item.percentage) }})</span>
+              </div>
+            </div>
+          @endforeach
+        </div>
+      @endif
+    </div>
+  @endif
+</div>

package/src/dashboard/components/EmptyState.stx

@@ -0,0 +1,90 @@
+<script server>
+/**
+ * EmptyState Component
+ *
+ * Placeholder for empty data states with customizable icon and actions.
+ */
+import { defineProps, withDefaults } from 'stx'
+
+export type EmptyStateVariant = 'default' | 'no-data' | 'no-results' | 'error' | 'no-access'
+
+interface EmptyStateProps {
+  title?: string
+  description?: string
+  variant?: EmptyStateVariant
+  actionLabel?: string
+  showIcon?: boolean
+}
+
+const { title, description, variant, actionLabel, showIcon } = withDefaults(
+  defineProps<EmptyStateProps>(),
+  {
+    title: 'No data',
+    description: 'There is no data to display at this time.',
+    variant: 'default',
+    showIcon: true,
+  }
+)
+
+const variantConfig: Record<EmptyStateVariant, { icon: string, defaultTitle: string, defaultDesc: string }> = {
+  'default': {
+    icon: 'M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4',
+    defaultTitle: 'No data',
+    defaultDesc: 'There is no data to display at this time.',
+  },
+  'no-data': {
+    icon: 'M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z',
+    defaultTitle: 'No analytics data',
+    defaultDesc: 'Start tracking your website to see analytics data here.',
+  },
+  'no-results': {
+    icon: 'M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z',
+    defaultTitle: 'No results found',
+    defaultDesc: 'Try adjusting your search or filter criteria.',
+  },
+  'error': {
+    icon: 'M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z',
+    defaultTitle: 'Something went wrong',
+    defaultDesc: 'We encountered an error loading this data. Please try again.',
+  },
+  'no-access': {
+    icon: 'M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z',
+    defaultTitle: 'Access restricted',
+    defaultDesc: 'You don\'t have permission to view this data.',
+  },
+}
+
+const config = variantConfig[variant || 'default']
+const displayTitle = title || config.defaultTitle
+const displayDesc = description || config.defaultDesc
+const isError = variant === 'error'
+</script>
+
+<div class="empty-state flex flex-col items-center justify-center py-12 px-4 text-center" style="min-height: 200px">
+  @if (showIcon)
+    <div class="w-16 h-16 rounded-full flex items-center justify-center mb-4 {{ isError ? 'bg-red-100' : 'bg-gray-100' }}">
+      <svg
+        class="w-8 h-8 {{ isError ? 'text-red-400' : 'text-gray-400' }}"
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+      >
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="{{ config.icon }}" />
+      </svg>
+    </div>
+  @endif
+
+  <h3 class="text-lg font-medium text-gray-900 mb-1">
+    {{ displayTitle }}
+  </h3>
+
+  <p class="text-sm text-gray-500 max-w-sm mb-6">
+    {{ displayDesc }}
+  </p>
+
+  @if (actionLabel)
+    <button type="button" class="btn-primary">
+      {{ actionLabel }}
+    </button>
+  @endif
+</div>