@edvak99/voice-receptionist-widget 1.1.26 → 1.1.29

package/fesm2022/edvak99-voice-receptionist-widget-analytics-page.component-BYnys-zI.mjs

@@ -0,0 +1,462 @@
+import * as i0 from '@angular/core';
+import { inject, signal, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { A as AiReceptionistApiService, T as ToastService, t as triggerBlobDownload, I as IconComponent, f as EdButtonComponent, p as EdIconButtonComponent, g as EdSkeletonComponent } from './edvak99-voice-receptionist-widget-edvak99-voice-receptionist-widget-DOYlRven.mjs';
+
+/** Figma pastel palette for horizontal reason bars */
+const REASON_COLORS = ['#DAB2FF', '#A3B3FF', '#FFA1AD', '#74D4FF', 'rgba(255,32,86,0.2)', '#BBF451', '#FFD230'];
+/** Figma pastel palette for transfer / stuck bars */
+const STUCK_COLORS = ['#DAB2FF', '#A3B3FF', '#74D4FF', '#FFD230'];
+const OUTCOME_FALLBACK_COLORS = ['#DAB2FF', '#A3B3FF', '#FFA1AD'];
+/** Soft violet so Needs Attention stays distinct from the blue segments. */
+const NEEDS_ATTENTION_COLOR = 'rgb(218, 178, 255)';
+function contrastText(color) {
+    const hex = /^#([0-9a-f]{6})$/i.exec(color.trim());
+    if (!hex)
+        return '#1f2328';
+    const value = Number.parseInt(hex[1], 16);
+    const r = (value >> 16) & 255;
+    const g = (value >> 8) & 255;
+    const b = value & 255;
+    const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+    return luminance > 0.62 ? '#1f2328' : '#ffffff';
+}
+class AnalyticsPageComponent {
+    constructor() {
+        this.api = inject(AiReceptionistApiService);
+        this.toast = inject(ToastService);
+        this.data = signal(null);
+        this.range = signal('30d');
+        this.startDate = signal('');
+        this.endDate = signal('');
+        this.loading = signal(true);
+        this.exporting = signal(false);
+        this.kpiSkeletonRows = [0, 1, 2, 3];
+        this.legendSkeletonRows = [0, 1, 2];
+        this.chartRowSkeletonRows = [0, 1, 2, 3, 4];
+        this.peakSkeletonRows = [
+            'h-16',
+            'h-24',
+            'h-20',
+            'h-32',
+            'h-28',
+            'h-36',
+            'h-24',
+            'h-40',
+            'h-28',
+            'h-20',
+            'h-16',
+            'h-12',
+        ];
+        this.chartsReady = signal(false);
+        this.hoveredVolume = signal(null);
+        this.filtersOpen = signal(false);
+        this.ranges = [
+            { id: '7d', label: '7 days' },
+            { id: '30d', label: '30 days' },
+            { id: '90d', label: '90 days' },
+        ];
+        this.impactKpi = computed(() => this.findKpi(/(impact|hours|front-desk|time saved)/i));
+        this.resolutionKpi = computed(() => this.findKpi(/(autonomous|resolution)/i));
+        this.impactSubPrimary = computed(() => {
+            const sub = this.impactKpi()?.sub || 'of front-desk time handled by the AI';
+            const tilde = sub.indexOf('~');
+            if (tilde === -1)
+                return sub;
+            return sub.slice(0, tilde).trim();
+        });
+        this.impactSubSecondary = computed(() => {
+            const sub = this.impactKpi()?.sub || '';
+            const tilde = sub.indexOf('~');
+            if (tilde === -1)
+                return null;
+            return sub.slice(tilde).trim();
+        });
+        this.resolutionTrend = computed(() => {
+            const kpi = this.resolutionKpi();
+            if (!kpi?.delta)
+                return null;
+            const tone = this.deltaTone(kpi);
+            return {
+                delta: kpi.delta.replace(/^[+\s]+/, ''),
+                tone,
+                icon: tone === 'pos' ? 'growth_chart_trend_up' : 'growth_chart_trend_down',
+            };
+        });
+        this.secondaryKpis = computed(() => {
+            const cards = this.data()?.kpiCards ?? [];
+            const preferred = [
+                /appointment/i,
+                /task/i,
+                /patient|registr/i,
+                /calls?\s*handled|total\s*calls|^calls$/i,
+            ];
+            const picked = [];
+            for (const re of preferred) {
+                const hit = cards.find((c) => re.test(c.label) && !picked.includes(c));
+                if (hit)
+                    picked.push(hit);
+            }
+            const list = picked.length >= 4
+                ? picked.slice(0, 4)
+                : [
+                    ...picked,
+                    ...cards.filter((c) => !picked.includes(c) &&
+                        !/(impact|hours|front-desk|autonomous|resolution)/i.test(c.label)),
+                ].slice(0, 4);
+            return list.map((kpi) => {
+                const tone = this.deltaTone(kpi);
+                return {
+                    label: kpi.label,
+                    value: kpi.value,
+                    sub: kpi.sub,
+                    delta: kpi.delta ? kpi.delta.replace(/^[+\s]+/, '') : undefined,
+                    tone,
+                    trendIcon: tone === 'pos' ? 'growth_chart_trend_up' : 'growth_chart_trend_down',
+                };
+            });
+        });
+        this.distribution = computed(() => {
+            const outcomes = this.data()?.outcomes ?? [];
+            const total = outcomes.reduce((s, o) => s + o.value, 0) || 1;
+            return outcomes.map((o, i) => {
+                const width = (o.value / total) * 100;
+                const calls = this.estimatedCalls(o.value);
+                const color = /needs\s*attention/i.test(o.label)
+                    ? NEEDS_ATTENTION_COLOR
+                    : o.color || OUTCOME_FALLBACK_COLORS[i % OUTCOME_FALLBACK_COLORS.length];
+                return {
+                    ...o,
+                    color,
+                    textColor: contrastText(color),
+                    pct: Math.round(width),
+                    width,
+                    tooltip: `${o.label}: ${o.value}% (${calls.toLocaleString()} calls)`,
+                    callsText: `${calls.toLocaleString()} calls`,
+                };
+            });
+        });
+        this.totalCallsLabel = computed(() => {
+            const handled = this.findKpi(/calls?\s*handled|total\s*calls|^calls$/i);
+            if (handled?.value)
+                return handled.value.includes('Call') ? handled.value : `${handled.value} Calls`;
+            const n = this.data()?.kpis.totalCalls;
+            return n ? `${n.toLocaleString()} Calls` : 'Calls';
+        });
+        this.directionSub = computed(() => {
+            const handled = this.findKpi(/calls?\s*handled|total\s*calls|^calls$/i);
+            if (handled?.sub && /inbound|outbound/i.test(handled.sub))
+                return handled.sub;
+            return null;
+        });
+        this.volumePoints = computed(() => this.data()?.volume.points ?? []);
+        this.volumeTotalPath = computed(() => this.buildVolumePath('total'));
+        this.volumeInboundPath = computed(() => this.buildVolumePath('inbound'));
+        this.volumeOutboundPath = computed(() => this.buildVolumePath('outbound'));
+        this.volumeAreaPath = computed(() => {
+            const line = this.volumeTotalPath();
+            if (!line)
+                return '';
+            return `${line} L100,100 L0,100 Z`;
+        });
+        this.volumePointVms = computed(() => this.volumePoints().map((point) => ({
+            trackKey: point.date || point.label,
+            tooltip: this.volumeTooltip(point),
+        })));
+        this.reasonRows = computed(() => {
+            const items = this.data()?.reasons ?? [];
+            const max = Math.max(...items.map((i) => i.value), 1);
+            return items.map((item, i) => ({
+                label: item.label,
+                value: item.value,
+                widthPct: (item.value / max) * 100,
+                color: REASON_COLORS[i % REASON_COLORS.length],
+                tooltip: `${item.label}: ${item.value}%`,
+                delayMs: i * 40,
+            }));
+        });
+        this.transferRows = computed(() => {
+            const items = this.data()?.transfers ?? [];
+            const max = Math.max(...items.map((i) => i.value), 1);
+            return items.map((item, i) => ({
+                label: item.label,
+                value: item.value,
+                widthPct: (item.value / max) * 100,
+                color: STUCK_COLORS[i % STUCK_COLORS.length],
+                tooltip: `${item.label}: ${item.value}%`,
+                delayMs: i * 40,
+            }));
+        });
+        this.peakRows = computed(() => {
+            const points = this.data()?.peakHours.points ?? [];
+            const max = Math.max(...points.map((p) => p.count), 1);
+            return points.map((point, i) => ({
+                hour: point.hour,
+                label: point.label,
+                heightPct: point.count <= 0 ? 0 : (point.count / max) * 100,
+                tooltip: `${point.label}: ${point.count} call${point.count === 1 ? '' : 's'}`,
+                showLabel: this.showPeakAxisLabel(i, points.length),
+                delayMs: i * 18,
+            }));
+        });
+        /** Human date span for the selected analytics window (month + year included). */
+        this.periodLabel = computed(() => {
+            const customStart = this.parseIsoDate(this.startDate());
+            const customEnd = this.parseIsoDate(this.endDate());
+            if (customStart && customEnd)
+                return this.formatPeriodRange(customStart, customEnd);
+            const vol = this.data()?.volume;
+            const start = this.parseIsoDate(vol?.startDate) ?? this.parseIsoDate(vol?.points?.[0]?.date) ?? null;
+            const end = this.parseIsoDate(vol?.endDate) ??
+                this.parseIsoDate(vol?.points?.[vol.points.length - 1]?.date) ??
+                null;
+            if (start && end)
+                return this.formatPeriodRange(start, end);
+            const days = this.range() === '7d' ? 7 : this.range() === '90d' ? 90 : 30;
+            const endD = new Date();
+            const startD = new Date();
+            startD.setDate(endD.getDate() - (days - 1));
+            return this.formatPeriodRange(startD, endD);
+        });
+        this.volumeAxisLabels = computed(() => {
+            const points = this.volumePoints();
+            return points.map((p, i) => this.volumeAxisLabel(p, i, points.length));
+        });
+    }
+    ngOnInit() {
+        this.applyPresetDates(this.range());
+        this.load();
+    }
+    toggleFilters(event) {
+        event?.stopPropagation();
+        this.filtersOpen.update((open) => !open);
+    }
+    closeFilters() {
+        this.filtersOpen.set(false);
+    }
+    onFiltersDocClick(event) {
+        const target = event.target;
+        if (!target?.closest('[data-analytics-filters]')) {
+            this.filtersOpen.set(false);
+        }
+    }
+    setRange(id) {
+        this.range.set(id);
+        this.applyPresetDates(id);
+    }
+    onStartDate(value) {
+        this.startDate.set(value);
+        this.range.set('custom');
+    }
+    onEndDate(value) {
+        this.endDate.set(value);
+        this.range.set('custom');
+    }
+    applyFilters() {
+        this.load();
+    }
+    resetFilters() {
+        this.range.set('30d');
+        this.applyPresetDates('30d');
+        this.load();
+    }
+    exportCsv() {
+        if (this.exporting())
+            return;
+        this.exporting.set(true);
+        this.api.exportAnalyticsCsv(this.activeFilters()).subscribe({
+            next: ({ blob, filename }) => {
+                triggerBlobDownload(blob, filename);
+                this.exporting.set(false);
+                this.toast.show('Export downloaded', 'success');
+            },
+            error: (err) => {
+                this.exporting.set(false);
+                this.toast.show(err.message ?? 'Failed to export CSV', 'error');
+            },
+        });
+    }
+    onVolumeEnter(index) {
+        this.hoveredVolume.set(index);
+    }
+    onVolumeLeave() {
+        this.hoveredVolume.set(null);
+    }
+    buildVolumePath(series) {
+        const points = this.volumePoints();
+        if (!points.length)
+            return '';
+        const max = Math.max(...points.map((p) => Math.max(p.count, p.inbound ?? 0, p.outbound ?? 0)), 1);
+        const w = 100;
+        const h = 100;
+        const step = points.length === 1 ? 0 : w / (points.length - 1);
+        return points
+            .map((p, i) => {
+            const yVal = series === 'inbound'
+                ? (p.inbound ?? Math.round(p.count * 0.8))
+                : series === 'outbound'
+                    ? (p.outbound ?? Math.round(p.count * 0.2))
+                    : p.count;
+            const x = i * step;
+            const y = h - (yVal / max) * h;
+            return `${i === 0 ? 'M' : 'L'}${x.toFixed(2)},${y.toFixed(2)}`;
+        })
+            .join(' ');
+    }
+    volumeTooltip(point) {
+        const inbound = point.inbound ?? Math.round(point.count * 0.8);
+        const outbound = point.outbound ?? Math.max(0, point.count - inbound);
+        const headline = this.volumePointHeadline(point);
+        return `${headline}\nTotal ${point.count} · In ${inbound} · Out ${outbound}`;
+    }
+    showPeakAxisLabel(index, total) {
+        if (total <= 12)
+            return true;
+        const hour = this.data()?.peakHours.points[index]?.hour;
+        if (hour != null && [9, 12, 15, 18, 21].includes(hour))
+            return true;
+        const step = total <= 24 ? 3 : 4;
+        return index % step === 0 || index === total - 1;
+    }
+    volumeAxisLabel(point, index, total) {
+        if (/week/i.test(point.day) || /week/i.test(point.label)) {
+            if (total > 10 && index % 2 !== 0 && index !== total - 1)
+                return { top: '', bottom: '' };
+            const raw = (point.day || point.label).replace(/^week\s*/i, '').trim();
+            const crowded = total > 8;
+            const top = crowded ? `W${raw}` : `Week ${raw}`;
+            const month = point.date ? this.formatAxisMonth(point.date, crowded) : '';
+            return { top, bottom: month };
+        }
+        if (point.date) {
+            if (total <= 7)
+                return { top: this.formatChartDate(point.date), bottom: '' };
+            const step = total <= 14 ? 2 : total <= 31 ? 5 : 7;
+            if (index % step !== 0 && index !== total - 1)
+                return { top: '', bottom: '' };
+            return { top: this.formatChartDate(point.date), bottom: '' };
+        }
+        return { top: point.day || point.label, bottom: '' };
+    }
+    formatAxisMonth(date, crowded) {
+        const d = this.parseIsoDate(date);
+        if (!d)
+            return '';
+        const month = d.toLocaleDateString(undefined, { month: 'short' });
+        const year = crowded ? String(d.getFullYear()).slice(2) : String(d.getFullYear());
+        return `${month} ${year}`;
+    }
+    deltaTone(kpi) {
+        if (!kpi?.delta)
+            return 'neutral';
+        if (kpi.tone === 'pos' || kpi.tone === 'warn' || kpi.tone === 'neg')
+            return kpi.tone;
+        if (/^\+/.test(kpi.delta.trim()))
+            return 'pos';
+        if (/^-|−/.test(kpi.delta.trim()))
+            return 'warn';
+        return 'neutral';
+    }
+    formatChartDate(date) {
+        const iso = /^(\d{4})-(\d{2})-(\d{2})/.exec(date.trim());
+        if (iso)
+            return `${iso[2]}/${iso[3]}`;
+        return date;
+    }
+    estimatedCalls(pct) {
+        const total = this.data()?.kpis.totalCalls ?? 0;
+        if (!total)
+            return Math.round(pct);
+        return Math.round((total * pct) / 100);
+    }
+    volumePointHeadline(point) {
+        const raw = (point.label || point.day || '').trim();
+        if (/week/i.test(raw) && point.date) {
+            return `${raw} · ${this.formatMonthYear(point.date)}`;
+        }
+        if (point.date)
+            return this.formatFullChartDate(point.date);
+        return raw || 'Period';
+    }
+    formatMonthYear(date) {
+        const d = this.parseIsoDate(date);
+        if (!d)
+            return '';
+        return d.toLocaleDateString(undefined, { month: 'short', year: 'numeric' });
+    }
+    formatFullChartDate(date) {
+        const d = this.parseIsoDate(date);
+        if (!d)
+            return this.formatChartDate(date);
+        return d.toLocaleDateString(undefined, {
+            month: 'short',
+            day: 'numeric',
+            year: 'numeric',
+        });
+    }
+    formatPeriodRange(start, end) {
+        const sameYear = start.getFullYear() === end.getFullYear();
+        const sameMonth = sameYear && start.getMonth() === end.getMonth();
+        if (sameMonth) {
+            return `${start.toLocaleDateString(undefined, { month: 'short', day: 'numeric' })} – ${end.getDate()}, ${end.getFullYear()}`;
+        }
+        if (sameYear) {
+            return `${start.toLocaleDateString(undefined, { month: 'short', day: 'numeric' })} – ${end.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' })}`;
+        }
+        return `${start.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' })} – ${end.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' })}`;
+    }
+    parseIsoDate(value) {
+        if (!value?.trim())
+            return null;
+        const iso = /^(\d{4})-(\d{2})-(\d{2})/.exec(value.trim());
+        if (iso) {
+            const d = new Date(Number(iso[1]), Number(iso[2]) - 1, Number(iso[3]));
+            return Number.isNaN(d.getTime()) ? null : d;
+        }
+        const d = new Date(value);
+        return Number.isNaN(d.getTime()) ? null : d;
+    }
+    findKpi(re) {
+        return this.data()?.kpiCards.find((c) => re.test(c.label)) ?? null;
+    }
+    activeFilters() {
+        return {
+            range: this.range(),
+            startDate: this.startDate() || undefined,
+            endDate: this.endDate() || undefined,
+        };
+    }
+    applyPresetDates(id) {
+        const days = id === '7d' ? 7 : id === '90d' ? 90 : 30;
+        const end = new Date();
+        const start = new Date();
+        start.setDate(end.getDate() - (days - 1));
+        this.startDate.set(this.toIsoDate(start));
+        this.endDate.set(this.toIsoDate(end));
+    }
+    toIsoDate(d) {
+        const y = d.getFullYear();
+        const m = String(d.getMonth() + 1).padStart(2, '0');
+        const day = String(d.getDate()).padStart(2, '0');
+        return `${y}-${m}-${day}`;
+    }
+    load() {
+        this.loading.set(true);
+        this.chartsReady.set(false);
+        this.hoveredVolume.set(null);
+        this.api.getAnalytics(this.activeFilters()).subscribe(({ data }) => {
+            this.data.set(data);
+            this.loading.set(false);
+            // Next frame so CSS enter animations run after paint.
+            requestAnimationFrame(() => this.chartsReady.set(true));
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AnalyticsPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: AnalyticsPageComponent, isStandalone: true, selector: "eds-analytics-page", host: { classAttribute: "block h-full min-h-0" }, ngImport: i0, template: "<div class=\"flex h-full min-h-0 flex-col overflow-hidden bg-lighter p-base analytics-page\">\r\n  <header class=\"mb-md flex shrink-0 items-start justify-between gap-base\">\r\n    <div class=\"flex flex-col gap-2xs\">\r\n      <h4>Analytics</h4>\r\n      <p class=\"fs-sm text-light\">Call volume, outcomes, and agent performance</p>\r\n    </div>\r\n    <div class=\"flex shrink-0 items-center gap-base\">\r\n      <!--\r\n      <ed-button\r\n        variant=\"default\"\r\n        outline\r\n        size=\"sm\"\r\n        [disabled]=\"exporting()\"\r\n        (click$)=\"exportCsv()\"\r\n      >\r\n        <ed-icon slot=\"prefix\" name=\"download\" [size]=\"16\" />\r\n        Export\r\n      </ed-button>\r\n      -->\r\n      <div\r\n        class=\"relative\"\r\n        data-analytics-filters\r\n        (document:click)=\"onFiltersDocClick($event)\"\r\n      >\r\n        <ed-icon-button\r\n          name=\"filter_alt\"\r\n          label=\"Filters\"\r\n          size=\"md\"\r\n          outline\r\n          allowBubble\r\n          [pressed]=\"filtersOpen()\"\r\n          toggle\r\n          (click$)=\"toggleFilters($event)\"\r\n        />\r\n        @if (filtersOpen()) {\r\n          <div\r\n            class=\"absolute right-0 top-[calc(100%+4px)] z-20 w-[22rem] rounded-md border border-light bg-white shadow-md\"\r\n            role=\"dialog\"\r\n            aria-label=\"Analytics Filter\"\r\n            (click)=\"$event.stopPropagation()\"\r\n          >\r\n            <header class=\"flex items-center justify-between border-b border-light px-base py-sm\">\r\n              <h5 class=\"m-0\">Analytics Filter</h5>\r\n              <ed-icon-button\r\n                name=\"close\"\r\n                size=\"sm\"\r\n                label=\"Close filters\"\r\n                (click$)=\"closeFilters()\"\r\n              />\r\n            </header>\r\n            <section class=\"grid gap-base p-base\">\r\n              <div class=\"grid gap-2xs\">\r\n                <span class=\"fs-xs font-semibold uppercase tracking-wide text-light\">Range</span>\r\n                <div class=\"analytics-page__range-row\" role=\"group\" aria-label=\"Preset range\">\r\n                  @for (r of ranges; track r.id) {\r\n                    <button\r\n                      type=\"button\"\r\n                      class=\"analytics-page__range-btn\"\r\n                      [class.analytics-page__range-btn--active]=\"range() === r.id\"\r\n                      (click)=\"setRange(r.id)\"\r\n                    >\r\n                      {{ r.label }}\r\n                    </button>\r\n                  }\r\n                </div>\r\n              </div>\r\n              <div class=\"grid grid-cols-2 gap-sm\">\r\n                <div class=\"grid gap-2xs\">\r\n                  <label class=\"fs-sm font-semibold text-light\" for=\"analytics-start-date\">From</label>\r\n                  <input\r\n                    id=\"analytics-start-date\"\r\n                    class=\"form-input is-sm w-full\"\r\n                    type=\"date\"\r\n                    [value]=\"startDate()\"\r\n                    [max]=\"endDate() || undefined\"\r\n                    (input)=\"onStartDate($any($event.target).value)\"\r\n                  />\r\n                </div>\r\n                <div class=\"grid gap-2xs\">\r\n                  <label class=\"fs-sm font-semibold text-light\" for=\"analytics-end-date\">To</label>\r\n                  <input\r\n                    id=\"analytics-end-date\"\r\n                    class=\"form-input is-sm w-full\"\r\n                    type=\"date\"\r\n                    [value]=\"endDate()\"\r\n                    [min]=\"startDate() || undefined\"\r\n                    (input)=\"onEndDate($any($event.target).value)\"\r\n                  />\r\n                </div>\r\n              </div>\r\n            </section>\r\n            <footer class=\"flex flex-row-reverse flex-wrap items-center gap-sm border-t border-light px-base py-sm\">\r\n              <ed-button\r\n                variant=\"primary\"\r\n                fill\r\n                size=\"sm\"\r\n                (click$)=\"applyFilters(); closeFilters()\"\r\n              >\r\n                Apply\r\n              </ed-button>\r\n              <ed-button\r\n                variant=\"secondary\"\r\n                outline\r\n                size=\"sm\"\r\n                (click$)=\"resetFilters()\"\r\n              >\r\n                Reset\r\n              </ed-button>\r\n            </footer>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  </header>\r\n\r\n  <div class=\"flex min-h-0 flex-1 flex-col gap-md overflow-y-auto\">\r\n  @if (loading()) {\r\n    <div class=\"flex flex-col gap-base\" aria-busy=\"true\" aria-live=\"polite\">\r\n      <section class=\"flex flex-col gap-base lg:flex-row\" aria-label=\"Key outcomes\">\r\n        <article class=\"flex min-h-36 shrink-0 flex-col gap-sm rounded-md border border-light bg-white p-base lg:w-72\">\r\n          <ed-skeleton class=\"h-3 w-40\"></ed-skeleton>\r\n          <ed-skeleton class=\"h-7 w-28\"></ed-skeleton>\r\n          <ed-skeleton class=\"h-3 w-48\"></ed-skeleton>\r\n          <ed-skeleton class=\"h-3 w-36\"></ed-skeleton>\r\n        </article>\r\n        <article class=\"flex min-w-0 flex-1 flex-col gap-base overflow-hidden rounded-lg border border-light bg-white p-base lg:flex-row lg:items-center\">\r\n          <div class=\"flex w-full shrink-0 flex-col gap-sm lg:w-52\">\r\n            <ed-skeleton class=\"h-3 w-36\"></ed-skeleton>\r\n            <ed-skeleton class=\"h-7 w-20\"></ed-skeleton>\r\n            <ed-skeleton class=\"h-3 w-40\"></ed-skeleton>\r\n          </div>\r\n          <div class=\"flex min-w-0 flex-1 flex-col gap-sm\">\r\n            <div class=\"flex items-center justify-between gap-sm\">\r\n              <ed-skeleton class=\"h-3 w-28\"></ed-skeleton>\r\n              <ed-skeleton class=\"h-3 w-24\"></ed-skeleton>\r\n            </div>\r\n            <ed-skeleton class=\"h-8 w-full !rounded-md\"></ed-skeleton>\r\n            <div class=\"flex flex-wrap gap-md\">\r\n              @for (_ of legendSkeletonRows; track _) {\r\n                <div class=\"inline-flex items-center gap-xs\">\r\n                  <ed-skeleton class=\"h-4 w-4 !rounded-sm\"></ed-skeleton>\r\n                  <ed-skeleton class=\"h-3 w-20\"></ed-skeleton>\r\n                </div>\r\n              }\r\n            </div>\r\n          </div>\r\n        </article>\r\n      </section>\r\n\r\n      <section class=\"grid grid-cols-1 gap-base sm:grid-cols-2 xl:grid-cols-4\" aria-label=\"Activity KPIs\">\r\n        @for (_ of kpiSkeletonRows; track _) {\r\n          <article class=\"flex flex-col gap-2xs rounded-md border border-light bg-white p-base\">\r\n            <ed-skeleton class=\"h-3 w-28\"></ed-skeleton>\r\n            <ed-skeleton class=\"h-6 w-14\"></ed-skeleton>\r\n            <ed-skeleton class=\"h-3 w-24\"></ed-skeleton>\r\n          </article>\r\n        }\r\n      </section>\r\n\r\n      <div class=\"grid grid-cols-1 gap-base md:grid-cols-2\">\r\n        <article class=\"flex flex-col gap-base overflow-hidden rounded-lg border border-light bg-white p-base\">\r\n          <div class=\"flex flex-wrap items-center justify-between gap-base\">\r\n            <h3>Call Volume</h3>\r\n            <div class=\"flex flex-wrap gap-md\">\r\n              @for (_ of legendSkeletonRows; track _) {\r\n                <ed-skeleton class=\"h-3 w-20\"></ed-skeleton>\r\n              }\r\n            </div>\r\n          </div>\r\n          <ed-skeleton class=\"h-60 w-full !rounded-md\"></ed-skeleton>\r\n        </article>\r\n        <article class=\"flex flex-col gap-base overflow-hidden rounded-lg border border-light bg-white p-base\">\r\n          <h3>Top Call Reasons</h3>\r\n          <div class=\"flex flex-col gap-md\">\r\n            @for (_ of chartRowSkeletonRows; track _) {\r\n              <div class=\"grid grid-cols-[minmax(110px,140px)_1fr_42px] items-center gap-sm\">\r\n                <ed-skeleton class=\"h-3 w-20 justify-self-end\"></ed-skeleton>\r\n                <ed-skeleton class=\"h-3 w-full !rounded-r-xl\"></ed-skeleton>\r\n                <ed-skeleton class=\"h-3 w-8 justify-self-end\"></ed-skeleton>\r\n              </div>\r\n            }\r\n          </div>\r\n        </article>\r\n        <article class=\"flex flex-col gap-base overflow-hidden rounded-lg border border-light bg-white p-base\">\r\n          <h3>Reasons AI got stuck</h3>\r\n          <div class=\"flex flex-col gap-md\">\r\n            @for (_ of chartRowSkeletonRows; track _) {\r\n              <div class=\"grid grid-cols-[minmax(110px,140px)_1fr_42px] items-center gap-sm\">\r\n                <ed-skeleton class=\"h-3 w-20 justify-self-end\"></ed-skeleton>\r\n                <ed-skeleton class=\"h-3 w-full !rounded-r-xl\"></ed-skeleton>\r\n                <ed-skeleton class=\"h-3 w-8 justify-self-end\"></ed-skeleton>\r\n              </div>\r\n            }\r\n          </div>\r\n        </article>\r\n        <article class=\"flex flex-col gap-base overflow-hidden rounded-lg border border-light bg-white p-base\">\r\n          <h3>Peak Hours</h3>\r\n          <div class=\"flex h-40 items-end gap-xs\">\r\n            @for (heightClass of peakSkeletonRows; track $index) {\r\n              <ed-skeleton [class]=\"'min-w-0 flex-1 !rounded-t-full ' + heightClass\"></ed-skeleton>\r\n            }\r\n          </div>\r\n        </article>\r\n      </div>\r\n    </div>\r\n  } @else {\r\n    @if (data(); as d) {\r\n      <div class=\"analytics-page__body flex flex-col gap-base\" [class.analytics-page__body--ready]=\"chartsReady()\">\r\n        <section class=\"flex flex-col gap-base lg:flex-row\" aria-label=\"Key outcomes\">\r\n          <article\r\n            class=\"analytics-page__impact flex min-h-36 shrink-0 flex-col gap-sm rounded-md p-base text-white lg:w-72\"\r\n          >\r\n            <div class=\"flex items-center gap-2xs\">\r\n              <ed-icon name=\"lightning\" [size]=\"12\" color=\"currentColor\" />\r\n              <span class=\"fs-xs font-semibold uppercase tracking-wide opacity-90\">\r\n                {{ impactKpi()?.label || 'Estimated Impact This Month' }}\r\n              </span>\r\n            </div>\r\n            <strong class=\"fs-lg font-semibold leading-tight\">\r\n              {{ impactKpi()?.value || '\u2014' }}\r\n            </strong>\r\n            <div class=\"flex flex-col gap-2xs opacity-90\">\r\n              <p class=\"m-0 fs-sm\">{{ impactSubPrimary() }}</p>\r\n              @if (impactSubSecondary(); as secondary) {\r\n                <p class=\"m-0 fs-xs opacity-90\">{{ secondary }}</p>\r\n              }\r\n            </div>\r\n          </article>\r\n\r\n          <article\r\n            class=\"analytics-page__card flex min-w-0 flex-1 flex-col gap-base overflow-hidden rounded-lg bg-white p-base lg:flex-row lg:items-center\"\r\n          >\r\n            <div class=\"flex w-full shrink-0 flex-col gap-sm lg:w-52\">\r\n              <span class=\"fs-xs font-semibold uppercase tracking-wide text-light\">\r\n                {{ resolutionKpi()?.label || 'AI Autonomous Resolution' }}\r\n              </span>\r\n              <strong class=\"fs-lg font-semibold text-dark\">\r\n                {{ resolutionKpi()?.value || '\u2014' }}\r\n              </strong>\r\n              <div class=\"flex flex-wrap items-center gap-xs\">\r\n                <span class=\"fs-sm text-body\">\r\n                  {{ resolutionKpi()?.sub || 'without staff intervention' }}\r\n                </span>\r\n                @if (resolutionTrend(); as trend) {\r\n                  <span class=\"analytics-page__divider\" aria-hidden=\"true\"></span>\r\n                  <span\r\n                    class=\"analytics-page__trend inline-flex items-center gap-2xs\"\r\n                    [attr.data-tone]=\"trend.tone\"\r\n                  >\r\n                    <ed-icon [name]=\"trend.icon\" [size]=\"12\" color=\"currentColor\" />\r\n                    {{ trend.delta }}\r\n                  </span>\r\n                }\r\n              </div>\r\n            </div>\r\n\r\n            <div class=\"analytics-page__v-divider hidden lg:block\" aria-hidden=\"true\"></div>\r\n\r\n            <div class=\"analytics-page__distribution flex min-w-0 flex-1 flex-col gap-sm\">\r\n              <div class=\"flex flex-wrap items-center justify-between gap-sm\">\r\n                <strong class=\"fs-sm font-semibold text-body\">{{ totalCallsLabel() }}</strong>\r\n                @if (directionSub(); as dir) {\r\n                  <span class=\"fs-sm text-body\">{{ dir }}</span>\r\n                }\r\n              </div>\r\n              <div\r\n                class=\"analytics-page__stack flex h-8 gap-2xs overflow-hidden rounded-md\"\r\n                role=\"img\"\r\n                aria-label=\"Call distribution\"\r\n              >\r\n                @for (seg of distribution(); track seg.label) {\r\n                  <span\r\n                    class=\"analytics-page__stack-seg relative flex min-w-0 items-center justify-center\"\r\n                    [style.flex-grow]=\"seg.width\"\r\n                    [style.background]=\"seg.color\"\r\n                    [attr.aria-label]=\"seg.tooltip\"\r\n                  >\r\n                    @if (seg.width >= 8) {\r\n                      <span\r\n                        class=\"analytics-page__stack-pct fs-xs font-semibold uppercase tracking-wide\"\r\n                        [style.color]=\"seg.textColor\"\r\n                      >\r\n                        {{ seg.value }}%\r\n                      </span>\r\n                    }\r\n                    <span class=\"analytics-page__tooltip\">{{ seg.tooltip }}</span>\r\n                  </span>\r\n                }\r\n              </div>\r\n              <ul class=\"m-0 flex list-none flex-wrap gap-x-md gap-y-xs p-0\">\r\n                @for (seg of distribution(); track seg.label) {\r\n                  <li class=\"inline-flex items-center gap-xs\">\r\n                    <span\r\n                      class=\"h-4 w-4 shrink-0 rounded-sm\"\r\n                      [style.background]=\"seg.color\"\r\n                    ></span>\r\n                    <span class=\"inline-flex items-center gap-2xs\">\r\n                      <strong class=\"fs-sm font-semibold text-body\">{{ seg.label }}</strong>\r\n                      <span class=\"fs-xs text-light\">{{ seg.callsText }}</span>\r\n                    </span>\r\n                  </li>\r\n                }\r\n              </ul>\r\n            </div>\r\n          </article>\r\n        </section>\r\n\r\n        <section\r\n          class=\"grid grid-cols-1 gap-base sm:grid-cols-2 xl:grid-cols-4\"\r\n          aria-label=\"Activity KPIs\"\r\n        >\r\n          @for (kpi of secondaryKpis(); track kpi.label) {\r\n            <article class=\"analytics-page__card flex flex-col gap-2xs rounded-md bg-white p-base\">\r\n              <span class=\"fs-xs font-semibold uppercase tracking-wide text-light\">{{ kpi.label }}</span>\r\n              <strong class=\"font-semibold text-dark\">{{ kpi.value }}</strong>\r\n              <div class=\"flex flex-wrap items-center gap-xs\">\r\n                @if (kpi.sub) {\r\n                  <span class=\"fs-sm text-body\">{{ kpi.sub }}</span>\r\n                }\r\n                @if (kpi.delta) {\r\n                  <span class=\"analytics-page__divider\" aria-hidden=\"true\"></span>\r\n                  <span\r\n                    class=\"analytics-page__trend inline-flex items-center gap-2xs\"\r\n                    [attr.data-tone]=\"kpi.tone\"\r\n                  >\r\n                    <ed-icon [name]=\"kpi.trendIcon\" [size]=\"12\" color=\"currentColor\" />\r\n                    {{ kpi.delta }}\r\n                  </span>\r\n                }\r\n              </div>\r\n            </article>\r\n          }\r\n        </section>\r\n\r\n        <div class=\"grid grid-cols-1 gap-base md:grid-cols-2\">\r\n          <article class=\"flex flex-col gap-md overflow-hidden rounded-lg bg-white p-base analytics-page__chart\">\r\n            <div class=\"flex flex-wrap items-center justify-between gap-base\">\r\n              <h3>Call Volume</h3>\r\n              <ul class=\"m-0 flex list-none flex-wrap items-center justify-end gap-md p-0\">\r\n                <li class=\"inline-flex items-center gap-2xs\">\r\n                  <span class=\"analytics-page__dot analytics-page__dot--total h-2 w-2 rounded-full\"></span>\r\n                  <span class=\"fs-sm font-semibold text-body\">Total Calls</span>\r\n                </li>\r\n                <li class=\"inline-flex items-center gap-2xs\">\r\n                  <span class=\"analytics-page__dot analytics-page__dot--in h-2 w-2 rounded-full\"></span>\r\n                  <span class=\"fs-sm font-semibold text-body\">Inbound Calls</span>\r\n                </li>\r\n                <li class=\"inline-flex items-center gap-2xs\">\r\n                  <span class=\"analytics-page__dot analytics-page__dot--out h-2 w-2 rounded-full\"></span>\r\n                  <span class=\"fs-sm font-semibold text-body\">Outbound Calls</span>\r\n                </li>\r\n              </ul>\r\n            </div>\r\n            <div class=\"analytics-page__line-chart relative h-72\">\r\n              <svg viewBox=\"0 0 100 100\" preserveAspectRatio=\"none\" aria-hidden=\"true\">\r\n                <path class=\"analytics-page__area\" [attr.d]=\"volumeAreaPath()\" />\r\n                <path\r\n                  class=\"analytics-page__line analytics-page__line--total\"\r\n                  [attr.d]=\"volumeTotalPath()\"\r\n                  fill=\"none\"\r\n                />\r\n                <path\r\n                  class=\"analytics-page__line analytics-page__line--in\"\r\n                  [attr.d]=\"volumeInboundPath()\"\r\n                  fill=\"none\"\r\n                />\r\n                <path\r\n                  class=\"analytics-page__line analytics-page__line--out\"\r\n                  [attr.d]=\"volumeOutboundPath()\"\r\n                  fill=\"none\"\r\n                />\r\n              </svg>\r\n              <div\r\n                class=\"analytics-page__volume-hit flex\"\r\n                role=\"list\"\r\n                aria-label=\"Call volume by period\"\r\n                (mouseleave)=\"onVolumeLeave()\"\r\n              >\r\n                @for (point of volumePointVms(); track point.trackKey; let i = $index) {\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"analytics-page__volume-col relative min-w-0 flex-1 cursor-default border-none bg-transparent p-0\"\r\n                    role=\"listitem\"\r\n                    [class.analytics-page__volume-col--active]=\"hoveredVolume() === i\"\r\n                    [attr.aria-label]=\"point.tooltip\"\r\n                    (mouseenter)=\"onVolumeEnter(i)\"\r\n                    (focus)=\"onVolumeEnter(i)\"\r\n                    (blur)=\"onVolumeLeave()\"\r\n                  >\r\n                    <span class=\"analytics-page__tooltip analytics-page__tooltip--multiline\">\r\n                      {{ point.tooltip }}\r\n                    </span>\r\n                  </button>\r\n                }\r\n              </div>\r\n              <div class=\"analytics-page__volume-axis\">\r\n                @for (label of volumeAxisLabels(); track $index) {\r\n                  <span class=\"analytics-page__volume-axis-label\">\r\n                    @if (label.top) {\r\n                      <span>{{ label.top }}</span>\r\n                    }\r\n                    @if (label.bottom) {\r\n                      <span>{{ label.bottom }}</span>\r\n                    }\r\n                  </span>\r\n                }\r\n              </div>\r\n            </div>\r\n          </article>\r\n\r\n          <article class=\"flex flex-col gap-base overflow-hidden rounded-lg bg-white p-base analytics-page__chart\">\r\n            <h3>Top Call Reasons</h3>\r\n            <div class=\"flex flex-col gap-md\">\r\n              @for (item of reasonRows(); track item.label) {\r\n                <div\r\n                  class=\"analytics-page__hbar-row grid items-center gap-sm\"\r\n                  [attr.aria-label]=\"item.tooltip\"\r\n                >\r\n                  <span class=\"fs-xs font-semibold uppercase tracking-wide text-light text-right\">\r\n                    {{ item.label }}\r\n                  </span>\r\n                  <div class=\"analytics-page__hbar-track relative h-3 overflow-hidden rounded-r-xl\">\r\n                    <span\r\n                      class=\"analytics-page__hbar-fill block h-full min-w-1 rounded-r-xl\"\r\n                      [style.width.%]=\"item.widthPct\"\r\n                      [style.background]=\"item.color\"\r\n                      [style.animation-delay.ms]=\"item.delayMs\"\r\n                    ></span>\r\n                    <span class=\"analytics-page__tooltip\">{{ item.tooltip }}</span>\r\n                  </div>\r\n                  <span class=\"fs-xs font-semibold uppercase tracking-wide text-dark text-right\">\r\n                    {{ item.value }}%\r\n                  </span>\r\n                </div>\r\n              }\r\n            </div>\r\n          </article>\r\n\r\n          <article class=\"flex flex-col gap-base overflow-hidden rounded-lg bg-white p-base analytics-page__chart\">\r\n            <h3>Reasons AI got stuck</h3>\r\n            <div class=\"flex flex-col gap-md\">\r\n              @for (item of transferRows(); track item.label) {\r\n                <div\r\n                  class=\"analytics-page__hbar-row grid items-center gap-sm\"\r\n                  [attr.aria-label]=\"item.tooltip\"\r\n                >\r\n                  <span class=\"fs-xs font-semibold uppercase tracking-wide text-light text-right\">\r\n                    {{ item.label }}\r\n                  </span>\r\n                  <div class=\"analytics-page__hbar-track relative h-3 overflow-hidden rounded-r-xl\">\r\n                    <span\r\n                      class=\"analytics-page__hbar-fill block h-full min-w-1 rounded-r-xl\"\r\n                      [style.width.%]=\"item.widthPct\"\r\n                      [style.background]=\"item.color\"\r\n                      [style.animation-delay.ms]=\"item.delayMs\"\r\n                    ></span>\r\n                    <span class=\"analytics-page__tooltip\">{{ item.tooltip }}</span>\r\n                  </div>\r\n                  <span class=\"fs-xs font-semibold uppercase tracking-wide text-dark text-right\">\r\n                    {{ item.value }}%\r\n                  </span>\r\n                </div>\r\n              }\r\n            </div>\r\n          </article>\r\n\r\n          <article class=\"flex flex-col gap-md overflow-hidden rounded-lg bg-white p-base analytics-page__chart\">\r\n            <h3>Peak Hours</h3>\r\n            <div class=\"flex flex-col gap-xs\">\r\n              <div class=\"flex h-40 items-end gap-xs\" role=\"list\" aria-label=\"Call volume by hour\">\r\n                @for (point of peakRows(); track point.hour) {\r\n                  <div\r\n                    class=\"analytics-page__peak-col flex h-full min-w-0 flex-1 flex-col\"\r\n                    role=\"listitem\"\r\n                    [attr.aria-label]=\"point.tooltip\"\r\n                  >\r\n                    <div class=\"analytics-page__peak-wrap relative flex min-h-0 flex-1 items-end justify-center\">\r\n                      <div\r\n                        class=\"analytics-page__peak-bar w-3 min-h-0.5 rounded-t-full\"\r\n                        [style.height.%]=\"point.heightPct\"\r\n                        [style.animation-delay.ms]=\"point.delayMs\"\r\n                      ></div>\r\n                      <span class=\"analytics-page__tooltip\">{{ point.tooltip }}</span>\r\n                    </div>\r\n                  </div>\r\n                }\r\n              </div>\r\n              <div class=\"flex gap-xs\">\r\n                @for (point of peakRows(); track point.hour) {\r\n                  <span class=\"min-h-3.5 flex-1 text-center fs-xs font-semibold uppercase tracking-wide text-light\">\r\n                    @if (point.showLabel) {\r\n                      {{ point.label }}\r\n                    }\r\n                  </span>\r\n                }\r\n              </div>\r\n            </div>\r\n          </article>\r\n        </div>\r\n      </div>\r\n    }\r\n  }\r\n  </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.analytics-page__range-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.analytics-page__range-btn{min-height:36px;padding:8px 10px;border:1px solid #d9d9de;border-radius:8px;background:#fff;color:#4d5573;font-size:13px;font-weight:500;line-height:1;cursor:pointer}.analytics-page__range-btn--active{border-color:#2162f0;background:#fff;color:#2162f0}.analytics-page__impact{background:linear-gradient(145deg,#2162f0,#214dd9)}.analytics-page__divider{display:inline-block;width:1px;height:1rem;background:var(--eds-border-default, #e5e5e5);flex-shrink:0}.analytics-page__v-divider{width:1px;align-self:stretch;min-height:5.5rem;background:var(--eds-border-default, #e5e5e5);flex-shrink:0}.analytics-page__stack{background:transparent}.analytics-page__stack-seg{flex-basis:0;min-width:.25rem}.analytics-page__stack-seg:hover .analytics-page__tooltip,.analytics-page__stack-seg:focus-within .analytics-page__tooltip{opacity:1;transform:translate(-50%)}.analytics-page__stack-pct{pointer-events:none;z-index:1}.analytics-page__tooltip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%,4px);padding:8px 12px;background:var(--eds-gray-900, #1f2328);color:#fafafa;font:500 12px/1.4 var(--eds-font-inter);border-radius:8px;white-space:nowrap;width:max-content;min-width:168px;opacity:0;pointer-events:none;transition:opacity .15s ease,transform .15s ease;z-index:5;box-shadow:0 4px 12px #0000002e}.analytics-page__tooltip:after{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);border:5px solid transparent;border-top-color:var(--eds-gray-900, #1f2328)}.analytics-page__tooltip--multiline{white-space:pre-line;text-align:left;min-width:190px;max-width:none}.analytics-page__body .analytics-page__hbar-fill,.analytics-page__body .analytics-page__peak-bar,.analytics-page__body .analytics-page__line,.analytics-page__body .analytics-page__area,.analytics-page__body .analytics-page__stack-seg{opacity:0}.analytics-page__body--ready .analytics-page__hbar-fill{opacity:1;animation:analytics-hbar-grow .55s ease forwards;transform-origin:left center}.analytics-page__body--ready .analytics-page__peak-bar{opacity:1;animation:analytics-peak-grow .55s ease forwards;transform-origin:bottom}.analytics-page__body--ready .analytics-page__line,.analytics-page__body--ready .analytics-page__area,.analytics-page__body--ready .analytics-page__stack-seg{opacity:1;animation:analytics-fade-in .45s ease forwards}.analytics-page__body--ready .analytics-page__line--total{animation:analytics-draw-line .85s ease forwards}.analytics-page__body--ready .analytics-page__line--in{animation:analytics-draw-line .85s ease .08s forwards}.analytics-page__body--ready .analytics-page__line--out{animation:analytics-draw-line .85s ease .16s forwards}.analytics-page__trend{font:400 11px/16px var(--eds-font-inter)}.analytics-page__trend[data-tone=pos]{color:var(--eds-green-600, #077c37)}.analytics-page__trend[data-tone=warn],.analytics-page__trend[data-tone=neg]{color:var(--eds-red-500, #db0c15)}.analytics-page__trend[data-tone=neutral]{color:var(--eds-text-secondary)}.analytics-page__dot--total{background:#749fff}.analytics-page__dot--in{background:#ca88f9}.analytics-page__dot--out{background:#4dce7d}.analytics-page__line-chart svg{width:100%;height:calc(100% - 40px);overflow:visible}.analytics-page__volume-axis{display:flex;gap:2px;margin-top:6px}.analytics-page__volume-axis-label{flex:1 1 0;min-width:0;text-align:center;color:var(--eds-text-secondary, #6b7280);font-size:10px;font-weight:600;line-height:1.15;letter-spacing:0}.analytics-page__volume-axis-label span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.analytics-page__volume-hit{position:absolute;inset:0 0 40px;z-index:2}.analytics-page__volume-col:before{content:\"\";position:absolute;inset:0 35%;border-radius:4px;background:transparent;transition:background .15s ease}.analytics-page__volume-col:hover:before,.analytics-page__volume-col--active:before,.analytics-page__volume-col:focus-visible:before{background:#2162f014}.analytics-page__volume-col:hover .analytics-page__tooltip,.analytics-page__volume-col:focus-visible .analytics-page__tooltip,.analytics-page__volume-col--active .analytics-page__tooltip{opacity:1;transform:translate(-50%)}.analytics-page__area{fill:#749fff33}.analytics-page__line{stroke-width:2.2;vector-effect:non-scaling-stroke;fill:none;stroke-linecap:round;stroke-linejoin:round}.analytics-page__line--total{stroke:#749fff}.analytics-page__line--in{stroke:#ca88f9}.analytics-page__line--out{stroke:#4dce7d}.analytics-page__hbar-row{grid-template-columns:minmax(110px,140px) 1fr 42px}@media(max-width:768px){.analytics-page__hbar-row{grid-template-columns:100px 1fr 36px}}.analytics-page__hbar-track{background:var(--eds-surface-l1, #f7f9fa)}.analytics-page__hbar-track:hover .analytics-page__tooltip,.analytics-page__hbar-track:focus-within .analytics-page__tooltip{opacity:1;transform:translate(-50%)}.analytics-page__peak-wrap:hover .analytics-page__tooltip,.analytics-page__peak-wrap:focus-within .analytics-page__tooltip{opacity:1;transform:translate(-50%)}.analytics-page__peak-bar{background:#a3b3ff}.analytics-page__peak-col:hover .analytics-page__peak-bar{background:#8494f0}@keyframes analytics-hbar-grow{0%{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes analytics-peak-grow{0%{transform:scaleY(0)}to{transform:scaleY(1)}}@keyframes analytics-fade-in{0%{opacity:0}to{opacity:1}}@keyframes analytics-draw-line{0%{opacity:0;stroke-dasharray:400;stroke-dashoffset:400}to{opacity:1;stroke-dasharray:400;stroke-dashoffset:0}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ed-icon", inputs: ["name", "size", "color", "cssClass", "decorative", "ariaHidden", "ariaLabel", "title", "desc", "focusable", "tabIndex"] }, { kind: "component", type: EdButtonComponent, selector: "ed-button", inputs: ["variant", "size", "disabled", "ghost", "outline", "subtle", "fill", "loading", "block", "elevated", "shape", "type", "href", "routerLink", "rel", "target", "download", "ariaLabel"], outputs: ["click$"] }, { kind: "component", type: EdIconButtonComponent, selector: "ed-icon-button", inputs: ["label", "name", "size", "variant", "allowBubble", "ghost", "outline", "solid", "subtle", "shape", "type", "disabled", "loading", "toggle", "pressed", "id", "title", "nameAttr", "value", "autofocus", "tabIndex"], outputs: ["click", "focus", "blur", "click$", "focus$", "blur$"] }, { kind: "component", type: EdSkeletonComponent, selector: "ed-skeleton", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AnalyticsPageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'eds-analytics-page', imports: [IconComponent, EdButtonComponent, EdIconButtonComponent, EdSkeletonComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'block h-full min-h-0' }, template: "<div class=\"flex h-full min-h-0 flex-col overflow-hidden bg-lighter p-base analytics-page\">\r\n  <header class=\"mb-md flex shrink-0 items-start justify-between gap-base\">\r\n    <div class=\"flex flex-col gap-2xs\">\r\n      <h4>Analytics</h4>\r\n      <p class=\"fs-sm text-light\">Call volume, outcomes, and agent performance</p>\r\n    </div>\r\n    <div class=\"flex shrink-0 items-center gap-base\">\r\n      <!--\r\n      <ed-button\r\n        variant=\"default\"\r\n        outline\r\n        size=\"sm\"\r\n        [disabled]=\"exporting()\"\r\n        (click$)=\"exportCsv()\"\r\n      >\r\n        <ed-icon slot=\"prefix\" name=\"download\" [size]=\"16\" />\r\n        Export\r\n      </ed-button>\r\n      -->\r\n      <div\r\n        class=\"relative\"\r\n        data-analytics-filters\r\n        (document:click)=\"onFiltersDocClick($event)\"\r\n      >\r\n        <ed-icon-button\r\n          name=\"filter_alt\"\r\n          label=\"Filters\"\r\n          size=\"md\"\r\n          outline\r\n          allowBubble\r\n          [pressed]=\"filtersOpen()\"\r\n          toggle\r\n          (click$)=\"toggleFilters($event)\"\r\n        />\r\n        @if (filtersOpen()) {\r\n          <div\r\n            class=\"absolute right-0 top-[calc(100%+4px)] z-20 w-[22rem] rounded-md border border-light bg-white shadow-md\"\r\n            role=\"dialog\"\r\n            aria-label=\"Analytics Filter\"\r\n            (click)=\"$event.stopPropagation()\"\r\n          >\r\n            <header class=\"flex items-center justify-between border-b border-light px-base py-sm\">\r\n              <h5 class=\"m-0\">Analytics Filter</h5>\r\n              <ed-icon-button\r\n                name=\"close\"\r\n                size=\"sm\"\r\n                label=\"Close filters\"\r\n                (click$)=\"closeFilters()\"\r\n              />\r\n            </header>\r\n            <section class=\"grid gap-base p-base\">\r\n              <div class=\"grid gap-2xs\">\r\n                <span class=\"fs-xs font-semibold uppercase tracking-wide text-light\">Range</span>\r\n                <div class=\"analytics-page__range-row\" role=\"group\" aria-label=\"Preset range\">\r\n                  @for (r of ranges; track r.id) {\r\n                    <button\r\n                      type=\"button\"\r\n                      class=\"analytics-page__range-btn\"\r\n                      [class.analytics-page__range-btn--active]=\"range() === r.id\"\r\n                      (click)=\"setRange(r.id)\"\r\n                    >\r\n                      {{ r.label }}\r\n                    </button>\r\n                  }\r\n                </div>\r\n              </div>\r\n              <div class=\"grid grid-cols-2 gap-sm\">\r\n                <div class=\"grid gap-2xs\">\r\n                  <label class=\"fs-sm font-semibold text-light\" for=\"analytics-start-date\">From</label>\r\n                  <input\r\n                    id=\"analytics-start-date\"\r\n                    class=\"form-input is-sm w-full\"\r\n                    type=\"date\"\r\n                    [value]=\"startDate()\"\r\n                    [max]=\"endDate() || undefined\"\r\n                    (input)=\"onStartDate($any($event.target).value)\"\r\n                  />\r\n                </div>\r\n                <div class=\"grid gap-2xs\">\r\n                  <label class=\"fs-sm font-semibold text-light\" for=\"analytics-end-date\">To</label>\r\n                  <input\r\n                    id=\"analytics-end-date\"\r\n                    class=\"form-input is-sm w-full\"\r\n                    type=\"date\"\r\n                    [value]=\"endDate()\"\r\n                    [min]=\"startDate() || undefined\"\r\n                    (input)=\"onEndDate($any($event.target).value)\"\r\n                  />\r\n                </div>\r\n              </div>\r\n            </section>\r\n            <footer class=\"flex flex-row-reverse flex-wrap items-center gap-sm border-t border-light px-base py-sm\">\r\n              <ed-button\r\n                variant=\"primary\"\r\n                fill\r\n                size=\"sm\"\r\n                (click$)=\"applyFilters(); closeFilters()\"\r\n              >\r\n                Apply\r\n              </ed-button>\r\n              <ed-button\r\n                variant=\"secondary\"\r\n                outline\r\n                size=\"sm\"\r\n                (click$)=\"resetFilters()\"\r\n              >\r\n                Reset\r\n              </ed-button>\r\n            </footer>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  </header>\r\n\r\n  <div class=\"flex min-h-0 flex-1 flex-col gap-md overflow-y-auto\">\r\n  @if (loading()) {\r\n    <div class=\"flex flex-col gap-base\" aria-busy=\"true\" aria-live=\"polite\">\r\n      <section class=\"flex flex-col gap-base lg:flex-row\" aria-label=\"Key outcomes\">\r\n        <article class=\"flex min-h-36 shrink-0 flex-col gap-sm rounded-md border border-light bg-white p-base lg:w-72\">\r\n          <ed-skeleton class=\"h-3 w-40\"></ed-skeleton>\r\n          <ed-skeleton class=\"h-7 w-28\"></ed-skeleton>\r\n          <ed-skeleton class=\"h-3 w-48\"></ed-skeleton>\r\n          <ed-skeleton class=\"h-3 w-36\"></ed-skeleton>\r\n        </article>\r\n        <article class=\"flex min-w-0 flex-1 flex-col gap-base overflow-hidden rounded-lg border border-light bg-white p-base lg:flex-row lg:items-center\">\r\n          <div class=\"flex w-full shrink-0 flex-col gap-sm lg:w-52\">\r\n            <ed-skeleton class=\"h-3 w-36\"></ed-skeleton>\r\n            <ed-skeleton class=\"h-7 w-20\"></ed-skeleton>\r\n            <ed-skeleton class=\"h-3 w-40\"></ed-skeleton>\r\n          </div>\r\n          <div class=\"flex min-w-0 flex-1 flex-col gap-sm\">\r\n            <div class=\"flex items-center justify-between gap-sm\">\r\n              <ed-skeleton class=\"h-3 w-28\"></ed-skeleton>\r\n              <ed-skeleton class=\"h-3 w-24\"></ed-skeleton>\r\n            </div>\r\n            <ed-skeleton class=\"h-8 w-full !rounded-md\"></ed-skeleton>\r\n            <div class=\"flex flex-wrap gap-md\">\r\n              @for (_ of legendSkeletonRows; track _) {\r\n                <div class=\"inline-flex items-center gap-xs\">\r\n                  <ed-skeleton class=\"h-4 w-4 !rounded-sm\"></ed-skeleton>\r\n                  <ed-skeleton class=\"h-3 w-20\"></ed-skeleton>\r\n                </div>\r\n              }\r\n            </div>\r\n          </div>\r\n        </article>\r\n      </section>\r\n\r\n      <section class=\"grid grid-cols-1 gap-base sm:grid-cols-2 xl:grid-cols-4\" aria-label=\"Activity KPIs\">\r\n        @for (_ of kpiSkeletonRows; track _) {\r\n          <article class=\"flex flex-col gap-2xs rounded-md border border-light bg-white p-base\">\r\n            <ed-skeleton class=\"h-3 w-28\"></ed-skeleton>\r\n            <ed-skeleton class=\"h-6 w-14\"></ed-skeleton>\r\n            <ed-skeleton class=\"h-3 w-24\"></ed-skeleton>\r\n          </article>\r\n        }\r\n      </section>\r\n\r\n      <div class=\"grid grid-cols-1 gap-base md:grid-cols-2\">\r\n        <article class=\"flex flex-col gap-base overflow-hidden rounded-lg border border-light bg-white p-base\">\r\n          <div class=\"flex flex-wrap items-center justify-between gap-base\">\r\n            <h3>Call Volume</h3>\r\n            <div class=\"flex flex-wrap gap-md\">\r\n              @for (_ of legendSkeletonRows; track _) {\r\n                <ed-skeleton class=\"h-3 w-20\"></ed-skeleton>\r\n              }\r\n            </div>\r\n          </div>\r\n          <ed-skeleton class=\"h-60 w-full !rounded-md\"></ed-skeleton>\r\n        </article>\r\n        <article class=\"flex flex-col gap-base overflow-hidden rounded-lg border border-light bg-white p-base\">\r\n          <h3>Top Call Reasons</h3>\r\n          <div class=\"flex flex-col gap-md\">\r\n            @for (_ of chartRowSkeletonRows; track _) {\r\n              <div class=\"grid grid-cols-[minmax(110px,140px)_1fr_42px] items-center gap-sm\">\r\n                <ed-skeleton class=\"h-3 w-20 justify-self-end\"></ed-skeleton>\r\n                <ed-skeleton class=\"h-3 w-full !rounded-r-xl\"></ed-skeleton>\r\n                <ed-skeleton class=\"h-3 w-8 justify-self-end\"></ed-skeleton>\r\n              </div>\r\n            }\r\n          </div>\r\n        </article>\r\n        <article class=\"flex flex-col gap-base overflow-hidden rounded-lg border border-light bg-white p-base\">\r\n          <h3>Reasons AI got stuck</h3>\r\n          <div class=\"flex flex-col gap-md\">\r\n            @for (_ of chartRowSkeletonRows; track _) {\r\n              <div class=\"grid grid-cols-[minmax(110px,140px)_1fr_42px] items-center gap-sm\">\r\n                <ed-skeleton class=\"h-3 w-20 justify-self-end\"></ed-skeleton>\r\n                <ed-skeleton class=\"h-3 w-full !rounded-r-xl\"></ed-skeleton>\r\n                <ed-skeleton class=\"h-3 w-8 justify-self-end\"></ed-skeleton>\r\n              </div>\r\n            }\r\n          </div>\r\n        </article>\r\n        <article class=\"flex flex-col gap-base overflow-hidden rounded-lg border border-light bg-white p-base\">\r\n          <h3>Peak Hours</h3>\r\n          <div class=\"flex h-40 items-end gap-xs\">\r\n            @for (heightClass of peakSkeletonRows; track $index) {\r\n              <ed-skeleton [class]=\"'min-w-0 flex-1 !rounded-t-full ' + heightClass\"></ed-skeleton>\r\n            }\r\n          </div>\r\n        </article>\r\n      </div>\r\n    </div>\r\n  } @else {\r\n    @if (data(); as d) {\r\n      <div class=\"analytics-page__body flex flex-col gap-base\" [class.analytics-page__body--ready]=\"chartsReady()\">\r\n        <section class=\"flex flex-col gap-base lg:flex-row\" aria-label=\"Key outcomes\">\r\n          <article\r\n            class=\"analytics-page__impact flex min-h-36 shrink-0 flex-col gap-sm rounded-md p-base text-white lg:w-72\"\r\n          >\r\n            <div class=\"flex items-center gap-2xs\">\r\n              <ed-icon name=\"lightning\" [size]=\"12\" color=\"currentColor\" />\r\n              <span class=\"fs-xs font-semibold uppercase tracking-wide opacity-90\">\r\n                {{ impactKpi()?.label || 'Estimated Impact This Month' }}\r\n              </span>\r\n            </div>\r\n            <strong class=\"fs-lg font-semibold leading-tight\">\r\n              {{ impactKpi()?.value || '\u2014' }}\r\n            </strong>\r\n            <div class=\"flex flex-col gap-2xs opacity-90\">\r\n              <p class=\"m-0 fs-sm\">{{ impactSubPrimary() }}</p>\r\n              @if (impactSubSecondary(); as secondary) {\r\n                <p class=\"m-0 fs-xs opacity-90\">{{ secondary }}</p>\r\n              }\r\n            </div>\r\n          </article>\r\n\r\n          <article\r\n            class=\"analytics-page__card flex min-w-0 flex-1 flex-col gap-base overflow-hidden rounded-lg bg-white p-base lg:flex-row lg:items-center\"\r\n          >\r\n            <div class=\"flex w-full shrink-0 flex-col gap-sm lg:w-52\">\r\n              <span class=\"fs-xs font-semibold uppercase tracking-wide text-light\">\r\n                {{ resolutionKpi()?.label || 'AI Autonomous Resolution' }}\r\n              </span>\r\n              <strong class=\"fs-lg font-semibold text-dark\">\r\n                {{ resolutionKpi()?.value || '\u2014' }}\r\n              </strong>\r\n              <div class=\"flex flex-wrap items-center gap-xs\">\r\n                <span class=\"fs-sm text-body\">\r\n                  {{ resolutionKpi()?.sub || 'without staff intervention' }}\r\n                </span>\r\n                @if (resolutionTrend(); as trend) {\r\n                  <span class=\"analytics-page__divider\" aria-hidden=\"true\"></span>\r\n                  <span\r\n                    class=\"analytics-page__trend inline-flex items-center gap-2xs\"\r\n                    [attr.data-tone]=\"trend.tone\"\r\n                  >\r\n                    <ed-icon [name]=\"trend.icon\" [size]=\"12\" color=\"currentColor\" />\r\n                    {{ trend.delta }}\r\n                  </span>\r\n                }\r\n              </div>\r\n            </div>\r\n\r\n            <div class=\"analytics-page__v-divider hidden lg:block\" aria-hidden=\"true\"></div>\r\n\r\n            <div class=\"analytics-page__distribution flex min-w-0 flex-1 flex-col gap-sm\">\r\n              <div class=\"flex flex-wrap items-center justify-between gap-sm\">\r\n                <strong class=\"fs-sm font-semibold text-body\">{{ totalCallsLabel() }}</strong>\r\n                @if (directionSub(); as dir) {\r\n                  <span class=\"fs-sm text-body\">{{ dir }}</span>\r\n                }\r\n              </div>\r\n              <div\r\n                class=\"analytics-page__stack flex h-8 gap-2xs overflow-hidden rounded-md\"\r\n                role=\"img\"\r\n                aria-label=\"Call distribution\"\r\n              >\r\n                @for (seg of distribution(); track seg.label) {\r\n                  <span\r\n                    class=\"analytics-page__stack-seg relative flex min-w-0 items-center justify-center\"\r\n                    [style.flex-grow]=\"seg.width\"\r\n                    [style.background]=\"seg.color\"\r\n                    [attr.aria-label]=\"seg.tooltip\"\r\n                  >\r\n                    @if (seg.width >= 8) {\r\n                      <span\r\n                        class=\"analytics-page__stack-pct fs-xs font-semibold uppercase tracking-wide\"\r\n                        [style.color]=\"seg.textColor\"\r\n                      >\r\n                        {{ seg.value }}%\r\n                      </span>\r\n                    }\r\n                    <span class=\"analytics-page__tooltip\">{{ seg.tooltip }}</span>\r\n                  </span>\r\n                }\r\n              </div>\r\n              <ul class=\"m-0 flex list-none flex-wrap gap-x-md gap-y-xs p-0\">\r\n                @for (seg of distribution(); track seg.label) {\r\n                  <li class=\"inline-flex items-center gap-xs\">\r\n                    <span\r\n                      class=\"h-4 w-4 shrink-0 rounded-sm\"\r\n                      [style.background]=\"seg.color\"\r\n                    ></span>\r\n                    <span class=\"inline-flex items-center gap-2xs\">\r\n                      <strong class=\"fs-sm font-semibold text-body\">{{ seg.label }}</strong>\r\n                      <span class=\"fs-xs text-light\">{{ seg.callsText }}</span>\r\n                    </span>\r\n                  </li>\r\n                }\r\n              </ul>\r\n            </div>\r\n          </article>\r\n        </section>\r\n\r\n        <section\r\n          class=\"grid grid-cols-1 gap-base sm:grid-cols-2 xl:grid-cols-4\"\r\n          aria-label=\"Activity KPIs\"\r\n        >\r\n          @for (kpi of secondaryKpis(); track kpi.label) {\r\n            <article class=\"analytics-page__card flex flex-col gap-2xs rounded-md bg-white p-base\">\r\n              <span class=\"fs-xs font-semibold uppercase tracking-wide text-light\">{{ kpi.label }}</span>\r\n              <strong class=\"font-semibold text-dark\">{{ kpi.value }}</strong>\r\n              <div class=\"flex flex-wrap items-center gap-xs\">\r\n                @if (kpi.sub) {\r\n                  <span class=\"fs-sm text-body\">{{ kpi.sub }}</span>\r\n                }\r\n                @if (kpi.delta) {\r\n                  <span class=\"analytics-page__divider\" aria-hidden=\"true\"></span>\r\n                  <span\r\n                    class=\"analytics-page__trend inline-flex items-center gap-2xs\"\r\n                    [attr.data-tone]=\"kpi.tone\"\r\n                  >\r\n                    <ed-icon [name]=\"kpi.trendIcon\" [size]=\"12\" color=\"currentColor\" />\r\n                    {{ kpi.delta }}\r\n                  </span>\r\n                }\r\n              </div>\r\n            </article>\r\n          }\r\n        </section>\r\n\r\n        <div class=\"grid grid-cols-1 gap-base md:grid-cols-2\">\r\n          <article class=\"flex flex-col gap-md overflow-hidden rounded-lg bg-white p-base analytics-page__chart\">\r\n            <div class=\"flex flex-wrap items-center justify-between gap-base\">\r\n              <h3>Call Volume</h3>\r\n              <ul class=\"m-0 flex list-none flex-wrap items-center justify-end gap-md p-0\">\r\n                <li class=\"inline-flex items-center gap-2xs\">\r\n                  <span class=\"analytics-page__dot analytics-page__dot--total h-2 w-2 rounded-full\"></span>\r\n                  <span class=\"fs-sm font-semibold text-body\">Total Calls</span>\r\n                </li>\r\n                <li class=\"inline-flex items-center gap-2xs\">\r\n                  <span class=\"analytics-page__dot analytics-page__dot--in h-2 w-2 rounded-full\"></span>\r\n                  <span class=\"fs-sm font-semibold text-body\">Inbound Calls</span>\r\n                </li>\r\n                <li class=\"inline-flex items-center gap-2xs\">\r\n                  <span class=\"analytics-page__dot analytics-page__dot--out h-2 w-2 rounded-full\"></span>\r\n                  <span class=\"fs-sm font-semibold text-body\">Outbound Calls</span>\r\n                </li>\r\n              </ul>\r\n            </div>\r\n            <div class=\"analytics-page__line-chart relative h-72\">\r\n              <svg viewBox=\"0 0 100 100\" preserveAspectRatio=\"none\" aria-hidden=\"true\">\r\n                <path class=\"analytics-page__area\" [attr.d]=\"volumeAreaPath()\" />\r\n                <path\r\n                  class=\"analytics-page__line analytics-page__line--total\"\r\n                  [attr.d]=\"volumeTotalPath()\"\r\n                  fill=\"none\"\r\n                />\r\n                <path\r\n                  class=\"analytics-page__line analytics-page__line--in\"\r\n                  [attr.d]=\"volumeInboundPath()\"\r\n                  fill=\"none\"\r\n                />\r\n                <path\r\n                  class=\"analytics-page__line analytics-page__line--out\"\r\n                  [attr.d]=\"volumeOutboundPath()\"\r\n                  fill=\"none\"\r\n                />\r\n              </svg>\r\n              <div\r\n                class=\"analytics-page__volume-hit flex\"\r\n                role=\"list\"\r\n                aria-label=\"Call volume by period\"\r\n                (mouseleave)=\"onVolumeLeave()\"\r\n              >\r\n                @for (point of volumePointVms(); track point.trackKey; let i = $index) {\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"analytics-page__volume-col relative min-w-0 flex-1 cursor-default border-none bg-transparent p-0\"\r\n                    role=\"listitem\"\r\n                    [class.analytics-page__volume-col--active]=\"hoveredVolume() === i\"\r\n                    [attr.aria-label]=\"point.tooltip\"\r\n                    (mouseenter)=\"onVolumeEnter(i)\"\r\n                    (focus)=\"onVolumeEnter(i)\"\r\n                    (blur)=\"onVolumeLeave()\"\r\n                  >\r\n                    <span class=\"analytics-page__tooltip analytics-page__tooltip--multiline\">\r\n                      {{ point.tooltip }}\r\n                    </span>\r\n                  </button>\r\n                }\r\n              </div>\r\n              <div class=\"analytics-page__volume-axis\">\r\n                @for (label of volumeAxisLabels(); track $index) {\r\n                  <span class=\"analytics-page__volume-axis-label\">\r\n                    @if (label.top) {\r\n                      <span>{{ label.top }}</span>\r\n                    }\r\n                    @if (label.bottom) {\r\n                      <span>{{ label.bottom }}</span>\r\n                    }\r\n                  </span>\r\n                }\r\n              </div>\r\n            </div>\r\n          </article>\r\n\r\n          <article class=\"flex flex-col gap-base overflow-hidden rounded-lg bg-white p-base analytics-page__chart\">\r\n            <h3>Top Call Reasons</h3>\r\n            <div class=\"flex flex-col gap-md\">\r\n              @for (item of reasonRows(); track item.label) {\r\n                <div\r\n                  class=\"analytics-page__hbar-row grid items-center gap-sm\"\r\n                  [attr.aria-label]=\"item.tooltip\"\r\n                >\r\n                  <span class=\"fs-xs font-semibold uppercase tracking-wide text-light text-right\">\r\n                    {{ item.label }}\r\n                  </span>\r\n                  <div class=\"analytics-page__hbar-track relative h-3 overflow-hidden rounded-r-xl\">\r\n                    <span\r\n                      class=\"analytics-page__hbar-fill block h-full min-w-1 rounded-r-xl\"\r\n                      [style.width.%]=\"item.widthPct\"\r\n                      [style.background]=\"item.color\"\r\n                      [style.animation-delay.ms]=\"item.delayMs\"\r\n                    ></span>\r\n                    <span class=\"analytics-page__tooltip\">{{ item.tooltip }}</span>\r\n                  </div>\r\n                  <span class=\"fs-xs font-semibold uppercase tracking-wide text-dark text-right\">\r\n                    {{ item.value }}%\r\n                  </span>\r\n                </div>\r\n              }\r\n            </div>\r\n          </article>\r\n\r\n          <article class=\"flex flex-col gap-base overflow-hidden rounded-lg bg-white p-base analytics-page__chart\">\r\n            <h3>Reasons AI got stuck</h3>\r\n            <div class=\"flex flex-col gap-md\">\r\n              @for (item of transferRows(); track item.label) {\r\n                <div\r\n                  class=\"analytics-page__hbar-row grid items-center gap-sm\"\r\n                  [attr.aria-label]=\"item.tooltip\"\r\n                >\r\n                  <span class=\"fs-xs font-semibold uppercase tracking-wide text-light text-right\">\r\n                    {{ item.label }}\r\n                  </span>\r\n                  <div class=\"analytics-page__hbar-track relative h-3 overflow-hidden rounded-r-xl\">\r\n                    <span\r\n                      class=\"analytics-page__hbar-fill block h-full min-w-1 rounded-r-xl\"\r\n                      [style.width.%]=\"item.widthPct\"\r\n                      [style.background]=\"item.color\"\r\n                      [style.animation-delay.ms]=\"item.delayMs\"\r\n                    ></span>\r\n                    <span class=\"analytics-page__tooltip\">{{ item.tooltip }}</span>\r\n                  </div>\r\n                  <span class=\"fs-xs font-semibold uppercase tracking-wide text-dark text-right\">\r\n                    {{ item.value }}%\r\n                  </span>\r\n                </div>\r\n              }\r\n            </div>\r\n          </article>\r\n\r\n          <article class=\"flex flex-col gap-md overflow-hidden rounded-lg bg-white p-base analytics-page__chart\">\r\n            <h3>Peak Hours</h3>\r\n            <div class=\"flex flex-col gap-xs\">\r\n              <div class=\"flex h-40 items-end gap-xs\" role=\"list\" aria-label=\"Call volume by hour\">\r\n                @for (point of peakRows(); track point.hour) {\r\n                  <div\r\n                    class=\"analytics-page__peak-col flex h-full min-w-0 flex-1 flex-col\"\r\n                    role=\"listitem\"\r\n                    [attr.aria-label]=\"point.tooltip\"\r\n                  >\r\n                    <div class=\"analytics-page__peak-wrap relative flex min-h-0 flex-1 items-end justify-center\">\r\n                      <div\r\n                        class=\"analytics-page__peak-bar w-3 min-h-0.5 rounded-t-full\"\r\n                        [style.height.%]=\"point.heightPct\"\r\n                        [style.animation-delay.ms]=\"point.delayMs\"\r\n                      ></div>\r\n                      <span class=\"analytics-page__tooltip\">{{ point.tooltip }}</span>\r\n                    </div>\r\n                  </div>\r\n                }\r\n              </div>\r\n              <div class=\"flex gap-xs\">\r\n                @for (point of peakRows(); track point.hour) {\r\n                  <span class=\"min-h-3.5 flex-1 text-center fs-xs font-semibold uppercase tracking-wide text-light\">\r\n                    @if (point.showLabel) {\r\n                      {{ point.label }}\r\n                    }\r\n                  </span>\r\n                }\r\n              </div>\r\n            </div>\r\n          </article>\r\n        </div>\r\n      </div>\r\n    }\r\n  }\r\n  </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.analytics-page__range-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.analytics-page__range-btn{min-height:36px;padding:8px 10px;border:1px solid #d9d9de;border-radius:8px;background:#fff;color:#4d5573;font-size:13px;font-weight:500;line-height:1;cursor:pointer}.analytics-page__range-btn--active{border-color:#2162f0;background:#fff;color:#2162f0}.analytics-page__impact{background:linear-gradient(145deg,#2162f0,#214dd9)}.analytics-page__divider{display:inline-block;width:1px;height:1rem;background:var(--eds-border-default, #e5e5e5);flex-shrink:0}.analytics-page__v-divider{width:1px;align-self:stretch;min-height:5.5rem;background:var(--eds-border-default, #e5e5e5);flex-shrink:0}.analytics-page__stack{background:transparent}.analytics-page__stack-seg{flex-basis:0;min-width:.25rem}.analytics-page__stack-seg:hover .analytics-page__tooltip,.analytics-page__stack-seg:focus-within .analytics-page__tooltip{opacity:1;transform:translate(-50%)}.analytics-page__stack-pct{pointer-events:none;z-index:1}.analytics-page__tooltip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%,4px);padding:8px 12px;background:var(--eds-gray-900, #1f2328);color:#fafafa;font:500 12px/1.4 var(--eds-font-inter);border-radius:8px;white-space:nowrap;width:max-content;min-width:168px;opacity:0;pointer-events:none;transition:opacity .15s ease,transform .15s ease;z-index:5;box-shadow:0 4px 12px #0000002e}.analytics-page__tooltip:after{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);border:5px solid transparent;border-top-color:var(--eds-gray-900, #1f2328)}.analytics-page__tooltip--multiline{white-space:pre-line;text-align:left;min-width:190px;max-width:none}.analytics-page__body .analytics-page__hbar-fill,.analytics-page__body .analytics-page__peak-bar,.analytics-page__body .analytics-page__line,.analytics-page__body .analytics-page__area,.analytics-page__body .analytics-page__stack-seg{opacity:0}.analytics-page__body--ready .analytics-page__hbar-fill{opacity:1;animation:analytics-hbar-grow .55s ease forwards;transform-origin:left center}.analytics-page__body--ready .analytics-page__peak-bar{opacity:1;animation:analytics-peak-grow .55s ease forwards;transform-origin:bottom}.analytics-page__body--ready .analytics-page__line,.analytics-page__body--ready .analytics-page__area,.analytics-page__body--ready .analytics-page__stack-seg{opacity:1;animation:analytics-fade-in .45s ease forwards}.analytics-page__body--ready .analytics-page__line--total{animation:analytics-draw-line .85s ease forwards}.analytics-page__body--ready .analytics-page__line--in{animation:analytics-draw-line .85s ease .08s forwards}.analytics-page__body--ready .analytics-page__line--out{animation:analytics-draw-line .85s ease .16s forwards}.analytics-page__trend{font:400 11px/16px var(--eds-font-inter)}.analytics-page__trend[data-tone=pos]{color:var(--eds-green-600, #077c37)}.analytics-page__trend[data-tone=warn],.analytics-page__trend[data-tone=neg]{color:var(--eds-red-500, #db0c15)}.analytics-page__trend[data-tone=neutral]{color:var(--eds-text-secondary)}.analytics-page__dot--total{background:#749fff}.analytics-page__dot--in{background:#ca88f9}.analytics-page__dot--out{background:#4dce7d}.analytics-page__line-chart svg{width:100%;height:calc(100% - 40px);overflow:visible}.analytics-page__volume-axis{display:flex;gap:2px;margin-top:6px}.analytics-page__volume-axis-label{flex:1 1 0;min-width:0;text-align:center;color:var(--eds-text-secondary, #6b7280);font-size:10px;font-weight:600;line-height:1.15;letter-spacing:0}.analytics-page__volume-axis-label span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.analytics-page__volume-hit{position:absolute;inset:0 0 40px;z-index:2}.analytics-page__volume-col:before{content:\"\";position:absolute;inset:0 35%;border-radius:4px;background:transparent;transition:background .15s ease}.analytics-page__volume-col:hover:before,.analytics-page__volume-col--active:before,.analytics-page__volume-col:focus-visible:before{background:#2162f014}.analytics-page__volume-col:hover .analytics-page__tooltip,.analytics-page__volume-col:focus-visible .analytics-page__tooltip,.analytics-page__volume-col--active .analytics-page__tooltip{opacity:1;transform:translate(-50%)}.analytics-page__area{fill:#749fff33}.analytics-page__line{stroke-width:2.2;vector-effect:non-scaling-stroke;fill:none;stroke-linecap:round;stroke-linejoin:round}.analytics-page__line--total{stroke:#749fff}.analytics-page__line--in{stroke:#ca88f9}.analytics-page__line--out{stroke:#4dce7d}.analytics-page__hbar-row{grid-template-columns:minmax(110px,140px) 1fr 42px}@media(max-width:768px){.analytics-page__hbar-row{grid-template-columns:100px 1fr 36px}}.analytics-page__hbar-track{background:var(--eds-surface-l1, #f7f9fa)}.analytics-page__hbar-track:hover .analytics-page__tooltip,.analytics-page__hbar-track:focus-within .analytics-page__tooltip{opacity:1;transform:translate(-50%)}.analytics-page__peak-wrap:hover .analytics-page__tooltip,.analytics-page__peak-wrap:focus-within .analytics-page__tooltip{opacity:1;transform:translate(-50%)}.analytics-page__peak-bar{background:#a3b3ff}.analytics-page__peak-col:hover .analytics-page__peak-bar{background:#8494f0}@keyframes analytics-hbar-grow{0%{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes analytics-peak-grow{0%{transform:scaleY(0)}to{transform:scaleY(1)}}@keyframes analytics-fade-in{0%{opacity:0}to{opacity:1}}@keyframes analytics-draw-line{0%{opacity:0;stroke-dasharray:400;stroke-dashoffset:400}to{opacity:1;stroke-dasharray:400;stroke-dashoffset:0}}\n"] }]
+        }] });
+
+export { AnalyticsPageComponent };
+//# sourceMappingURL=edvak99-voice-receptionist-widget-analytics-page.component-BYnys-zI.mjs.map