@memberjunction/ng-dashboards 5.26.0 → 5.27.1

package/dist/AI/components/analytics/usage-patterns/usage-patterns.component.js

@@ -0,0 +1,569 @@
+/**
+ * @fileoverview Usage Patterns Analytics.
+ *
+ * Displays a time-of-day heatmap (7 days × 24 hours), day-of-week distribution bars,
+ * peak hours summary cards, and an hourly throughput bar chart.
+ * Data loaded from MJ: AI Prompt Runs for the last 30 days.
+ */
+import { Component, Input, Output, EventEmitter, ChangeDetectorRef, inject } from '@angular/core';
+import { Subject } from 'rxjs';
+import { RunView } from '@memberjunction/core';
+import * as i0 from "@angular/core";
+import * as i1 from "@memberjunction/ng-shared-generic";
+import * as i2 from "../analytics-filter-bar.component";
+import * as i3 from "@angular/common";
+const _forTrack0 = ($index, $item) => $item.DayIndex;
+const _forTrack1 = ($index, $item) => $item.Label;
+const _forTrack2 = ($index, $item) => $item.Hour;
+function AnalyticsUsagePatternsComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 1);
+    i0.ɵɵelement(1, "mj-loading", 3);
+    i0.ɵɵelementEnd();
+} }
+function AnalyticsUsagePatternsComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 2);
+    i0.ɵɵelement(1, "i", 4);
+    i0.ɵɵelementStart(2, "div", 5);
+    i0.ɵɵtext(3, "No Data Available");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 6);
+    i0.ɵɵtext(5, "No prompt runs found in the last 30 days.");
+    i0.ɵɵelementEnd()();
+} }
+function AnalyticsUsagePatternsComponent_Conditional_3_For_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 14);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const h_r1 = ctx.$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(h_r1);
+} }
+function AnalyticsUsagePatternsComponent_Conditional_3_For_12_For_3_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 26);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const h_r2 = i0.ɵɵnextContext().$implicit;
+    const ɵ$index_40_r3 = i0.ɵɵnextContext().$index;
+    const ctx_r3 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r3.getCellCount(ɵ$index_40_r3, h_r2));
+} }
+function AnalyticsUsagePatternsComponent_Conditional_3_For_12_For_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 25);
+    i0.ɵɵconditionalCreate(1, AnalyticsUsagePatternsComponent_Conditional_3_For_12_For_3_Conditional_1_Template, 2, 1, "span", 26);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const h_r2 = ctx.$implicit;
+    const ɵ$index_40_r3 = i0.ɵɵnextContext().$index;
+    const ctx_r3 = i0.ɵɵnextContext(2);
+    i0.ɵɵstyleProp("background", ctx_r3.getCellBackground(ɵ$index_40_r3, h_r2));
+    i0.ɵɵproperty("title", ctx_r3.getCellTooltip(ɵ$index_40_r3, h_r2));
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r3.getCellCount(ɵ$index_40_r3, h_r2) > 0 ? 1 : -1);
+} }
+function AnalyticsUsagePatternsComponent_Conditional_3_For_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 23);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+    i0.ɵɵrepeaterCreate(2, AnalyticsUsagePatternsComponent_Conditional_3_For_12_For_3_Template, 2, 4, "div", 24, i0.ɵɵrepeaterTrackByIdentity);
+} if (rf & 2) {
+    const day_r5 = ctx.$implicit;
+    const ctx_r3 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(day_r5);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r3.Hours);
+} }
+function AnalyticsUsagePatternsComponent_Conditional_3_For_20_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 17)(1, "span", 27);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 28);
+    i0.ɵɵelement(4, "div", 29);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "span", 30);
+    i0.ɵɵtext(6);
+    i0.ɵɵpipe(7, "number");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const d_r6 = ctx.$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(d_r6.DayName);
+    i0.ɵɵadvance(2);
+    i0.ɵɵstyleProp("width", d_r6.WidthPercent, "%");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(7, 4, d_r6.Count));
+} }
+function AnalyticsUsagePatternsComponent_Conditional_3_For_27_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 19)(1, "div", 31);
+    i0.ɵɵelement(2, "i");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 32)(4, "div", 33);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "div", 34);
+    i0.ɵɵtext(7);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "div", 35);
+    i0.ɵɵtext(9);
+    i0.ɵɵpipe(10, "number");
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const peak_r7 = ctx.$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassMap(peak_r7.Icon);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(peak_r7.Label);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(peak_r7.Value);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind1(10, 5, peak_r7.Count), " runs");
+} }
+function AnalyticsUsagePatternsComponent_Conditional_3_For_37_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 22);
+    i0.ɵɵelement(1, "div", 36);
+    i0.ɵɵelementStart(2, "span", 37);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const bar_r8 = ctx.$implicit;
+    i0.ɵɵproperty("title", bar_r8.Label + ": " + bar_r8.Count + " runs");
+    i0.ɵɵadvance();
+    i0.ɵɵstyleProp("height", bar_r8.HeightPercent, "%");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(bar_r8.Label);
+} }
+function AnalyticsUsagePatternsComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 7)(1, "div", 8)(2, "h4", 9);
+    i0.ɵɵtext(3, "Time-of-Day Heatmap");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "span", 10);
+    i0.ɵɵtext(5, "Execution count by day and hour");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(6, "div", 11)(7, "div", 12);
+    i0.ɵɵelement(8, "div", 13);
+    i0.ɵɵrepeaterCreate(9, AnalyticsUsagePatternsComponent_Conditional_3_For_10_Template, 2, 1, "div", 14, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵrepeaterCreate(11, AnalyticsUsagePatternsComponent_Conditional_3_For_12_Template, 4, 1, null, null, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(13, "div", 15)(14, "div", 7)(15, "div", 8)(16, "h4", 9);
+    i0.ɵɵtext(17, "Day-of-Week Distribution");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(18, "div", 16);
+    i0.ɵɵrepeaterCreate(19, AnalyticsUsagePatternsComponent_Conditional_3_For_20_Template, 8, 6, "div", 17, _forTrack0);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(21, "div", 7)(22, "div", 8)(23, "h4", 9);
+    i0.ɵɵtext(24, "Peak Hours Summary");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(25, "div", 18);
+    i0.ɵɵrepeaterCreate(26, AnalyticsUsagePatternsComponent_Conditional_3_For_27_Template, 11, 7, "div", 19, _forTrack1);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(28, "div", 7)(29, "div", 8)(30, "h4", 9);
+    i0.ɵɵtext(31, "Hourly Throughput");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(32, "span", 10);
+    i0.ɵɵtext(33, "Total runs per hour (all days combined)");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(34, "div", 20)(35, "div", 21);
+    i0.ɵɵrepeaterCreate(36, AnalyticsUsagePatternsComponent_Conditional_3_For_37_Template, 4, 4, "div", 22, _forTrack2);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r3 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(9);
+    i0.ɵɵrepeater(ctx_r3.Hours);
+    i0.ɵɵadvance(2);
+    i0.ɵɵrepeater(ctx_r3.DayNames);
+    i0.ɵɵadvance(8);
+    i0.ɵɵrepeater(ctx_r3.DayDistributions);
+    i0.ɵɵadvance(7);
+    i0.ɵɵrepeater(ctx_r3.PeakSummaries);
+    i0.ɵɵadvance(10);
+    i0.ɵɵrepeater(ctx_r3.HourlyBars);
+} }
+const DAY_NAMES = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
+const HOURS = Array.from({ length: 24 }, (_, i) => i);
+const FIELDS = [
+    'ID', 'RunAt', 'Success', 'Cost', 'TokensUsed', 'ExecutionTimeMS'
+];
+export class AnalyticsUsagePatternsComponent {
+    _timeRange = '30d';
+    isInitialized = false;
+    set TimeRange(value) {
+        if (value !== this._timeRange) {
+            this._timeRange = value;
+            if (this.isInitialized) {
+                this.loadData();
+            }
+        }
+    }
+    get TimeRange() { return this._timeRange; }
+    TimeRangeChange = new EventEmitter();
+    // ── Public state ──
+    IsLoading = true;
+    TotalRuns = 0;
+    HeatmapCells = []; // [day][hour]
+    DayDistributions = [];
+    PeakSummaries = [];
+    HourlyBars = [];
+    DayNames = DAY_NAMES;
+    Hours = HOURS;
+    // ── Private ──
+    destroy$ = new Subject();
+    cdr = inject(ChangeDetectorRef);
+    async ngOnInit() {
+        await this.loadData();
+        this.isInitialized = true;
+    }
+    OnTimeRangeChange(range) {
+        this.TimeRange = range;
+        this.TimeRangeChange.emit(range);
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    // ── Heatmap helpers (called from template) ──
+    getCellBackground(day, hour) {
+        const intensity = this.HeatmapCells[day]?.[hour]?.Intensity ?? 0;
+        return `color-mix(in srgb, var(--mj-brand-primary) ${intensity}%, var(--mj-bg-surface))`;
+    }
+    getCellTooltip(day, hour) {
+        const count = this.HeatmapCells[day]?.[hour]?.Count ?? 0;
+        return `${DAY_NAMES[day]} ${this.formatHourLabel(hour)}: ${count} runs`;
+    }
+    getCellCount(day, hour) {
+        return this.HeatmapCells[day]?.[hour]?.Count ?? 0;
+    }
+    // ── Data Loading ──
+    async loadData() {
+        this.IsLoading = true;
+        this.cdr.detectChanges();
+        try {
+            const runs = await this.fetchPromptRuns();
+            this.TotalRuns = runs.length;
+            if (runs.length > 0) {
+                const dayCounts = this.buildDayHourCounts(runs);
+                this.HeatmapCells = this.buildHeatmap(dayCounts);
+                this.DayDistributions = this.buildDayDistributions(dayCounts);
+                this.HourlyBars = this.buildHourlyBars(dayCounts);
+                this.PeakSummaries = this.buildPeakSummaries(dayCounts);
+            }
+        }
+        catch (err) {
+            console.error('Usage patterns data load failed:', err);
+        }
+        finally {
+            this.IsLoading = false;
+            this.cdr.detectChanges();
+        }
+    }
+    async fetchPromptRuns() {
+        const rv = new RunView();
+        const since = new Date();
+        switch (this.TimeRange) {
+            case '1h':
+                since.setHours(since.getHours() - 1);
+                break;
+            case '6h':
+                since.setHours(since.getHours() - 6);
+                break;
+            case '24h':
+                since.setDate(since.getDate() - 1);
+                break;
+            case '7d':
+                since.setDate(since.getDate() - 7);
+                break;
+            case '30d':
+            default:
+                since.setDate(since.getDate() - 30);
+                break;
+        }
+        const sinceStr = since.toISOString();
+        const result = await rv.RunView({
+            EntityName: 'MJ: AI Prompt Runs',
+            ExtraFilter: `RunAt >= '${sinceStr}'`,
+            Fields: FIELDS,
+            ResultType: 'simple'
+        });
+        if (!result.Success) {
+            console.error('Failed to load prompt runs:', result.ErrorMessage);
+            return [];
+        }
+        return result.Results ?? [];
+    }
+    /**
+     * Build a 7×24 count matrix: dayCounts[dayIndex][hour] = count.
+     * dayIndex 0 = Monday, 6 = Sunday. Uses the JS Date getDay() offset.
+     */
+    buildDayHourCounts(runs) {
+        const counts = Array.from({ length: 7 }, () => new Array(24).fill(0));
+        for (const run of runs) {
+            const dt = new Date(run.RunAt);
+            const jsDay = dt.getDay(); // 0=Sun, 1=Mon, ..., 6=Sat
+            const dayIndex = jsDay === 0 ? 6 : jsDay - 1; // Convert to 0=Mon, 6=Sun
+            const hour = dt.getHours();
+            counts[dayIndex][hour]++;
+        }
+        return counts;
+    }
+    buildHeatmap(dayCounts) {
+        const maxCount = this.findMaxCount(dayCounts);
+        return dayCounts.map((hours, day) => hours.map((count, hour) => ({
+            Day: day,
+            Hour: hour,
+            Count: count,
+            Intensity: maxCount > 0 ? Math.round((count / maxCount) * 100) : 0
+        })));
+    }
+    buildDayDistributions(dayCounts) {
+        const daySums = dayCounts.map(hours => hours.reduce((sum, c) => sum + c, 0));
+        const maxDay = Math.max(...daySums, 1);
+        return daySums.map((count, i) => ({
+            DayIndex: i,
+            DayName: DAY_NAMES[i],
+            Count: count,
+            WidthPercent: Math.round((count / maxDay) * 100)
+        }));
+    }
+    buildHourlyBars(dayCounts) {
+        const hourSums = HOURS.map(h => dayCounts.reduce((sum, dayHours) => sum + dayHours[h], 0));
+        const maxHour = Math.max(...hourSums, 1);
+        return hourSums.map((count, h) => ({
+            Hour: h,
+            Label: this.formatHourLabel(h),
+            Count: count,
+            HeightPercent: Math.round((count / maxHour) * 100)
+        }));
+    }
+    buildPeakSummaries(dayCounts) {
+        const hourSums = HOURS.map(h => dayCounts.reduce((sum, dayHours) => sum + dayHours[h], 0));
+        const daySums = dayCounts.map(hours => hours.reduce((sum, c) => sum + c, 0));
+        // Busiest hour
+        const busiestHourIdx = this.indexOfMax(hourSums);
+        const busiestHour = {
+            Label: 'Busiest Hour',
+            Value: `${this.formatHourRange(busiestHourIdx)}`,
+            Count: hourSums[busiestHourIdx],
+            Icon: 'fa-solid fa-fire'
+        };
+        // Busiest day
+        const busiestDayIdx = this.indexOfMax(daySums);
+        const busiestDay = {
+            Label: 'Busiest Day',
+            Value: this.fullDayName(busiestDayIdx),
+            Count: daySums[busiestDayIdx],
+            Icon: 'fa-solid fa-calendar-day'
+        };
+        // Quietest cell (day+hour combo)
+        let minCount = Infinity;
+        let quietDay = 0;
+        let quietHour = 0;
+        for (let d = 0; d < 7; d++) {
+            for (let h = 0; h < 24; h++) {
+                if (dayCounts[d][h] < minCount) {
+                    minCount = dayCounts[d][h];
+                    quietDay = d;
+                    quietHour = h;
+                }
+            }
+        }
+        const quietest = {
+            Label: 'Quietest Period',
+            Value: `${DAY_NAMES[quietDay]} ${this.formatHourLabel(quietHour)}`,
+            Count: minCount,
+            Icon: 'fa-solid fa-moon'
+        };
+        return [busiestHour, busiestDay, quietest];
+    }
+    // ── Utility helpers ──
+    findMaxCount(dayCounts) {
+        let max = 0;
+        for (const hours of dayCounts) {
+            for (const c of hours) {
+                if (c > max)
+                    max = c;
+            }
+        }
+        return max;
+    }
+    indexOfMax(arr) {
+        let maxIdx = 0;
+        for (let i = 1; i < arr.length; i++) {
+            if (arr[i] > arr[maxIdx])
+                maxIdx = i;
+        }
+        return maxIdx;
+    }
+    formatHourLabel(h) {
+        if (h === 0)
+            return '12a';
+        if (h < 12)
+            return `${h}a`;
+        if (h === 12)
+            return '12p';
+        return `${h - 12}p`;
+    }
+    formatHourRange(h) {
+        const start = this.formatHour12(h);
+        const end = this.formatHour12((h + 1) % 24);
+        return `${start} - ${end}`;
+    }
+    formatHour12(h) {
+        if (h === 0)
+            return '12:00 AM';
+        if (h < 12)
+            return `${h}:00 AM`;
+        if (h === 12)
+            return '12:00 PM';
+        return `${h - 12}:00 PM`;
+    }
+    fullDayName(idx) {
+        const names = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
+        return names[idx] ?? 'Unknown';
+    }
+    static ɵfac = function AnalyticsUsagePatternsComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || AnalyticsUsagePatternsComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AnalyticsUsagePatternsComponent, selectors: [["app-analytics-usage-patterns"]], inputs: { TimeRange: "TimeRange" }, outputs: { TimeRangeChange: "TimeRangeChange" }, standalone: false, decls: 4, vars: 7, consts: [[3, "TimeRangeChange", "TimeRange", "ShowModelFilter", "ShowAgentFilter", "ShowPromptFilter", "ShowStatusFilter", "ShowCompareToggle"], [1, "loading-container"], [1, "empty-state"], ["text", "Analyzing usage patterns..."], [1, "fa-solid", "fa-chart-line", "empty-state__icon"], [1, "empty-state__title"], [1, "empty-state__subtitle"], [1, "panel"], [1, "panel__header"], [1, "panel__title"], [1, "panel__subtitle"], [1, "heatmap-wrapper"], [1, "heatmap-grid"], [1, "heatmap-corner"], [1, "heatmap-hour-label"], [1, "two-col-row"], [1, "day-distribution"], [1, "day-bar-row"], [1, "peak-cards"], [1, "peak-card"], [1, "hourly-chart"], [1, "hourly-bars"], [1, "hourly-bar-col", 3, "title"], [1, "heatmap-day-label"], [1, "heatmap-cell", 3, "background", "title"], [1, "heatmap-cell", 3, "title"], [1, "heatmap-cell__count"], [1, "day-bar-label"], [1, "day-bar-track"], [1, "day-bar-fill"], [1, "day-bar-count"], [1, "peak-card__icon"], [1, "peak-card__content"], [1, "peak-card__label"], [1, "peak-card__value"], [1, "peak-card__count"], [1, "hourly-bar"], [1, "hourly-bar-label"]], template: function AnalyticsUsagePatternsComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "app-analytics-filter-bar", 0);
+            i0.ɵɵlistener("TimeRangeChange", function AnalyticsUsagePatternsComponent_Template_app_analytics_filter_bar_TimeRangeChange_0_listener($event) { return ctx.OnTimeRangeChange($event); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(1, AnalyticsUsagePatternsComponent_Conditional_1_Template, 2, 0, "div", 1)(2, AnalyticsUsagePatternsComponent_Conditional_2_Template, 6, 0, "div", 2)(3, AnalyticsUsagePatternsComponent_Conditional_3_Template, 38, 0);
+        } if (rf & 2) {
+            i0.ɵɵproperty("TimeRange", ctx.TimeRange)("ShowModelFilter", false)("ShowAgentFilter", false)("ShowPromptFilter", false)("ShowStatusFilter", false)("ShowCompareToggle", false);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.IsLoading ? 1 : ctx.TotalRuns === 0 ? 2 : 3);
+        } }, dependencies: [i1.LoadingComponent, i2.AnalyticsFilterBarComponent, i3.DecimalPipe], styles: ["[_nghost-%COMP%] { display: block; }\n\n        \n\n        .section-header[_ngcontent-%COMP%] {\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            margin-bottom: 16px;\n        }\n\n        .section-header__left[_ngcontent-%COMP%] {\n            display: flex;\n            align-items: center;\n            gap: 10px;\n        }\n\n        .section-header__icon[_ngcontent-%COMP%] {\n            font-size: 18px;\n            color: var(--mj-brand-primary);\n        }\n\n        .section-header__title[_ngcontent-%COMP%] {\n            font-size: 18px;\n            font-weight: 700;\n            color: var(--mj-text-primary);\n            margin: 0;\n        }\n\n        .time-range-badge[_ngcontent-%COMP%] {\n            display: inline-flex;\n            align-items: center;\n            gap: 6px;\n            padding: 5px 12px;\n            border-radius: 20px;\n            font-size: 12px;\n            font-weight: 600;\n            color: var(--mj-text-secondary);\n            background: var(--mj-bg-surface-card);\n            border: 1px solid var(--mj-border-subtle);\n        }\n\n        \n\n        .loading-container[_ngcontent-%COMP%] {\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            min-height: 300px;\n        }\n\n        .empty-state[_ngcontent-%COMP%] {\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            justify-content: center;\n            padding: 60px 24px;\n            text-align: center;\n        }\n\n        .empty-state__icon[_ngcontent-%COMP%] {\n            font-size: 36px;\n            color: var(--mj-text-muted);\n            margin-bottom: 12px;\n        }\n\n        .empty-state__title[_ngcontent-%COMP%] {\n            font-size: 16px;\n            font-weight: 600;\n            color: var(--mj-text-primary);\n            margin-bottom: 4px;\n        }\n\n        .empty-state__subtitle[_ngcontent-%COMP%] {\n            font-size: 13px;\n            color: var(--mj-text-muted);\n        }\n\n        \n\n        .panel[_ngcontent-%COMP%] {\n            background: var(--mj-bg-surface);\n            border: 1px solid var(--mj-border-default);\n            border-radius: 12px;\n            padding: 20px;\n            margin-bottom: 16px;\n        }\n\n        .panel__header[_ngcontent-%COMP%] {\n            display: flex;\n            align-items: baseline;\n            gap: 10px;\n            margin-bottom: 16px;\n        }\n\n        .panel__title[_ngcontent-%COMP%] {\n            font-size: 14px;\n            font-weight: 600;\n            color: var(--mj-text-primary);\n            margin: 0;\n        }\n\n        .panel__subtitle[_ngcontent-%COMP%] {\n            font-size: 12px;\n            color: var(--mj-text-muted);\n        }\n\n        \n\n        .heatmap-wrapper[_ngcontent-%COMP%] {\n            overflow-x: auto;\n        }\n\n        .heatmap-grid[_ngcontent-%COMP%] {\n            display: grid;\n            grid-template-columns: 44px repeat(24, 1fr);\n            gap: 2px;\n            min-width: 600px;\n        }\n\n        .heatmap-corner[_ngcontent-%COMP%] {\n            \n\n        }\n\n        .heatmap-hour-label[_ngcontent-%COMP%] {\n            font-size: 10px;\n            color: var(--mj-text-muted);\n            text-align: center;\n            padding-bottom: 4px;\n            font-weight: 500;\n        }\n\n        .heatmap-day-label[_ngcontent-%COMP%] {\n            font-size: 11px;\n            color: var(--mj-text-secondary);\n            font-weight: 600;\n            display: flex;\n            align-items: center;\n            justify-content: flex-end;\n            padding-right: 6px;\n        }\n\n        .heatmap-cell[_ngcontent-%COMP%] {\n            min-height: 28px;\n            border-radius: 3px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            cursor: default;\n            transition: opacity 0.15s ease;\n        }\n\n        .heatmap-cell[_ngcontent-%COMP%]:hover {\n            opacity: 0.8;\n            outline: 1px solid var(--mj-border-strong);\n        }\n\n        .heatmap-cell__count[_ngcontent-%COMP%] {\n            font-size: 9px;\n            font-weight: 600;\n            color: var(--mj-text-primary);\n        }\n\n        \n\n        .two-col-row[_ngcontent-%COMP%] {\n            display: grid;\n            grid-template-columns: 1fr 1fr;\n            gap: 16px;\n        }\n\n        @media (max-width: 1024px) {\n            .two-col-row[_ngcontent-%COMP%] {\n                grid-template-columns: 1fr;\n            }\n        }\n\n        \n\n        .day-distribution[_ngcontent-%COMP%] {\n            display: flex;\n            flex-direction: column;\n            gap: 10px;\n        }\n\n        .day-bar-row[_ngcontent-%COMP%] {\n            display: flex;\n            align-items: center;\n            gap: 10px;\n        }\n\n        .day-bar-label[_ngcontent-%COMP%] {\n            width: 36px;\n            font-size: 12px;\n            font-weight: 600;\n            color: var(--mj-text-secondary);\n            text-align: right;\n            flex-shrink: 0;\n        }\n\n        .day-bar-track[_ngcontent-%COMP%] {\n            flex: 1;\n            height: 22px;\n            background: var(--mj-bg-surface-sunken);\n            border-radius: 4px;\n            overflow: hidden;\n        }\n\n        .day-bar-fill[_ngcontent-%COMP%] {\n            height: 100%;\n            background: var(--mj-brand-primary);\n            border-radius: 4px;\n            transition: width 0.3s ease;\n            min-width: 2px;\n        }\n\n        .day-bar-count[_ngcontent-%COMP%] {\n            width: 48px;\n            font-size: 12px;\n            font-weight: 600;\n            color: var(--mj-text-primary);\n            text-align: right;\n            flex-shrink: 0;\n        }\n\n        \n\n        .peak-cards[_ngcontent-%COMP%] {\n            display: flex;\n            flex-direction: column;\n            gap: 12px;\n        }\n\n        .peak-card[_ngcontent-%COMP%] {\n            display: flex;\n            align-items: center;\n            gap: 14px;\n            padding: 14px;\n            background: var(--mj-bg-surface-card);\n            border: 1px solid var(--mj-border-subtle);\n            border-radius: 10px;\n        }\n\n        .peak-card__icon[_ngcontent-%COMP%] {\n            width: 40px;\n            height: 40px;\n            border-radius: 10px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            font-size: 16px;\n            flex-shrink: 0;\n            background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n            color: var(--mj-brand-primary);\n        }\n\n        .peak-card[_ngcontent-%COMP%]:nth-child(2)   .peak-card__icon[_ngcontent-%COMP%] {\n            background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n            color: var(--mj-status-success);\n        }\n\n        .peak-card[_ngcontent-%COMP%]:nth-child(3)   .peak-card__icon[_ngcontent-%COMP%] {\n            background: color-mix(in srgb, var(--mj-status-info) 10%, var(--mj-bg-surface));\n            color: var(--mj-status-info);\n        }\n\n        .peak-card__content[_ngcontent-%COMP%] {\n            display: flex;\n            flex-direction: column;\n            gap: 2px;\n        }\n\n        .peak-card__label[_ngcontent-%COMP%] {\n            font-size: 11px;\n            font-weight: 500;\n            color: var(--mj-text-muted);\n            text-transform: uppercase;\n            letter-spacing: 0.3px;\n        }\n\n        .peak-card__value[_ngcontent-%COMP%] {\n            font-size: 14px;\n            font-weight: 700;\n            color: var(--mj-text-primary);\n        }\n\n        .peak-card__count[_ngcontent-%COMP%] {\n            font-size: 12px;\n            color: var(--mj-text-secondary);\n        }\n\n        \n\n        .hourly-chart[_ngcontent-%COMP%] {\n            padding-top: 8px;\n        }\n\n        .hourly-bars[_ngcontent-%COMP%] {\n            display: flex;\n            align-items: flex-end;\n            gap: 3px;\n            height: 160px;\n        }\n\n        .hourly-bar-col[_ngcontent-%COMP%] {\n            flex: 1;\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            justify-content: flex-end;\n            height: 100%;\n            cursor: default;\n        }\n\n        .hourly-bar[_ngcontent-%COMP%] {\n            width: 100%;\n            min-height: 2px;\n            background: color-mix(in srgb, var(--mj-brand-primary) 35%, var(--mj-bg-surface));\n            border-radius: 3px 3px 0 0;\n            transition: background 0.15s ease, height 0.3s ease;\n        }\n\n        .hourly-bar-col[_ngcontent-%COMP%]:hover   .hourly-bar[_ngcontent-%COMP%] {\n            background: color-mix(in srgb, var(--mj-brand-primary) 60%, var(--mj-bg-surface));\n        }\n\n        .hourly-bar-label[_ngcontent-%COMP%] {\n            font-size: 9px;\n            color: var(--mj-text-muted);\n            margin-top: 4px;\n            white-space: nowrap;\n        }\n\n        \n\n        @media (max-width: 1024px) {\n            .heatmap-grid[_ngcontent-%COMP%] {\n                grid-template-columns: 36px repeat(24, 1fr);\n            }\n\n            .heatmap-cell[_ngcontent-%COMP%] {\n                min-height: 22px;\n            }\n\n            .heatmap-cell__count[_ngcontent-%COMP%] {\n                font-size: 8px;\n            }\n\n            .hourly-bars[_ngcontent-%COMP%] {\n                height: 120px;\n            }\n        }"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AnalyticsUsagePatternsComponent, [{
+        type: Component,
+        args: [{ standalone: false, selector: 'app-analytics-usage-patterns', template: `
+        <!-- Filter Bar -->
+        <app-analytics-filter-bar
+            [TimeRange]="TimeRange"
+            [ShowModelFilter]="false"
+            [ShowAgentFilter]="false"
+            [ShowPromptFilter]="false"
+            [ShowStatusFilter]="false"
+            [ShowCompareToggle]="false"
+            (TimeRangeChange)="OnTimeRangeChange($event)"
+        ></app-analytics-filter-bar>
+
+        @if (IsLoading) {
+            <div class="loading-container">
+                <mj-loading text="Analyzing usage patterns..."></mj-loading>
+            </div>
+        } @else if (TotalRuns === 0) {
+            <div class="empty-state">
+                <i class="fa-solid fa-chart-line empty-state__icon"></i>
+                <div class="empty-state__title">No Data Available</div>
+                <div class="empty-state__subtitle">No prompt runs found in the last 30 days.</div>
+            </div>
+        } @else {
+            <!-- Heatmap -->
+            <div class="panel">
+                <div class="panel__header">
+                    <h4 class="panel__title">Time-of-Day Heatmap</h4>
+                    <span class="panel__subtitle">Execution count by day and hour</span>
+                </div>
+                <div class="heatmap-wrapper">
+                    <div class="heatmap-grid">
+                        <!-- Corner spacer -->
+                        <div class="heatmap-corner"></div>
+                        <!-- Hour labels -->
+                        @for (h of Hours; track h) {
+                            <div class="heatmap-hour-label">{{ h }}</div>
+                        }
+
+                        <!-- Rows: one per day -->
+                        @for (day of DayNames; track day; let d = $index) {
+                            <div class="heatmap-day-label">{{ day }}</div>
+                            @for (h of Hours; track h) {
+                                <div
+                                    class="heatmap-cell"
+                                    [style.background]="getCellBackground(d, h)"
+                                    [title]="getCellTooltip(d, h)">
+                                    @if (getCellCount(d, h) > 0) {
+                                        <span class="heatmap-cell__count">{{ getCellCount(d, h) }}</span>
+                                    }
+                                </div>
+                            }
+                        }
+                    </div>
+                </div>
+            </div>
+
+            <!-- Day Distribution + Peak Summary -->
+            <div class="two-col-row">
+                <!-- Day-of-Week Distribution -->
+                <div class="panel">
+                    <div class="panel__header">
+                        <h4 class="panel__title">Day-of-Week Distribution</h4>
+                    </div>
+                    <div class="day-distribution">
+                        @for (d of DayDistributions; track d.DayIndex) {
+                            <div class="day-bar-row">
+                                <span class="day-bar-label">{{ d.DayName }}</span>
+                                <div class="day-bar-track">
+                                    <div
+                                        class="day-bar-fill"
+                                        [style.width.%]="d.WidthPercent">
+                                    </div>
+                                </div>
+                                <span class="day-bar-count">{{ d.Count | number }}</span>
+                            </div>
+                        }
+                    </div>
+                </div>
+
+                <!-- Peak Hours Summary -->
+                <div class="panel">
+                    <div class="panel__header">
+                        <h4 class="panel__title">Peak Hours Summary</h4>
+                    </div>
+                    <div class="peak-cards">
+                        @for (peak of PeakSummaries; track peak.Label) {
+                            <div class="peak-card">
+                                <div class="peak-card__icon">
+                                    <i [class]="peak.Icon"></i>
+                                </div>
+                                <div class="peak-card__content">
+                                    <div class="peak-card__label">{{ peak.Label }}</div>
+                                    <div class="peak-card__value">{{ peak.Value }}</div>
+                                    <div class="peak-card__count">{{ peak.Count | number }} runs</div>
+                                </div>
+                            </div>
+                        }
+                    </div>
+                </div>
+            </div>
+
+            <!-- Hourly Throughput -->
+            <div class="panel">
+                <div class="panel__header">
+                    <h4 class="panel__title">Hourly Throughput</h4>
+                    <span class="panel__subtitle">Total runs per hour (all days combined)</span>
+                </div>
+                <div class="hourly-chart">
+                    <div class="hourly-bars">
+                        @for (bar of HourlyBars; track bar.Hour) {
+                            <div class="hourly-bar-col" [title]="bar.Label + ': ' + bar.Count + ' runs'">
+                                <div
+                                    class="hourly-bar"
+                                    [style.height.%]="bar.HeightPercent">
+                                </div>
+                                <span class="hourly-bar-label">{{ bar.Label }}</span>
+                            </div>
+                        }
+                    </div>
+                </div>
+            </div>
+        }
+    `, styles: ["\n        :host { display: block; }\n\n        /* \u2500\u2500 Header \u2500\u2500 */\n        .section-header {\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            margin-bottom: 16px;\n        }\n\n        .section-header__left {\n            display: flex;\n            align-items: center;\n            gap: 10px;\n        }\n\n        .section-header__icon {\n            font-size: 18px;\n            color: var(--mj-brand-primary);\n        }\n\n        .section-header__title {\n            font-size: 18px;\n            font-weight: 700;\n            color: var(--mj-text-primary);\n            margin: 0;\n        }\n\n        .time-range-badge {\n            display: inline-flex;\n            align-items: center;\n            gap: 6px;\n            padding: 5px 12px;\n            border-radius: 20px;\n            font-size: 12px;\n            font-weight: 600;\n            color: var(--mj-text-secondary);\n            background: var(--mj-bg-surface-card);\n            border: 1px solid var(--mj-border-subtle);\n        }\n\n        /* \u2500\u2500 Loading / Empty \u2500\u2500 */\n        .loading-container {\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            min-height: 300px;\n        }\n\n        .empty-state {\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            justify-content: center;\n            padding: 60px 24px;\n            text-align: center;\n        }\n\n        .empty-state__icon {\n            font-size: 36px;\n            color: var(--mj-text-muted);\n            margin-bottom: 12px;\n        }\n\n        .empty-state__title {\n            font-size: 16px;\n            font-weight: 600;\n            color: var(--mj-text-primary);\n            margin-bottom: 4px;\n        }\n\n        .empty-state__subtitle {\n            font-size: 13px;\n            color: var(--mj-text-muted);\n        }\n\n        /* \u2500\u2500 Panels \u2500\u2500 */\n        .panel {\n            background: var(--mj-bg-surface);\n            border: 1px solid var(--mj-border-default);\n            border-radius: 12px;\n            padding: 20px;\n            margin-bottom: 16px;\n        }\n\n        .panel__header {\n            display: flex;\n            align-items: baseline;\n            gap: 10px;\n            margin-bottom: 16px;\n        }\n\n        .panel__title {\n            font-size: 14px;\n            font-weight: 600;\n            color: var(--mj-text-primary);\n            margin: 0;\n        }\n\n        .panel__subtitle {\n            font-size: 12px;\n            color: var(--mj-text-muted);\n        }\n\n        /* \u2500\u2500 Heatmap \u2500\u2500 */\n        .heatmap-wrapper {\n            overflow-x: auto;\n        }\n\n        .heatmap-grid {\n            display: grid;\n            grid-template-columns: 44px repeat(24, 1fr);\n            gap: 2px;\n            min-width: 600px;\n        }\n\n        .heatmap-corner {\n            /* empty top-left cell */\n        }\n\n        .heatmap-hour-label {\n            font-size: 10px;\n            color: var(--mj-text-muted);\n            text-align: center;\n            padding-bottom: 4px;\n            font-weight: 500;\n        }\n\n        .heatmap-day-label {\n            font-size: 11px;\n            color: var(--mj-text-secondary);\n            font-weight: 600;\n            display: flex;\n            align-items: center;\n            justify-content: flex-end;\n            padding-right: 6px;\n        }\n\n        .heatmap-cell {\n            min-height: 28px;\n            border-radius: 3px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            cursor: default;\n            transition: opacity 0.15s ease;\n        }\n\n        .heatmap-cell:hover {\n            opacity: 0.8;\n            outline: 1px solid var(--mj-border-strong);\n        }\n\n        .heatmap-cell__count {\n            font-size: 9px;\n            font-weight: 600;\n            color: var(--mj-text-primary);\n        }\n\n        /* \u2500\u2500 Two Column Row \u2500\u2500 */\n        .two-col-row {\n            display: grid;\n            grid-template-columns: 1fr 1fr;\n            gap: 16px;\n        }\n\n        @media (max-width: 1024px) {\n            .two-col-row {\n                grid-template-columns: 1fr;\n            }\n        }\n\n        /* \u2500\u2500 Day Distribution \u2500\u2500 */\n        .day-distribution {\n            display: flex;\n            flex-direction: column;\n            gap: 10px;\n        }\n\n        .day-bar-row {\n            display: flex;\n            align-items: center;\n            gap: 10px;\n        }\n\n        .day-bar-label {\n            width: 36px;\n            font-size: 12px;\n            font-weight: 600;\n            color: var(--mj-text-secondary);\n            text-align: right;\n            flex-shrink: 0;\n        }\n\n        .day-bar-track {\n            flex: 1;\n            height: 22px;\n            background: var(--mj-bg-surface-sunken);\n            border-radius: 4px;\n            overflow: hidden;\n        }\n\n        .day-bar-fill {\n            height: 100%;\n            background: var(--mj-brand-primary);\n            border-radius: 4px;\n            transition: width 0.3s ease;\n            min-width: 2px;\n        }\n\n        .day-bar-count {\n            width: 48px;\n            font-size: 12px;\n            font-weight: 600;\n            color: var(--mj-text-primary);\n            text-align: right;\n            flex-shrink: 0;\n        }\n\n        /* \u2500\u2500 Peak Cards \u2500\u2500 */\n        .peak-cards {\n            display: flex;\n            flex-direction: column;\n            gap: 12px;\n        }\n\n        .peak-card {\n            display: flex;\n            align-items: center;\n            gap: 14px;\n            padding: 14px;\n            background: var(--mj-bg-surface-card);\n            border: 1px solid var(--mj-border-subtle);\n            border-radius: 10px;\n        }\n\n        .peak-card__icon {\n            width: 40px;\n            height: 40px;\n            border-radius: 10px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            font-size: 16px;\n            flex-shrink: 0;\n            background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n            color: var(--mj-brand-primary);\n        }\n\n        .peak-card:nth-child(2) .peak-card__icon {\n            background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n            color: var(--mj-status-success);\n        }\n\n        .peak-card:nth-child(3) .peak-card__icon {\n            background: color-mix(in srgb, var(--mj-status-info) 10%, var(--mj-bg-surface));\n            color: var(--mj-status-info);\n        }\n\n        .peak-card__content {\n            display: flex;\n            flex-direction: column;\n            gap: 2px;\n        }\n\n        .peak-card__label {\n            font-size: 11px;\n            font-weight: 500;\n            color: var(--mj-text-muted);\n            text-transform: uppercase;\n            letter-spacing: 0.3px;\n        }\n\n        .peak-card__value {\n            font-size: 14px;\n            font-weight: 700;\n            color: var(--mj-text-primary);\n        }\n\n        .peak-card__count {\n            font-size: 12px;\n            color: var(--mj-text-secondary);\n        }\n\n        /* \u2500\u2500 Hourly Throughput Chart \u2500\u2500 */\n        .hourly-chart {\n            padding-top: 8px;\n        }\n\n        .hourly-bars {\n            display: flex;\n            align-items: flex-end;\n            gap: 3px;\n            height: 160px;\n        }\n\n        .hourly-bar-col {\n            flex: 1;\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            justify-content: flex-end;\n            height: 100%;\n            cursor: default;\n        }\n\n        .hourly-bar {\n            width: 100%;\n            min-height: 2px;\n            background: color-mix(in srgb, var(--mj-brand-primary) 35%, var(--mj-bg-surface));\n            border-radius: 3px 3px 0 0;\n            transition: background 0.15s ease, height 0.3s ease;\n        }\n\n        .hourly-bar-col:hover .hourly-bar {\n            background: color-mix(in srgb, var(--mj-brand-primary) 60%, var(--mj-bg-surface));\n        }\n\n        .hourly-bar-label {\n            font-size: 9px;\n            color: var(--mj-text-muted);\n            margin-top: 4px;\n            white-space: nowrap;\n        }\n\n        /* \u2500\u2500 Responsive \u2500\u2500 */\n        @media (max-width: 1024px) {\n            .heatmap-grid {\n                grid-template-columns: 36px repeat(24, 1fr);\n            }\n\n            .heatmap-cell {\n                min-height: 22px;\n            }\n\n            .heatmap-cell__count {\n                font-size: 8px;\n            }\n\n            .hourly-bars {\n                height: 120px;\n            }\n        }\n    "] }]
+    }], null, { TimeRange: [{
+            type: Input
+        }], TimeRangeChange: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AnalyticsUsagePatternsComponent, { className: "AnalyticsUsagePatternsComponent", filePath: "src/AI/components/analytics/usage-patterns/usage-patterns.component.ts", lineNumber: 534 }); })();
+export function LoadAnalyticsUsagePatterns() { }
+//# sourceMappingURL=usage-patterns.component.js.map