@stacksjs/ts-analytics 0.1.6

package/src/dashboard/components/heatmap/ClickHeatmap.stx

@@ -0,0 +1,264 @@
+<script>
+/**
+ * ClickHeatmap Component
+ * Canvas-based click density overlay for page heatmap visualization.
+ * Uses STX signals for reactive state management.
+ */
+const clicks = state($props.clicks || [])
+const width = $props.width || 800
+const height = $props.height || 600
+const radius = $props.radius || 25
+const blur = $props.blur || 15
+const maxOpacity = $props.maxOpacity || 0.6
+const loading = state($props.loading || false)
+
+// Reactive tooltip state
+const hoveredPoint = state(null)
+const tooltipX = state(0)
+const tooltipY = state(0)
+
+// Computed: max click count for normalization
+const maxCount = derived(() => {
+  const c = clicks()
+  return c.length > 0 ? Math.max(...c.map(p => p.count)) : 1
+})
+
+// Initialize canvas on mount
+function initCanvas() {
+  const canvas = document.getElementById('heatmap-canvas')
+  if (!canvas) return
+
+  const ctx = canvas.getContext('2d')
+  if (!ctx) return
+
+  // Clear canvas
+  ctx.clearRect(0, 0, width, height)
+
+  // Draw all points with intensity based on count
+  const max = maxCount()
+  for (const point of clicks()) {
+    const intensity = (point.count / max) * maxOpacity
+    drawPoint(ctx, point.x, point.y, intensity)
+  }
+
+  // Apply blur
+  if (blur > 0) {
+    ctx.filter = `blur(${blur}px)`
+    ctx.drawImage(canvas, 0, 0)
+    ctx.filter = 'none'
+  }
+
+  // Colorize using gradient
+  colorizeHeatmap(ctx)
+}
+
+function drawPoint(ctx, x, y, intensity) {
+  const gradient = ctx.createRadialGradient(x, y, 0, x, y, radius)
+  gradient.addColorStop(0, `rgba(0, 0, 0, ${intensity})`)
+  gradient.addColorStop(1, 'rgba(0, 0, 0, 0)')
+  ctx.fillStyle = gradient
+  ctx.beginPath()
+  ctx.arc(x, y, radius, 0, Math.PI * 2)
+  ctx.fill()
+}
+
+function colorizeHeatmap(ctx) {
+  const palette = createGradientPalette()
+  const imageData = ctx.getImageData(0, 0, width, height)
+  const data = imageData.data
+
+  for (let i = 0; i < data.length; i += 4) {
+    const alpha = data[i + 3]
+    if (alpha > 0) {
+      const paletteIndex = Math.min(255, Math.floor((alpha / 255) * 255)) * 4
+      data[i] = palette[paletteIndex]
+      data[i + 1] = palette[paletteIndex + 1]
+      data[i + 2] = palette[paletteIndex + 2]
+      data[i + 3] = alpha * 2
+    }
+  }
+
+  ctx.putImageData(imageData, 0, 0)
+}
+
+function createGradientPalette() {
+  const canvas = document.createElement('canvas')
+  canvas.width = 256
+  canvas.height = 1
+  const ctx = canvas.getContext('2d')
+  const gradient = ctx.createLinearGradient(0, 0, 256, 0)
+
+  gradient.addColorStop(0.0, 'rgba(0, 0, 255, 0)')
+  gradient.addColorStop(0.25, 'rgba(0, 0, 255, 0.5)')
+  gradient.addColorStop(0.5, 'rgba(0, 255, 0, 0.5)')
+  gradient.addColorStop(0.75, 'rgba(255, 255, 0, 0.75)')
+  gradient.addColorStop(1.0, 'rgba(255, 0, 0, 1)')
+
+  ctx.fillStyle = gradient
+  ctx.fillRect(0, 0, 256, 1)
+  return ctx.getImageData(0, 0, 256, 1).data
+}
+
+function handleMouseMove(event) {
+  const canvas = event.target
+  const rect = canvas.getBoundingClientRect()
+  const x = event.clientX - rect.left
+  const y = event.clientY - rect.top
+
+  // Find nearest point within threshold
+  const threshold = radius * 2
+  let nearest = null
+  let minDistance = threshold
+
+  for (const point of clicks()) {
+    const distance = Math.sqrt((point.x - x) ** 2 + (point.y - y) ** 2)
+    if (distance < minDistance) {
+      minDistance = distance
+      nearest = point
+    }
+  }
+
+  hoveredPoint.set(nearest)
+  if (nearest) {
+    tooltipX.set(nearest.x + 15)
+    tooltipY.set(nearest.y - 10)
+  }
+
+  // Call optional callback
+  if ($props.onHover) $props.onHover(nearest)
+}
+
+function handleMouseLeave() {
+  hoveredPoint.set(null)
+  if ($props.onHover) $props.onHover(null)
+}
+
+function handleClick() {
+  const point = hoveredPoint()
+  if (point && $props.onClick) {
+    $props.onClick(point)
+  }
+}
+
+onMount(() => {
+  initCanvas()
+})
+
+// Re-render when clicks change
+effect(() => {
+  clicks()
+  initCanvas()
+})
+</script>
+
+<div class="click-heatmap" @style="{ width: width + 'px', height: height + 'px', position: 'relative', overflow: 'hidden' }">
+  <!-- Loading overlay -->
+  <div x-if="loading()" class="heatmap-loading-overlay">
+    <div class="heatmap-spinner"></div>
+    <span>Loading heatmap data...</span>
+  </div>
+
+  <!-- Main heatmap canvas -->
+  <canvas
+    id="heatmap-canvas"
+    x-width="width"
+    x-height="height"
+    class="heatmap-canvas"
+  ></canvas>
+
+  <!-- Interaction overlay -->
+  <canvas
+    id="heatmap-interaction"
+    x-width="width"
+    x-height="height"
+    class="heatmap-interaction"
+    @mousemove="handleMouseMove"
+    @mouseleave="handleMouseLeave"
+    @click="handleClick"
+  ></canvas>
+
+  <!-- Tooltip -->
+  <div
+    x-if="hoveredPoint()"
+    class="heatmap-tooltip"
+    @style="{ left: tooltipX() + 'px', top: tooltipY() + 'px' }"
+  >
+    <div class="heatmap-tooltip-content">
+      <strong class="heatmap-tooltip-count">{{ hoveredPoint().count }}</strong> clicks
+      <div x-if="hoveredPoint().topElement" class="heatmap-tooltip-selector">
+        {{ hoveredPoint().topElement.selector }}
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+.click-heatmap {
+  position: relative;
+  overflow: hidden;
+}
+.heatmap-loading-overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.9);
+  z-index: 20;
+  gap: 0.75rem;
+  color: #6b7280;
+  font-size: 0.875rem;
+}
+.heatmap-spinner {
+  width: 32px;
+  height: 32px;
+  border: 2px solid #e5e7eb;
+  border-top-color: #6366f1;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+@keyframes spin {
+  to { transform: rotate(-360deg); }
+}
+.heatmap-canvas {
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+}
+.heatmap-interaction {
+  position: absolute;
+  top: 0;
+  left: 0;
+  cursor: crosshair;
+  background: transparent;
+}
+.heatmap-tooltip {
+  position: absolute;
+  z-index: 30;
+  pointer-events: none;
+  transform: translateY(-100%);
+}
+.heatmap-tooltip-content {
+  background: #1f2937;
+  color: white;
+  padding: 0.5rem 0.75rem;
+  border-radius: 6px;
+  font-size: 0.75rem;
+  white-space: nowrap;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+}
+.heatmap-tooltip-count {
+  color: #fbbf24;
+}
+.heatmap-tooltip-selector {
+  font-size: 0.625rem;
+  color: #9ca3af;
+  font-family: monospace;
+  margin-top: 0.25rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 200px;
+}
+</style>

