Data Transform Demo - Heatmap & Revenue Analysis

Dataset: Select a test dataset below
Type: Click position data with selector aggregation
Available: 6 datasets ranging from 31 KB to 1.4 MB

📊 Heatmap Data Source:

Select from preset datasets Enter custom S3 URL

Dataset: Select a test dataset below
Type: E-commerce Revenue Metrics per Selector
Available: 6 datasets ranging from 11 KB to 471 KB

💰 Revenue Data Source:

Select from preset datasets Enter custom S3 URL

🔧 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

📋 All Reconstructed Heatmap Data

💵 All Reconstructed Revenue Data

🔧 Integration Code Pattern