@memberjunction/ng-dashboards 5.34.1 → 5.36.0

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

@@ -11,28 +11,27 @@ import { RunView } from '@memberjunction/core';
 import { BaseAngularComponent } from '@memberjunction/ng-base-types';
 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";
+import * as i2 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);
+function AnalyticsUsagePatternsComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 0);
+    i0.ɵɵelement(1, "mj-loading", 2);
     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);
+function AnalyticsUsagePatternsComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 1);
+    i0.ɵɵelement(1, "i", 3);
+    i0.ɵɵelementStart(2, "div", 4);
     i0.ɵɵtext(3, "No Data Available");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 6);
+    i0.ɵɵelementStart(4, "div", 5);
     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);
+function AnalyticsUsagePatternsComponent_Conditional_2_For_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 13);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -40,35 +39,35 @@ function AnalyticsUsagePatternsComponent_Conditional_3_For_10_Template(rf, ctx)
     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);
+function AnalyticsUsagePatternsComponent_Conditional_2_For_12_For_3_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 25);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const h_r2 = i0.ɵɵnextContext().$implicit;
-    const ɵ$index_40_r3 = i0.ɵɵnextContext().$index;
+    const ɵ$index_38_r3 = i0.ɵɵnextContext().$index;
     const ctx_r3 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(ctx_r3.getCellCount(ɵ$index_40_r3, h_r2));
+    i0.ɵɵtextInterpolate(ctx_r3.getCellCount(ɵ$index_38_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);
+function AnalyticsUsagePatternsComponent_Conditional_2_For_12_For_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 24);
+    i0.ɵɵconditionalCreate(1, AnalyticsUsagePatternsComponent_Conditional_2_For_12_For_3_Conditional_1_Template, 2, 1, "span", 25);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const h_r2 = ctx.$implicit;
-    const ɵ$index_40_r3 = i0.ɵɵnextContext().$index;
+    const ɵ$index_38_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.ɵɵstyleProp("background", ctx_r3.getCellBackground(ɵ$index_38_r3, h_r2));
+    i0.ɵɵproperty("title", ctx_r3.getCellTooltip(ɵ$index_38_r3, h_r2));
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r3.getCellCount(ɵ$index_40_r3, h_r2) > 0 ? 1 : -1);
+    i0.ɵɵconditional(ctx_r3.getCellCount(ɵ$index_38_r3, h_r2) > 0 ? 1 : -1);
 } }
-function AnalyticsUsagePatternsComponent_Conditional_3_For_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 23);
+function AnalyticsUsagePatternsComponent_Conditional_2_For_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 22);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
-    i0.ɵɵrepeaterCreate(2, AnalyticsUsagePatternsComponent_Conditional_3_For_12_For_3_Template, 2, 4, "div", 24, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵrepeaterCreate(2, AnalyticsUsagePatternsComponent_Conditional_2_For_12_For_3_Template, 2, 4, "div", 23, i0.ɵɵrepeaterTrackByIdentity);
 } if (rf & 2) {
     const day_r5 = ctx.$implicit;
     const ctx_r3 = i0.ɵɵnextContext(2);
@@ -77,14 +76,14 @@ function AnalyticsUsagePatternsComponent_Conditional_3_For_12_Template(rf, ctx)
     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);
+function AnalyticsUsagePatternsComponent_Conditional_2_For_20_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 16)(1, "span", 26);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 28);
-    i0.ɵɵelement(4, "div", 29);
+    i0.ɵɵelementStart(3, "div", 27);
+    i0.ɵɵelement(4, "div", 28);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 30);
+    i0.ɵɵelementStart(5, "span", 29);
     i0.ɵɵtext(6);
     i0.ɵɵpipe(7, "number");
     i0.ɵɵelementEnd()();
@@ -97,17 +96,17 @@ function AnalyticsUsagePatternsComponent_Conditional_3_For_20_Template(rf, ctx)
     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);
+function AnalyticsUsagePatternsComponent_Conditional_2_For_27_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 18)(1, "div", 30);
     i0.ɵɵelement(2, "i");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 32)(4, "div", 33);
+    i0.ɵɵelementStart(3, "div", 31)(4, "div", 32);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 34);
+    i0.ɵɵelementStart(6, "div", 33);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "div", 35);
+    i0.ɵɵelementStart(8, "div", 34);
     i0.ɵɵtext(9);
     i0.ɵɵpipe(10, "number");
     i0.ɵɵelementEnd()()();
@@ -122,10 +121,10 @@ function AnalyticsUsagePatternsComponent_Conditional_3_For_27_Template(rf, ctx)
     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);
+function AnalyticsUsagePatternsComponent_Conditional_2_For_37_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 21);
+    i0.ɵɵelement(1, "div", 35);
+    i0.ɵɵelementStart(2, "span", 36);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -136,38 +135,38 @@ function AnalyticsUsagePatternsComponent_Conditional_3_For_37_Template(rf, ctx)
     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);
+function AnalyticsUsagePatternsComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 6)(1, "div", 7)(2, "h4", 8);
     i0.ɵɵtext(3, "Time-of-Day Heatmap");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "span", 10);
+    i0.ɵɵelementStart(4, "span", 9);
     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.ɵɵelementStart(6, "div", 10)(7, "div", 11);
