@edvak99/voice-receptionist-widget 1.1.13 → 1.1.15

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

@@ -0,0 +1,363 @@
+import * as i0 from '@angular/core';
+import { inject, signal, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { A as AiReceptionistApiService, I as IconComponent, f as EdButtonComponent, o as EdIconButtonComponent, g as EdSkeletonComponent } from './edvak99-voice-receptionist-widget-edvak99-voice-receptionist-widget-Dtc9wTzh.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_TEXT_COLORS = ['#8200DB', '#2162F0', '#DB0C15'];
+const OUTCOME_FALLBACK_COLORS = ['#DAB2FF', '#A3B3FF', '#FFA1AD'];
+class AnalyticsPageComponent {
+    constructor() {
+        this.api = inject(AiReceptionistApiService);
+        this.data = signal(null);
+        this.range = signal('30d');
+        this.loading = signal(true);
+        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);
+                return {
+                    ...o,
+                    color: o.color || OUTCOME_FALLBACK_COLORS[i % OUTCOME_FALLBACK_COLORS.length],
+                    textColor: OUTCOME_TEXT_COLORS[i % OUTCOME_TEXT_COLORS.length],
+                    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 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.load();
+    }
+    toggleFilters() {
+        this.filtersOpen.update((open) => !open);
+    }
+    setRange(id) {
+        this.range.set(id);
+        this.load();
+    }
+    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)) {
+            const week = point.day || point.label;
+            const month = point.date ? this.formatMonthYear(point.date) : '';
+            return month ? `${week} · ${month}` : week;
+        }
+        if (point.date) {
+            if (total <= 7)
+                return this.formatChartDate(point.date);
+            const step = total <= 14 ? 2 : total <= 31 ? 5 : 7;
+            if (index % step !== 0 && index !== total - 1)
+                return '';
+            return this.formatChartDate(point.date);
+        }
+        return point.day || point.label;
+    }
+    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;
+    }
+    load() {
+        this.loading.set(true);
+        this.chartsReady.set(false);
+        this.hoveredVolume.set(null);
+        this.api.getAnalytics(this.range()).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\">\n  <header class=\"mb-md flex shrink-0 items-start justify-between gap-base\">\n    <div class=\"flex flex-col gap-2xs\">\n      <h4>Analytics</h4>\n      <p class=\"fs-sm text-light\">Call volume, outcomes, and agent performance</p>\n    </div>\n    <div class=\"flex shrink-0 items-center gap-base\">\n      <ed-button variant=\"default\" outline size=\"sm\">\n        <ed-icon slot=\"prefix\" name=\"download\" [size]=\"16\" />\n        Export\n      </ed-button>\n      <ed-icon-button\n        name=\"filter_alt\"\n        label=\"Filters\"        outline\n        [pressed]=\"filtersOpen()\"\n        toggle\n        (click)=\"toggleFilters()\"\n      />\n    </div>\n  </header>\n\n  <div class=\"flex min-h-0 flex-1 flex-col gap-md overflow-y-auto\">\n  @if (filtersOpen()) {\n    <div\n      class=\"flex flex-wrap items-center gap-sm rounded-lg border border-light bg-white p-base\"\n      role=\"group\"\n      aria-label=\"Date range\"\n    >\n      @for (r of ranges; track r.id) {\n        <button\n          type=\"button\"\n          class=\"analytics-page__range-btn cursor-pointer rounded border-none bg-transparent px-3 py-2 text-light\"\n          [class.analytics-page__range-btn--active]=\"range() === r.id\"\n          (click)=\"setRange(r.id)\"\n        >\n          {{ r.label }}\n        </button>\n      }\n      <span class=\"fs-sm text-light\">Showing data for {{ periodLabel() }}</span>\n    </div>\n  }\n\n  @if (loading()) {\n    <div class=\"flex flex-col gap-base\" aria-busy=\"true\" aria-live=\"polite\">\n      <section class=\"flex flex-col gap-base lg:flex-row\" aria-label=\"Key outcomes\">\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\">\n          <ed-skeleton class=\"h-3 w-40\"></ed-skeleton>\n          <ed-skeleton class=\"h-7 w-28\"></ed-skeleton>\n          <ed-skeleton class=\"h-3 w-48\"></ed-skeleton>\n          <ed-skeleton class=\"h-3 w-36\"></ed-skeleton>\n        </article>\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\">\n          <div class=\"flex w-full shrink-0 flex-col gap-sm lg:w-52\">\n            <ed-skeleton class=\"h-3 w-36\"></ed-skeleton>\n            <ed-skeleton class=\"h-7 w-20\"></ed-skeleton>\n            <ed-skeleton class=\"h-3 w-40\"></ed-skeleton>\n          </div>\n          <div class=\"flex min-w-0 flex-1 flex-col gap-sm\">\n            <div class=\"flex items-center justify-between gap-sm\">\n              <ed-skeleton class=\"h-3 w-28\"></ed-skeleton>\n              <ed-skeleton class=\"h-3 w-24\"></ed-skeleton>\n            </div>\n            <ed-skeleton class=\"h-8 w-full !rounded-md\"></ed-skeleton>\n            <div class=\"flex flex-wrap gap-md\">\n              @for (_ of legendSkeletonRows; track _) {\n                <div class=\"inline-flex items-center gap-xs\">\n                  <ed-skeleton class=\"h-4 w-4 !rounded-sm\"></ed-skeleton>\n                  <ed-skeleton class=\"h-3 w-20\"></ed-skeleton>\n                </div>\n              }\n            </div>\n          </div>\n        </article>\n      </section>\n\n      <section class=\"grid grid-cols-1 gap-base sm:grid-cols-2 xl:grid-cols-4\" aria-label=\"Activity KPIs\">\n        @for (_ of kpiSkeletonRows; track _) {\n          <article class=\"flex flex-col gap-2xs rounded-md border border-light bg-white p-base\">\n            <ed-skeleton class=\"h-3 w-28\"></ed-skeleton>\n            <ed-skeleton class=\"h-6 w-14\"></ed-skeleton>\n            <ed-skeleton class=\"h-3 w-24\"></ed-skeleton>\n          </article>\n        }\n      </section>\n\n      <div class=\"grid grid-cols-1 gap-base md:grid-cols-2\">\n        <article class=\"flex flex-col gap-base overflow-hidden rounded-lg border border-light bg-white p-base\">\n          <div class=\"flex flex-wrap items-center justify-between gap-base\">\n            <h3>Call Volume</h3>\n            <div class=\"flex flex-wrap gap-md\">\n              @for (_ of legendSkeletonRows; track _) {\n                <ed-skeleton class=\"h-3 w-20\"></ed-skeleton>\n              }\n            </div>\n          </div>\n          <ed-skeleton class=\"h-60 w-full !rounded-md\"></ed-skeleton>\n        </article>\n        <article class=\"flex flex-col gap-base overflow-hidden rounded-lg border border-light bg-white p-base\">\n          <h3>Top Call Reasons</h3>\n          <div class=\"flex flex-col gap-md\">\n            @for (_ of chartRowSkeletonRows; track _) {\n              <div class=\"grid grid-cols-[minmax(110px,140px)_1fr_42px] items-center gap-sm\">\n                <ed-skeleton class=\"h-3 w-20 justify-self-end\"></ed-skeleton>\n                <ed-skeleton class=\"h-3 w-full !rounded-r-xl\"></ed-skeleton>\n                <ed-skeleton class=\"h-3 w-8 justify-self-end\"></ed-skeleton>\n              </div>\n            }\n          </div>\n        </article>\n        <article class=\"flex flex-col gap-base overflow-hidden rounded-lg border border-light bg-white p-base\">\n          <h3>Reasons AI got stuck</h3>\n          <div class=\"flex flex-col gap-md\">\n            @for (_ of chartRowSkeletonRows; track _) {\n              <div class=\"grid grid-cols-[minmax(110px,140px)_1fr_42px] items-center gap-sm\">\n                <ed-skeleton class=\"h-3 w-20 justify-self-end\"></ed-skeleton>\n                <ed-skeleton class=\"h-3 w-full !rounded-r-xl\"></ed-skeleton>\n                <ed-skeleton class=\"h-3 w-8 justify-self-end\"></ed-skeleton>\n              </div>\n            }\n          </div>\n        </article>\n        <article class=\"flex flex-col gap-base overflow-hidden rounded-lg border border-light bg-white p-base\">\n          <h3>Peak Hours</h3>\n          <div class=\"flex h-40 items-end gap-xs\">\n            @for (heightClass of peakSkeletonRows; track $index) {\n              <ed-skeleton [class]=\"'min-w-0 flex-1 !rounded-t-full ' + heightClass\"></ed-skeleton>\n            }\n          </div>\n        </article>\n      </div>\n    </div>\n  } @else {\n    @if (data(); as d) {\n      <div class=\"analytics-page__body flex flex-col gap-base\" [class.analytics-page__body--ready]=\"chartsReady()\">\n        <section class=\"flex flex-col gap-base lg:flex-row\" aria-label=\"Key outcomes\">\n          <article\n            class=\"analytics-page__impact flex min-h-36 shrink-0 flex-col gap-sm rounded-md p-base text-white lg:w-72\"\n          >\n            <div class=\"flex items-center gap-2xs\">\n              <ed-icon name=\"lightning\" [size]=\"12\" color=\"currentColor\" />\n              <span class=\"fs-xs font-semibold uppercase tracking-wide opacity-90\">\n                {{ impactKpi()?.label || 'Estimated Impact This Month' }}\n              </span>\n            </div>\n            <strong class=\"fs-lg font-semibold leading-tight\">\n              {{ impactKpi()?.value || '\u2014' }}\n            </strong>\n            <div class=\"flex flex-col gap-2xs opacity-90\">\n              <p class=\"m-0 fs-sm\">{{ impactSubPrimary() }}</p>\n              @if (impactSubSecondary(); as secondary) {\n                <p class=\"m-0 fs-xs opacity-90\">{{ secondary }}</p>\n              }\n            </div>\n          </article>\n\n          <article\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\"\n          >\n            <div class=\"flex w-full shrink-0 flex-col gap-sm lg:w-52\">\n              <span class=\"fs-xs font-semibold uppercase tracking-wide text-light\">\n                {{ resolutionKpi()?.label || 'AI Autonomous Resolution' }}\n              </span>\n              <strong class=\"fs-lg font-semibold text-dark\">\n                {{ resolutionKpi()?.value || '\u2014' }}\n              </strong>\n              <div class=\"flex flex-wrap items-center gap-xs\">\n                <span class=\"fs-sm text-body\">\n                  {{ resolutionKpi()?.sub || 'without staff intervention' }}\n                </span>\n                @if (resolutionTrend(); as trend) {\n                  <span class=\"analytics-page__divider\" aria-hidden=\"true\"></span>\n                  <span\n                    class=\"analytics-page__trend inline-flex items-center gap-2xs\"\n                    [attr.data-tone]=\"trend.tone\"\n                  >\n                    <ed-icon [name]=\"trend.icon\" [size]=\"12\" color=\"currentColor\" />\n                    {{ trend.delta }}\n                  </span>\n                }\n              </div>\n            </div>\n\n            <div class=\"analytics-page__v-divider hidden lg:block\" aria-hidden=\"true\"></div>\n\n            <div class=\"analytics-page__distribution flex min-w-0 flex-1 flex-col gap-sm\">\n              <div class=\"flex flex-wrap items-center justify-between gap-sm\">\n                <strong class=\"fs-sm font-semibold text-body\">{{ totalCallsLabel() }}</strong>\n                @if (directionSub(); as dir) {\n                  <span class=\"fs-sm text-body\">{{ dir }}</span>\n                }\n              </div>\n              <div\n                class=\"analytics-page__stack flex h-8 gap-2xs overflow-hidden rounded-md\"\n                role=\"img\"\n                aria-label=\"Call distribution\"\n              >\n                @for (seg of distribution(); track seg.label) {\n                  <span\n                    class=\"analytics-page__stack-seg relative flex min-w-0 items-center justify-center\"\n                    [style.flex-grow]=\"seg.width\"\n                    [style.background]=\"seg.color\"\n                    [attr.aria-label]=\"seg.tooltip\"\n                  >\n                    @if (seg.width >= 8) {\n                      <span\n                        class=\"analytics-page__stack-pct fs-xs font-semibold uppercase tracking-wide\"\n                        [style.color]=\"seg.textColor\"\n                      >\n                        {{ seg.value }}%\n                      </span>\n                    }\n                    <span class=\"analytics-page__tooltip\">{{ seg.tooltip }}</span>\n                  </span>\n                }\n              </div>\n              <ul class=\"m-0 flex list-none flex-wrap gap-x-md gap-y-xs p-0\">\n                @for (seg of distribution(); track seg.label) {\n                  <li class=\"inline-flex items-center gap-xs\">\n                    <span\n                      class=\"h-4 w-4 shrink-0 rounded-sm\"\n                      [style.background]=\"seg.color\"\n                    ></span>\n                    <span class=\"inline-flex items-center gap-2xs\">\n                      <strong class=\"fs-sm font-semibold text-body\">{{ seg.label }}</strong>\n                      <span class=\"fs-xs text-light\">{{ seg.callsText }}</span>\n                    </span>\n                  </li>\n                }\n              </ul>\n            </div>\n          </article>\n        </section>\n\n        <section\n          class=\"grid grid-cols-1 gap-base sm:grid-cols-2 xl:grid-cols-4\"\n          aria-label=\"Activity KPIs\"\n        >\n          @for (kpi of secondaryKpis(); track kpi.label) {\n            <article class=\"analytics-page__card flex flex-col gap-2xs rounded-md bg-white p-base\">\n              <span class=\"fs-xs font-semibold uppercase tracking-wide text-light\">{{ kpi.label }}</span>\n              <strong class=\"font-semibold text-dark\">{{ kpi.value }}</strong>\n              <div class=\"flex flex-wrap items-center gap-xs\">\n                @if (kpi.sub) {\n                  <span class=\"fs-sm text-body\">{{ kpi.sub }}</span>\n                }\n                @if (kpi.delta) {\n                  <span class=\"analytics-page__divider\" aria-hidden=\"true\"></span>\n                  <span\n                    class=\"analytics-page__trend inline-flex items-center gap-2xs\"\n                    [attr.data-tone]=\"kpi.tone\"\n                  >\n                    <ed-icon [name]=\"kpi.trendIcon\" [size]=\"12\" color=\"currentColor\" />\n                    {{ kpi.delta }}\n                  </span>\n                }\n              </div>\n            </article>\n          }\n        </section>\n\n        <div class=\"grid grid-cols-1 gap-base md:grid-cols-2\">\n          <article class=\"flex flex-col gap-md overflow-hidden rounded-lg bg-white p-base analytics-page__chart\">\n            <div class=\"flex flex-wrap items-center justify-between gap-base\">\n              <h3>Call Volume</h3>\n              <ul class=\"m-0 flex list-none flex-wrap items-center justify-end gap-md p-0\">\n                <li class=\"inline-flex items-center gap-2xs\">\n                  <span class=\"analytics-page__dot analytics-page__dot--total h-2 w-2 rounded-full\"></span>\n                  <span class=\"fs-sm font-semibold text-body\">Total Calls</span>\n                </li>\n                <li class=\"inline-flex items-center gap-2xs\">\n                  <span class=\"analytics-page__dot analytics-page__dot--in h-2 w-2 rounded-full\"></span>\n                  <span class=\"fs-sm font-semibold text-body\">Inbound Calls</span>\n                </li>\n                <li class=\"inline-flex items-center gap-2xs\">\n                  <span class=\"analytics-page__dot analytics-page__dot--out h-2 w-2 rounded-full\"></span>\n                  <span class=\"fs-sm font-semibold text-body\">Outbound Calls</span>\n                </li>\n              </ul>\n            </div>\n            <div class=\"analytics-page__line-chart relative h-60\">\n              <svg viewBox=\"0 0 100 100\" preserveAspectRatio=\"none\" aria-hidden=\"true\">\n                <path class=\"analytics-page__area\" [attr.d]=\"volumeAreaPath()\" />\n                <path\n                  class=\"analytics-page__line analytics-page__line--total\"\n                  [attr.d]=\"volumeTotalPath()\"\n                  fill=\"none\"\n                />\n                <path\n                  class=\"analytics-page__line analytics-page__line--in\"\n                  [attr.d]=\"volumeInboundPath()\"\n                  fill=\"none\"\n                />\n                <path\n                  class=\"analytics-page__line analytics-page__line--out\"\n                  [attr.d]=\"volumeOutboundPath()\"\n                  fill=\"none\"\n                />\n              </svg>\n              <div\n                class=\"analytics-page__volume-hit flex\"\n                role=\"list\"\n                aria-label=\"Call volume by period\"\n                (mouseleave)=\"onVolumeLeave()\"\n              >\n                @for (point of volumePointVms(); track point.trackKey; let i = $index) {\n                  <button\n                    type=\"button\"\n                    class=\"analytics-page__volume-col relative min-w-0 flex-1 cursor-default border-none bg-transparent p-0\"\n                    role=\"listitem\"\n                    [class.analytics-page__volume-col--active]=\"hoveredVolume() === i\"\n                    [attr.aria-label]=\"point.tooltip\"\n                    (mouseenter)=\"onVolumeEnter(i)\"\n                    (focus)=\"onVolumeEnter(i)\"\n                    (blur)=\"onVolumeLeave()\"\n                  >\n                    <span class=\"analytics-page__tooltip analytics-page__tooltip--multiline\">\n                      {{ point.tooltip }}\n                    </span>\n                  </button>\n                }\n              </div>\n              <div class=\"mt-xs flex justify-between gap-2xs\">\n                @for (label of volumeAxisLabels(); track $index) {\n                  <span class=\"flex-1 text-center fs-xs font-semibold uppercase tracking-wide text-light\">\n                    {{ label }}\n                  </span>\n                }\n              </div>\n            </div>\n          </article>\n\n          <article class=\"flex flex-col gap-base overflow-hidden rounded-lg bg-white p-base analytics-page__chart\">\n            <h3>Top Call Reasons</h3>\n            <div class=\"flex flex-col gap-md\">\n              @for (item of reasonRows(); track item.label) {\n                <div\n                  class=\"analytics-page__hbar-row grid items-center gap-sm\"\n                  [attr.aria-label]=\"item.tooltip\"\n                >\n                  <span class=\"fs-xs font-semibold uppercase tracking-wide text-light text-right\">\n                    {{ item.label }}\n                  </span>\n                  <div class=\"analytics-page__hbar-track relative h-3 overflow-hidden rounded-r-xl\">\n                    <span\n                      class=\"analytics-page__hbar-fill block h-full min-w-1 rounded-r-xl\"\n                      [style.width.%]=\"item.widthPct\"\n                      [style.background]=\"item.color\"\n                      [style.animation-delay.ms]=\"item.delayMs\"\n                    ></span>\n                    <span class=\"analytics-page__tooltip\">{{ item.tooltip }}</span>\n                  </div>\n                  <span class=\"fs-xs font-semibold uppercase tracking-wide text-dark text-right\">\n                    {{ item.value }}%\n                  </span>\n                </div>\n              }\n            </div>\n          </article>\n\n          <article class=\"flex flex-col gap-base overflow-hidden rounded-lg bg-white p-base analytics-page__chart\">\n            <h3>Reasons AI got stuck</h3>\n            <div class=\"flex flex-col gap-md\">\n              @for (item of transferRows(); track item.label) {\n                <div\n                  class=\"analytics-page__hbar-row grid items-center gap-sm\"\n                  [attr.aria-label]=\"item.tooltip\"\n                >\n                  <span class=\"fs-xs font-semibold uppercase tracking-wide text-light text-right\">\n                    {{ item.label }}\n                  </span>\n                  <div class=\"analytics-page__hbar-track relative h-3 overflow-hidden rounded-r-xl\">\n                    <span\n                      class=\"analytics-page__hbar-fill block h-full min-w-1 rounded-r-xl\"\n                      [style.width.%]=\"item.widthPct\"\n                      [style.background]=\"item.color\"\n                      [style.animation-delay.ms]=\"item.delayMs\"\n                    ></span>\n                    <span class=\"analytics-page__tooltip\">{{ item.tooltip }}</span>\n                  </div>\n                  <span class=\"fs-xs font-semibold uppercase tracking-wide text-dark text-right\">\n                    {{ item.value }}%\n                  </span>\n                </div>\n              }\n            </div>\n          </article>\n\n          <article class=\"flex flex-col gap-md overflow-hidden rounded-lg bg-white p-base analytics-page__chart\">\n            <h3>Peak Hours</h3>\n            <div class=\"flex flex-col gap-xs\">\n              <div class=\"flex h-40 items-end gap-xs\" role=\"list\" aria-label=\"Call volume by hour\">\n                @for (point of peakRows(); track point.hour) {\n                  <div\n                    class=\"analytics-page__peak-col flex h-full min-w-0 flex-1 flex-col\"\n                    role=\"listitem\"\n                    [attr.aria-label]=\"point.tooltip\"\n                  >\n                    <div class=\"analytics-page__peak-wrap relative flex min-h-0 flex-1 items-end justify-center\">\n                      <div\n                        class=\"analytics-page__peak-bar w-3 min-h-0.5 rounded-t-full\"\n                        [style.height.%]=\"point.heightPct\"\n                        [style.animation-delay.ms]=\"point.delayMs\"\n                      ></div>\n                      <span class=\"analytics-page__tooltip\">{{ point.tooltip }}</span>\n                    </div>\n                  </div>\n                }\n              </div>\n              <div class=\"flex gap-xs\">\n                @for (point of peakRows(); track point.hour) {\n                  <span class=\"min-h-3.5 flex-1 text-center fs-xs font-semibold uppercase tracking-wide text-light\">\n                    @if (point.showLabel) {\n                      {{ point.label }}\n                    }\n                  </span>\n                }\n              </div>\n            </div>\n          </article>\n        </div>\n      </div>\n    }\n  }\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";.analytics-page__range-btn--active{background:var(--eds-brand-500);color:#fff}.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% - 28px);overflow:visible}.analytics-page__volume-hit{position:absolute;inset:0 0 28px;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\">\n  <header class=\"mb-md flex shrink-0 items-start justify-between gap-base\">\n    <div class=\"flex flex-col gap-2xs\">\n      <h4>Analytics</h4>\n      <p class=\"fs-sm text-light\">Call volume, outcomes, and agent performance</p>\n    </div>\n    <div class=\"flex shrink-0 items-center gap-base\">\n      <ed-button variant=\"default\" outline size=\"sm\">\n        <ed-icon slot=\"prefix\" name=\"download\" [size]=\"16\" />\n        Export\n      </ed-button>\n      <ed-icon-button\n        name=\"filter_alt\"\n        label=\"Filters\"        outline\n        [pressed]=\"filtersOpen()\"\n        toggle\n        (click)=\"toggleFilters()\"\n      />\n    </div>\n  </header>\n\n  <div class=\"flex min-h-0 flex-1 flex-col gap-md overflow-y-auto\">\n  @if (filtersOpen()) {\n    <div\n      class=\"flex flex-wrap items-center gap-sm rounded-lg border border-light bg-white p-base\"\n      role=\"group\"\n      aria-label=\"Date range\"\n    >\n      @for (r of ranges; track r.id) {\n        <button\n          type=\"button\"\n          class=\"analytics-page__range-btn cursor-pointer rounded border-none bg-transparent px-3 py-2 text-light\"\n          [class.analytics-page__range-btn--active]=\"range() === r.id\"\n          (click)=\"setRange(r.id)\"\n        >\n          {{ r.label }}\n        </button>\n      }\n      <span class=\"fs-sm text-light\">Showing data for {{ periodLabel() }}</span>\n    </div>\n  }\n\n  @if (loading()) {\n    <div class=\"flex flex-col gap-base\" aria-busy=\"true\" aria-live=\"polite\">\n      <section class=\"flex flex-col gap-base lg:flex-row\" aria-label=\"Key outcomes\">\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\">\n          <ed-skeleton class=\"h-3 w-40\"></ed-skeleton>\n          <ed-skeleton class=\"h-7 w-28\"></ed-skeleton>\n          <ed-skeleton class=\"h-3 w-48\"></ed-skeleton>\n          <ed-skeleton class=\"h-3 w-36\"></ed-skeleton>\n        </article>\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\">\n          <div class=\"flex w-full shrink-0 flex-col gap-sm lg:w-52\">\n            <ed-skeleton class=\"h-3 w-36\"></ed-skeleton>\n            <ed-skeleton class=\"h-7 w-20\"></ed-skeleton>\n            <ed-skeleton class=\"h-3 w-40\"></ed-skeleton>\n          </div>\n          <div class=\"flex min-w-0 flex-1 flex-col gap-sm\">\n            <div class=\"flex items-center justify-between gap-sm\">\n              <ed-skeleton class=\"h-3 w-28\"></ed-skeleton>\n              <ed-skeleton class=\"h-3 w-24\"></ed-skeleton>\n            </div>\n            <ed-skeleton class=\"h-8 w-full !rounded-md\"></ed-skeleton>\n            <div class=\"flex flex-wrap gap-md\">\n              @for (_ of legendSkeletonRows; track _) {\n                <div class=\"inline-flex items-center gap-xs\">\n                  <ed-skeleton class=\"h-4 w-4 !rounded-sm\"></ed-skeleton>\n                  <ed-skeleton class=\"h-3 w-20\"></ed-skeleton>\n                </div>\n              }\n            </div>\n          </div>\n        </article>\n      </section>\n\n      <section class=\"grid grid-cols-1 gap-base sm:grid-cols-2 xl:grid-cols-4\" aria-label=\"Activity KPIs\">\n        @for (_ of kpiSkeletonRows; track _) {\n          <article class=\"flex flex-col gap-2xs rounded-md border border-light bg-white p-base\">\n            <ed-skeleton class=\"h-3 w-28\"></ed-skeleton>\n            <ed-skeleton class=\"h-6 w-14\"></ed-skeleton>\n            <ed-skeleton class=\"h-3 w-24\"></ed-skeleton>\n          </article>\n        }\n      </section>\n\n      <div class=\"grid grid-cols-1 gap-base md:grid-cols-2\">\n        <article class=\"flex flex-col gap-base overflow-hidden rounded-lg border border-light bg-white p-base\">\n          <div class=\"flex flex-wrap items-center justify-between gap-base\">\n            <h3>Call Volume</h3>\n            <div class=\"flex flex-wrap gap-md\">\n              @for (_ of legendSkeletonRows; track _) {\n                <ed-skeleton class=\"h-3 w-20\"></ed-skeleton>\n              }\n            </div>\n          </div>\n          <ed-skeleton class=\"h-60 w-full !rounded-md\"></ed-skeleton>\n        </article>\n        <article class=\"flex flex-col gap-base overflow-hidden rounded-lg border border-light bg-white p-base\">\n          <h3>Top Call Reasons</h3>\n          <div class=\"flex flex-col gap-md\">\n            @for (_ of chartRowSkeletonRows; track _) {\n              <div class=\"grid grid-cols-[minmax(110px,140px)_1fr_42px] items-center gap-sm\">\n                <ed-skeleton class=\"h-3 w-20 justify-self-end\"></ed-skeleton>\n                <ed-skeleton class=\"h-3 w-full !rounded-r-xl\"></ed-skeleton>\n                <ed-skeleton class=\"h-3 w-8 justify-self-end\"></ed-skeleton>\n              </div>\n            }\n          </div>\n        </article>\n        <article class=\"flex flex-col gap-base overflow-hidden rounded-lg border border-light bg-white p-base\">\n          <h3>Reasons AI got stuck</h3>\n          <div class=\"flex flex-col gap-md\">\n            @for (_ of chartRowSkeletonRows; track _) {\n              <div class=\"grid grid-cols-[minmax(110px,140px)_1fr_42px] items-center gap-sm\">\n                <ed-skeleton class=\"h-3 w-20 justify-self-end\"></ed-skeleton>\n                <ed-skeleton class=\"h-3 w-full !rounded-r-xl\"></ed-skeleton>\n                <ed-skeleton class=\"h-3 w-8 justify-self-end\"></ed-skeleton>\n              </div>\n            }\n          </div>\n        </article>\n        <article class=\"flex flex-col gap-base overflow-hidden rounded-lg border border-light bg-white p-base\">\n          <h3>Peak Hours</h3>\n          <div class=\"flex h-40 items-end gap-xs\">\n            @for (heightClass of peakSkeletonRows; track $index) {\n              <ed-skeleton [class]=\"'min-w-0 flex-1 !rounded-t-full ' + heightClass\"></ed-skeleton>\n            }\n          </div>\n        </article>\n      </div>\n    </div>\n  } @else {\n    @if (data(); as d) {\n      <div class=\"analytics-page__body flex flex-col gap-base\" [class.analytics-page__body--ready]=\"chartsReady()\">\n        <section class=\"flex flex-col gap-base lg:flex-row\" aria-label=\"Key outcomes\">\n          <article\n            class=\"analytics-page__impact flex min-h-36 shrink-0 flex-col gap-sm rounded-md p-base text-white lg:w-72\"\n          >\n            <div class=\"flex items-center gap-2xs\">\n              <ed-icon name=\"lightning\" [size]=\"12\" color=\"currentColor\" />\n              <span class=\"fs-xs font-semibold uppercase tracking-wide opacity-90\">\n                {{ impactKpi()?.label || 'Estimated Impact This Month' }}\n              </span>\n            </div>\n            <strong class=\"fs-lg font-semibold leading-tight\">\n              {{ impactKpi()?.value || '\u2014' }}\n            </strong>\n            <div class=\"flex flex-col gap-2xs opacity-90\">\n              <p class=\"m-0 fs-sm\">{{ impactSubPrimary() }}</p>\n              @if (impactSubSecondary(); as secondary) {\n                <p class=\"m-0 fs-xs opacity-90\">{{ secondary }}</p>\n              }\n            </div>\n          </article>\n\n          <article\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\"\n          >\n            <div class=\"flex w-full shrink-0 flex-col gap-sm lg:w-52\">\n              <span class=\"fs-xs font-semibold uppercase tracking-wide text-light\">\n                {{ resolutionKpi()?.label || 'AI Autonomous Resolution' }}\n              </span>\n              <strong class=\"fs-lg font-semibold text-dark\">\n                {{ resolutionKpi()?.value || '\u2014' }}\n              </strong>\n              <div class=\"flex flex-wrap items-center gap-xs\">\n                <span class=\"fs-sm text-body\">\n                  {{ resolutionKpi()?.sub || 'without staff intervention' }}\n                </span>\n                @if (resolutionTrend(); as trend) {\n                  <span class=\"analytics-page__divider\" aria-hidden=\"true\"></span>\n                  <span\n                    class=\"analytics-page__trend inline-flex items-center gap-2xs\"\n                    [attr.data-tone]=\"trend.tone\"\n                  >\n                    <ed-icon [name]=\"trend.icon\" [size]=\"12\" color=\"currentColor\" />\n                    {{ trend.delta }}\n                  </span>\n                }\n              </div>\n            </div>\n\n            <div class=\"analytics-page__v-divider hidden lg:block\" aria-hidden=\"true\"></div>\n\n            <div class=\"analytics-page__distribution flex min-w-0 flex-1 flex-col gap-sm\">\n              <div class=\"flex flex-wrap items-center justify-between gap-sm\">\n                <strong class=\"fs-sm font-semibold text-body\">{{ totalCallsLabel() }}</strong>\n                @if (directionSub(); as dir) {\n                  <span class=\"fs-sm text-body\">{{ dir }}</span>\n                }\n              </div>\n              <div\n                class=\"analytics-page__stack flex h-8 gap-2xs overflow-hidden rounded-md\"\n                role=\"img\"\n                aria-label=\"Call distribution\"\n              >\n                @for (seg of distribution(); track seg.label) {\n                  <span\n                    class=\"analytics-page__stack-seg relative flex min-w-0 items-center justify-center\"\n                    [style.flex-grow]=\"seg.width\"\n                    [style.background]=\"seg.color\"\n                    [attr.aria-label]=\"seg.tooltip\"\n                  >\n                    @if (seg.width >= 8) {\n                      <span\n                        class=\"analytics-page__stack-pct fs-xs font-semibold uppercase tracking-wide\"\n                        [style.color]=\"seg.textColor\"\n                      >\n                        {{ seg.value }}%\n                      </span>\n                    }\n                    <span class=\"analytics-page__tooltip\">{{ seg.tooltip }}</span>\n                  </span>\n                }\n              </div>\n              <ul class=\"m-0 flex list-none flex-wrap gap-x-md gap-y-xs p-0\">\n                @for (seg of distribution(); track seg.label) {\n                  <li class=\"inline-flex items-center gap-xs\">\n                    <span\n                      class=\"h-4 w-4 shrink-0 rounded-sm\"\n                      [style.background]=\"seg.color\"\n                    ></span>\n                    <span class=\"inline-flex items-center gap-2xs\">\n                      <strong class=\"fs-sm font-semibold text-body\">{{ seg.label }}</strong>\n                      <span class=\"fs-xs text-light\">{{ seg.callsText }}</span>\n                    </span>\n                  </li>\n                }\n              </ul>\n            </div>\n          </article>\n        </section>\n\n        <section\n          class=\"grid grid-cols-1 gap-base sm:grid-cols-2 xl:grid-cols-4\"\n          aria-label=\"Activity KPIs\"\n        >\n          @for (kpi of secondaryKpis(); track kpi.label) {\n            <article class=\"analytics-page__card flex flex-col gap-2xs rounded-md bg-white p-base\">\n              <span class=\"fs-xs font-semibold uppercase tracking-wide text-light\">{{ kpi.label }}</span>\n              <strong class=\"font-semibold text-dark\">{{ kpi.value }}</strong>\n              <div class=\"flex flex-wrap items-center gap-xs\">\n                @if (kpi.sub) {\n                  <span class=\"fs-sm text-body\">{{ kpi.sub }}</span>\n                }\n                @if (kpi.delta) {\n                  <span class=\"analytics-page__divider\" aria-hidden=\"true\"></span>\n                  <span\n                    class=\"analytics-page__trend inline-flex items-center gap-2xs\"\n                    [attr.data-tone]=\"kpi.tone\"\n                  >\n                    <ed-icon [name]=\"kpi.trendIcon\" [size]=\"12\" color=\"currentColor\" />\n                    {{ kpi.delta }}\n                  </span>\n                }\n              </div>\n            </article>\n          }\n        </section>\n\n        <div class=\"grid grid-cols-1 gap-base md:grid-cols-2\">\n          <article class=\"flex flex-col gap-md overflow-hidden rounded-lg bg-white p-base analytics-page__chart\">\n            <div class=\"flex flex-wrap items-center justify-between gap-base\">\n              <h3>Call Volume</h3>\n              <ul class=\"m-0 flex list-none flex-wrap items-center justify-end gap-md p-0\">\n                <li class=\"inline-flex items-center gap-2xs\">\n                  <span class=\"analytics-page__dot analytics-page__dot--total h-2 w-2 rounded-full\"></span>\n                  <span class=\"fs-sm font-semibold text-body\">Total Calls</span>\n                </li>\n                <li class=\"inline-flex items-center gap-2xs\">\n                  <span class=\"analytics-page__dot analytics-page__dot--in h-2 w-2 rounded-full\"></span>\n                  <span class=\"fs-sm font-semibold text-body\">Inbound Calls</span>\n                </li>\n                <li class=\"inline-flex items-center gap-2xs\">\n                  <span class=\"analytics-page__dot analytics-page__dot--out h-2 w-2 rounded-full\"></span>\n                  <span class=\"fs-sm font-semibold text-body\">Outbound Calls</span>\n                </li>\n              </ul>\n            </div>\n            <div class=\"analytics-page__line-chart relative h-60\">\n              <svg viewBox=\"0 0 100 100\" preserveAspectRatio=\"none\" aria-hidden=\"true\">\n                <path class=\"analytics-page__area\" [attr.d]=\"volumeAreaPath()\" />\n                <path\n                  class=\"analytics-page__line analytics-page__line--total\"\n                  [attr.d]=\"volumeTotalPath()\"\n                  fill=\"none\"\n                />\n                <path\n                  class=\"analytics-page__line analytics-page__line--in\"\n                  [attr.d]=\"volumeInboundPath()\"\n                  fill=\"none\"\n                />\n                <path\n                  class=\"analytics-page__line analytics-page__line--out\"\n                  [attr.d]=\"volumeOutboundPath()\"\n                  fill=\"none\"\n                />\n              </svg>\n              <div\n                class=\"analytics-page__volume-hit flex\"\n                role=\"list\"\n                aria-label=\"Call volume by period\"\n                (mouseleave)=\"onVolumeLeave()\"\n              >\n                @for (point of volumePointVms(); track point.trackKey; let i = $index) {\n                  <button\n                    type=\"button\"\n                    class=\"analytics-page__volume-col relative min-w-0 flex-1 cursor-default border-none bg-transparent p-0\"\n                    role=\"listitem\"\n                    [class.analytics-page__volume-col--active]=\"hoveredVolume() === i\"\n                    [attr.aria-label]=\"point.tooltip\"\n                    (mouseenter)=\"onVolumeEnter(i)\"\n                    (focus)=\"onVolumeEnter(i)\"\n                    (blur)=\"onVolumeLeave()\"\n                  >\n                    <span class=\"analytics-page__tooltip analytics-page__tooltip--multiline\">\n                      {{ point.tooltip }}\n                    </span>\n                  </button>\n                }\n              </div>\n              <div class=\"mt-xs flex justify-between gap-2xs\">\n                @for (label of volumeAxisLabels(); track $index) {\n                  <span class=\"flex-1 text-center fs-xs font-semibold uppercase tracking-wide text-light\">\n                    {{ label }}\n                  </span>\n                }\n              </div>\n            </div>\n          </article>\n\n          <article class=\"flex flex-col gap-base overflow-hidden rounded-lg bg-white p-base analytics-page__chart\">\n            <h3>Top Call Reasons</h3>\n            <div class=\"flex flex-col gap-md\">\n              @for (item of reasonRows(); track item.label) {\n                <div\n                  class=\"analytics-page__hbar-row grid items-center gap-sm\"\n                  [attr.aria-label]=\"item.tooltip\"\n                >\n                  <span class=\"fs-xs font-semibold uppercase tracking-wide text-light text-right\">\n                    {{ item.label }}\n                  </span>\n                  <div class=\"analytics-page__hbar-track relative h-3 overflow-hidden rounded-r-xl\">\n                    <span\n                      class=\"analytics-page__hbar-fill block h-full min-w-1 rounded-r-xl\"\n                      [style.width.%]=\"item.widthPct\"\n                      [style.background]=\"item.color\"\n                      [style.animation-delay.ms]=\"item.delayMs\"\n                    ></span>\n                    <span class=\"analytics-page__tooltip\">{{ item.tooltip }}</span>\n                  </div>\n                  <span class=\"fs-xs font-semibold uppercase tracking-wide text-dark text-right\">\n                    {{ item.value }}%\n                  </span>\n                </div>\n              }\n            </div>\n          </article>\n\n          <article class=\"flex flex-col gap-base overflow-hidden rounded-lg bg-white p-base analytics-page__chart\">\n            <h3>Reasons AI got stuck</h3>\n            <div class=\"flex flex-col gap-md\">\n              @for (item of transferRows(); track item.label) {\n                <div\n                  class=\"analytics-page__hbar-row grid items-center gap-sm\"\n                  [attr.aria-label]=\"item.tooltip\"\n                >\n                  <span class=\"fs-xs font-semibold uppercase tracking-wide text-light text-right\">\n                    {{ item.label }}\n                  </span>\n                  <div class=\"analytics-page__hbar-track relative h-3 overflow-hidden rounded-r-xl\">\n                    <span\n                      class=\"analytics-page__hbar-fill block h-full min-w-1 rounded-r-xl\"\n                      [style.width.%]=\"item.widthPct\"\n                      [style.background]=\"item.color\"\n                      [style.animation-delay.ms]=\"item.delayMs\"\n                    ></span>\n                    <span class=\"analytics-page__tooltip\">{{ item.tooltip }}</span>\n                  </div>\n                  <span class=\"fs-xs font-semibold uppercase tracking-wide text-dark text-right\">\n                    {{ item.value }}%\n                  </span>\n                </div>\n              }\n            </div>\n          </article>\n\n          <article class=\"flex flex-col gap-md overflow-hidden rounded-lg bg-white p-base analytics-page__chart\">\n            <h3>Peak Hours</h3>\n            <div class=\"flex flex-col gap-xs\">\n              <div class=\"flex h-40 items-end gap-xs\" role=\"list\" aria-label=\"Call volume by hour\">\n                @for (point of peakRows(); track point.hour) {\n                  <div\n                    class=\"analytics-page__peak-col flex h-full min-w-0 flex-1 flex-col\"\n                    role=\"listitem\"\n                    [attr.aria-label]=\"point.tooltip\"\n                  >\n                    <div class=\"analytics-page__peak-wrap relative flex min-h-0 flex-1 items-end justify-center\">\n                      <div\n                        class=\"analytics-page__peak-bar w-3 min-h-0.5 rounded-t-full\"\n                        [style.height.%]=\"point.heightPct\"\n                        [style.animation-delay.ms]=\"point.delayMs\"\n                      ></div>\n                      <span class=\"analytics-page__tooltip\">{{ point.tooltip }}</span>\n                    </div>\n                  </div>\n                }\n              </div>\n              <div class=\"flex gap-xs\">\n                @for (point of peakRows(); track point.hour) {\n                  <span class=\"min-h-3.5 flex-1 text-center fs-xs font-semibold uppercase tracking-wide text-light\">\n                    @if (point.showLabel) {\n                      {{ point.label }}\n                    }\n                  </span>\n                }\n              </div>\n            </div>\n          </article>\n        </div>\n      </div>\n    }\n  }\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";.analytics-page__range-btn--active{background:var(--eds-brand-500);color:#fff}.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% - 28px);overflow:visible}.analytics-page__volume-hit{position:absolute;inset:0 0 28px;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-DbKJgP1d.mjs.map