Data Transform Demo - Heatmap & Revenue Analysis

Dataset: Alpha heatmap data
Type: Click position data with selector aggregation
Compression: 99.82% reduction (12.5 MB → 23 KB)

Dataset: Revenue metrics by selector
Type: Revenue, RPS, AOV, conversion metrics
Compression: 91.90% reduction (827 KB → 67 KB)

🔧 Integration Code Pattern

Ready to integrate? This demo uses OptimizedDataFetcher class. Copy the pattern below into your Vue component for instant integration.

// 1. Initialize the fetcher
const dataFetcher = new OptimizedDataFetcher({
    maxRetries: 3,
    retryDelay: 3000,
    perfTracker: perfTracker // Your existing performance tracker
});

// 2. Fetch heatmap data (type === 2)
const heatmapData = await dataFetcher.fetchHeatmapData(url);
// Returns: [{ selector: 'div#main', x: 100, y: 200, count: 5 }, ...]

// 3. Fetch revenue/ecommerce data
const revenueData = await dataFetcher.fetchRevenueData(url);
// Returns: [{ selector: 'a#product', revenue: 100, rps: 10, aov: 50, ... }, ...]

// DROP-IN REPLACEMENT:
// OLD: rows = await this.fecthBlobDataFromS3(rows);
// NEW: rows = await dataFetcher.fetchHeatmapData(rows);

// See integration-examples/VueHeatmapIntegration.vue for complete example

📊 Data Transform Demo

📋 Random Sample of Reconstructed Heatmap Data (20 entries)

💵 Random Sample of Reconstructed Revenue Data (10 entries)

🔧 Integration Code Pattern