+    i0.ɵɵelement(8, "div", 12);
+    i0.ɵɵrepeaterCreate(9, AnalyticsUsagePatternsComponent_Conditional_2_For_10_Template, 2, 1, "div", 13, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵrepeaterCreate(11, AnalyticsUsagePatternsComponent_Conditional_2_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.ɵɵelementStart(13, "div", 14)(14, "div", 6)(15, "div", 7)(16, "h4", 8);
     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.ɵɵelementStart(18, "div", 15);
+    i0.ɵɵrepeaterCreate(19, AnalyticsUsagePatternsComponent_Conditional_2_For_20_Template, 8, 6, "div", 16, _forTrack0);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(21, "div", 7)(22, "div", 8)(23, "h4", 9);
+    i0.ɵɵelementStart(21, "div", 6)(22, "div", 7)(23, "h4", 8);
     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.ɵɵelementStart(25, "div", 17);
+    i0.ɵɵrepeaterCreate(26, AnalyticsUsagePatternsComponent_Conditional_2_For_27_Template, 11, 7, "div", 18, _forTrack1);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(28, "div", 7)(29, "div", 8)(30, "h4", 9);
+    i0.ɵɵelementStart(28, "div", 6)(29, "div", 7)(30, "h4", 8);
     i0.ɵɵtext(31, "Hourly Throughput");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(32, "span", 10);
+    i0.ɵɵelementStart(32, "span", 9);
     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.ɵɵelementStart(34, "div", 19)(35, "div", 20);
+    i0.ɵɵrepeaterCreate(36, AnalyticsUsagePatternsComponent_Conditional_2_For_37_Template, 4, 4, "div", 21, _forTrack2);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r3 = i0.ɵɵnextContext();
@@ -424,30 +423,15 @@ export class AnalyticsUsagePatternsComponent extends BaseAngularComponent {
         return names[idx] ?? 'Unknown';
     }
     static ɵfac = /*@__PURE__*/ (() => { let ɵAnalyticsUsagePatternsComponent_BaseFactory; return function AnalyticsUsagePatternsComponent_Factory(__ngFactoryType__) { return (ɵAnalyticsUsagePatternsComponent_BaseFactory || (ɵAnalyticsUsagePatternsComponent_BaseFactory = i0.ɵɵgetInheritedFactory(AnalyticsUsagePatternsComponent)))(__ngFactoryType__ || AnalyticsUsagePatternsComponent); }; })();
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AnalyticsUsagePatternsComponent, selectors: [["app-analytics-usage-patterns"]], inputs: { TimeRange: "TimeRange" }, outputs: { TimeRangeChange: "TimeRangeChange" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], 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);
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AnalyticsUsagePatternsComponent, selectors: [["app-analytics-usage-patterns"]], inputs: { TimeRange: "TimeRange" }, outputs: { TimeRangeChange: "TimeRangeChange" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 3, vars: 1, consts: [[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.ɵɵconditionalCreate(0, AnalyticsUsagePatternsComponent_Conditional_0_Template, 2, 0, "div", 0)(1, AnalyticsUsagePatternsComponent_Conditional_1_Template, 6, 0, "div", 1)(2, AnalyticsUsagePatternsComponent_Conditional_2_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        }"] });
+            i0.ɵɵconditional(ctx.IsLoading ? 0 : ctx.TotalRuns === 0 ? 1 : 2);
+        } }, dependencies: [i1.LoadingComponent, i2.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">
@@ -565,6 +549,6 @@ export class AnalyticsUsagePatternsComponent extends BaseAngularComponent {
         }], TimeRangeChange: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AnalyticsUsagePatternsComponent, { className: "AnalyticsUsagePatternsComponent", filePath: "src/AI/components/analytics/usage-patterns/usage-patterns.component.ts", lineNumber: 535 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AnalyticsUsagePatternsComponent, { className: "AnalyticsUsagePatternsComponent", filePath: "src/AI/components/analytics/usage-patterns/usage-patterns.component.ts", lineNumber: 525 }); })();
 export function LoadAnalyticsUsagePatterns() { }
 //# sourceMappingURL=usage-patterns.component.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"usage-patterns.component.js","sourceRoot":"","sources":["../../../../../src/AI/components/analytics/usage-patterns/usage-patterns.component.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @fileoverview Usage Patterns Analytics.\n *\n * Displays a time-of-day heatmap (7 days × 24 hours), day-of-week distribution bars,\n * peak hours summary cards, and an hourly throughput bar chart.\n * Data loaded from MJ: AI Prompt Runs for the last 30 days.\n */\n\nimport {\n    Component, Input, Output, EventEmitter,\n    OnInit, OnDestroy, ChangeDetectorRef, inject\n} from '@angular/core';\nimport { Subject } from 'rxjs';\nimport { RunView } from '@memberjunction/core';\nimport { BaseAngularComponent } from '@memberjunction/ng-base-types';\n\n// ── Interfaces ──\n\ninterface PromptRunRecord {\n    ID: string;\n    RunAt: string;\n    Success: boolean;\n    Cost: number | null;\n    TokensUsed: number | null;\n    ExecutionTimeMS: number | null;\n}\n\ninterface HeatmapCell {\n    Day: number;       // 0-6 (Mon-Sun)\n    Hour: number;      // 0-23\n    Count: number;\n    Intensity: number; // 0-100\n}\n\ninterface DayDistribution {\n    DayIndex: number;\n    DayName: string;\n    Count: number;\n    WidthPercent: number;\n}\n\ninterface PeakSummary {\n    Label: string;\n    Value: string;\n    Count: number;\n    Icon: string;\n}\n\ninterface HourlyBar {\n    Hour: number;\n    Label: string;\n    Count: number;\n    HeightPercent: number;\n}\n\nconst DAY_NAMES = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];\nconst HOURS = Array.from({ length: 24 }, (_, i) => i);\n\nconst FIELDS: string[] = [\n    'ID', 'RunAt', 'Success', 'Cost', 'TokensUsed', 'ExecutionTimeMS'\n];\n\n@Component({\n    standalone: false,\n    selector: 'app-analytics-usage-patterns',\n    template: `\n        <!-- Filter Bar -->\n        <app-analytics-filter-bar\n            [TimeRange]=\"TimeRange\"\n            [ShowModelFilter]=\"false\"\n            [ShowAgentFilter]=\"false\"\n            [ShowPromptFilter]=\"false\"\n            [ShowStatusFilter]=\"false\"\n            [ShowCompareToggle]=\"false\"\n            (TimeRangeChange)=\"OnTimeRangeChange($event)\"\n        ></app-analytics-filter-bar>\n\n        @if (IsLoading) {\n            <div class=\"loading-container\">\n                <mj-loading text=\"Analyzing usage patterns...\"></mj-loading>\n            </div>\n        } @else if (TotalRuns === 0) {\n            <div class=\"empty-state\">\n                <i class=\"fa-solid fa-chart-line empty-state__icon\"></i>\n                <div class=\"empty-state__title\">No Data Available</div>\n                <div class=\"empty-state__subtitle\">No prompt runs found in the last 30 days.</div>\n            </div>\n        } @else {\n            <!-- Heatmap -->\n            <div class=\"panel\">\n                <div class=\"panel__header\">\n                    <h4 class=\"panel__title\">Time-of-Day Heatmap</h4>\n                    <span class=\"panel__subtitle\">Execution count by day and hour</span>\n                </div>\n                <div class=\"heatmap-wrapper\">\n                    <div class=\"heatmap-grid\">\n                        <!-- Corner spacer -->\n                        <div class=\"heatmap-corner\"></div>\n                        <!-- Hour labels -->\n                        @for (h of Hours; track h) {\n                            <div class=\"heatmap-hour-label\">{{ h }}</div>\n                        }\n\n                        <!-- Rows: one per day -->\n                        @for (day of DayNames; track day; let d = $index) {\n                            <div class=\"heatmap-day-label\">{{ day }}</div>\n                            @for (h of Hours; track h) {\n                                <div\n                                    class=\"heatmap-cell\"\n                                    [style.background]=\"getCellBackground(d, h)\"\n                                    [title]=\"getCellTooltip(d, h)\">\n                                    @if (getCellCount(d, h) > 0) {\n                                        <span class=\"heatmap-cell__count\">{{ getCellCount(d, h) }}</span>\n                                    }\n                                </div>\n                            }\n                        }\n                    </div>\n                </div>\n            </div>\n\n            <!-- Day Distribution + Peak Summary -->\n            <div class=\"two-col-row\">\n                <!-- Day-of-Week Distribution -->\n                <div class=\"panel\">\n                    <div class=\"panel__header\">\n                        <h4 class=\"panel__title\">Day-of-Week Distribution</h4>\n                    </div>\n                    <div class=\"day-distribution\">\n                        @for (d of DayDistributions; track d.DayIndex) {\n                            <div class=\"day-bar-row\">\n                                <span class=\"day-bar-label\">{{ d.DayName }}</span>\n                                <div class=\"day-bar-track\">\n                                    <div\n                                        class=\"day-bar-fill\"\n                                        [style.width.%]=\"d.WidthPercent\">\n                                    </div>\n                                </div>\n                                <span class=\"day-bar-count\">{{ d.Count | number }}</span>\n                            </div>\n                        }\n                    </div>\n                </div>\n\n                <!-- Peak Hours Summary -->\n                <div class=\"panel\">\n                    <div class=\"panel__header\">\n                        <h4 class=\"panel__title\">Peak Hours Summary</h4>\n                    </div>\n                    <div class=\"peak-cards\">\n                        @for (peak of PeakSummaries; track peak.Label) {\n                            <div class=\"peak-card\">\n                                <div class=\"peak-card__icon\">\n                                    <i [class]=\"peak.Icon\"></i>\n                                </div>\n                                <div class=\"peak-card__content\">\n                                    <div class=\"peak-card__label\">{{ peak.Label }}</div>\n                                    <div class=\"peak-card__value\">{{ peak.Value }}</div>\n                                    <div class=\"peak-card__count\">{{ peak.Count | number }} runs</div>\n                                </div>\n                            </div>\n                        }\n                    </div>\n                </div>\n            </div>\n\n            <!-- Hourly Throughput -->\n            <div class=\"panel\">\n                <div class=\"panel__header\">\n                    <h4 class=\"panel__title\">Hourly Throughput</h4>\n                    <span class=\"panel__subtitle\">Total runs per hour (all days combined)</span>\n                </div>\n                <div class=\"hourly-chart\">\n                    <div class=\"hourly-bars\">\n                        @for (bar of HourlyBars; track bar.Hour) {\n                            <div class=\"hourly-bar-col\" [title]=\"bar.Label + ': ' + bar.Count + ' runs'\">\n                                <div\n                                    class=\"hourly-bar\"\n                                    [style.height.%]=\"bar.HeightPercent\">\n                                </div>\n                                <span class=\"hourly-bar-label\">{{ bar.Label }}</span>\n                            </div>\n                        }\n                    </div>\n                </div>\n            </div>\n        }\n    `,\n    styles: [`\n        :host { display: block; }\n\n        /* ── Header ── */\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        /* ── Loading / Empty ── */\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        /* ── Panels ── */\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        /* ── Heatmap ── */\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        /* ── Two Column Row ── */\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        /* ── Day Distribution ── */\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        /* ── Peak Cards ── */\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        /* ── Hourly Throughput Chart ── */\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        /* ── Responsive ── */\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    `]\n})\nexport class AnalyticsUsagePatternsComponent extends BaseAngularComponent implements OnInit, OnDestroy {\n\n    private _timeRange = '30d';\n    private isInitialized = false;\n\n    @Input()\n    set TimeRange(value: string) {\n        if (value !== this._timeRange) {\n            this._timeRange = value;\n            if (this.isInitialized) {\n                this.loadData();\n            }\n        }\n    }\n    get TimeRange(): string { return this._timeRange; }\n\n    @Output() TimeRangeChange = new EventEmitter<string>();\n\n    // ── Public state ──\n    IsLoading = true;\n    TotalRuns = 0;\n\n    HeatmapCells: HeatmapCell[][] = []; // [day][hour]\n    DayDistributions: DayDistribution[] = [];\n    PeakSummaries: PeakSummary[] = [];\n    HourlyBars: HourlyBar[] = [];\n\n    readonly DayNames = DAY_NAMES;\n    readonly Hours = HOURS;\n\n    // ── Private ──\n    private destroy$ = new Subject<void>();\n    private cdr = inject(ChangeDetectorRef);\n\n    async ngOnInit(): Promise<void> {\n        await this.loadData();\n        this.isInitialized = true;\n    }\n\n    OnTimeRangeChange(range: string): void {\n        this.TimeRange = range;\n        this.TimeRangeChange.emit(range);\n    }\n\n    ngOnDestroy(): void {\n        this.destroy$.next();\n        this.destroy$.complete();\n    }\n\n    // ── Heatmap helpers (called from template) ──\n\n    getCellBackground(day: number, hour: number): string {\n        const intensity = this.HeatmapCells[day]?.[hour]?.Intensity ?? 0;\n        return `color-mix(in srgb, var(--mj-brand-primary) ${intensity}%, var(--mj-bg-surface))`;\n    }\n\n    getCellTooltip(day: number, hour: number): string {\n        const count = this.HeatmapCells[day]?.[hour]?.Count ?? 0;\n        return `${DAY_NAMES[day]} ${this.formatHourLabel(hour)}: ${count} runs`;\n    }\n\n    getCellCount(day: number, hour: number): number {\n        return this.HeatmapCells[day]?.[hour]?.Count ?? 0;\n    }\n\n    // ── Data Loading ──\n\n    private async loadData(): Promise<void> {\n        this.IsLoading = true;\n        this.cdr.detectChanges();\n\n        try {\n            const runs = await this.fetchPromptRuns();\n            this.TotalRuns = runs.length;\n\n            if (runs.length > 0) {\n                const dayCounts = this.buildDayHourCounts(runs);\n                this.HeatmapCells = this.buildHeatmap(dayCounts);\n                this.DayDistributions = this.buildDayDistributions(dayCounts);\n                this.HourlyBars = this.buildHourlyBars(dayCounts);\n                this.PeakSummaries = this.buildPeakSummaries(dayCounts);\n            }\n        } catch (err) {\n            console.error('Usage patterns data load failed:', err);\n        } finally {\n            this.IsLoading = false;\n            this.cdr.detectChanges();\n        }\n    }\n\n    private async fetchPromptRuns(): Promise<PromptRunRecord[]> {\n        const rv = RunView.FromMetadataProvider(this.ProviderToUse);\n        const since = new Date();\n        switch (this.TimeRange) {\n            case '1h': since.setHours(since.getHours() - 1); break;\n            case '6h': since.setHours(since.getHours() - 6); break;\n            case '24h': since.setDate(since.getDate() - 1); break;\n            case '7d': since.setDate(since.getDate() - 7); break;\n            case '30d': default: since.setDate(since.getDate() - 30); break;\n        }\n        const sinceStr = since.toISOString();\n\n        const result = await rv.RunView<PromptRunRecord>({\n            EntityName: 'MJ: AI Prompt Runs',\n            ExtraFilter: `RunAt >= '${sinceStr}'`,\n            Fields: FIELDS,\n            ResultType: 'simple'\n        });\n\n        if (!result.Success) {\n            console.error('Failed to load prompt runs:', result.ErrorMessage);\n            return [];\n        }\n\n        return result.Results ?? [];\n    }\n\n    /**\n     * Build a 7×24 count matrix: dayCounts[dayIndex][hour] = count.\n     * dayIndex 0 = Monday, 6 = Sunday. Uses the JS Date getDay() offset.\n     */\n    private buildDayHourCounts(runs: PromptRunRecord[]): number[][] {\n        const counts: number[][] = Array.from({ length: 7 }, () => new Array(24).fill(0));\n\n        for (const run of runs) {\n            const dt = new Date(run.RunAt);\n            const jsDay = dt.getDay(); // 0=Sun, 1=Mon, ..., 6=Sat\n            const dayIndex = jsDay === 0 ? 6 : jsDay - 1; // Convert to 0=Mon, 6=Sun\n            const hour = dt.getHours();\n            counts[dayIndex][hour]++;\n        }\n\n        return counts;\n    }\n\n    private buildHeatmap(dayCounts: number[][]): HeatmapCell[][] {\n        const maxCount = this.findMaxCount(dayCounts);\n\n        return dayCounts.map((hours, day) =>\n            hours.map((count, hour) => ({\n                Day: day,\n                Hour: hour,\n                Count: count,\n                Intensity: maxCount > 0 ? Math.round((count / maxCount) * 100) : 0\n            }))\n        );\n    }\n\n    private buildDayDistributions(dayCounts: number[][]): DayDistribution[] {\n        const daySums = dayCounts.map(hours => hours.reduce((sum, c) => sum + c, 0));\n        const maxDay = Math.max(...daySums, 1);\n\n        return daySums.map((count, i) => ({\n            DayIndex: i,\n            DayName: DAY_NAMES[i],\n            Count: count,\n            WidthPercent: Math.round((count / maxDay) * 100)\n        }));\n    }\n\n    private buildHourlyBars(dayCounts: number[][]): HourlyBar[] {\n        const hourSums = HOURS.map(h =>\n            dayCounts.reduce((sum, dayHours) => sum + dayHours[h], 0)\n        );\n        const maxHour = Math.max(...hourSums, 1);\n\n        return hourSums.map((count, h) => ({\n            Hour: h,\n            Label: this.formatHourLabel(h),\n            Count: count,\n            HeightPercent: Math.round((count / maxHour) * 100)\n        }));\n    }\n\n    private buildPeakSummaries(dayCounts: number[][]): PeakSummary[] {\n        const hourSums = HOURS.map(h =>\n            dayCounts.reduce((sum, dayHours) => sum + dayHours[h], 0)\n        );\n        const daySums = dayCounts.map(hours => hours.reduce((sum, c) => sum + c, 0));\n\n        // Busiest hour\n        const busiestHourIdx = this.indexOfMax(hourSums);\n        const busiestHour: PeakSummary = {\n            Label: 'Busiest Hour',\n            Value: `${this.formatHourRange(busiestHourIdx)}`,\n            Count: hourSums[busiestHourIdx],\n            Icon: 'fa-solid fa-fire'\n        };\n\n        // Busiest day\n        const busiestDayIdx = this.indexOfMax(daySums);\n        const busiestDay: PeakSummary = {\n            Label: 'Busiest Day',\n            Value: this.fullDayName(busiestDayIdx),\n            Count: daySums[busiestDayIdx],\n            Icon: 'fa-solid fa-calendar-day'\n        };\n\n        // Quietest cell (day+hour combo)\n        let minCount = Infinity;\n        let quietDay = 0;\n        let quietHour = 0;\n        for (let d = 0; d < 7; d++) {\n            for (let h = 0; h < 24; h++) {\n                if (dayCounts[d][h] < minCount) {\n                    minCount = dayCounts[d][h];\n                    quietDay = d;\n                    quietHour = h;\n                }\n            }\n        }\n\n        const quietest: PeakSummary = {\n            Label: 'Quietest Period',\n            Value: `${DAY_NAMES[quietDay]} ${this.formatHourLabel(quietHour)}`,\n            Count: minCount,\n            Icon: 'fa-solid fa-moon'\n        };\n\n        return [busiestHour, busiestDay, quietest];\n    }\n\n    // ── Utility helpers ──\n\n    private findMaxCount(dayCounts: number[][]): number {\n        let max = 0;\n        for (const hours of dayCounts) {\n            for (const c of hours) {\n                if (c > max) max = c;\n            }\n        }\n        return max;\n    }\n\n    private indexOfMax(arr: number[]): number {\n        let maxIdx = 0;\n        for (let i = 1; i < arr.length; i++) {\n            if (arr[i] > arr[maxIdx]) maxIdx = i;\n        }\n        return maxIdx;\n    }\n\n    private formatHourLabel(h: number): string {\n        if (h === 0) return '12a';\n        if (h < 12) return `${h}a`;\n        if (h === 12) return '12p';\n        return `${h - 12}p`;\n    }\n\n    private formatHourRange(h: number): string {\n        const start = this.formatHour12(h);\n        const end = this.formatHour12((h + 1) % 24);\n        return `${start} - ${end}`;\n    }\n\n    private formatHour12(h: number): string {\n        if (h === 0) return '12:00 AM';\n        if (h < 12) return `${h}:00 AM`;\n        if (h === 12) return '12:00 PM';\n        return `${h - 12}:00 PM`;\n    }\n\n    private fullDayName(idx: number): string {\n        const names = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];\n        return names[idx] ?? 'Unknown';\n    }\n}\n\nexport function LoadAnalyticsUsagePatterns() { /* tree-shaking prevention */ }\n"]}