package/src/dashboard/components/heatmap/ElementClickList.stx

@@ -0,0 +1,125 @@
+<script>
+/**
+ * ElementClickList Component
+ *
+ * Displays a table of top clicked elements with their selectors and counts.
+ */
+export const elements = $props.elements || []
+export const loading = $props.loading || false
+export const maxItems = $props.maxItems || 10
+export const onHighlight = $props.onHighlight
+export const onClick = $props.onClick
+
+const displayElements = elements.slice(0, maxItems)
+const totalClicks = elements.reduce((sum, el) => sum + el.count, 0)
+
+export function formatSelector(selector) {
+  if (selector.length > 50) {
+    return selector.slice(0, 47) + '...'
+  }
+  return selector
+}
+
+export function getPercentage(count) {
+  if (totalClicks === 0) return 0
+  return Math.round((count / totalClicks) * 100)
+}
+
+export function formatCount(count) {
+  if (count >= 1000) {
+    return `${(count / 1000).toFixed(1)}k`
+  }
+  return count.toString()
+}
+
+export function handleMouseEnter(selector) {
+  onHighlight?.(selector)
+}
+
+export function handleMouseLeave() {
+  onHighlight?.(null)
+}
+
+export function handleClick(element) {
+  onClick?.(element)
+}
+</script>
+
+<div class="element-click-list bg-white rounded-lg border border-gray-200 overflow-hidden">
+  <div class="flex justify-between items-center p-4 border-b border-gray-200">
+    <h3 class="text-sm font-semibold text-gray-900">Top Clicked Elements</h3>
+    @if(!loading)
+      <span class="text-xs text-gray-500">{{ formatCount(totalClicks) }} total clicks</span>
+    @endif
+  </div>
+
+  <!-- Loading state -->
+  @if(loading)
+    <div class="p-4">
+      @each(i in [1, 2, 3, 4, 5])
+        <div class="flex justify-between py-3">
+          <div class="h-4 w-3/5 bg-gray-200 rounded animate-pulse" />
+          <div class="h-4 w-12 bg-gray-200 rounded animate-pulse" />
+        </div>
+      @endeach
+    </div>
+  @elseif(elements.length === 0)
+    <!-- Empty state -->
+    <div class="flex flex-col items-center py-8 text-gray-500">
+      <Icon name="mouse-pointer" size="40" class="mb-3" />
+      <p>No click data available</p>
+    </div>
+  @else
+    <!-- Element list -->
+    <div class="text-sm">
+      <div class="flex justify-between px-4 py-2 text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50 border-b border-gray-200">
+        <span>Element</span>
+        <span>Clicks</span>
+      </div>
+
+      @each(element, index in displayElements)
+        <div
+          class="flex justify-between items-center px-4 py-3 cursor-pointer hover:bg-gray-50 transition-colors border-b border-gray-100 last:border-b-0"
+          @mouseenter="handleMouseEnter('{{ element.selector }}')"
+          @mouseleave="handleMouseLeave"
+          @click="handleClick(element)"
+        >
+          <div class="flex items-start gap-3 flex-1 min-w-0">
+            <span class="flex-shrink-0 w-6 h-6 flex items-center justify-center text-xs font-semibold text-gray-500 bg-gray-100 rounded">
+              {{ index + 1 }}
+            </span>
+            <div class="flex flex-col gap-0.5 min-w-0">
+              <span class="text-[10px] font-semibold text-indigo-600 uppercase tracking-wider">
+                {{ element.tag }}
+              </span>
+              <span class="text-xs text-gray-700 font-mono truncate" title="{{ element.selector }}">
+                {{ formatSelector(element.selector) }}
+              </span>
+              @if(element.text)
+                <span class="text-xs text-gray-400 truncate max-w-[200px]">
+                  "{{ element.text }}"
+                </span>
+              @endif
+            </div>
+          </div>
+          <div class="flex items-center gap-2 flex-shrink-0 w-28">
+            <span class="font-semibold text-gray-900 w-10 text-right">{{ formatCount(element.count) }}</span>
+            <div class="flex-1 h-1.5 bg-gray-200 rounded-full overflow-hidden">
+              <div
+                class="h-full bg-indigo-600 rounded-full transition-all duration-300"
+                style="width: {{ getPercentage(element.count) }}%"
+              />
+            </div>
+            <span class="text-xs text-gray-500 w-8 text-right">{{ getPercentage(element.count) }}%</span>
+          </div>
+        </div>
+      @endeach
+    </div>
+
+    @if(elements.length > maxItems)
+      <div class="py-3 text-center text-xs text-gray-500 bg-gray-50 border-t border-gray-200">
+        {{ elements.length - maxItems }} more elements
+      </div>
+    @endif
+  @endif
+</div>

