@nice2dev/icons 1.3.14 → 1.3.16

package/dist/esm/iconAnalytics.js

@@ -1,428 +1,378 @@
-import { useState, useCallback, useEffect } from 'react';
-
-/**
- * @file iconAnalytics.ts
- * @module @nice2dev/icons
- * @description PRO-28.3 — Icon Usage Analytics Service
- *
- * Tracks and analyzes icon usage patterns:
- * - Most used icons
- * - Icons per project
- * - Missing icons suggestions
- * - Unused icons cleanup
- */
-/* ══════════════════════════════════════════════════════════════════════════════
-   Analytics Service Class
-   ══════════════════════════════════════════════════════════════════════════════ */
+import { useState, useCallback, useEffect } from "react";
 const DEFAULT_CONFIG = {
-    maxEventsInMemory: 10000,
-    persistInterval: 60000, // 1 minute
-    storageKey: 'nice2dev-icon-analytics',
-    debug: false,
+  maxEventsInMemory: 1e4,
+  persistInterval: 6e4,
+  // 1 minute
+  storageKey: "nice2dev-icon-analytics",
+  debug: false
 };
-/**
- * Icon Analytics Service for tracking usage patterns.
- */
 class IconAnalyticsService {
-    constructor(config = {}) {
-        this.events = [];
-        this.iconStats = new Map();
-        this.persistTimer = null;
-        this.knownIcons = new Set();
-        this.deprecatedIcons = new Set();
-        this.searchMisses = new Map();
-        this.config = { ...DEFAULT_CONFIG, ...config };
-        this.loadFromStorage();
-        this.startPersistTimer();
+  constructor(config = {}) {
+    this.events = [];
+    this.iconStats = /* @__PURE__ */ new Map();
+    this.persistTimer = null;
+    this.knownIcons = /* @__PURE__ */ new Set();
+    this.deprecatedIcons = /* @__PURE__ */ new Set();
+    this.searchMisses = /* @__PURE__ */ new Map();
+    this.config = { ...DEFAULT_CONFIG, ...config };
+    this.loadFromStorage();
+    this.startPersistTimer();
+  }
+  /* ────────────────────────────────────────────────────────────────────────────
+     Event Tracking
+     ──────────────────────────────────────────────────────────────────────────── */
+  /**
+   * Track an icon usage event.
+   */
+  track(event) {
+    const fullEvent = {
+      ...event,
+      timestamp: Date.now()
+    };
+    this.events.push(fullEvent);
+    this.updateStats(fullEvent);
+    if (this.events.length > this.config.maxEventsInMemory) {
+      this.events = this.events.slice(-this.config.maxEventsInMemory);
     }
-    /* ────────────────────────────────────────────────────────────────────────────
-       Event Tracking
-       ──────────────────────────────────────────────────────────────────────────── */
-    /**
-     * Track an icon usage event.
-     */
-    track(event) {
-        const fullEvent = {
-            ...event,
-            timestamp: Date.now(),
-        };
-        this.events.push(fullEvent);
-        this.updateStats(fullEvent);
-        // Trim events if over limit
-        if (this.events.length > this.config.maxEventsInMemory) {
-            this.events = this.events.slice(-this.config.maxEventsInMemory);
-        }
-        if (this.config.debug) {
-            console.log('[IconAnalytics] Tracked:', event.iconName);
-        }
+    if (this.config.debug) {
+      console.log("[IconAnalytics] Tracked:", event.iconName);
     }
-    /**
-     * Track a search miss (icon not found).
-     */
-    trackSearchMiss(query) {
-        const normalized = query.toLowerCase().trim();
-        if (normalized.length < 2) {
-            return;
-        }
-        const count = this.searchMisses.get(normalized) || 0;
-        this.searchMisses.set(normalized, count + 1);
+  }
+  /**
+   * Track a search miss (icon not found).
+   */
+  trackSearchMiss(query) {
+    const normalized = query.toLowerCase().trim();
+    if (normalized.length < 2) {
+      return;
     }
-    /**
-     * Register an icon as known (for finding unused).
-     */
-    registerKnownIcon(name, deprecated = false) {
-        this.knownIcons.add(name);
-        if (deprecated) {
-            this.deprecatedIcons.add(name);
-        }
+    const count = this.searchMisses.get(normalized) || 0;
+    this.searchMisses.set(normalized, count + 1);
+  }
+  /**
+   * Register an icon as known (for finding unused).
+   */
+  registerKnownIcon(name, deprecated = false) {
+    this.knownIcons.add(name);
+    if (deprecated) {
+      this.deprecatedIcons.add(name);
     }
-    /**
-     * Bulk register icons.
-     */
-    registerKnownIcons(icons) {
-        for (const icon of icons) {
-            this.registerKnownIcon(icon.name, icon.deprecated);
-        }
+  }
+  /**
+   * Bulk register icons.
+   */
+  registerKnownIcons(icons) {
+    for (const icon of icons) {
+      this.registerKnownIcon(icon.name, icon.deprecated);
     }
-    /* ────────────────────────────────────────────────────────────────────────────
-       Stats Management
-       ──────────────────────────────────────────────────────────────────────────── */
-    updateStats(event) {
-        let stats = this.iconStats.get(event.iconName);
-        if (!stats) {
-            stats = {
-                name: event.iconName,
-                totalUsage: 0,
-                firstUsed: event.timestamp,
-                lastUsed: event.timestamp,
-                contexts: new Map(),
-                projects: new Set(),
-                variants: new Map(),
-                avgSize: 0,
-            };
-            this.iconStats.set(event.iconName, stats);
-        }
-        stats.totalUsage++;
-        stats.lastUsed = event.timestamp;
-        if (event.context) {
-            const ctxCount = stats.contexts.get(event.context) || 0;
-            stats.contexts.set(event.context, ctxCount + 1);
-        }
-        if (event.projectId) {
-            stats.projects.add(event.projectId);
-        }
-        if (event.variant) {
-            const varCount = stats.variants.get(event.variant) || 0;
-            stats.variants.set(event.variant, varCount + 1);
-        }
-        if (event.size !== undefined) {
-            const sizeNum = typeof event.size === 'number' ? event.size : parseInt(event.size, 10);
-            if (!isNaN(sizeNum)) {
-                // Running average
-                stats.avgSize = (stats.avgSize * (stats.totalUsage - 1) + sizeNum) / stats.totalUsage;
-            }
-        }
-    }
-    /* ────────────────────────────────────────────────────────────────────────────
-       Queries & Reports
-       ──────────────────────────────────────────────────────────────────────────── */
-    /**
-     * Get usage stats for a specific icon.
-     */
-    getIconStats(iconName) {
-        return this.iconStats.get(iconName);
+  }
+  /* ────────────────────────────────────────────────────────────────────────────
+     Stats Management
+     ──────────────────────────────────────────────────────────────────────────── */
+  updateStats(event) {
+    let stats = this.iconStats.get(event.iconName);
+    if (!stats) {
+      stats = {
+        name: event.iconName,
+        totalUsage: 0,
+        firstUsed: event.timestamp,
+        lastUsed: event.timestamp,
+        contexts: /* @__PURE__ */ new Map(),
+        projects: /* @__PURE__ */ new Set(),
+        variants: /* @__PURE__ */ new Map(),
+        avgSize: 0
+      };
+      this.iconStats.set(event.iconName, stats);
     }
-    /**
-     * Get most used icons.
-     */
-    getMostUsedIcons(limit = 20) {
-        return Array.from(this.iconStats.values())
-            .sort((a, b) => b.totalUsage - a.totalUsage)
-            .slice(0, limit)
-            .map((s) => ({ name: s.name, count: s.totalUsage }));
+    stats.totalUsage++;
+    stats.lastUsed = event.timestamp;
+    if (event.context) {
+      const ctxCount = stats.contexts.get(event.context) || 0;
+      stats.contexts.set(event.context, ctxCount + 1);
     }
-    /**
-     * Get least used icons (icons used but rarely).
-     */
-    getLeastUsedIcons(limit = 20) {
-        return Array.from(this.iconStats.values())
-            .sort((a, b) => a.totalUsage - b.totalUsage)
-            .slice(0, limit)
-            .map((s) => ({ name: s.name, count: s.totalUsage }));
+    if (event.projectId) {
+      stats.projects.add(event.projectId);
     }
-    /**
-     * Get icons that have never been used.
-     */
-    getUnusedIcons() {
-        const usedIcons = new Set(this.iconStats.keys());
-        return Array.from(this.knownIcons).filter((name) => !usedIcons.has(name));
+    if (event.variant) {
+      const varCount = stats.variants.get(event.variant) || 0;
+      stats.variants.set(event.variant, varCount + 1);
     }
-    /**
-     * Get deprecated icons that are still being used.
-     */
-    getDeprecatedInUse() {
-        const results = [];
-        for (const name of this.deprecatedIcons) {
-            const stats = this.iconStats.get(name);
-            if (stats) {
-                results.push({ name, count: stats.totalUsage });
-            }
-        }
-        return results.sort((a, b) => b.count - a.count);
+    if (event.size !== void 0) {
+      const sizeNum = typeof event.size === "number" ? event.size : parseInt(event.size, 10);
+      if (!isNaN(sizeNum)) {
+        stats.avgSize = (stats.avgSize * (stats.totalUsage - 1) + sizeNum) / stats.totalUsage;
+      }
     }
-    /**
-     * Get potentially missing icons based on search misses.
-     */
-    getPotentiallyMissingIcons(minMisses = 3) {
-        return Array.from(this.searchMisses.entries())
-            .filter(([_, count]) => count >= minMisses)
-            .sort((a, b) => b[1] - a[1])
-            .map(([query, misses]) => ({ query, misses }));
+  }
+  /* ────────────────────────────────────────────────────────────────────────────
+     Queries & Reports
+     ──────────────────────────────────────────────────────────────────────────── */
+  /**
+   * Get usage stats for a specific icon.
+   */
+  getIconStats(iconName) {
+    return this.iconStats.get(iconName);
+  }
+  /**
+   * Get most used icons.
+   */
+  getMostUsedIcons(limit = 20) {
+    return Array.from(this.iconStats.values()).sort((a, b) => b.totalUsage - a.totalUsage).slice(0, limit).map((s) => ({ name: s.name, count: s.totalUsage }));
+  }
+  /**
+   * Get least used icons (icons used but rarely).
+   */
+  getLeastUsedIcons(limit = 20) {
+    return Array.from(this.iconStats.values()).sort((a, b) => a.totalUsage - b.totalUsage).slice(0, limit).map((s) => ({ name: s.name, count: s.totalUsage }));
+  }
+  /**
+   * Get icons that have never been used.
+   */
+  getUnusedIcons() {
+    const usedIcons = new Set(this.iconStats.keys());
+    return Array.from(this.knownIcons).filter((name) => !usedIcons.has(name));
+  }
+  /**
+   * Get deprecated icons that are still being used.
+   */
+  getDeprecatedInUse() {
+    const results = [];
+    for (const name of this.deprecatedIcons) {
+      const stats = this.iconStats.get(name);
+      if (stats) {
+        results.push({ name, count: stats.totalUsage });
+      }
     }
-    /**
-     * Get icons used in a specific project.
-     */
-    getIconsByProject(projectId) {
-        const projectIcons = [];
-        for (const stats of this.iconStats.values()) {
-            if (stats.projects.has(projectId)) {
-                // Count events for this project
-                const count = this.events.filter((e) => e.iconName === stats.name && e.projectId === projectId).length;
-                projectIcons.push({ name: stats.name, count });
-            }
-        }
-        return projectIcons.sort((a, b) => b.count - a.count);
+    return results.sort((a, b) => b.count - a.count);
+  }
+  /**
+   * Get potentially missing icons based on search misses.
+   */
+  getPotentiallyMissingIcons(minMisses = 3) {
+    return Array.from(this.searchMisses.entries()).filter(([_, count]) => count >= minMisses).sort((a, b) => b[1] - a[1]).map(([query, misses]) => ({ query, misses }));
+  }
+  /**
+   * Get icons used in a specific project.
+   */
+  getIconsByProject(projectId) {
+    const projectIcons = [];
+    for (const stats of this.iconStats.values()) {
+      if (stats.projects.has(projectId)) {
+        const count = this.events.filter(
+          (e) => e.iconName === stats.name && e.projectId === projectId
+        ).length;
+        projectIcons.push({ name: stats.name, count });
+      }
     }
-    /**
-     * Get project summaries.
-     */
-    getProjectSummaries() {
-        const projects = new Map();
-        for (const event of this.events) {
-            const pid = event.projectId || 'unknown';
-            let summary = projects.get(pid);
-            if (!summary) {
-                summary = {
-                    projectId: pid,
-                    uniqueIcons: 0,
-                    totalUsage: 0,
-                    topIcons: [],
-                    categories: new Map(),
-                };
-                projects.set(pid, summary);
-            }
-            summary.totalUsage++;
-        }
-        // Calculate unique icons and top icons per project
-        for (const summary of projects.values()) {
-            const iconsInProject = this.getIconsByProject(summary.projectId);
-            summary.uniqueIcons = iconsInProject.length;
-            summary.topIcons = iconsInProject.slice(0, 10);
-        }
-        return Array.from(projects.values());
-    }
-    /**
-     * Generate full analytics report.
-     */
-    generateReport(periodDays) {
-        var _a;
-        const now = Date.now();
-        const periodStart = periodDays
-            ? now - periodDays * 24 * 60 * 60 * 1000
-            : ((_a = this.events[0]) === null || _a === void 0 ? void 0 : _a.timestamp) || now;
-        const periodEnd = now;
-        // Filter events for period
-        const periodEvents = periodDays
-            ? this.events.filter((e) => e.timestamp >= periodStart)
-            : this.events;
-        // Unique icons
-        const uniqueIcons = new Set(periodEvents.map((e) => e.iconName)).size;
-        // Most used
-        const mostUsed = this.getMostUsedIcons(20);
-        // Trending (icons with increasing usage recently)
-        const recentCutoff = now - 7 * 24 * 60 * 60 * 1000; // last 7 days
-        const recentEvents = this.events.filter((e) => e.timestamp >= recentCutoff);
-        const olderEvents = this.events.filter((e) => e.timestamp < recentCutoff && e.timestamp >= recentCutoff - 7 * 24 * 60 * 60 * 1000);
-        const recentCounts = new Map();
-        const olderCounts = new Map();
-        for (const e of recentEvents) {
-            recentCounts.set(e.iconName, (recentCounts.get(e.iconName) || 0) + 1);
-        }
-        for (const e of olderEvents) {
-            olderCounts.set(e.iconName, (olderCounts.get(e.iconName) || 0) + 1);
-        }
-        const trendingIcons = [];
-        for (const [name, recent] of recentCounts) {
-            const older = olderCounts.get(name) || 1;
-            const growth = ((recent - older) / older) * 100;
-            if (growth > 50) {
-                trendingIcons.push({ name, growth });
-            }
-        }
-        trendingIcons.sort((a, b) => b.growth - a.growth);
-        // Underutilized
-        const underutilized = this.getLeastUsedIcons(50)
-            .filter((i) => i.count === 1)
-            .map((i) => i.name);
-        // Potentially missing
-        const potentiallyMissing = this.getPotentiallyMissingIcons()
-            .slice(0, 20)
-            .map((p) => p.query);
-        // Deprecated in use
-        const deprecatedInUse = this.getDeprecatedInUse();
-        // Project summaries
-        const projectSummaries = this.getProjectSummaries();
-        return {
-            periodStart,
-            periodEnd,
-            totalEvents: periodEvents.length,
-            uniqueIcons,
-            mostUsed,
-            trendingIcons: trendingIcons.slice(0, 10),
-            underutilized: underutilized.slice(0, 20),
-            potentiallyMissing,
-            deprecatedInUse,
-            projectSummaries,
+    return projectIcons.sort((a, b) => b.count - a.count);
+  }
+  /**
+   * Get project summaries.
+   */
+  getProjectSummaries() {
+    const projects = /* @__PURE__ */ new Map();
+    for (const event of this.events) {
+      const pid = event.projectId || "unknown";
+      let summary = projects.get(pid);
+      if (!summary) {
+        summary = {
+          projectId: pid,
+          uniqueIcons: 0,
+          totalUsage: 0,
+          topIcons: [],
+          categories: /* @__PURE__ */ new Map()
         };
+        projects.set(pid, summary);
+      }
+      summary.totalUsage++;
     }
-    /* ────────────────────────────────────────────────────────────────────────────
-       Persistence
-       ──────────────────────────────────────────────────────────────────────────── */
-    startPersistTimer() {
-        if (this.config.persistInterval > 0 && typeof window !== 'undefined') {
-            this.persistTimer = setInterval(() => {
-                this.saveToStorage();
-            }, this.config.persistInterval);
-        }
+    for (const summary of projects.values()) {
+      const iconsInProject = this.getIconsByProject(summary.projectId);
+      summary.uniqueIcons = iconsInProject.length;
+      summary.topIcons = iconsInProject.slice(0, 10);
     }
-    stopPersistTimer() {
-        if (this.persistTimer) {
-            clearInterval(this.persistTimer);
-            this.persistTimer = null;
-        }
+    return Array.from(projects.values());
+  }
+  /**
+   * Generate full analytics report.
+   */
+  generateReport(periodDays) {
+    const now = Date.now();
+    const periodStart = periodDays ? now - periodDays * 24 * 60 * 60 * 1e3 : this.events[0]?.timestamp || now;
+    const periodEnd = now;
+    const periodEvents = periodDays ? this.events.filter((e) => e.timestamp >= periodStart) : this.events;
+    const uniqueIcons = new Set(periodEvents.map((e) => e.iconName)).size;
+    const mostUsed = this.getMostUsedIcons(20);
+    const recentCutoff = now - 7 * 24 * 60 * 60 * 1e3;
+    const recentEvents = this.events.filter((e) => e.timestamp >= recentCutoff);
+    const olderEvents = this.events.filter(
+      (e) => e.timestamp < recentCutoff && e.timestamp >= recentCutoff - 7 * 24 * 60 * 60 * 1e3
+    );
+    const recentCounts = /* @__PURE__ */ new Map();
+    const olderCounts = /* @__PURE__ */ new Map();
+    for (const e of recentEvents) {
+      recentCounts.set(e.iconName, (recentCounts.get(e.iconName) || 0) + 1);
     }
-    saveToStorage() {
-        if (typeof localStorage === 'undefined') {
-            return;
-        }
-        try {
-            const data = {
-                events: this.events.slice(-this.config.maxEventsInMemory),
-                searchMisses: Array.from(this.searchMisses.entries()),
-                savedAt: Date.now(),
-            };
-            localStorage.setItem(this.config.storageKey, JSON.stringify(data));
-            if (this.config.debug) {
-                console.log('[IconAnalytics] Saved to storage');
-            }
-        }
-        catch (err) {
-            console.warn('[IconAnalytics] Failed to save:', err);
-        }
+    for (const e of olderEvents) {
+      olderCounts.set(e.iconName, (olderCounts.get(e.iconName) || 0) + 1);
     }
-    loadFromStorage() {
-        if (typeof localStorage === 'undefined') {
-            return;
-        }
-        try {
-            const stored = localStorage.getItem(this.config.storageKey);
-            if (stored) {
-                const data = JSON.parse(stored);
-                this.events = data.events || [];
-                this.searchMisses = new Map(data.searchMisses || []);
-                // Rebuild stats from events
-                for (const event of this.events) {
-                    this.updateStats(event);
-                }
-                if (this.config.debug) {
-                    console.log('[IconAnalytics] Loaded from storage:', this.events.length, 'events');
-                }
-            }
-        }
-        catch (err) {
-            console.warn('[IconAnalytics] Failed to load:', err);
-        }
+    const trendingIcons = [];
+    for (const [name, recent] of recentCounts) {
+      const older = olderCounts.get(name) || 1;
+      const growth = (recent - older) / older * 100;
+      if (growth > 50) {
+        trendingIcons.push({ name, growth });
+      }
     }
-    /**
-     * Force save to storage.
-     */
-    persist() {
+    trendingIcons.sort((a, b) => b.growth - a.growth);
+    const underutilized = this.getLeastUsedIcons(50).filter((i) => i.count === 1).map((i) => i.name);
+    const potentiallyMissing = this.getPotentiallyMissingIcons().slice(0, 20).map((p) => p.query);
+    const deprecatedInUse = this.getDeprecatedInUse();
+    const projectSummaries = this.getProjectSummaries();
+    return {
+      periodStart,
+      periodEnd,
+      totalEvents: periodEvents.length,
+      uniqueIcons,
+      mostUsed,
+      trendingIcons: trendingIcons.slice(0, 10),
+      underutilized: underutilized.slice(0, 20),
+      potentiallyMissing,
+      deprecatedInUse,
+      projectSummaries
+    };
+  }
+  /* ────────────────────────────────────────────────────────────────────────────
+     Persistence
+     ──────────────────────────────────────────────────────────────────────────── */
+  startPersistTimer() {
+    if (this.config.persistInterval > 0 && typeof window !== "undefined") {
+      this.persistTimer = setInterval(() => {
         this.saveToStorage();
+      }, this.config.persistInterval);
+    }
+  }
+  stopPersistTimer() {
+    if (this.persistTimer) {
+      clearInterval(this.persistTimer);
+      this.persistTimer = null;
     }
-    /**
-     * Clear all analytics data.
-     */
-    clear() {
-        this.events = [];
-        this.iconStats.clear();
-        this.searchMisses.clear();
-        if (typeof localStorage !== 'undefined') {
-            localStorage.removeItem(this.config.storageKey);
+  }
+  saveToStorage() {
+    if (typeof localStorage === "undefined") {
+      return;
+    }
+    try {
+      const data = {
+        events: this.events.slice(-this.config.maxEventsInMemory),
+        searchMisses: Array.from(this.searchMisses.entries()),
+        savedAt: Date.now()
+      };
+      localStorage.setItem(this.config.storageKey, JSON.stringify(data));
+      if (this.config.debug) {
+        console.log("[IconAnalytics] Saved to storage");
+      }
+    } catch (err) {
+      console.warn("[IconAnalytics] Failed to save:", err);
+    }
+  }
+  loadFromStorage() {
+    if (typeof localStorage === "undefined") {
+      return;
+    }
+    try {
+      const stored = localStorage.getItem(this.config.storageKey);
+      if (stored) {
+        const data = JSON.parse(stored);
+        this.events = data.events || [];
+        this.searchMisses = new Map(data.searchMisses || []);
+        for (const event of this.events) {
+          this.updateStats(event);
+        }
+        if (this.config.debug) {
+          console.log("[IconAnalytics] Loaded from storage:", this.events.length, "events");
         }
+      }
+    } catch (err) {
+      console.warn("[IconAnalytics] Failed to load:", err);
     }
-    /**
-     * Destroy the service (cleanup timers).
-     */
-    destroy() {
-        this.stopPersistTimer();
-        this.saveToStorage();
+  }
+  /**
+   * Force save to storage.
+   */
+  persist() {
+    this.saveToStorage();
+  }
+  /**
+   * Clear all analytics data.
+   */
+  clear() {
+    this.events = [];
+    this.iconStats.clear();
+    this.searchMisses.clear();
+    if (typeof localStorage !== "undefined") {
+      localStorage.removeItem(this.config.storageKey);
     }
+  }
+  /**
+   * Destroy the service (cleanup timers).
+   */
+  destroy() {
+    this.stopPersistTimer();
+    this.saveToStorage();
+  }
 }
-/* ══════════════════════════════════════════════════════════════════════════════
-   Singleton Instance
-   ══════════════════════════════════════════════════════════════════════════════ */
 let defaultInstance = null;
-/**
- * Get the default analytics service instance.
- */
 function getIconAnalytics(config) {
-    if (!defaultInstance) {
-        defaultInstance = new IconAnalyticsService(config);
-    }
-    return defaultInstance;
+  if (!defaultInstance) {
+    defaultInstance = new IconAnalyticsService(config);
+  }
+  return defaultInstance;
 }
-/**
- * Track an icon usage (shorthand).
- */
 function trackIconUsage(iconName, options = {}) {
-    getIconAnalytics().track({ iconName, ...options });
+  getIconAnalytics().track({ iconName, ...options });
 }
-/**
- * Track a search miss (shorthand).
- */
 function trackIconSearchMiss(query) {
-    getIconAnalytics().trackSearchMiss(query);
+  getIconAnalytics().trackSearchMiss(query);
 }
-/**
- * React hook for icon analytics.
- */
 function useIconAnalytics(projectId) {
-    const analytics = getIconAnalytics();
-    const [mostUsed, setMostUsed] = useState([]);
-    const [unused, setUnused] = useState([]);
-    const [report, setReport] = useState(null);
-    const refresh = useCallback(() => {
-        setMostUsed(analytics.getMostUsedIcons(20));
-        setUnused(analytics.getUnusedIcons().slice(0, 50));
-    }, [analytics]);
-    const track = useCallback((iconName, context) => {
-        analytics.track({ iconName, context, projectId });
-        refresh();
-    }, [analytics, projectId, refresh]);
-    const generateReportFn = useCallback((periodDays) => {
-        setReport(analytics.generateReport(periodDays));
-    }, [analytics]);
-    useEffect(() => {
-        refresh();
-    }, [refresh]);
-    return {
-        track,
-        mostUsed,
-        unused,
-        refresh,
-        report,
-        generateReport: generateReportFn,
-    };
+  const analytics = getIconAnalytics();
+  const [mostUsed, setMostUsed] = useState([]);
+  const [unused, setUnused] = useState([]);
+  const [report, setReport] = useState(null);
+  const refresh = useCallback(() => {
+    setMostUsed(analytics.getMostUsedIcons(20));
+    setUnused(analytics.getUnusedIcons().slice(0, 50));
+  }, [analytics]);
+  const track = useCallback(
+    (iconName, context) => {
+      analytics.track({ iconName, context, projectId });
+      refresh();
+    },
+    [analytics, projectId, refresh]
+  );
+  const generateReportFn = useCallback(
+    (periodDays) => {
+      setReport(analytics.generateReport(periodDays));
+    },
+    [analytics]
+  );
+  useEffect(() => {
+    refresh();
+  }, [refresh]);
+  return {
+    track,
+    mostUsed,
+    unused,
+    refresh,
+    report,
+    generateReport: generateReportFn
+  };
 }
-
-export { IconAnalyticsService, getIconAnalytics, trackIconSearchMiss, trackIconUsage, useIconAnalytics };
+export {
+  IconAnalyticsService,
+  getIconAnalytics,
+  trackIconSearchMiss,
+  trackIconUsage,
+  useIconAnalytics
+};