+{"version":3,"file":"usage-patterns.component.js","sourceRoot":"","sources":["../../../../../src/AI/components/analytics/usage-patterns/usage-patterns.component.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @fileoverview Usage Patterns Analytics.\n *\n * Displays a time-of-day heatmap (7 days × 24 hours), day-of-week distribution bars,\n * peak hours summary cards, and an hourly throughput bar chart.\n * Data loaded from MJ: AI Prompt Runs for the last 30 days.\n */\n\nimport {\n    Component, Input, Output, EventEmitter,\n    OnInit, OnDestroy, ChangeDetectorRef, inject\n} from '@angular/core';\nimport { Subject } from 'rxjs';\nimport { RunView } from '@memberjunction/core';\nimport { BaseAngularComponent } from '@memberjunction/ng-base-types';\n\n// ── Interfaces ──\n\ninterface PromptRunRecord {\n    ID: string;\n    RunAt: string;\n    Success: boolean;\n    Cost: number | null;\n    TokensUsed: number | null;\n    ExecutionTimeMS: number | null;\n}\n\ninterface HeatmapCell {\n    Day: number;       // 0-6 (Mon-Sun)\n    Hour: number;      // 0-23\n    Count: number;\n    Intensity: number; // 0-100\n}\n\ninterface DayDistribution {\n    DayIndex: number;\n    DayName: string;\n    Count: number;\n    WidthPercent: number;\n}\n\ninterface PeakSummary {\n    Label: string;\n    Value: string;\n    Count: number;\n    Icon: string;\n}\n\ninterface HourlyBar {\n    Hour: number;\n    Label: string;\n    Count: number;\n    HeightPercent: number;\n}\n\nconst DAY_NAMES = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];\nconst HOURS = Array.from({ length: 24 }, (_, i) => i);\n\nconst FIELDS: string[] = [\n    'ID', 'RunAt', 'Success', 'Cost', 'TokensUsed', 'ExecutionTimeMS'\n];\n\n@Component({\n    standalone: false,\n    selector: 'app-analytics-usage-patterns',\n    template: `\n\n        @if (IsLoading) {\n            <div class=\"loading-container\">\n                <mj-loading text=\"Analyzing usage patterns...\"></mj-loading>\n            </div>\n        } @else if (TotalRuns === 0) {\n            <div class=\"empty-state\">\n                <i class=\"fa-solid fa-chart-line empty-state__icon\"></i>\n                <div class=\"empty-state__title\">No Data Available</div>\n                <div class=\"empty-state__subtitle\">No prompt runs found in the last 30 days.</div>\n            </div>\n        } @else {\n            <!-- Heatmap -->\n            <div class=\"panel\">\n                <div class=\"panel__header\">\n                    <h4 class=\"panel__title\">Time-of-Day Heatmap</h4>\n                    <span class=\"panel__subtitle\">Execution count by day and hour</span>\n                </div>\n                <div class=\"heatmap-wrapper\">\n                    <div class=\"heatmap-grid\">\n                        <!-- Corner spacer -->\n                        <div class=\"heatmap-corner\"></div>\n                        <!-- Hour labels -->\n                        @for (h of Hours; track h) {\n                            <div class=\"heatmap-hour-label\">{{ h }}</div>\n                        }\n\n                        <!-- Rows: one per day -->\n                        @for (day of DayNames; track day; let d = $index) {\n                            <div class=\"heatmap-day-label\">{{ day }}</div>\n                            @for (h of Hours; track h) {\n                                <div\n                                    class=\"heatmap-cell\"\n                                    [style.background]=\"getCellBackground(d, h)\"\n                                    [title]=\"getCellTooltip(d, h)\">\n                                    @if (getCellCount(d, h) > 0) {\n                                        <span class=\"heatmap-cell__count\">{{ getCellCount(d, h) }}</span>\n                                    }\n                                </div>\n                            }\n                        }\n                    </div>\n                </div>\n            </div>\n\n            <!-- Day Distribution + Peak Summary -->\n            <div class=\"two-col-row\">\n                <!-- Day-of-Week Distribution -->\n                <div class=\"panel\">\n                    <div class=\"panel__header\">\n                        <h4 class=\"panel__title\">Day-of-Week Distribution</h4>\n                    </div>\n                    <div class=\"day-distribution\">\n                        @for (d of DayDistributions; track d.DayIndex) {\n                            <div class=\"day-bar-row\">\n                                <span class=\"day-bar-label\">{{ d.DayName }}</span>\n                                <div class=\"day-bar-track\">\n                                    <div\n                                        class=\"day-bar-fill\"\n                                        [style.width.%]=\"d.WidthPercent\">\n                                    </div>\n                                </div>\n                                <span class=\"day-bar-count\">{{ d.Count | number }}</span>\n                            </div>\n                        }\n                    </div>\n                </div>\n\n                <!-- Peak Hours Summary -->\n                <div class=\"panel\">\n                    <div class=\"panel__header\">\n                        <h4 class=\"panel__title\">Peak Hours Summary</h4>\n                    </div>\n                    <div class=\"peak-cards\">\n                        @for (peak of PeakSummaries; track peak.Label) {\n                            <div class=\"peak-card\">\n                                <div class=\"peak-card__icon\">\n                                    <i [class]=\"peak.Icon\"></i>\n                                </div>\n                                <div class=\"peak-card__content\">\n                                    <div class=\"peak-card__label\">{{ peak.Label }}</div>\n                                    <div class=\"peak-card__value\">{{ peak.Value }}</div>\n                                    <div class=\"peak-card__count\">{{ peak.Count | number }} runs</div>\n                                </div>\n                            </div>\n                        }\n                    </div>\n                </div>\n            </div>\n\n            <!-- Hourly Throughput -->\n            <div class=\"panel\">\n                <div class=\"panel__header\">\n                    <h4 class=\"panel__title\">Hourly Throughput</h4>\n                    <span class=\"panel__subtitle\">Total runs per hour (all days combined)</span>\n                </div>\n                <div class=\"hourly-chart\">\n                    <div class=\"hourly-bars\">\n                        @for (bar of HourlyBars; track bar.Hour) {\n                            <div class=\"hourly-bar-col\" [title]=\"bar.Label + ': ' + bar.Count + ' runs'\">\n                                <div\n                                    class=\"hourly-bar\"\n                                    [style.height.%]=\"bar.HeightPercent\">\n                                </div>\n                                <span class=\"hourly-bar-label\">{{ bar.Label }}</span>\n                            </div>\n                        }\n                    </div>\n                </div>\n            </div>\n        }\n    `,\n    styles: [`\n        :host { display: block; }\n\n        /* ── Header ── */\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        /* ── Loading / Empty ── */\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        /* ── Panels ── */\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        /* ── Heatmap ── */\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        /* ── Two Column Row ── */\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        /* ── Day Distribution ── */\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        /* ── Peak Cards ── */\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        /* ── Hourly Throughput Chart ── */\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        /* ── Responsive ── */\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    `]\n})\nexport class AnalyticsUsagePatternsComponent extends BaseAngularComponent implements OnInit, OnDestroy {\n\n    private _timeRange = '30d';\n    private isInitialized = false;\n\n    @Input()\n    set TimeRange(value: string) {\n        if (value !== this._timeRange) {\n            this._timeRange = value;\n            if (this.isInitialized) {\n                this.loadData();\n            }\n        }\n    }\n    get TimeRange(): string { return this._timeRange; }\n\n    @Output() TimeRangeChange = new EventEmitter<string>();\n\n    // ── Public state ──\n    IsLoading = true;\n    TotalRuns = 0;\n\n    HeatmapCells: HeatmapCell[][] = []; // [day][hour]\n    DayDistributions: DayDistribution[] = [];\n    PeakSummaries: PeakSummary[] = [];\n    HourlyBars: HourlyBar[] = [];\n\n    readonly DayNames = DAY_NAMES;\n    readonly Hours = HOURS;\n\n    // ── Private ──\n    private destroy$ = new Subject<void>();\n    private cdr = inject(ChangeDetectorRef);\n\n    async ngOnInit(): Promise<void> {\n        await this.loadData();\n        this.isInitialized = true;\n    }\n\n    OnTimeRangeChange(range: string): void {\n        this.TimeRange = range;\n        this.TimeRangeChange.emit(range);\n    }\n\n    ngOnDestroy(): void {\n        this.destroy$.next();\n        this.destroy$.complete();\n    }\n\n    // ── Heatmap helpers (called from template) ──\n\n    getCellBackground(day: number, hour: number): string {\n        const intensity = this.HeatmapCells[day]?.[hour]?.Intensity ?? 0;\n        return `color-mix(in srgb, var(--mj-brand-primary) ${intensity}%, var(--mj-bg-surface))`;\n    }\n\n    getCellTooltip(day: number, hour: number): string {\n        const count = this.HeatmapCells[day]?.[hour]?.Count ?? 0;\n        return `${DAY_NAMES[day]} ${this.formatHourLabel(hour)}: ${count} runs`;\n    }\n\n    getCellCount(day: number, hour: number): number {\n        return this.HeatmapCells[day]?.[hour]?.Count ?? 0;\n    }\n\n    // ── Data Loading ──\n\n    private async loadData(): Promise<void> {\n        this.IsLoading = true;\n        this.cdr.detectChanges();\n\n        try {\n            const runs = await this.fetchPromptRuns();\n            this.TotalRuns = runs.length;\n\n            if (runs.length > 0) {\n                const dayCounts = this.buildDayHourCounts(runs);\n                this.HeatmapCells = this.buildHeatmap(dayCounts);\n                this.DayDistributions = this.buildDayDistributions(dayCounts);\n                this.HourlyBars = this.buildHourlyBars(dayCounts);\n                this.PeakSummaries = this.buildPeakSummaries(dayCounts);\n            }\n        } catch (err) {\n            console.error('Usage patterns data load failed:', err);\n        } finally {\n            this.IsLoading = false;\n            this.cdr.detectChanges();\n        }\n    }\n\n    private async fetchPromptRuns(): Promise<PromptRunRecord[]> {\n        const rv = RunView.FromMetadataProvider(this.ProviderToUse);\n        const since = new Date();\n        switch (this.TimeRange) {\n            case '1h': since.setHours(since.getHours() - 1); break;\n            case '6h': since.setHours(since.getHours() - 6); break;\n            case '24h': since.setDate(since.getDate() - 1); break;\n            case '7d': since.setDate(since.getDate() - 7); break;\n            case '30d': default: since.setDate(since.getDate() - 30); break;\n        }\n        const sinceStr = since.toISOString();\n\n        const result = await rv.RunView<PromptRunRecord>({\n            EntityName: 'MJ: AI Prompt Runs',\n            ExtraFilter: `RunAt >= '${sinceStr}'`,\n            Fields: FIELDS,\n            ResultType: 'simple'\n        });\n\n        if (!result.Success) {\n            console.error('Failed to load prompt runs:', result.ErrorMessage);\n            return [];\n        }\n\n        return result.Results ?? [];\n    }\n\n    /**\n     * Build a 7×24 count matrix: dayCounts[dayIndex][hour] = count.\n     * dayIndex 0 = Monday, 6 = Sunday. Uses the JS Date getDay() offset.\n     */\n    private buildDayHourCounts(runs: PromptRunRecord[]): number[][] {\n        const counts: number[][] = Array.from({ length: 7 }, () => new Array(24).fill(0));\n\n        for (const run of runs) {\n            const dt = new Date(run.RunAt);\n            const jsDay = dt.getDay(); // 0=Sun, 1=Mon, ..., 6=Sat\n            const dayIndex = jsDay === 0 ? 6 : jsDay - 1; // Convert to 0=Mon, 6=Sun\n            const hour = dt.getHours();\n            counts[dayIndex][hour]++;\n        }\n\n        return counts;\n    }\n\n    private buildHeatmap(dayCounts: number[][]): HeatmapCell[][] {\n        const maxCount = this.findMaxCount(dayCounts);\n\n        return dayCounts.map((hours, day) =>\n            hours.map((count, hour) => ({\n                Day: day,\n                Hour: hour,\n                Count: count,\n                Intensity: maxCount > 0 ? Math.round((count / maxCount) * 100) : 0\n            }))\n        );\n    }\n\n    private buildDayDistributions(dayCounts: number[][]): DayDistribution[] {\n        const daySums = dayCounts.map(hours => hours.reduce((sum, c) => sum + c, 0));\n        const maxDay = Math.max(...daySums, 1);\n\n        return daySums.map((count, i) => ({\n            DayIndex: i,\n            DayName: DAY_NAMES[i],\n            Count: count,\n            WidthPercent: Math.round((count / maxDay) * 100)\n        }));\n    }\n\n    private buildHourlyBars(dayCounts: number[][]): HourlyBar[] {\n        const hourSums = HOURS.map(h =>\n            dayCounts.reduce((sum, dayHours) => sum + dayHours[h], 0)\n        );\n        const maxHour = Math.max(...hourSums, 1);\n\n        return hourSums.map((count, h) => ({\n            Hour: h,\n            Label: this.formatHourLabel(h),\n            Count: count,\n            HeightPercent: Math.round((count / maxHour) * 100)\n        }));\n    }\n\n    private buildPeakSummaries(dayCounts: number[][]): PeakSummary[] {\n        const hourSums = HOURS.map(h =>\n            dayCounts.reduce((sum, dayHours) => sum + dayHours[h], 0)\n        );\n        const daySums = dayCounts.map(hours => hours.reduce((sum, c) => sum + c, 0));\n\n        // Busiest hour\n        const busiestHourIdx = this.indexOfMax(hourSums);\n        const busiestHour: PeakSummary = {\n            Label: 'Busiest Hour',\n            Value: `${this.formatHourRange(busiestHourIdx)}`,\n            Count: hourSums[busiestHourIdx],\n            Icon: 'fa-solid fa-fire'\n        };\n\n        // Busiest day\n        const busiestDayIdx = this.indexOfMax(daySums);\n        const busiestDay: PeakSummary = {\n            Label: 'Busiest Day',\n            Value: this.fullDayName(busiestDayIdx),\n            Count: daySums[busiestDayIdx],\n            Icon: 'fa-solid fa-calendar-day'\n        };\n\n        // Quietest cell (day+hour combo)\n        let minCount = Infinity;\n        let quietDay = 0;\n        let quietHour = 0;\n        for (let d = 0; d < 7; d++) {\n            for (let h = 0; h < 24; h++) {\n                if (dayCounts[d][h] < minCount) {\n                    minCount = dayCounts[d][h];\n                    quietDay = d;\n                    quietHour = h;\n                }\n            }\n        }\n\n        const quietest: PeakSummary = {\n            Label: 'Quietest Period',\n            Value: `${DAY_NAMES[quietDay]} ${this.formatHourLabel(quietHour)}`,\n            Count: minCount,\n            Icon: 'fa-solid fa-moon'\n        };\n\n        return [busiestHour, busiestDay, quietest];\n    }\n\n    // ── Utility helpers ──\n\n    private findMaxCount(dayCounts: number[][]): number {\n        let max = 0;\n        for (const hours of dayCounts) {\n            for (const c of hours) {\n                if (c > max) max = c;\n            }\n        }\n        return max;\n    }\n\n    private indexOfMax(arr: number[]): number {\n        let maxIdx = 0;\n        for (let i = 1; i < arr.length; i++) {\n            if (arr[i] > arr[maxIdx]) maxIdx = i;\n        }\n        return maxIdx;\n    }\n\n    private formatHourLabel(h: number): string {\n        if (h === 0) return '12a';\n        if (h < 12) return `${h}a`;\n        if (h === 12) return '12p';\n        return `${h - 12}p`;\n    }\n\n    private formatHourRange(h: number): string {\n        const start = this.formatHour12(h);\n        const end = this.formatHour12((h + 1) % 24);\n        return `${start} - ${end}`;\n    }\n\n    private formatHour12(h: number): string {\n        if (h === 0) return '12:00 AM';\n        if (h < 12) return `${h}:00 AM`;\n        if (h === 12) return '12:00 PM';\n        return `${h - 12}:00 PM`;\n    }\n\n    private fullDayName(idx: number): string {\n        const names = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];\n        return names[idx] ?? 'Unknown';\n    }\n}\n\nexport function LoadAnalyticsUsagePatterns() { /* tree-shaking prevention */ }\n"]}