package/src/dashboard/components/heatmap/HeatmapControls.stx

@@ -0,0 +1,125 @@
+<script>
+/**
+ * HeatmapControls Component
+ *
+ * Filter controls for heatmap visualization: date range, device type, view mode.
+ */
+export const viewMode = $props.viewMode || 'click'
+export const deviceFilter = $props.deviceFilter || 'all'
+export const startDate = $props.startDate || ''
+export const endDate = $props.endDate || ''
+export const loading = $props.loading || false
+export const onViewModeChange = $props.onViewModeChange
+export const onDeviceChange = $props.onDeviceChange
+export const onDateRangeChange = $props.onDateRangeChange
+export const onRefresh = $props.onRefresh
+
+const viewModes = [
+  { value: 'click', label: 'Clicks' },
+  { value: 'scroll', label: 'Scroll' },
+  { value: 'movement', label: 'Movement' },
+]
+
+const deviceFilters = [
+  { value: 'all', label: 'All Devices' },
+  { value: 'desktop', label: 'Desktop' },
+  { value: 'mobile', label: 'Mobile' },
+  { value: 'tablet', label: 'Tablet' },
+]
+
+export function handleViewMode(mode) {
+  onViewModeChange?.(mode)
+}
+
+export function handleDevice(e) {
+  onDeviceChange?.(e.target.value)
+}
+
+export function handleDateChange(type, e) {
+  const value = e.target.value
+  if (type === 'start') {
+    onDateRangeChange?.({ start: new Date(value), end: new Date(endDate) })
+  } else {
+    onDateRangeChange?.({ start: new Date(startDate), end: new Date(value) })
+  }
+}
+
+export function handleRefresh() {
+  onRefresh?.()
+}
+</script>
+
+<div class="heatmap-controls flex flex-wrap items-end gap-4 p-4 bg-white rounded-lg border border-gray-200">
+  <!-- View Mode Toggle -->
+  <div class="flex flex-col gap-1">
+    <label class="text-xs font-medium text-gray-500 uppercase tracking-wider">View</label>
+    <div class="flex gap-1 bg-gray-100 p-1 rounded-lg">
+      @each(mode in viewModes)
+        <button
+          type="button"
+          class="flex items-center gap-1.5 px-3 py-2 text-sm rounded-md transition-all {{ viewMode === mode.value ? 'text-indigo-600 bg-white shadow-sm' : 'text-gray-500 hover:text-gray-700' }}"
+          @if(loading)disabled@endif
+          @click="handleViewMode('{{ mode.value }}')"
+        >
+          @if(mode.value === 'click')
+            <Icon name="mouse-pointer" size="16" />
+          @elseif(mode.value === 'scroll')
+            <Icon name="arrow-up-down" size="16" />
+          @else
+            <Icon name="trending-up" size="16" />
+          @endif
+          <span>{{ mode.label }}</span>
+        </button>
+      @endeach
+    </div>
+  </div>
+
+  <!-- Device Filter -->
+  <div class="flex flex-col gap-1">
+    <label class="text-xs font-medium text-gray-500 uppercase tracking-wider" for="device-filter">Device</label>
+    <select
+      id="device-filter"
+      class="px-3 py-2 text-sm border border-gray-300 rounded-md bg-white text-gray-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
+      @if(loading)disabled@endif
+      @change="handleDevice"
+    >
+      @each(device in deviceFilters)
+        <option value="{{ device.value }}" @if(deviceFilter === device.value)selected@endif>
+          {{ device.label }}
+        </option>
+      @endeach
+    </select>
+  </div>
+
+  <!-- Date Range -->
+  <div class="flex flex-col gap-1">
+    <label class="text-xs font-medium text-gray-500 uppercase tracking-wider">Date Range</label>
+    <div class="flex items-center gap-2">
+      <input
+        type="date"
+        value="{{ startDate }}"
+        class="px-3 py-2 text-sm border border-gray-300 rounded-md bg-white text-gray-700 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+        @if(loading)disabled@endif
+        @change="handleDateChange('start', event)"
+      />
+      <span class="text-sm text-gray-400">to</span>
+      <input
+        type="date"
+        value="{{ endDate }}"
+        class="px-3 py-2 text-sm border border-gray-300 rounded-md bg-white text-gray-700 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+        @if(loading)disabled@endif
+        @change="handleDateChange('end', event)"
+      />
+    </div>
+  </div>
+
+  <!-- Refresh Button -->
+  <button
+    type="button"
+    class="flex items-center justify-center w-10 h-10 text-gray-500 bg-gray-100 rounded-lg hover:bg-gray-200 hover:text-gray-700 transition-all"
+    @if(loading)disabled@endif
+    @click="handleRefresh"
+  >
+    <Icon name="refresh-cw" size="16" class="{{ loading ? 'animate-spin' : '' }}" />
+  </button>
+</div>

