Mini-Build: Performance Monitor Dashboard

// Performance Monitor Dashboard
class PerformanceMonitor {
  constructor() {
    this.metrics = new Map();
  }

  measure(name, fn) {
    const start = performance.now();
    const result = fn();
    const duration = performance.now() - start;

    if (!this.metrics.has(name)) {
      this.metrics.set(name, []);
    }
    this.metrics.get(name).push(duration);

    return result;
  }

  async measureAsync(name, fn) {
    const start = performance.now();
    const result = await fn();
    const duration = performance.now() - start;

    if (!this.metrics.has(name)) this.metrics.set(name, []);
    this.metrics.get(name).push(duration);
    return result;
  }

  getStats(name) {
    const measurements = this.metrics.get(name);
    if (!measurements || measurements.length === 0) return null;

    const sorted = [...measurements].sort((a, b) => a - b);
    return {
      name,
      count: measurements.length,
      min: sorted[0].toFixed(2),
      max: sorted[sorted.length - 1].toFixed(2),
      avg: (measurements.reduce((s, n) => s + n, 0) / measurements.length).toFixed(2),
      median: sorted[Math.floor(sorted.length / 2)].toFixed(2),
    };
  }

  report() {
    console.log("\n📊 Performance Report");
    console.log("═".repeat(60));

    for (const name of this.metrics.keys()) {
      const stats = this.getStats(name);
      console.log(`
🏷️  ${stats.name} (${stats.count} runs)`);
      console.log(`   Min: ${stats.min}ms | Max: ${stats.max}ms`);
      console.log(`   Avg: ${stats.avg}ms | Median: ${stats.median}ms`);
    }
  }
}

// Demo
const monitor = new PerformanceMonitor();

// Measure different operations
for (let i = 0; i < 10; i++) {
  monitor.measure("Array.sort (10K)", () => {
    Array.from({ length: 10000 }, () => Math.random()).sort((a, b) => a - b);
  });

  monitor.measure("Array.filter (10K)", () => {
    Array.from({ length: 10000 }, () => Math.random()).filter(n => n > 0.5);
  });

  monitor.measure("Set creation (10K)", () => {
    new Set(Array.from({ length: 10000 }, (_, i) => `item_${i}`));
  });
}

monitor.report();