package/dist/AI/components/autotagging/autotagging-pipeline-resource.component.d.ts

@@ -12,6 +12,7 @@ import { CompositeKey } from '@memberjunction/core';
 import { TreeBranchConfig, TreeLeafConfig } from '@memberjunction/ng-trees';
 import { ResourceData, MJContentSourceTypeEntity_IContentSourceTypeField } from '@memberjunction/core-entities';
 import { BaseResourceComponent, NavigationService } from '@memberjunction/ng-shared';
+import { MJLeftNavItem, MJLeftNavSection, TabConfig, FilterFieldConfig } from '@memberjunction/ng-ui-components';
 import { WordCloudItem } from '@memberjunction/ng-word-cloud';
 import * as i0 from "@angular/core";
 type TabName = 'pipeline' | 'sources' | 'types' | 'tags' | 'taxonomy' | 'history';
@@ -579,6 +580,7 @@ export declare class AutotaggingPipelineResourceComponent extends BaseResourceCo
     private contentFileTypesRaw;
     private aiModelsRaw;
     private static readonly PREFS_KEY;
+    private static readonly VALID_TABS;
     ngAfterViewInit(): Promise<void>;
     /**
      * D9: Read incoming configuration from ResourceData (e.g. from Analytics tag navigation).
@@ -597,6 +599,18 @@ export declare class AutotaggingPipelineResourceComponent extends BaseResourceCo
     private registerAgentTools;
     GetResourceDisplayName(_data: ResourceData): Promise<string>;
     GetResourceIconClass(_data: ResourceData): Promise<string>;
+    /**
+     * Wraps `NavItems` for `<mj-left-nav>`. Hardcoded "Run History" item goes
+     * into a second `MJLeftNavSection` — the rail's natural section break
+     * replaces the bespoke `.at-nav-divider` line.
+     */
+    get navSections(): MJLeftNavSection[];
+    /** Adapter for `<mj-left-nav>`'s `(ItemClicked)` output. */
+    onNavItemClicked(item: MJLeftNavItem): void;
+    /** Title rendered in the per-section `<mj-page-header-interior>`. */
+    get currentTabTitle(): string;
+    /** Subtitle rendered in the per-section `<mj-page-header-interior>`. */
+    get currentTabSubtitle(): string;
     SwitchTab(tab: TabName): Promise<void>;
     private loadTabData;
     LoadPipelineData(): Promise<void>;