package/src/dashboard/components/heatmap/HeatmapLegend.stx

@@ -0,0 +1,69 @@
+<script>
+/**
+ * HeatmapLegend Component
+ *
+ * Displays a color scale legend for heatmap visualization.
+ */
+export const colorStart = $props.colorStart || 'rgba(79, 70, 229, 0.1)'
+export const colorEnd = $props.colorEnd || 'rgba(79, 70, 229, 1)'
+export const minLabel = $props.minLabel || 'Less'
+export const maxLabel = $props.maxLabel || 'More'
+export const showValues = $props.showValues || false
+export const minValue = $props.minValue || 0
+export const maxValue = $props.maxValue || 100
+
+// Generate gradient stops
+const gradientStops = [0, 0.25, 0.5, 0.75, 1]
+
+function interpolateColor(ratio) {
+  const startMatch = colorStart.match(/[\d.]+/g)
+  const endMatch = colorEnd.match(/[\d.]+/g)
+
+  if (!startMatch || !endMatch) return colorStart
+
+  const [sr, sg, sb, sa] = startMatch.map(Number)
+  const [er, eg, eb, ea] = endMatch.map(Number)
+
+  const r = Math.round(sr + (er - sr) * ratio)
+  const g = Math.round(sg + (eg - sg) * ratio)
+  const b = Math.round(sb + (eb - sb) * ratio)
+  const a = (sa + (ea - sa) * ratio).toFixed(2)
+
+  return `rgba(${r}, ${g}, ${b}, ${a})`
+}
+
+function formatValue(ratio) {
+  const value = minValue + (maxValue - minValue) * ratio
+  if (value >= 1000) {
+    return `${(value / 1000).toFixed(1)}k`
+  }
+  return Math.round(value).toString()
+}
+
+export const stops = gradientStops.map(stop => ({
+  ratio: stop,
+  color: interpolateColor(stop),
+  value: formatValue(stop)
+}))
+</script>
+
+<div class="heatmap-legend flex items-center gap-2 text-xs">
+  <span class="text-gray-500">{{ minLabel }}</span>
+  <div class="flex gap-0.5">
+    @each(stop in stops)
+      <div
+        class="w-4 h-4 rounded-sm"
+        style="background-color: {{ stop.color }}"
+        @if(showValues)title="{{ stop.value }}"@endif
+      />
+    @endeach
+  </div>
+  <span class="text-gray-500">{{ maxLabel }}</span>
+
+  @if(showValues)
+    <div class="flex justify-between mt-1 text-[10px] text-gray-400">
+      <span>{{ formatValue(0) }}</span>
+      <span>{{ formatValue(1) }}</span>
+    </div>
+  @endif
+</div>