@memberjunction/ng-dashboards 2.117.0 → 2.118.0

package/dist/Testing/components/testing-analytics.component.js

@@ -0,0 +1,746 @@
+import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
+import { Subject } from 'rxjs';
+import { takeUntil, map } from 'rxjs/operators';
+import * as i0 from "@angular/core";
+import * as i1 from "../services/testing-instrumentation.service";
+import * as i2 from "@angular/forms";
+import * as i3 from "@angular/common";
+const _forTrack0 = ($index, $item) => $item.days;
+const _forTrack1 = ($index, $item) => $item.testName;
+const _forTrack2 = ($index, $item) => $item.label;
+const _c0 = () => [];
+function TestingAnalyticsComponent_For_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 6);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const range_r1 = ctx.$implicit;
+    i0.ɵɵproperty("value", range_r1.days);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(range_r1.label);
+} }
+function TestingAnalyticsComponent_For_20_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 13)(1, "div", 41)(2, "span", 42);
+    i0.ɵɵtext(3);
+    i0.ɵɵpipe(4, "date");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "span", 43);
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(7, "div", 44)(8, "div", 45);
+    i0.ɵɵelement(9, "i", 46);
+    i0.ɵɵelementStart(10, "span");
+    i0.ɵɵtext(11);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(12, "div", 47);
+    i0.ɵɵelement(13, "i", 48);
+    i0.ɵɵelementStart(14, "span");
+    i0.ɵɵtext(15);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(16, "div", 49);
+    i0.ɵɵelement(17, "i", 50);
+    i0.ɵɵelementStart(18, "span");
+    i0.ɵɵtext(19);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(20, "div", 51);
+    i0.ɵɵelement(21, "div", 52)(22, "div", 53)(23, "div", 54);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(24, "div", 55)(25, "span", 56);
+    i0.ɵɵtext(26);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(27, "span", 57);
+    i0.ɵɵtext(28);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const trend_r2 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(4, 19, trend_r2.timestamp, "short"));
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1("", trend_r2.totalRuns, " runs");
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(trend_r2.passed);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(trend_r2.failed);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(trend_r2.skipped);
+    i0.ɵɵadvance(2);
+    i0.ɵɵstyleProp("width", ctx_r2.calculatePassRate(trend_r2), "%");
+    i0.ɵɵadvance();
+    i0.ɵɵstyleProp("width", ctx_r2.calculateFailRate(trend_r2), "%");
+    i0.ɵɵadvance();
+    i0.ɵɵstyleProp("width", ctx_r2.calculateSkipRate(trend_r2), "%");
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("good", ctx_r2.calculatePassRate(trend_r2) >= 80)("warning", ctx_r2.calculatePassRate(trend_r2) >= 60 && ctx_r2.calculatePassRate(trend_r2) < 80)("poor", ctx_r2.calculatePassRate(trend_r2) < 60);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.calculatePassRate(trend_r2).toFixed(1), "% pass rate ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("$", trend_r2.totalCost.toFixed(2), "");
+} }
+function TestingAnalyticsComponent_For_30_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 19)(1, "div", 58)(2, "div", 59);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 60);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(6, "div", 61)(7, "div", 62);
+    i0.ɵɵelement(8, "div", 63);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const test_r4 = ctx.$implicit;
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(test_r4.testName);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate2("", test_r4.failureCount, " failures \u2022 ", test_r4.failureRate.toFixed(1), "% fail rate");
+    i0.ɵɵadvance(3);
+    i0.ɵɵstyleProp("width", test_r4.failureRate, "%");
+} }
+function TestingAnalyticsComponent_ForEmpty_31_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 20);
+    i0.ɵɵelement(1, "i", 46);
+    i0.ɵɵelementStart(2, "p");
+    i0.ɵɵtext(3, "No failing tests!");
+    i0.ɵɵelementEnd()();
+} }
+function TestingAnalyticsComponent_For_40_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 19)(1, "div", 58)(2, "div", 59);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 60);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(6, "div", 61)(7, "div", 64);
+    i0.ɵɵtext(8);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const test_r5 = ctx.$implicit;
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(test_r5.testName);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("avg $", test_r5.avgCost.toFixed(4), "");
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1("$", test_r5.totalCost.toFixed(2), "");
+} }
+function TestingAnalyticsComponent_ForEmpty_41_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 20);
+    i0.ɵɵelement(1, "i", 21);
+    i0.ɵɵelementStart(2, "p");
+    i0.ɵɵtext(3, "No test data");
+    i0.ɵɵelementEnd()();
+} }
+function TestingAnalyticsComponent_For_50_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 19)(1, "div", 58)(2, "div", 59);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 60);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(6, "div", 61)(7, "div", 65);
+    i0.ɵɵtext(8);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const test_r6 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(test_r6.testName);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("avg ", ctx_r2.formatDuration(test_r6.avgDuration), "");
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r2.formatDuration(test_r6.maxDuration));
+} }
+function TestingAnalyticsComponent_ForEmpty_51_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 20);
+    i0.ɵɵelement(1, "i", 22);
+    i0.ɵɵelementStart(2, "p");
+    i0.ɵɵtext(3, "No test data");
+    i0.ɵɵelementEnd()();
+} }
+function TestingAnalyticsComponent_For_61_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 25)(1, "div", 66);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 67);
+    i0.ɵɵelement(4, "div", 68);
+    i0.ɵɵelementStart(5, "span", 69);
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(7, "div", 70);
+    i0.ɵɵtext(8);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const bucket_r7 = ctx.$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(bucket_r7.label);
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassMap(bucket_r7.class);
+    i0.ɵɵstyleProp("width", bucket_r7.percentage, "%");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(bucket_r7.count);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("", bucket_r7.percentage.toFixed(1), "%");
+} }
+export class TestingAnalyticsComponent {
+    instrumentationService;
+    cdr;
+    initialState;
+    stateChange = new EventEmitter();
+    destroy$ = new Subject();
+    selectedTimeRange = 30;
+    timeRanges = [
+        { label: '7 Days', days: 7 },
+        { label: '30 Days', days: 30 },
+        { label: '90 Days', days: 90 }
+    ];
+    trends$;
+    topFailingTests$;
+    expensiveTests$;
+    slowestTests$;
+    scoreDistribution$;
+    totalCost$;
+    avgCostPerTest$;
+    avgCostPerRun$;
+    projectedMonthlyCost$;
+    avgExecutionTime$;
+    throughput$;
+    reliabilityScore$;
+    constructor(instrumentationService, cdr) {
+        this.instrumentationService = instrumentationService;
+        this.cdr = cdr;
+    }
+    ngOnInit() {
+        this.setupObservables();
+        if (this.initialState?.selectedTimeRange) {
+            this.selectedTimeRange = this.initialState.selectedTimeRange;
+        }
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    setupObservables() {
+        this.trends$ = this.instrumentationService.trends$;
+        const analytics$ = this.instrumentationService.analytics$;
+        this.topFailingTests$ = analytics$.pipe(map(analytics => analytics.topFailingTests), takeUntil(this.destroy$));
+        this.expensiveTests$ = analytics$.pipe(map(analytics => analytics.mostExpensiveTests), takeUntil(this.destroy$));
+        this.slowestTests$ = analytics$.pipe(map(analytics => analytics.slowestTests), takeUntil(this.destroy$));
+        this.scoreDistribution$ = this.instrumentationService.testRuns$.pipe(map(runs => {
+            const buckets = [
+                { label: 'Excellent (≥0.9)', min: 0.9, max: 1.0, class: 'excellent', count: 0 },
+                { label: 'Good (0.8-0.9)', min: 0.8, max: 0.9, class: 'good', count: 0 },
+                { label: 'Fair (0.6-0.8)', min: 0.6, max: 0.8, class: 'fair', count: 0 },
+                { label: 'Poor (0.4-0.6)', min: 0.4, max: 0.6, class: 'poor', count: 0 },
+                { label: 'Fail (<0.4)', min: 0, max: 0.4, class: 'fail', count: 0 }
+            ];
+            runs.forEach(run => {
+                const bucket = buckets.find(b => run.score >= b.min && run.score < b.max);
+                if (bucket)
+                    bucket.count++;
+            });
+            const total = runs.length || 1;
+            return buckets.map(b => ({
+                ...b,
+                percentage: (b.count / total) * 100
+            }));
+        }), takeUntil(this.destroy$));
+        this.totalCost$ = this.instrumentationService.testRuns$.pipe(map(runs => runs.reduce((sum, r) => sum + r.cost, 0)));
+        this.avgCostPerTest$ = this.instrumentationService.testRuns$.pipe(map(runs => {
+            if (runs.length === 0)
+                return 0;
+            const totalCost = runs.reduce((sum, r) => sum + r.cost, 0);
+            const uniqueTests = new Set(runs.map(r => r.testName)).size;
+            return uniqueTests > 0 ? totalCost / uniqueTests : 0;
+        }));
+        this.avgCostPerRun$ = this.instrumentationService.testRuns$.pipe(map(runs => {
+            if (runs.length === 0)
+                return 0;
+            const totalCost = runs.reduce((sum, r) => sum + r.cost, 0);
+            return totalCost / runs.length;
+        }));
+        this.projectedMonthlyCost$ = this.instrumentationService.testRuns$.pipe(map(runs => {
+            if (runs.length === 0)
+                return 0;
+            const totalCost = runs.reduce((sum, r) => sum + r.cost, 0);
+            const daysInPeriod = this.selectedTimeRange;
+            return (totalCost / daysInPeriod) * 30;
+        }));
+        this.avgExecutionTime$ = this.instrumentationService.testRuns$.pipe(map(runs => {
+            if (runs.length === 0)
+                return 0;
+            const totalDuration = runs.reduce((sum, r) => sum + r.duration, 0);
+            return totalDuration / runs.length;
+        }));
+        this.throughput$ = this.instrumentationService.testRuns$.pipe(map(runs => {
+            const daysInPeriod = this.selectedTimeRange;
+            return runs.length / daysInPeriod;
+        }));
+        this.reliabilityScore$ = this.instrumentationService.testRuns$.pipe(map(runs => {
+            if (runs.length === 0)
+                return 0;
+            const passed = runs.filter(r => r.status === 'Passed').length;
+            return (passed / runs.length) * 100;
+        }));
+    }
+    onTimeRangeChange() {
+        const days = this.selectedTimeRange;
+        const end = new Date();
+        const start = new Date(end.getTime() - days * 24 * 60 * 60 * 1000);
+        this.instrumentationService.setDateRange(start, end);
+        this.emitStateChange();
+    }
+    refresh() {
+        this.instrumentationService.refresh();
+    }
+    formatDuration(milliseconds) {
+        if (milliseconds < 1000)
+            return `${milliseconds}ms`;
+        const seconds = Math.floor(milliseconds / 1000);
+        const minutes = Math.floor(seconds / 60);
+        if (minutes > 0)
+            return `${minutes}m ${seconds % 60}s`;
+        return `${seconds}s`;
+    }
+    calculatePassRate(trend) {
+        if (trend.totalRuns === 0)
+            return 0;
+        return (trend.passed / trend.totalRuns) * 100;
+    }
+    calculateFailRate(trend) {
+        if (trend.totalRuns === 0)
+            return 0;
+        return (trend.failed / trend.totalRuns) * 100;
+    }
+    calculateSkipRate(trend) {
+        if (trend.totalRuns === 0)
+            return 0;
+        return (trend.skipped / trend.totalRuns) * 100;
+    }
+    emitStateChange() {
+        this.stateChange.emit({
+            selectedTimeRange: this.selectedTimeRange
+        });
+    }
+    static ɵfac = function TestingAnalyticsComponent_Factory(t) { return new (t || TestingAnalyticsComponent)(i0.ɵɵdirectiveInject(i1.TestingInstrumentationService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TestingAnalyticsComponent, selectors: [["app-testing-analytics"]], inputs: { initialState: "initialState" }, outputs: { stateChange: "stateChange" }, decls: 134, vars: 57, consts: [[1, "testing-analytics"], [1, "analytics-header"], [1, "header-left"], [1, "fa-solid", "fa-chart-bar"], [1, "header-actions"], [1, "time-range-select", 3, "ngModelChange", "change", "ngModel"], [3, "value"], [1, "action-btn", 3, "click"], [1, "fa-solid", "fa-refresh"], [1, "analytics-section"], [1, "section-header"], [1, "fa-solid", "fa-chart-line"], [1, "trends-grid"], [1, "trend-card"], [1, "analytics-grid"], [1, "analytics-card"], [1, "card-header"], [1, "fa-solid", "fa-exclamation-triangle"], [1, "card-content"], [1, "analytics-row"], [1, "empty-state"], [1, "fa-solid", "fa-dollar-sign"], [1, "fa-solid", "fa-clock"], [1, "fa-solid", "fa-chart-pie"], [1, "score-distribution"], [1, "score-bucket"], [1, "fa-solid", "fa-wallet"], [1, "cost-summary"], [1, "cost-item", "total"], [1, "cost-label"], [1, "cost-amount"], [1, "cost-item"], [1, "fa-solid", "fa-gauge"], [1, "performance-metrics"], [1, "perf-metric"], [1, "perf-icon"], [1, "fa-solid", "fa-bolt"], [1, "perf-content"], [1, "perf-value"], [1, "perf-label"], [1, "fa-solid", "fa-check-double"], [1, "trend-header"], [1, "trend-date"], [1, "trend-total"], [1, "trend-metrics"], [1, "metric", "passed"], [1, "fa-solid", "fa-check-circle"], [1, "metric", "failed"], [1, "fa-solid", "fa-times-circle"], [1, "metric", "skipped"], [1, "fa-solid", "fa-minus-circle"], [1, "trend-chart"], [1, "chart-bar", "passed"], [1, "chart-bar", "failed"], [1, "chart-bar", "skipped"], [1, "trend-footer"], [1, "pass-rate"], [1, "cost"], [1, "row-info"], [1, "row-name"], [1, "row-meta"], [1, "row-metrics"], [1, "fail-bar-container"], [1, "fail-bar"], [1, "cost-value"], [1, "duration-value"], [1, "bucket-label"], [1, "bucket-bar-container"], [1, "bucket-bar"], [1, "bucket-count"], [1, "bucket-percentage"]], template: function TestingAnalyticsComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "h2");
+            i0.ɵɵelement(4, "i", 3);
+            i0.ɵɵtext(5, " Testing Analytics ");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(6, "div", 4)(7, "select", 5);
+            i0.ɵɵtwoWayListener("ngModelChange", function TestingAnalyticsComponent_Template_select_ngModelChange_7_listener($event) { i0.ɵɵtwoWayBindingSet(ctx.selectedTimeRange, $event) || (ctx.selectedTimeRange = $event); return $event; });
+            i0.ɵɵlistener("change", function TestingAnalyticsComponent_Template_select_change_7_listener() { return ctx.onTimeRangeChange(); });
+            i0.ɵɵrepeaterCreate(8, TestingAnalyticsComponent_For_9_Template, 2, 2, "option", 6, _forTrack0);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(10, "button", 7);
+            i0.ɵɵlistener("click", function TestingAnalyticsComponent_Template_button_click_10_listener() { return ctx.refresh(); });
+            i0.ɵɵelement(11, "i", 8);
+            i0.ɵɵtext(12, " Refresh ");
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(13, "div", 9)(14, "div", 10)(15, "h3");
+            i0.ɵɵelement(16, "i", 11);
+            i0.ɵɵtext(17, " Test Execution Trends ");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(18, "div", 12);
+            i0.ɵɵrepeaterCreate(19, TestingAnalyticsComponent_For_20_Template, 29, 22, "div", 13, i0.ɵɵrepeaterTrackByIndex);
+            i0.ɵɵpipe(21, "async");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(22, "div", 14)(23, "div", 15)(24, "div", 16)(25, "h4");
+            i0.ɵɵelement(26, "i", 17);
+            i0.ɵɵtext(27, " Top Failing Tests ");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(28, "div", 18);
+            i0.ɵɵrepeaterCreate(29, TestingAnalyticsComponent_For_30_Template, 9, 5, "div", 19, _forTrack1, false, TestingAnalyticsComponent_ForEmpty_31_Template, 4, 0, "div", 20);
+            i0.ɵɵpipe(32, "async");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(33, "div", 15)(34, "div", 16)(35, "h4");
+            i0.ɵɵelement(36, "i", 21);
+            i0.ɵɵtext(37, " Most Expensive Tests ");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(38, "div", 18);
+            i0.ɵɵrepeaterCreate(39, TestingAnalyticsComponent_For_40_Template, 9, 3, "div", 19, _forTrack1, false, TestingAnalyticsComponent_ForEmpty_41_Template, 4, 0, "div", 20);
+            i0.ɵɵpipe(42, "async");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(43, "div", 15)(44, "div", 16)(45, "h4");
+            i0.ɵɵelement(46, "i", 22);
+            i0.ɵɵtext(47, " Slowest Tests ");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(48, "div", 18);
+            i0.ɵɵrepeaterCreate(49, TestingAnalyticsComponent_For_50_Template, 9, 3, "div", 19, _forTrack1, false, TestingAnalyticsComponent_ForEmpty_51_Template, 4, 0, "div", 20);
+            i0.ɵɵpipe(52, "async");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(53, "div", 15)(54, "div", 16)(55, "h4");
+            i0.ɵɵelement(56, "i", 23);
+            i0.ɵɵtext(57, " Score Distribution ");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(58, "div", 18)(59, "div", 24);
+            i0.ɵɵrepeaterCreate(60, TestingAnalyticsComponent_For_61_Template, 9, 7, "div", 25, _forTrack2);
+            i0.ɵɵpipe(62, "async");
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(63, "div", 15)(64, "div", 16)(65, "h4");
+            i0.ɵɵelement(66, "i", 26);
+            i0.ɵɵtext(67, " Cost Breakdown ");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(68, "div", 18)(69, "div", 27)(70, "div", 28)(71, "span", 29);
+            i0.ɵɵtext(72, "Total Cost");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(73, "span", 30);
+            i0.ɵɵtext(74);
+            i0.ɵɵpipe(75, "async");
+            i0.ɵɵpipe(76, "number");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(77, "div", 31)(78, "span", 29);
+            i0.ɵɵtext(79, "Avg per Test");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(80, "span", 30);
+            i0.ɵɵtext(81);
+            i0.ɵɵpipe(82, "async");
+            i0.ɵɵpipe(83, "number");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(84, "div", 31)(85, "span", 29);
+            i0.ɵɵtext(86, "Avg per Run");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(87, "span", 30);
+            i0.ɵɵtext(88);
+            i0.ɵɵpipe(89, "async");
+            i0.ɵɵpipe(90, "number");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(91, "div", 31)(92, "span", 29);
+            i0.ɵɵtext(93, "Projected Monthly");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(94, "span", 30);
+            i0.ɵɵtext(95);
+            i0.ɵɵpipe(96, "async");
+            i0.ɵɵpipe(97, "number");
+            i0.ɵɵelementEnd()()()()();
+            i0.ɵɵelementStart(98, "div", 15)(99, "div", 16)(100, "h4");
+            i0.ɵɵelement(101, "i", 32);
+            i0.ɵɵtext(102, " Performance Metrics ");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(103, "div", 18)(104, "div", 33)(105, "div", 34)(106, "div", 35);
+            i0.ɵɵelement(107, "i", 36);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(108, "div", 37)(109, "div", 38);
+            i0.ɵɵtext(110);
+            i0.ɵɵpipe(111, "async");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(112, "div", 39);
+            i0.ɵɵtext(113, "Avg Execution Time");
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(114, "div", 34)(115, "div", 35);
+            i0.ɵɵelement(116, "i", 11);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(117, "div", 37)(118, "div", 38);
+            i0.ɵɵtext(119);
+            i0.ɵɵpipe(120, "async");
+            i0.ɵɵpipe(121, "number");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(122, "div", 39);
+            i0.ɵɵtext(123, "Tests per Day");
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(124, "div", 34)(125, "div", 35);
+            i0.ɵɵelement(126, "i", 40);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(127, "div", 37)(128, "div", 38);
+            i0.ɵɵtext(129);
+            i0.ɵɵpipe(130, "async");
+            i0.ɵɵpipe(131, "number");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(132, "div", 39);
+            i0.ɵɵtext(133, "Reliability Score");
+            i0.ɵɵelementEnd()()()()()()()();
+        } if (rf & 2) {
+            let tmp_2_0;
+            let tmp_3_0;
+            let tmp_4_0;
+            let tmp_5_0;
+            i0.ɵɵadvance(7);
+            i0.ɵɵtwoWayProperty("ngModel", ctx.selectedTimeRange);
+            i0.ɵɵadvance();
+            i0.ɵɵrepeater(ctx.timeRanges);
+            i0.ɵɵadvance(11);
+            i0.ɵɵrepeater((tmp_2_0 = i0.ɵɵpipeBind1(21, 11, ctx.trends$)) !== null && tmp_2_0 !== undefined ? tmp_2_0 : i0.ɵɵpureFunction0(53, _c0));
+            i0.ɵɵadvance(10);
+            i0.ɵɵrepeater((tmp_3_0 = i0.ɵɵpipeBind1(32, 13, ctx.topFailingTests$)) !== null && tmp_3_0 !== undefined ? tmp_3_0 : i0.ɵɵpureFunction0(54, _c0));
+            i0.ɵɵadvance(10);
+            i0.ɵɵrepeater((tmp_4_0 = i0.ɵɵpipeBind1(42, 15, ctx.expensiveTests$)) !== null && tmp_4_0 !== undefined ? tmp_4_0 : i0.ɵɵpureFunction0(55, _c0));
+            i0.ɵɵadvance(10);
+            i0.ɵɵrepeater((tmp_5_0 = i0.ɵɵpipeBind1(52, 17, ctx.slowestTests$)) !== null && tmp_5_0 !== undefined ? tmp_5_0 : i0.ɵɵpureFunction0(56, _c0));
+            i0.ɵɵadvance(11);
+            i0.ɵɵrepeater(i0.ɵɵpipeBind1(62, 19, ctx.scoreDistribution$));
+            i0.ɵɵadvance(14);
+            i0.ɵɵtextInterpolate1("$", i0.ɵɵpipeBind2(76, 23, i0.ɵɵpipeBind1(75, 21, ctx.totalCost$) || 0, "1.2-2"), "");
+            i0.ɵɵadvance(7);
+            i0.ɵɵtextInterpolate1("$", i0.ɵɵpipeBind2(83, 28, i0.ɵɵpipeBind1(82, 26, ctx.avgCostPerTest$) || 0, "1.4-4"), "");
+            i0.ɵɵadvance(7);
+            i0.ɵɵtextInterpolate1("$", i0.ɵɵpipeBind2(90, 33, i0.ɵɵpipeBind1(89, 31, ctx.avgCostPerRun$) || 0, "1.4-4"), "");
+            i0.ɵɵadvance(7);
+            i0.ɵɵtextInterpolate1("$", i0.ɵɵpipeBind2(97, 38, i0.ɵɵpipeBind1(96, 36, ctx.projectedMonthlyCost$) || 0, "1.2-2"), "");
+            i0.ɵɵadvance(15);
+            i0.ɵɵtextInterpolate(ctx.formatDuration(i0.ɵɵpipeBind1(111, 41, ctx.avgExecutionTime$) || 0));
+            i0.ɵɵadvance(9);
+            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(121, 45, i0.ɵɵpipeBind1(120, 43, ctx.throughput$) || 0, "1.1-1"));
+            i0.ɵɵadvance(10);
+            i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind2(131, 50, i0.ɵɵpipeBind1(130, 48, ctx.reliabilityScore$) || 0, "1.1-1"), "%");
+        } }, dependencies: [i2.NgSelectOption, i2.ɵNgSelectMultipleOption, i2.SelectControlValueAccessor, i2.NgControlStatus, i2.NgModel, i3.AsyncPipe, i3.DecimalPipe, i3.DatePipe], styles: [".testing-analytics[_ngcontent-%COMP%] {\n      padding: 20px;\n      height: 100%;\n      overflow-y: auto;\n      background: #f8f9fa;\n    }\n\n    .analytics-header[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 24px;\n      background: white;\n      padding: 20px;\n      border-radius: 8px;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n    }\n\n    .header-left[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 20px;\n      font-weight: 600;\n      color: #333;\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .header-left[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      color: #2196f3;\n    }\n\n    .header-actions[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 12px;\n      align-items: center;\n    }\n\n    .time-range-select[_ngcontent-%COMP%] {\n      padding: 8px 12px;\n      border: 1px solid #ddd;\n      border-radius: 4px;\n      font-size: 13px;\n      background: white;\n      cursor: pointer;\n    }\n\n    .action-btn[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      padding: 8px 16px;\n      border: 1px solid #ddd;\n      border-radius: 4px;\n      background: white;\n      color: #666;\n      font-size: 12px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 0.2s ease;\n    }\n\n    .action-btn[_ngcontent-%COMP%]:hover {\n      background: #f5f5f5;\n    }\n\n    .analytics-section[_ngcontent-%COMP%] {\n      background: white;\n      padding: 20px;\n      border-radius: 8px;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n      margin-bottom: 24px;\n    }\n\n    .section-header[_ngcontent-%COMP%] {\n      margin-bottom: 20px;\n      padding-bottom: 12px;\n      border-bottom: 2px solid #f0f0f0;\n    }\n\n    .section-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 16px;\n      font-weight: 600;\n      color: #333;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .section-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      color: #2196f3;\n    }\n\n    .trends-grid[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\n      gap: 16px;\n    }\n\n    .trend-card[_ngcontent-%COMP%] {\n      background: #f8f9fa;\n      padding: 16px;\n      border-radius: 6px;\n      border: 1px solid #e0e0e0;\n    }\n\n    .trend-header[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 12px;\n    }\n\n    .trend-date[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: #666;\n      font-weight: 600;\n    }\n\n    .trend-total[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: #2196f3;\n      font-weight: 600;\n    }\n\n    .trend-metrics[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 12px;\n      margin-bottom: 12px;\n    }\n\n    .metric[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 4px;\n      font-size: 12px;\n      font-weight: 600;\n    }\n\n    .metric.passed[_ngcontent-%COMP%] {\n      color: #4caf50;\n    }\n\n    .metric.failed[_ngcontent-%COMP%] {\n      color: #f44336;\n    }\n\n    .metric.skipped[_ngcontent-%COMP%] {\n      color: #9e9e9e;\n    }\n\n    .trend-chart[_ngcontent-%COMP%] {\n      display: flex;\n      height: 8px;\n      border-radius: 4px;\n      overflow: hidden;\n      margin-bottom: 12px;\n      background: #e0e0e0;\n    }\n\n    .chart-bar[_ngcontent-%COMP%] {\n      transition: width 0.3s ease;\n    }\n\n    .chart-bar.passed[_ngcontent-%COMP%] {\n      background: #4caf50;\n    }\n\n    .chart-bar.failed[_ngcontent-%COMP%] {\n      background: #f44336;\n    }\n\n    .chart-bar.skipped[_ngcontent-%COMP%] {\n      background: #9e9e9e;\n    }\n\n    .trend-footer[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      font-size: 11px;\n    }\n\n    .pass-rate[_ngcontent-%COMP%] {\n      font-weight: 600;\n      padding: 2px 8px;\n      border-radius: 12px;\n    }\n\n    .pass-rate.good[_ngcontent-%COMP%] {\n      background: #e8f5e9;\n      color: #4caf50;\n    }\n\n    .pass-rate.warning[_ngcontent-%COMP%] {\n      background: #fff3e0;\n      color: #ff9800;\n    }\n\n    .pass-rate.poor[_ngcontent-%COMP%] {\n      background: #ffebee;\n      color: #f44336;\n    }\n\n    .cost[_ngcontent-%COMP%] {\n      color: #666;\n      font-weight: 600;\n    }\n\n    .analytics-grid[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));\n      gap: 20px;\n    }\n\n    .analytics-card[_ngcontent-%COMP%] {\n      background: white;\n      border-radius: 8px;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n      overflow: hidden;\n    }\n\n    .card-header[_ngcontent-%COMP%] {\n      padding: 16px;\n      background: #f8f9fa;\n      border-bottom: 1px solid #e0e0e0;\n    }\n\n    .card-header[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 14px;\n      font-weight: 600;\n      color: #333;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .card-header[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      color: #2196f3;\n    }\n\n    .card-content[_ngcontent-%COMP%] {\n      padding: 16px;\n      max-height: 400px;\n      overflow-y: auto;\n    }\n\n    .analytics-row[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 12px;\n      border-bottom: 1px solid #f0f0f0;\n      transition: background 0.2s ease;\n    }\n\n    .analytics-row[_ngcontent-%COMP%]:hover {\n      background: #f8f9fa;\n    }\n\n    .analytics-row[_ngcontent-%COMP%]:last-child {\n      border-bottom: none;\n    }\n\n    .row-info[_ngcontent-%COMP%] {\n      flex: 1;\n    }\n\n    .row-name[_ngcontent-%COMP%] {\n      font-size: 13px;\n      font-weight: 500;\n      color: #333;\n      margin-bottom: 4px;\n    }\n\n    .row-meta[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: #666;\n    }\n\n    .row-metrics[_ngcontent-%COMP%] {\n      min-width: 120px;\n      text-align: right;\n    }\n\n    .fail-bar-container[_ngcontent-%COMP%] {\n      width: 100px;\n      height: 6px;\n      background: #f0f0f0;\n      border-radius: 3px;\n      overflow: hidden;\n      display: inline-block;\n      vertical-align: middle;\n    }\n\n    .fail-bar[_ngcontent-%COMP%] {\n      height: 100%;\n      background: #f44336;\n      transition: width 0.3s ease;\n    }\n\n    .cost-value[_ngcontent-%COMP%], \n   .duration-value[_ngcontent-%COMP%] {\n      font-size: 13px;\n      font-weight: 600;\n      color: #2196f3;\n    }\n\n    .empty-state[_ngcontent-%COMP%] {\n      text-align: center;\n      padding: 40px 20px;\n      color: #999;\n    }\n\n    .empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 36px;\n      margin-bottom: 12px;\n      opacity: 0.5;\n    }\n\n    .empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n      font-size: 13px;\n      margin: 0;\n    }\n\n    .score-distribution[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 12px;\n    }\n\n    .score-bucket[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: 80px 1fr 60px;\n      gap: 12px;\n      align-items: center;\n    }\n\n    .bucket-label[_ngcontent-%COMP%] {\n      font-size: 12px;\n      font-weight: 600;\n      color: #666;\n    }\n\n    .bucket-bar-container[_ngcontent-%COMP%] {\n      position: relative;\n      height: 24px;\n      background: #f0f0f0;\n      border-radius: 4px;\n      overflow: hidden;\n    }\n\n    .bucket-bar[_ngcontent-%COMP%] {\n      height: 100%;\n      transition: width 0.3s ease;\n      display: flex;\n      align-items: center;\n      padding: 0 8px;\n    }\n\n    .bucket-bar.excellent[_ngcontent-%COMP%] {\n      background: #4caf50;\n    }\n\n    .bucket-bar.good[_ngcontent-%COMP%] {\n      background: #8bc34a;\n    }\n\n    .bucket-bar.fair[_ngcontent-%COMP%] {\n      background: #ff9800;\n    }\n\n    .bucket-bar.poor[_ngcontent-%COMP%] {\n      background: #ff5722;\n    }\n\n    .bucket-bar.fail[_ngcontent-%COMP%] {\n      background: #f44336;\n    }\n\n    .bucket-count[_ngcontent-%COMP%] {\n      font-size: 11px;\n      font-weight: 600;\n      color: white;\n    }\n\n    .bucket-percentage[_ngcontent-%COMP%] {\n      font-size: 12px;\n      font-weight: 600;\n      color: #666;\n      text-align: right;\n    }\n\n    .cost-summary[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 16px;\n    }\n\n    .cost-item[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 12px;\n      background: #f8f9fa;\n      border-radius: 6px;\n    }\n\n    .cost-item.total[_ngcontent-%COMP%] {\n      background: #e3f2fd;\n      border: 2px solid #2196f3;\n    }\n\n    .cost-label[_ngcontent-%COMP%] {\n      font-size: 12px;\n      font-weight: 600;\n      color: #666;\n    }\n\n    .cost-item.total[_ngcontent-%COMP%]   .cost-label[_ngcontent-%COMP%] {\n      color: #2196f3;\n    }\n\n    .cost-amount[_ngcontent-%COMP%] {\n      font-size: 16px;\n      font-weight: 700;\n      color: #333;\n    }\n\n    .cost-item.total[_ngcontent-%COMP%]   .cost-amount[_ngcontent-%COMP%] {\n      color: #2196f3;\n      font-size: 20px;\n    }\n\n    .performance-metrics[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 16px;\n    }\n\n    .perf-metric[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 16px;\n      padding: 12px;\n      background: #f8f9fa;\n      border-radius: 6px;\n    }\n\n    .perf-icon[_ngcontent-%COMP%] {\n      width: 48px;\n      height: 48px;\n      border-radius: 8px;\n      background: #2196f3;\n      color: white;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 20px;\n    }\n\n    .perf-content[_ngcontent-%COMP%] {\n      flex: 1;\n    }\n\n    .perf-value[_ngcontent-%COMP%] {\n      font-size: 20px;\n      font-weight: 700;\n      color: #333;\n      line-height: 1;\n      margin-bottom: 4px;\n    }\n\n    .perf-label[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: #666;\n      font-weight: 600;\n      text-transform: uppercase;\n    }\n\n    @media (max-width: 1200px) {\n      .analytics-grid[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n      }\n    }"], changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TestingAnalyticsComponent, [{
+        type: Component,
+        args: [{ selector: 'app-testing-analytics', changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="testing-analytics">
+      <div class="analytics-header">
+        <div class="header-left">
+          <h2>
+            <i class="fa-solid fa-chart-bar"></i>
+            Testing Analytics
+          </h2>
+        </div>
+        <div class="header-actions">
+          <select [(ngModel)]="selectedTimeRange" (change)="onTimeRangeChange()" class="time-range-select">
+            @for (range of timeRanges; track range.days) {
+              <option [value]="range.days">{{ range.label }}</option>
+            }
+          </select>
+          <button class="action-btn" (click)="refresh()">
+            <i class="fa-solid fa-refresh"></i>
+            Refresh
+          </button>
+        </div>
+      </div>
+
+      <!-- Trend Overview -->
+      <div class="analytics-section">
+        <div class="section-header">
+          <h3>
+            <i class="fa-solid fa-chart-line"></i>
+            Test Execution Trends
+          </h3>
+        </div>
+        <div class="trends-grid">
+          @for (trend of (trends$ | async) ?? []; track $index) {
+            <div class="trend-card">
+              <div class="trend-header">
+                <span class="trend-date">{{ trend.timestamp | date:'short' }}</span>
+                <span class="trend-total">{{ trend.totalRuns }} runs</span>
+              </div>
+              <div class="trend-metrics">
+                <div class="metric passed">
+                  <i class="fa-solid fa-check-circle"></i>
+                  <span>{{ trend.passed }}</span>
+                </div>
+                <div class="metric failed">
+                  <i class="fa-solid fa-times-circle"></i>
+                  <span>{{ trend.failed }}</span>
+                </div>
+                <div class="metric skipped">
+                  <i class="fa-solid fa-minus-circle"></i>
+                  <span>{{ trend.skipped }}</span>
+                </div>
+              </div>
+              <div class="trend-chart">
+                <div class="chart-bar passed" [style.width.%]="calculatePassRate(trend)"></div>
+                <div class="chart-bar failed" [style.width.%]="calculateFailRate(trend)"></div>
+                <div class="chart-bar skipped" [style.width.%]="calculateSkipRate(trend)"></div>
+              </div>
+              <div class="trend-footer">
+                <span class="pass-rate" [class.good]="calculatePassRate(trend) >= 80" [class.warning]="calculatePassRate(trend) >= 60 && calculatePassRate(trend) < 80" [class.poor]="calculatePassRate(trend) < 60">
+                  {{ calculatePassRate(trend).toFixed(1) }}% pass rate
+                </span>
+                <span class="cost">\${{ trend.totalCost.toFixed(2) }}</span>
+              </div>
+            </div>
+          }
+        </div>
+      </div>
+
+      <!-- Analytics Grid -->
+      <div class="analytics-grid">
+        <!-- Top Failing Tests -->
+        <div class="analytics-card">
+          <div class="card-header">
+            <h4>
+              <i class="fa-solid fa-exclamation-triangle"></i>
+              Top Failing Tests
+            </h4>
+          </div>
+          <div class="card-content">
+            @for (test of (topFailingTests$ | async) ?? []; track test.testName) {
+              <div class="analytics-row">
+                <div class="row-info">
+                  <div class="row-name">{{ test.testName }}</div>
+                  <div class="row-meta">{{ test.failureCount }} failures • {{ test.failureRate.toFixed(1) }}% fail rate</div>
+                </div>
+                <div class="row-metrics">
+                  <div class="fail-bar-container">
+                    <div class="fail-bar" [style.width.%]="test.failureRate"></div>
+                  </div>
+                </div>
+              </div>
+            } @empty {
+              <div class="empty-state">
+                <i class="fa-solid fa-check-circle"></i>
+                <p>No failing tests!</p>
+              </div>
+            }
+          </div>
+        </div>
+
+        <!-- Most Expensive Tests -->
+        <div class="analytics-card">
+          <div class="card-header">
+            <h4>
+              <i class="fa-solid fa-dollar-sign"></i>
+              Most Expensive Tests
+            </h4>
+          </div>
+          <div class="card-content">
+            @for (test of (expensiveTests$ | async) ?? []; track test.testName) {
+              <div class="analytics-row">
+                <div class="row-info">
+                  <div class="row-name">{{ test.testName }}</div>
+                  <div class="row-meta">avg \${{ test.avgCost.toFixed(4) }}</div>
+                </div>
+                <div class="row-metrics">
+                  <div class="cost-value">\${{ test.totalCost.toFixed(2) }}</div>
+                </div>
+              </div>
+            } @empty {
+              <div class="empty-state">
+                <i class="fa-solid fa-dollar-sign"></i>
+                <p>No test data</p>
+              </div>
+            }
+          </div>
+        </div>
+
+        <!-- Slowest Tests -->
+        <div class="analytics-card">
+          <div class="card-header">
+            <h4>
+              <i class="fa-solid fa-clock"></i>
+              Slowest Tests
+            </h4>
+          </div>
+          <div class="card-content">
+            @for (test of (slowestTests$ | async) ?? []; track test.testName) {
+              <div class="analytics-row">
+                <div class="row-info">
+                  <div class="row-name">{{ test.testName }}</div>
+                  <div class="row-meta">avg {{ formatDuration(test.avgDuration) }}</div>
+                </div>
+                <div class="row-metrics">
+                  <div class="duration-value">{{ formatDuration(test.maxDuration) }}</div>
+                </div>
+              </div>
+            } @empty {
+              <div class="empty-state">
+                <i class="fa-solid fa-clock"></i>
+                <p>No test data</p>
+              </div>
+            }
+          </div>
+        </div>
+
+        <!-- Test Score Distribution -->
+        <div class="analytics-card">
+          <div class="card-header">
+            <h4>
+              <i class="fa-solid fa-chart-pie"></i>
+              Score Distribution
+            </h4>
+          </div>
+          <div class="card-content">
+            <div class="score-distribution">
+              @for (bucket of scoreDistribution$ | async; track bucket.label) {
+                <div class="score-bucket">
+                  <div class="bucket-label">{{ bucket.label }}</div>
+                  <div class="bucket-bar-container">
+                    <div class="bucket-bar" [style.width.%]="bucket.percentage" [class]="bucket.class"></div>
+                    <span class="bucket-count">{{ bucket.count }}</span>
+                  </div>
+                  <div class="bucket-percentage">{{ bucket.percentage.toFixed(1) }}%</div>
+                </div>
+              }
+            </div>
+          </div>
+        </div>
+
+        <!-- Cost Breakdown -->
+        <div class="analytics-card">
+          <div class="card-header">
+            <h4>
+              <i class="fa-solid fa-wallet"></i>
+              Cost Breakdown
+            </h4>
+          </div>
+          <div class="card-content">
+            <div class="cost-summary">
+              <div class="cost-item total">
+                <span class="cost-label">Total Cost</span>
+                <span class="cost-amount">\${{ (totalCost$ | async) || 0 | number:'1.2-2' }}</span>
+              </div>
+              <div class="cost-item">
+                <span class="cost-label">Avg per Test</span>
+                <span class="cost-amount">\${{ (avgCostPerTest$ | async) || 0 | number:'1.4-4' }}</span>
+              </div>
+              <div class="cost-item">
+                <span class="cost-label">Avg per Run</span>
+                <span class="cost-amount">\${{ (avgCostPerRun$ | async) || 0 | number:'1.4-4' }}</span>
+              </div>
+              <div class="cost-item">
+                <span class="cost-label">Projected Monthly</span>
+                <span class="cost-amount">\${{ (projectedMonthlyCost$ | async) || 0 | number:'1.2-2' }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Performance Metrics -->
+        <div class="analytics-card">
+          <div class="card-header">
+            <h4>
+              <i class="fa-solid fa-gauge"></i>
+              Performance Metrics
+            </h4>
+          </div>
+          <div class="card-content">
+            <div class="performance-metrics">
+              <div class="perf-metric">
+                <div class="perf-icon">
+                  <i class="fa-solid fa-bolt"></i>
+                </div>
+                <div class="perf-content">
+                  <div class="perf-value">{{ formatDuration((avgExecutionTime$ | async) || 0) }}</div>
+                  <div class="perf-label">Avg Execution Time</div>
+                </div>
+              </div>
+              <div class="perf-metric">
+                <div class="perf-icon">
+                  <i class="fa-solid fa-chart-line"></i>
+                </div>
+                <div class="perf-content">
+                  <div class="perf-value">{{ (throughput$ | async) || 0 | number:'1.1-1' }}</div>
+                  <div class="perf-label">Tests per Day</div>
+                </div>
+              </div>
+              <div class="perf-metric">
+                <div class="perf-icon">
+                  <i class="fa-solid fa-check-double"></i>
+                </div>
+                <div class="perf-content">
+                  <div class="perf-value">{{ (reliabilityScore$ | async) || 0 | number:'1.1-1' }}%</div>
+                  <div class="perf-label">Reliability Score</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  `, styles: ["\n    .testing-analytics {\n      padding: 20px;\n      height: 100%;\n      overflow-y: auto;\n      background: #f8f9fa;\n    }\n\n    .analytics-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 24px;\n      background: white;\n      padding: 20px;\n      border-radius: 8px;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n    }\n\n    .header-left h2 {\n      margin: 0;\n      font-size: 20px;\n      font-weight: 600;\n      color: #333;\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .header-left h2 i {\n      color: #2196f3;\n    }\n\n    .header-actions {\n      display: flex;\n      gap: 12px;\n      align-items: center;\n    }\n\n    .time-range-select {\n      padding: 8px 12px;\n      border: 1px solid #ddd;\n      border-radius: 4px;\n      font-size: 13px;\n      background: white;\n      cursor: pointer;\n    }\n\n    .action-btn {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      padding: 8px 16px;\n      border: 1px solid #ddd;\n      border-radius: 4px;\n      background: white;\n      color: #666;\n      font-size: 12px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 0.2s ease;\n    }\n\n    .action-btn:hover {\n      background: #f5f5f5;\n    }\n\n    .analytics-section {\n      background: white;\n      padding: 20px;\n      border-radius: 8px;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n      margin-bottom: 24px;\n    }\n\n    .section-header {\n      margin-bottom: 20px;\n      padding-bottom: 12px;\n      border-bottom: 2px solid #f0f0f0;\n    }\n\n    .section-header h3 {\n      margin: 0;\n      font-size: 16px;\n      font-weight: 600;\n      color: #333;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .section-header h3 i {\n      color: #2196f3;\n    }\n\n    .trends-grid {\n      display: grid;\n      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\n      gap: 16px;\n    }\n\n    .trend-card {\n      background: #f8f9fa;\n      padding: 16px;\n      border-radius: 6px;\n      border: 1px solid #e0e0e0;\n    }\n\n    .trend-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 12px;\n    }\n\n    .trend-date {\n      font-size: 11px;\n      color: #666;\n      font-weight: 600;\n    }\n\n    .trend-total {\n      font-size: 11px;\n      color: #2196f3;\n      font-weight: 600;\n    }\n\n    .trend-metrics {\n      display: flex;\n      gap: 12px;\n      margin-bottom: 12px;\n    }\n\n    .metric {\n      display: flex;\n      align-items: center;\n      gap: 4px;\n      font-size: 12px;\n      font-weight: 600;\n    }\n\n    .metric.passed {\n      color: #4caf50;\n    }\n\n    .metric.failed {\n      color: #f44336;\n    }\n\n    .metric.skipped {\n      color: #9e9e9e;\n    }\n\n    .trend-chart {\n      display: flex;\n      height: 8px;\n      border-radius: 4px;\n      overflow: hidden;\n      margin-bottom: 12px;\n      background: #e0e0e0;\n    }\n\n    .chart-bar {\n      transition: width 0.3s ease;\n    }\n\n    .chart-bar.passed {\n      background: #4caf50;\n    }\n\n    .chart-bar.failed {\n      background: #f44336;\n    }\n\n    .chart-bar.skipped {\n      background: #9e9e9e;\n    }\n\n    .trend-footer {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      font-size: 11px;\n    }\n\n    .pass-rate {\n      font-weight: 600;\n      padding: 2px 8px;\n      border-radius: 12px;\n    }\n\n    .pass-rate.good {\n      background: #e8f5e9;\n      color: #4caf50;\n    }\n\n    .pass-rate.warning {\n      background: #fff3e0;\n      color: #ff9800;\n    }\n\n    .pass-rate.poor {\n      background: #ffebee;\n      color: #f44336;\n    }\n\n    .cost {\n      color: #666;\n      font-weight: 600;\n    }\n\n    .analytics-grid {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));\n      gap: 20px;\n    }\n\n    .analytics-card {\n      background: white;\n      border-radius: 8px;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n      overflow: hidden;\n    }\n\n    .card-header {\n      padding: 16px;\n      background: #f8f9fa;\n      border-bottom: 1px solid #e0e0e0;\n    }\n\n    .card-header h4 {\n      margin: 0;\n      font-size: 14px;\n      font-weight: 600;\n      color: #333;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .card-header h4 i {\n      color: #2196f3;\n    }\n\n    .card-content {\n      padding: 16px;\n      max-height: 400px;\n      overflow-y: auto;\n    }\n\n    .analytics-row {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 12px;\n      border-bottom: 1px solid #f0f0f0;\n      transition: background 0.2s ease;\n    }\n\n    .analytics-row:hover {\n      background: #f8f9fa;\n    }\n\n    .analytics-row:last-child {\n      border-bottom: none;\n    }\n\n    .row-info {\n      flex: 1;\n    }\n\n    .row-name {\n      font-size: 13px;\n      font-weight: 500;\n      color: #333;\n      margin-bottom: 4px;\n    }\n\n    .row-meta {\n      font-size: 11px;\n      color: #666;\n    }\n\n    .row-metrics {\n      min-width: 120px;\n      text-align: right;\n    }\n\n    .fail-bar-container {\n      width: 100px;\n      height: 6px;\n      background: #f0f0f0;\n      border-radius: 3px;\n      overflow: hidden;\n      display: inline-block;\n      vertical-align: middle;\n    }\n\n    .fail-bar {\n      height: 100%;\n      background: #f44336;\n      transition: width 0.3s ease;\n    }\n\n    .cost-value,\n    .duration-value {\n      font-size: 13px;\n      font-weight: 600;\n      color: #2196f3;\n    }\n\n    .empty-state {\n      text-align: center;\n      padding: 40px 20px;\n      color: #999;\n    }\n\n    .empty-state i {\n      font-size: 36px;\n      margin-bottom: 12px;\n      opacity: 0.5;\n    }\n\n    .empty-state p {\n      font-size: 13px;\n      margin: 0;\n    }\n\n    .score-distribution {\n      display: flex;\n      flex-direction: column;\n      gap: 12px;\n    }\n\n    .score-bucket {\n      display: grid;\n      grid-template-columns: 80px 1fr 60px;\n      gap: 12px;\n      align-items: center;\n    }\n\n    .bucket-label {\n      font-size: 12px;\n      font-weight: 600;\n      color: #666;\n    }\n\n    .bucket-bar-container {\n      position: relative;\n      height: 24px;\n      background: #f0f0f0;\n      border-radius: 4px;\n      overflow: hidden;\n    }\n\n    .bucket-bar {\n      height: 100%;\n      transition: width 0.3s ease;\n      display: flex;\n      align-items: center;\n      padding: 0 8px;\n    }\n\n    .bucket-bar.excellent {\n      background: #4caf50;\n    }\n\n    .bucket-bar.good {\n      background: #8bc34a;\n    }\n\n    .bucket-bar.fair {\n      background: #ff9800;\n    }\n\n    .bucket-bar.poor {\n      background: #ff5722;\n    }\n\n    .bucket-bar.fail {\n      background: #f44336;\n    }\n\n    .bucket-count {\n      font-size: 11px;\n      font-weight: 600;\n      color: white;\n    }\n\n    .bucket-percentage {\n      font-size: 12px;\n      font-weight: 600;\n      color: #666;\n      text-align: right;\n    }\n\n    .cost-summary {\n      display: flex;\n      flex-direction: column;\n      gap: 16px;\n    }\n\n    .cost-item {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 12px;\n      background: #f8f9fa;\n      border-radius: 6px;\n    }\n\n    .cost-item.total {\n      background: #e3f2fd;\n      border: 2px solid #2196f3;\n    }\n\n    .cost-label {\n      font-size: 12px;\n      font-weight: 600;\n      color: #666;\n    }\n\n    .cost-item.total .cost-label {\n      color: #2196f3;\n    }\n\n    .cost-amount {\n      font-size: 16px;\n      font-weight: 700;\n      color: #333;\n    }\n\n    .cost-item.total .cost-amount {\n      color: #2196f3;\n      font-size: 20px;\n    }\n\n    .performance-metrics {\n      display: flex;\n      flex-direction: column;\n      gap: 16px;\n    }\n\n    .perf-metric {\n      display: flex;\n      align-items: center;\n      gap: 16px;\n      padding: 12px;\n      background: #f8f9fa;\n      border-radius: 6px;\n    }\n\n    .perf-icon {\n      width: 48px;\n      height: 48px;\n      border-radius: 8px;\n      background: #2196f3;\n      color: white;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 20px;\n    }\n\n    .perf-content {\n      flex: 1;\n    }\n\n    .perf-value {\n      font-size: 20px;\n      font-weight: 700;\n      color: #333;\n      line-height: 1;\n      margin-bottom: 4px;\n    }\n\n    .perf-label {\n      font-size: 11px;\n      color: #666;\n      font-weight: 600;\n      text-transform: uppercase;\n    }\n\n    @media (max-width: 1200px) {\n      .analytics-grid {\n        grid-template-columns: 1fr;\n      }\n    }\n  "] }]
+    }], () => [{ type: i1.TestingInstrumentationService }, { type: i0.ChangeDetectorRef }], { initialState: [{
+            type: Input
+        }], stateChange: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TestingAnalyticsComponent, { className: "TestingAnalyticsComponent", filePath: "src/Testing/components/testing-analytics.component.ts", lineNumber: 756 }); })();
+//# sourceMappingURL=testing-analytics.component.js.map