@@ -642,6 +656,16 @@ export declare class AutotaggingPipelineResourceComponent extends BaseResourceCo
     private buildRunHistoryRows;
     private buildHistorySourceOptions;
     FilterRunHistory(): void;
+    /**
+     * Filter fields for the Run History section, rendered inside an
+     * `<mj-filter-popover>` (Section 3 decision tree: many values, single-select
+     * → popover with dropdown).
+     */
+    get historyFilterFields(): FilterFieldConfig[];
+    get historyFilterValues(): Record<string, unknown>;
+    get historyActiveFilterCount(): number;
+    onHistoryFilterChange(values: Record<string, unknown>): void;
+    onHistoryFilterReset(): void;
     /**
      * D3/D8: Open the detail view for a specific run, loading ContentProcessRunDetail records.
      */
@@ -795,6 +819,10 @@ export declare class AutotaggingPipelineResourceComponent extends BaseResourceCo
     private loadRunHistoryForSource;
     private resolveEmbeddingModelName;
     private resolveVectorIndexName;
+    /** Taxonomy sub-tabs as `TabConfig[]` for `<mj-tab-nav>`. */
+    get taxSubTabsConfig(): TabConfig[];
+    /** Adapter for `<mj-tab-nav>`'s string-typed `(TabChange)` output. */
+    onTaxSubTabChange(key: string): void;
     SwitchTaxSubTab(sub: TaxonomySubTab): void;
     /**
      * Loads all data needed by the Taxonomy Governance sub-tabs: