@edvak99/voice-receptionist-widget 1.1.5 → 1.1.7

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

@@ -0,0 +1,277 @@
+import * as i0 from '@angular/core';
+import { inject, signal, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { A as AiReceptionistApiService } from './edvak99-voice-receptionist-widget-ai-receptionist-api.service-DokIb-9r.mjs';
+import { EdsIconComponent, EdsButtonComponent } from './edvak99-voice-receptionist-widget.mjs';
+
+const REASON_COLORS = ['#8E51FF', '#3681F4', '#F472B6', '#7DD3FC', '#FDA4AF', '#34D399', '#FBBF24'];
+const STUCK_COLORS = ['#8E51FF', '#3681F4', '#7DD3FC', '#FBBF24'];
+class AnalyticsPageComponent {
+    constructor() {
+        this.api = inject(AiReceptionistApiService);
+        this.data = signal(null);
+        this.range = signal('30d');
+        this.loading = signal(true);
+        this.chartsReady = signal(false);
+        this.hoveredVolume = signal(null);
+        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.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);
+            }
+            if (picked.length >= 4)
+                return picked.slice(0, 4);
+            const rest = cards.filter((c) => !picked.includes(c) &&
+                !/(impact|hours|front-desk|autonomous|resolution)/i.test(c.label));
+            return [...picked, ...rest].slice(0, 4);
+        });
+        this.distribution = computed(() => {
+            const outcomes = this.data()?.outcomes ?? [];
+            const total = outcomes.reduce((s, o) => s + o.value, 0) || 1;
+            return outcomes.map((o) => ({
+                ...o,
+                pct: Math.round((o.value / total) * 100),
+                width: (o.value / total) * 100,
+            }));
+        });
+        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 ?? []);
+        /** 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);
+        });
+    }
+    ngOnInit() {
+        this.load();
+    }
+    setRange(id) {
+        this.range.set(id);
+        this.load();
+    }
+    maxCount(items) {
+        return Math.max(...items.map((i) => i.count), 1);
+    }
+    barHeightPercent(point, points) {
+        if (point.count <= 0)
+            return 0;
+        return (point.count / this.maxCount(points)) * 100;
+    }
+    maxValue(items) {
+        return Math.max(...items.map((i) => i.value), 1);
+    }
+    reasonColor(index) {
+        return REASON_COLORS[index % REASON_COLORS.length];
+    }
+    stuckColor(index) {
+        return STUCK_COLORS[index % STUCK_COLORS.length];
+    }
+    peakTooltip(point) {
+        return `${point.label}: ${point.count} call${point.count === 1 ? '' : 's'}`;
+    }
+    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}`;
+    }
+    hbarTooltip(label, value) {
+        return `${label}: ${value}%`;
+    }
+    distributionTooltip(label, value) {
+        const calls = this.estimatedCalls(value);
+        return `${label}: ${value}% (${calls.toLocaleString()} calls)`;
+    }
+    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;
+    }
+    volumePath(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(' ');
+    }
+    volumeAreaPath() {
+        const line = this.volumePath('total');
+        if (!line)
+            return '';
+        return `${line} L100,100 L0,100 Z`;
+    }
+    volumeAxisLabels() {
+        const points = this.volumePoints();
+        return points.map((p, i) => this.volumeAxisLabel(p, i, points.length));
+    }
+    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);
+    }
+    onVolumeEnter(index) {
+        this.hoveredVolume.set(index);
+    }
+    onVolumeLeave() {
+        this.hoveredVolume.set(null);
+    }
+    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", ngImport: i0, template: "<div class=\"eds-page analytics-page\">\n  <header class=\"mb-5 flex flex-wrap items-start justify-between gap-4\">\n    <div>\n      <h1 class=\"eds-h1\">Analytics</h1>\n      <p class=\"eds-body-sm\">How the AI is doing over time, and what\u2019s worth changing.</p>\n    </div>\n    <div class=\"flex flex-wrap items-center gap-2\">\n      <div class=\"analytics-page__range flex gap-1 rounded-md border p-1\" role=\"group\" aria-label=\"Date range\">\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-sm text-zinc-500\"\n            [class.analytics-page__range-btn--active]=\"range() === r.id\"\n            (click)=\"setRange(r.id)\"\n          >\n            {{ r.label }}\n          </button>\n        }\n      </div>\n      <eds-button variant=\"secondary\" type=\"button\">\n        <eds-icon name=\"download\" [size]=\"18\" />\n        Export\n      </eds-button>\n      <button\n        type=\"button\"\n        class=\"analytics-page__icon-btn inline-flex h-9 w-9 cursor-pointer items-center justify-center rounded-md border text-zinc-500\"\n        aria-label=\"Filter\"\n      >\n        <eds-icon name=\"filter_list\" [size]=\"20\" />\n      </button>\n    </div>\n  </header>\n\n  @if (loading()) {\n    <div class=\"flex flex-col gap-4\" aria-busy=\"true\" aria-live=\"polite\">\n      <div class=\"analytics-page__skeleton analytics-page__skeleton--hero h-36 rounded-2xl border\"></div>\n      <div class=\"flex gap-3\">\n        <div class=\"analytics-page__skeleton analytics-page__skeleton--stat h-24 flex-1 rounded-2xl border\"></div>\n        <div class=\"analytics-page__skeleton analytics-page__skeleton--stat h-24 flex-1 rounded-2xl border\"></div>\n        <div class=\"analytics-page__skeleton analytics-page__skeleton--stat h-24 flex-1 rounded-2xl border\"></div>\n        <div class=\"analytics-page__skeleton analytics-page__skeleton--stat h-24 flex-1 rounded-2xl border\"></div>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        <div class=\"analytics-page__skeleton analytics-page__skeleton--chart h-72 flex-1 rounded-2xl border\"></div>\n        <div class=\"analytics-page__skeleton analytics-page__skeleton--chart h-72 flex-1 rounded-2xl border\"></div>\n      </div>\n      <p class=\"eds-body-sm mt-1\">Loading analytics\u2026</p>\n    </div>\n  } @else {\n    @if (data(); as d) {\n    <div class=\"analytics-page__body\" [class.analytics-page__body--ready]=\"chartsReady()\">\n    <section\n      class=\"analytics-page__hero eds-animate-fade-up mb-3 grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-3\"\n      aria-label=\"Key outcomes\"\n    >\n      <article class=\"analytics-page__impact flex min-h-36 flex-col gap-2 rounded-2xl p-5 text-white\">\n        <span class=\"text-sm font-medium leading-snug opacity-90\">\n          {{ impactKpi()?.label || 'Estimated Impact This Month' }}\n        </span>\n        <strong class=\"text-4xl font-bold leading-tight tracking-tight\">\n          {{ impactKpi()?.value || '\u2014' }}\n        </strong>\n        <p class=\"m-0 max-w-sm text-sm leading-normal opacity-90\">\n          {{ impactKpi()?.sub || 'of front-desk time handled by the AI' }}\n        </p>\n      </article>\n\n      <article class=\"analytics-page__card flex flex-col justify-center gap-2 rounded-2xl border bg-white px-4 py-4\">\n        <span class=\"eds-label\">{{ resolutionKpi()?.label || 'AI Autonomous Resolution' }}</span>\n        <div class=\"flex items-baseline gap-3\">\n          <strong class=\"text-4xl font-bold leading-none text-zinc-900\">\n            {{ resolutionKpi()?.value || '\u2014' }}\n          </strong>\n          @if (resolutionKpi()?.delta) {\n            <span\n              class=\"analytics-page__trend inline-flex items-center gap-1 text-xs font-semibold leading-none\"\n              [attr.data-tone]=\"deltaTone(resolutionKpi())\"\n            >\n              <eds-icon\n                [name]=\"deltaTone(resolutionKpi()) === 'pos' ? 'trending_up' : 'trending_down'\"\n                [size]=\"16\"\n              />\n              {{ resolutionKpi()!.delta }}\n            </span>\n          }\n        </div>\n        <p class=\"m-0 text-xs leading-normal text-zinc-500\">\n          {{ resolutionKpi()?.sub || 'without staff intervention' }}\n        </p>\n      </article>\n\n      <article\n        class=\"analytics-page__distribution analytics-page__card flex flex-col gap-3 rounded-2xl border bg-white px-4 py-4 md:col-span-2 lg:col-span-1\"\n      >\n        <div class=\"flex flex-wrap items-baseline justify-between gap-3\">\n          <strong class=\"text-xl font-bold leading-snug text-zinc-900\">{{ totalCallsLabel() }}</strong>\n          @if (directionSub(); as dir) {\n            <span class=\"text-xs leading-normal text-zinc-500\">{{ dir }}</span>\n          }\n        </div>\n        <div class=\"analytics-page__stack flex h-3.5 rounded-full\" role=\"img\" aria-label=\"Call distribution\">\n          @for (seg of distribution(); track seg.label) {\n            <span\n              class=\"analytics-page__stack-seg relative block h-full min-w-0.5 cursor-default\"\n              [style.width.%]=\"seg.width\"\n              [style.background]=\"seg.color\"\n              [attr.aria-label]=\"distributionTooltip(seg.label, seg.value)\"\n            >\n              <span class=\"analytics-page__tooltip\">{{ distributionTooltip(seg.label, seg.value) }}</span>\n            </span>\n          }\n        </div>\n        <ul class=\"m-0 flex list-none flex-wrap gap-x-4 gap-y-2 p-0 text-xs text-zinc-500\">\n          @for (seg of distribution(); track seg.label) {\n            <li class=\"inline-flex items-center gap-2\">\n              <span class=\"h-2 w-2 shrink-0 rounded-full\" [style.background]=\"seg.color\"></span>\n              <span>\n                {{ seg.label }}\n                <strong class=\"font-semibold text-zinc-900\">{{ estimatedCalls(seg.value).toLocaleString() }}</strong>\n                calls\n              </span>\n              <em class=\"not-italic font-semibold\">{{ seg.value }}%</em>\n            </li>\n          }\n        </ul>\n      </article>\n    </section>\n\n    <section\n      class=\"eds-animate-fade-up mb-4 grid grid-cols-1 gap-3 md:grid-cols-2 lg: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-2 rounded-2xl border bg-white px-4 py-4\">\n          <div class=\"flex items-center justify-between gap-2\">\n            <span class=\"eds-label\">{{ kpi.label }}</span>\n            @if (kpi.delta) {\n              <span\n                class=\"analytics-page__trend inline-flex items-center gap-1 text-xs font-semibold leading-none\"\n                [attr.data-tone]=\"deltaTone(kpi)\"\n              >\n                <eds-icon\n                  [name]=\"deltaTone(kpi) === 'pos' ? 'trending_up' : 'trending_down'\"\n                  [size]=\"14\"\n                />\n                {{ kpi.delta }}\n              </span>\n            }\n          </div>\n          <strong class=\"text-3xl font-bold leading-tight text-zinc-900\">{{ kpi.value }}</strong>\n          @if (kpi.sub) {\n            <span class=\"text-xs leading-normal text-zinc-500\">{{ kpi.sub }}</span>\n          }\n        </article>\n      }\n    </section>\n\n    <div class=\"grid grid-cols-1 gap-4 md:grid-cols-2\">\n      <article class=\"eds-card analytics-page__chart eds-animate-fade-up px-4 py-4 shadow-sm\">\n        <div class=\"analytics-page__chart-head mb-3 flex flex-wrap items-baseline justify-between gap-3\">\n          <div class=\"flex min-w-0 flex-wrap items-baseline gap-3\">\n            <h2 class=\"eds-h2\">Call Volume</h2>\n            <span\n              class=\"analytics-page__chart-period inline-flex items-center rounded-full border px-3 py-1 text-xs font-medium text-zinc-500\"\n            >\n              {{ periodLabel() }}\n            </span>\n          </div>\n          <ul class=\"m-0 flex list-none flex-wrap gap-x-4 gap-y-3 p-0 text-xs font-medium text-zinc-500\">\n            <li>\n              <span class=\"analytics-page__dot analytics-page__dot--total mr-2 inline-block h-2 w-2 rounded-full\"></span>\n              Total Calls\n            </li>\n            <li>\n              <span class=\"analytics-page__dot analytics-page__dot--in mr-2 inline-block h-2 w-2 rounded-full\"></span>\n              Inbound Calls\n            </li>\n            <li>\n              <span class=\"analytics-page__dot analytics-page__dot--out mr-2 inline-block h-2 w-2 rounded-full\"></span>\n              Outbound Calls\n            </li>\n          </ul>\n        </div>\n        <div class=\"analytics-page__line-chart relative h-56\">\n          <svg viewBox=\"0 0 100 100\" preserveAspectRatio=\"none\" aria-hidden=\"true\">\n            <path class=\"analytics-page__area\" [attr.d]=\"volumeAreaPath()\" />\n            <path class=\"analytics-page__line analytics-page__line--total\" [attr.d]=\"volumePath('total')\" fill=\"none\" />\n            <path class=\"analytics-page__line analytics-page__line--in\" [attr.d]=\"volumePath('inbound')\" fill=\"none\" />\n            <path class=\"analytics-page__line analytics-page__line--out\" [attr.d]=\"volumePath('outbound')\" fill=\"none\" />\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 volumePoints(); track point.date || point.label; 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]=\"volumeTooltip(point)\"\n                (mouseenter)=\"onVolumeEnter(i)\"\n                (focus)=\"onVolumeEnter(i)\"\n                (blur)=\"onVolumeLeave()\"\n              >\n                <span class=\"analytics-page__tooltip analytics-page__tooltip--multiline\">\n                  {{ volumeTooltip(point) }}\n                </span>\n              </button>\n            }\n          </div>\n          <div class=\"mt-2 flex justify-between gap-1\">\n            @for (label of volumeAxisLabels(); track $index) {\n              <span class=\"flex-1 text-center font-mono text-xs font-medium uppercase text-zinc-500\">\n                {{ label }}\n              </span>\n            }\n          </div>\n        </div>\n      </article>\n\n      <article class=\"eds-card analytics-page__chart eds-animate-fade-up px-4 py-4 shadow-sm\">\n        <h2 class=\"eds-h2 mb-4\">Top Call Reasons</h2>\n        <div class=\"flex flex-col gap-3\">\n          @for (item of d.reasons; track item.label; let i = $index) {\n            <div\n              class=\"analytics-page__hbar-row grid items-center gap-3\"\n              [attr.aria-label]=\"hbarTooltip(item.label, item.value)\"\n            >\n              <span class=\"text-sm font-medium text-zinc-900\">{{ item.label }}</span>\n              <div class=\"analytics-page__hbar-track relative h-2.5 rounded-full\">\n                <span\n                  class=\"analytics-page__hbar-fill block h-full min-w-1 rounded-full\"\n                  [style.width.%]=\"(item.value / maxValue(d.reasons)) * 100\"\n                  [style.background]=\"reasonColor(i)\"\n                  [style.animation-delay.ms]=\"i * 40\"\n                ></span>\n                <span class=\"analytics-page__tooltip\">{{ hbarTooltip(item.label, item.value) }}</span>\n              </div>\n              <span class=\"text-right font-mono text-xs font-semibold text-zinc-500\">{{ item.value }}%</span>\n            </div>\n          }\n        </div>\n      </article>\n\n      <article class=\"eds-card analytics-page__chart eds-animate-fade-up px-4 py-4 shadow-sm\">\n        <h2 class=\"eds-h2 mb-4\">Reasons AI got stuck</h2>\n        <div class=\"flex flex-col gap-3\">\n          @for (item of d.transfers; track item.label; let i = $index) {\n            <div\n              class=\"analytics-page__hbar-row grid items-center gap-3\"\n              [attr.aria-label]=\"hbarTooltip(item.label, item.value)\"\n            >\n              <span class=\"text-sm font-medium text-zinc-900\">{{ item.label }}</span>\n              <div class=\"analytics-page__hbar-track relative h-2.5 rounded-full\">\n                <span\n                  class=\"analytics-page__hbar-fill block h-full min-w-1 rounded-full\"\n                  [style.width.%]=\"(item.value / maxValue(d.transfers)) * 100\"\n                  [style.background]=\"stuckColor(i)\"\n                  [style.animation-delay.ms]=\"i * 40\"\n                ></span>\n                <span class=\"analytics-page__tooltip\">{{ hbarTooltip(item.label, item.value) }}</span>\n              </div>\n              <span class=\"text-right font-mono text-xs font-semibold text-zinc-500\">{{ item.value }}%</span>\n            </div>\n          }\n        </div>\n      </article>\n\n      <article class=\"eds-card analytics-page__chart eds-animate-fade-up px-4 py-4 shadow-sm\">\n        <div class=\"analytics-page__chart-head mb-3 flex flex-wrap items-baseline justify-between gap-3\">\n          <h2 class=\"eds-h2\">Peak Hours</h2>\n          <span class=\"eds-label\">\n            @if (d.peakHours.timezone) {\n              {{ d.peakHours.timezone }}\n            } @else {\n              Calls per hour\n            }\n          </span>\n        </div>\n        <div class=\"flex flex-col gap-2\">\n          <div class=\"flex h-40 items-end gap-1\" role=\"list\" aria-label=\"Call volume by hour\">\n            @for (point of d.peakHours.points; track point.hour; let i = $index) {\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]=\"peakTooltip(point)\"\n              >\n                <div class=\"analytics-page__peak-wrap relative flex min-h-0 flex-1 items-end\">\n                  <div\n                    class=\"analytics-page__peak-bar w-full min-h-0.5 rounded-t bg-blue-300 transition-colors duration-150\"\n                    [style.height.%]=\"barHeightPercent(point, d.peakHours.points)\"\n                    [style.animation-delay.ms]=\"i * 18\"\n                  ></div>\n                  <span class=\"analytics-page__tooltip\">{{ peakTooltip(point) }}</span>\n                </div>\n              </div>\n            }\n          </div>\n          <div class=\"flex gap-1\">\n            @for (point of d.peakHours.points; track point.hour; let i = $index) {\n              <span class=\"min-h-3.5 flex-1 text-center font-mono text-xs font-medium text-zinc-500\">\n                @if (showPeakAxisLabel(i, d.peakHours.points.length)) {\n                  {{ point.label }}\n                }\n              </span>\n            }\n          </div>\n        </div>\n      </article>\n    </div>\n    </div>\n    }\n  }\n</div>\n", styles: ["@charset \"UTF-8\";.analytics-page__range{background:var(--eds-surface-l0);border-color:var(--eds-border-default)}.analytics-page__range-btn--active{background:var(--eds-brand-500);color:#fff}.analytics-page__icon-btn{background:var(--eds-surface-l0);border-color:var(--eds-border-default)}.analytics-page__icon-btn:hover{color:var(--eds-text-primary);border-color:var(--eds-gray-300)}.analytics-page__impact{background:linear-gradient(145deg,#3b82f6,#2563eb 55%,#1d4ed8)}.analytics-page__card{background:var(--eds-surface-l0);border-color:var(--eds-border-default)}.analytics-page__stack{background:var(--eds-surface-l2)}.analytics-page__stack-seg:first-child{border-radius:999px 0 0 999px}.analytics-page__stack-seg:last-child{border-radius:0 999px 999px 0}.analytics-page__stack-seg:only-child{border-radius:999px}.analytics-page__stack-seg:hover .analytics-page__tooltip,.analytics-page__stack-seg:focus-within .analytics-page__tooltip{opacity:1;transform:translate(-50%)}.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__skeleton{background:linear-gradient(90deg,var(--eds-surface-l0) 0%,#eef2f4 45%,var(--eds-surface-l0) 90%);background-size:200% 100%;animation:analytics-shimmer 1.2s ease-in-out infinite;border-color:var(--eds-border-default)}.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:eds-bar-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[data-tone=pos]{color:var(--eds-green-600, #16a34a)}.analytics-page__trend[data-tone=warn],.analytics-page__trend[data-tone=neg]{color:var(--eds-red-500, #f03740)}.analytics-page__trend[data-tone=neutral]{color:var(--eds-text-secondary)}.analytics-page__chart-head .eds-h2{margin:0}.analytics-page__chart-period{background:var(--eds-surface-l1, #f7f9fa);border-color:var(--eds-border-default, #e5e5e5)}.analytics-page__dot--total{background:#3681f4}.analytics-page__dot--in{background:#8e51ff}.analytics-page__dot--out{background:#34d399}.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:#3681f41f}.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:#3681f4}.analytics-page__line--in{stroke:#8e51ff}.analytics-page__line--out{stroke:#34d399}.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-l2)}.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-col:hover .analytics-page__peak-bar{background:#60a5fa}@keyframes analytics-shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}@keyframes analytics-hbar-grow{0%{transform:scaleX(0)}to{transform:scaleX(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}}@media(min-width:768px)and (max-width:1023px){.analytics-page__distribution{grid-column:1/-1}}\n"], dependencies: [{ kind: "component", type: EdsIconComponent, selector: "eds-icon", inputs: ["name", "size", "fill", "weight"] }, { kind: "component", type: EdsButtonComponent, selector: "eds-button", inputs: ["variant", "type", "disabled"] }], 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: [EdsIconComponent, EdsButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"eds-page analytics-page\">\n  <header class=\"mb-5 flex flex-wrap items-start justify-between gap-4\">\n    <div>\n      <h1 class=\"eds-h1\">Analytics</h1>\n      <p class=\"eds-body-sm\">How the AI is doing over time, and what\u2019s worth changing.</p>\n    </div>\n    <div class=\"flex flex-wrap items-center gap-2\">\n      <div class=\"analytics-page__range flex gap-1 rounded-md border p-1\" role=\"group\" aria-label=\"Date range\">\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-sm text-zinc-500\"\n            [class.analytics-page__range-btn--active]=\"range() === r.id\"\n            (click)=\"setRange(r.id)\"\n          >\n            {{ r.label }}\n          </button>\n        }\n      </div>\n      <eds-button variant=\"secondary\" type=\"button\">\n        <eds-icon name=\"download\" [size]=\"18\" />\n        Export\n      </eds-button>\n      <button\n        type=\"button\"\n        class=\"analytics-page__icon-btn inline-flex h-9 w-9 cursor-pointer items-center justify-center rounded-md border text-zinc-500\"\n        aria-label=\"Filter\"\n      >\n        <eds-icon name=\"filter_list\" [size]=\"20\" />\n      </button>\n    </div>\n  </header>\n\n  @if (loading()) {\n    <div class=\"flex flex-col gap-4\" aria-busy=\"true\" aria-live=\"polite\">\n      <div class=\"analytics-page__skeleton analytics-page__skeleton--hero h-36 rounded-2xl border\"></div>\n      <div class=\"flex gap-3\">\n        <div class=\"analytics-page__skeleton analytics-page__skeleton--stat h-24 flex-1 rounded-2xl border\"></div>\n        <div class=\"analytics-page__skeleton analytics-page__skeleton--stat h-24 flex-1 rounded-2xl border\"></div>\n        <div class=\"analytics-page__skeleton analytics-page__skeleton--stat h-24 flex-1 rounded-2xl border\"></div>\n        <div class=\"analytics-page__skeleton analytics-page__skeleton--stat h-24 flex-1 rounded-2xl border\"></div>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        <div class=\"analytics-page__skeleton analytics-page__skeleton--chart h-72 flex-1 rounded-2xl border\"></div>\n        <div class=\"analytics-page__skeleton analytics-page__skeleton--chart h-72 flex-1 rounded-2xl border\"></div>\n      </div>\n      <p class=\"eds-body-sm mt-1\">Loading analytics\u2026</p>\n    </div>\n  } @else {\n    @if (data(); as d) {\n    <div class=\"analytics-page__body\" [class.analytics-page__body--ready]=\"chartsReady()\">\n    <section\n      class=\"analytics-page__hero eds-animate-fade-up mb-3 grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-3\"\n      aria-label=\"Key outcomes\"\n    >\n      <article class=\"analytics-page__impact flex min-h-36 flex-col gap-2 rounded-2xl p-5 text-white\">\n        <span class=\"text-sm font-medium leading-snug opacity-90\">\n          {{ impactKpi()?.label || 'Estimated Impact This Month' }}\n        </span>\n        <strong class=\"text-4xl font-bold leading-tight tracking-tight\">\n          {{ impactKpi()?.value || '\u2014' }}\n        </strong>\n        <p class=\"m-0 max-w-sm text-sm leading-normal opacity-90\">\n          {{ impactKpi()?.sub || 'of front-desk time handled by the AI' }}\n        </p>\n      </article>\n\n      <article class=\"analytics-page__card flex flex-col justify-center gap-2 rounded-2xl border bg-white px-4 py-4\">\n        <span class=\"eds-label\">{{ resolutionKpi()?.label || 'AI Autonomous Resolution' }}</span>\n        <div class=\"flex items-baseline gap-3\">\n          <strong class=\"text-4xl font-bold leading-none text-zinc-900\">\n            {{ resolutionKpi()?.value || '\u2014' }}\n          </strong>\n          @if (resolutionKpi()?.delta) {\n            <span\n              class=\"analytics-page__trend inline-flex items-center gap-1 text-xs font-semibold leading-none\"\n              [attr.data-tone]=\"deltaTone(resolutionKpi())\"\n            >\n              <eds-icon\n                [name]=\"deltaTone(resolutionKpi()) === 'pos' ? 'trending_up' : 'trending_down'\"\n                [size]=\"16\"\n              />\n              {{ resolutionKpi()!.delta }}\n            </span>\n          }\n        </div>\n        <p class=\"m-0 text-xs leading-normal text-zinc-500\">\n          {{ resolutionKpi()?.sub || 'without staff intervention' }}\n        </p>\n      </article>\n\n      <article\n        class=\"analytics-page__distribution analytics-page__card flex flex-col gap-3 rounded-2xl border bg-white px-4 py-4 md:col-span-2 lg:col-span-1\"\n      >\n        <div class=\"flex flex-wrap items-baseline justify-between gap-3\">\n          <strong class=\"text-xl font-bold leading-snug text-zinc-900\">{{ totalCallsLabel() }}</strong>\n          @if (directionSub(); as dir) {\n            <span class=\"text-xs leading-normal text-zinc-500\">{{ dir }}</span>\n          }\n        </div>\n        <div class=\"analytics-page__stack flex h-3.5 rounded-full\" role=\"img\" aria-label=\"Call distribution\">\n          @for (seg of distribution(); track seg.label) {\n            <span\n              class=\"analytics-page__stack-seg relative block h-full min-w-0.5 cursor-default\"\n              [style.width.%]=\"seg.width\"\n              [style.background]=\"seg.color\"\n              [attr.aria-label]=\"distributionTooltip(seg.label, seg.value)\"\n            >\n              <span class=\"analytics-page__tooltip\">{{ distributionTooltip(seg.label, seg.value) }}</span>\n            </span>\n          }\n        </div>\n        <ul class=\"m-0 flex list-none flex-wrap gap-x-4 gap-y-2 p-0 text-xs text-zinc-500\">\n          @for (seg of distribution(); track seg.label) {\n            <li class=\"inline-flex items-center gap-2\">\n              <span class=\"h-2 w-2 shrink-0 rounded-full\" [style.background]=\"seg.color\"></span>\n              <span>\n                {{ seg.label }}\n                <strong class=\"font-semibold text-zinc-900\">{{ estimatedCalls(seg.value).toLocaleString() }}</strong>\n                calls\n              </span>\n              <em class=\"not-italic font-semibold\">{{ seg.value }}%</em>\n            </li>\n          }\n        </ul>\n      </article>\n    </section>\n\n    <section\n      class=\"eds-animate-fade-up mb-4 grid grid-cols-1 gap-3 md:grid-cols-2 lg: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-2 rounded-2xl border bg-white px-4 py-4\">\n          <div class=\"flex items-center justify-between gap-2\">\n            <span class=\"eds-label\">{{ kpi.label }}</span>\n            @if (kpi.delta) {\n              <span\n                class=\"analytics-page__trend inline-flex items-center gap-1 text-xs font-semibold leading-none\"\n                [attr.data-tone]=\"deltaTone(kpi)\"\n              >\n                <eds-icon\n                  [name]=\"deltaTone(kpi) === 'pos' ? 'trending_up' : 'trending_down'\"\n                  [size]=\"14\"\n                />\n                {{ kpi.delta }}\n              </span>\n            }\n          </div>\n          <strong class=\"text-3xl font-bold leading-tight text-zinc-900\">{{ kpi.value }}</strong>\n          @if (kpi.sub) {\n            <span class=\"text-xs leading-normal text-zinc-500\">{{ kpi.sub }}</span>\n          }\n        </article>\n      }\n    </section>\n\n    <div class=\"grid grid-cols-1 gap-4 md:grid-cols-2\">\n      <article class=\"eds-card analytics-page__chart eds-animate-fade-up px-4 py-4 shadow-sm\">\n        <div class=\"analytics-page__chart-head mb-3 flex flex-wrap items-baseline justify-between gap-3\">\n          <div class=\"flex min-w-0 flex-wrap items-baseline gap-3\">\n            <h2 class=\"eds-h2\">Call Volume</h2>\n            <span\n              class=\"analytics-page__chart-period inline-flex items-center rounded-full border px-3 py-1 text-xs font-medium text-zinc-500\"\n            >\n              {{ periodLabel() }}\n            </span>\n          </div>\n          <ul class=\"m-0 flex list-none flex-wrap gap-x-4 gap-y-3 p-0 text-xs font-medium text-zinc-500\">\n            <li>\n              <span class=\"analytics-page__dot analytics-page__dot--total mr-2 inline-block h-2 w-2 rounded-full\"></span>\n              Total Calls\n            </li>\n            <li>\n              <span class=\"analytics-page__dot analytics-page__dot--in mr-2 inline-block h-2 w-2 rounded-full\"></span>\n              Inbound Calls\n            </li>\n            <li>\n              <span class=\"analytics-page__dot analytics-page__dot--out mr-2 inline-block h-2 w-2 rounded-full\"></span>\n              Outbound Calls\n            </li>\n          </ul>\n        </div>\n        <div class=\"analytics-page__line-chart relative h-56\">\n          <svg viewBox=\"0 0 100 100\" preserveAspectRatio=\"none\" aria-hidden=\"true\">\n            <path class=\"analytics-page__area\" [attr.d]=\"volumeAreaPath()\" />\n            <path class=\"analytics-page__line analytics-page__line--total\" [attr.d]=\"volumePath('total')\" fill=\"none\" />\n            <path class=\"analytics-page__line analytics-page__line--in\" [attr.d]=\"volumePath('inbound')\" fill=\"none\" />\n            <path class=\"analytics-page__line analytics-page__line--out\" [attr.d]=\"volumePath('outbound')\" fill=\"none\" />\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 volumePoints(); track point.date || point.label; 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]=\"volumeTooltip(point)\"\n                (mouseenter)=\"onVolumeEnter(i)\"\n                (focus)=\"onVolumeEnter(i)\"\n                (blur)=\"onVolumeLeave()\"\n              >\n                <span class=\"analytics-page__tooltip analytics-page__tooltip--multiline\">\n                  {{ volumeTooltip(point) }}\n                </span>\n              </button>\n            }\n          </div>\n          <div class=\"mt-2 flex justify-between gap-1\">\n            @for (label of volumeAxisLabels(); track $index) {\n              <span class=\"flex-1 text-center font-mono text-xs font-medium uppercase text-zinc-500\">\n                {{ label }}\n              </span>\n            }\n          </div>\n        </div>\n      </article>\n\n      <article class=\"eds-card analytics-page__chart eds-animate-fade-up px-4 py-4 shadow-sm\">\n        <h2 class=\"eds-h2 mb-4\">Top Call Reasons</h2>\n        <div class=\"flex flex-col gap-3\">\n          @for (item of d.reasons; track item.label; let i = $index) {\n            <div\n              class=\"analytics-page__hbar-row grid items-center gap-3\"\n              [attr.aria-label]=\"hbarTooltip(item.label, item.value)\"\n            >\n              <span class=\"text-sm font-medium text-zinc-900\">{{ item.label }}</span>\n              <div class=\"analytics-page__hbar-track relative h-2.5 rounded-full\">\n                <span\n                  class=\"analytics-page__hbar-fill block h-full min-w-1 rounded-full\"\n                  [style.width.%]=\"(item.value / maxValue(d.reasons)) * 100\"\n                  [style.background]=\"reasonColor(i)\"\n                  [style.animation-delay.ms]=\"i * 40\"\n                ></span>\n                <span class=\"analytics-page__tooltip\">{{ hbarTooltip(item.label, item.value) }}</span>\n              </div>\n              <span class=\"text-right font-mono text-xs font-semibold text-zinc-500\">{{ item.value }}%</span>\n            </div>\n          }\n        </div>\n      </article>\n\n      <article class=\"eds-card analytics-page__chart eds-animate-fade-up px-4 py-4 shadow-sm\">\n        <h2 class=\"eds-h2 mb-4\">Reasons AI got stuck</h2>\n        <div class=\"flex flex-col gap-3\">\n          @for (item of d.transfers; track item.label; let i = $index) {\n            <div\n              class=\"analytics-page__hbar-row grid items-center gap-3\"\n              [attr.aria-label]=\"hbarTooltip(item.label, item.value)\"\n            >\n              <span class=\"text-sm font-medium text-zinc-900\">{{ item.label }}</span>\n              <div class=\"analytics-page__hbar-track relative h-2.5 rounded-full\">\n                <span\n                  class=\"analytics-page__hbar-fill block h-full min-w-1 rounded-full\"\n                  [style.width.%]=\"(item.value / maxValue(d.transfers)) * 100\"\n                  [style.background]=\"stuckColor(i)\"\n                  [style.animation-delay.ms]=\"i * 40\"\n                ></span>\n                <span class=\"analytics-page__tooltip\">{{ hbarTooltip(item.label, item.value) }}</span>\n              </div>\n              <span class=\"text-right font-mono text-xs font-semibold text-zinc-500\">{{ item.value }}%</span>\n            </div>\n          }\n        </div>\n      </article>\n\n      <article class=\"eds-card analytics-page__chart eds-animate-fade-up px-4 py-4 shadow-sm\">\n        <div class=\"analytics-page__chart-head mb-3 flex flex-wrap items-baseline justify-between gap-3\">\n          <h2 class=\"eds-h2\">Peak Hours</h2>\n          <span class=\"eds-label\">\n            @if (d.peakHours.timezone) {\n              {{ d.peakHours.timezone }}\n            } @else {\n              Calls per hour\n            }\n          </span>\n        </div>\n        <div class=\"flex flex-col gap-2\">\n          <div class=\"flex h-40 items-end gap-1\" role=\"list\" aria-label=\"Call volume by hour\">\n            @for (point of d.peakHours.points; track point.hour; let i = $index) {\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]=\"peakTooltip(point)\"\n              >\n                <div class=\"analytics-page__peak-wrap relative flex min-h-0 flex-1 items-end\">\n                  <div\n                    class=\"analytics-page__peak-bar w-full min-h-0.5 rounded-t bg-blue-300 transition-colors duration-150\"\n                    [style.height.%]=\"barHeightPercent(point, d.peakHours.points)\"\n                    [style.animation-delay.ms]=\"i * 18\"\n                  ></div>\n                  <span class=\"analytics-page__tooltip\">{{ peakTooltip(point) }}</span>\n                </div>\n              </div>\n            }\n          </div>\n          <div class=\"flex gap-1\">\n            @for (point of d.peakHours.points; track point.hour; let i = $index) {\n              <span class=\"min-h-3.5 flex-1 text-center font-mono text-xs font-medium text-zinc-500\">\n                @if (showPeakAxisLabel(i, d.peakHours.points.length)) {\n                  {{ point.label }}\n                }\n              </span>\n            }\n          </div>\n        </div>\n      </article>\n    </div>\n    </div>\n    }\n  }\n</div>\n", styles: ["@charset \"UTF-8\";.analytics-page__range{background:var(--eds-surface-l0);border-color:var(--eds-border-default)}.analytics-page__range-btn--active{background:var(--eds-brand-500);color:#fff}.analytics-page__icon-btn{background:var(--eds-surface-l0);border-color:var(--eds-border-default)}.analytics-page__icon-btn:hover{color:var(--eds-text-primary);border-color:var(--eds-gray-300)}.analytics-page__impact{background:linear-gradient(145deg,#3b82f6,#2563eb 55%,#1d4ed8)}.analytics-page__card{background:var(--eds-surface-l0);border-color:var(--eds-border-default)}.analytics-page__stack{background:var(--eds-surface-l2)}.analytics-page__stack-seg:first-child{border-radius:999px 0 0 999px}.analytics-page__stack-seg:last-child{border-radius:0 999px 999px 0}.analytics-page__stack-seg:only-child{border-radius:999px}.analytics-page__stack-seg:hover .analytics-page__tooltip,.analytics-page__stack-seg:focus-within .analytics-page__tooltip{opacity:1;transform:translate(-50%)}.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__skeleton{background:linear-gradient(90deg,var(--eds-surface-l0) 0%,#eef2f4 45%,var(--eds-surface-l0) 90%);background-size:200% 100%;animation:analytics-shimmer 1.2s ease-in-out infinite;border-color:var(--eds-border-default)}.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:eds-bar-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[data-tone=pos]{color:var(--eds-green-600, #16a34a)}.analytics-page__trend[data-tone=warn],.analytics-page__trend[data-tone=neg]{color:var(--eds-red-500, #f03740)}.analytics-page__trend[data-tone=neutral]{color:var(--eds-text-secondary)}.analytics-page__chart-head .eds-h2{margin:0}.analytics-page__chart-period{background:var(--eds-surface-l1, #f7f9fa);border-color:var(--eds-border-default, #e5e5e5)}.analytics-page__dot--total{background:#3681f4}.analytics-page__dot--in{background:#8e51ff}.analytics-page__dot--out{background:#34d399}.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:#3681f41f}.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:#3681f4}.analytics-page__line--in{stroke:#8e51ff}.analytics-page__line--out{stroke:#34d399}.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-l2)}.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-col:hover .analytics-page__peak-bar{background:#60a5fa}@keyframes analytics-shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}@keyframes analytics-hbar-grow{0%{transform:scaleX(0)}to{transform:scaleX(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}}@media(min-width:768px)and (max-width:1023px){.analytics-page__distribution{grid-column:1/-1}}\n"] }]
+        }] });
+
+export { AnalyticsPageComponent };
+//# sourceMappingURL=edvak99-voice-receptionist-widget-analytics-page.component-DUR5f5nc.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"edvak99-voice-receptionist-widget-analytics-page.component-DUR5f5nc.mjs","sources":["../../../projects/voice-receptionist-widget/src/lib/pages/analytics-page/analytics-page.component.ts","../../../projects/voice-receptionist-widget/src/lib/pages/analytics-page/analytics-page.component.html"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, inject, OnInit, signal } from '@angular/core';\n\nimport {\n  AnalyticsData,\n  AnalyticsKpiCard,\n  AnalyticsPeakPoint,\n  AnalyticsVolumePoint,\n} from '../../models/ai-receptionist.types';\nimport { AiReceptionistApiService } from '../../services/ai-receptionist-api.service';\nimport { EdsButtonComponent } from '../../ui/eds-button.component';\nimport { EdsIconComponent } from '../../ui/eds-icon.component';\n\nconst REASON_COLORS = ['#8E51FF', '#3681F4', '#F472B6', '#7DD3FC', '#FDA4AF', '#34D399', '#FBBF24'];\nconst STUCK_COLORS = ['#8E51FF', '#3681F4', '#7DD3FC', '#FBBF24'];\n\n@Component({\n  selector: 'eds-analytics-page',\n  imports: [EdsIconComponent, EdsButtonComponent],\n  templateUrl: './analytics-page.component.html',\n  styleUrl: './analytics-page.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class AnalyticsPageComponent implements OnInit {\n  private readonly api = inject(AiReceptionistApiService);\n\n  protected readonly data = signal<AnalyticsData | null>(null);\n  protected readonly range = signal('30d');\n  protected readonly loading = signal(true);\n  protected readonly chartsReady = signal(false);\n  protected readonly hoveredVolume = signal<number | null>(null);\n\n  protected readonly ranges = [\n    { id: '7d', label: '7 days' },\n    { id: '30d', label: '30 days' },\n    { id: '90d', label: '90 days' },\n  ];\n\n  protected readonly impactKpi = computed(() =>\n    this.findKpi(/(impact|hours|front-desk|time saved)/i),\n  );\n  protected readonly resolutionKpi = computed(() =>\n    this.findKpi(/(autonomous|resolution)/i),\n  );\n  protected readonly secondaryKpis = computed(() => {\n    const cards = this.data()?.kpiCards ?? [];\n    const preferred = [\n      /appointment/i,\n      /task/i,\n      /patient|registr/i,\n      /calls?\\s*handled|total\\s*calls|^calls$/i,\n    ];\n    const picked: AnalyticsKpiCard[] = [];\n    for (const re of preferred) {\n      const hit = cards.find((c) => re.test(c.label) && !picked.includes(c));\n      if (hit) picked.push(hit);\n    }\n    if (picked.length >= 4) return picked.slice(0, 4);\n    const rest = cards.filter(\n      (c) =>\n        !picked.includes(c) &&\n        !/(impact|hours|front-desk|autonomous|resolution)/i.test(c.label),\n    );\n    return [...picked, ...rest].slice(0, 4);\n  });\n\n  protected readonly distribution = computed(() => {\n    const outcomes = this.data()?.outcomes ?? [];\n    const total = outcomes.reduce((s, o) => s + o.value, 0) || 1;\n    return outcomes.map((o) => ({\n      ...o,\n      pct: Math.round((o.value / total) * 100),\n      width: (o.value / total) * 100,\n    }));\n  });\n\n  protected readonly totalCallsLabel = computed(() => {\n    const handled = this.findKpi(/calls?\\s*handled|total\\s*calls|^calls$/i);\n    if (handled?.value) return handled.value.includes('Call') ? handled.value : `${handled.value} Calls`;\n    const n = this.data()?.kpis.totalCalls;\n    return n ? `${n.toLocaleString()} Calls` : 'Calls';\n  });\n\n  protected readonly directionSub = computed(() => {\n    const handled = this.findKpi(/calls?\\s*handled|total\\s*calls|^calls$/i);\n    if (handled?.sub && /inbound|outbound/i.test(handled.sub)) return handled.sub;\n    return null;\n  });\n\n  protected readonly volumePoints = computed(() => this.data()?.volume.points ?? []);\n\n  /** Human date span for the selected analytics window (month + year included). */\n  protected readonly periodLabel = computed(() => {\n    const vol = this.data()?.volume;\n    const start =\n      this.parseIsoDate(vol?.startDate) ?? this.parseIsoDate(vol?.points?.[0]?.date) ?? null;\n    const end =\n      this.parseIsoDate(vol?.endDate) ??\n      this.parseIsoDate(vol?.points?.[vol.points.length - 1]?.date) ??\n      null;\n    if (start && end) return this.formatPeriodRange(start, end);\n\n    const days = this.range() === '7d' ? 7 : this.range() === '90d' ? 90 : 30;\n    const endD = new Date();\n    const startD = new Date();\n    startD.setDate(endD.getDate() - (days - 1));\n    return this.formatPeriodRange(startD, endD);\n  });\n\n  ngOnInit(): void {\n    this.load();\n  }\n\n  protected setRange(id: string): void {\n    this.range.set(id);\n    this.load();\n  }\n\n  protected maxCount(items: { count: number }[]): number {\n    return Math.max(...items.map((i) => i.count), 1);\n  }\n\n  protected barHeightPercent(point: { count: number }, points: { count: number }[]): number {\n    if (point.count <= 0) return 0;\n    return (point.count / this.maxCount(points)) * 100;\n  }\n\n  protected maxValue(items: { value: number }[]): number {\n    return Math.max(...items.map((i) => i.value), 1);\n  }\n\n  protected reasonColor(index: number): string {\n    return REASON_COLORS[index % REASON_COLORS.length];\n  }\n\n  protected stuckColor(index: number): string {\n    return STUCK_COLORS[index % STUCK_COLORS.length];\n  }\n\n  protected peakTooltip(point: AnalyticsPeakPoint): string {\n    return `${point.label}: ${point.count} call${point.count === 1 ? '' : 's'}`;\n  }\n\n  protected volumeTooltip(point: AnalyticsVolumePoint): string {\n    const inbound = point.inbound ?? Math.round(point.count * 0.8);\n    const outbound = point.outbound ?? Math.max(0, point.count - inbound);\n    const headline = this.volumePointHeadline(point);\n    return `${headline}\\nTotal ${point.count} · In ${inbound} · Out ${outbound}`;\n  }\n\n  protected hbarTooltip(label: string, value: number): string {\n    return `${label}: ${value}%`;\n  }\n\n  protected distributionTooltip(label: string, value: number): string {\n    const calls = this.estimatedCalls(value);\n    return `${label}: ${value}% (${calls.toLocaleString()} calls)`;\n  }\n\n  protected showPeakAxisLabel(index: number, total: number): boolean {\n    if (total <= 12) return true;\n    const hour = this.data()?.peakHours.points[index]?.hour;\n    if (hour != null && [9, 12, 15, 18, 21].includes(hour)) return true;\n    const step = total <= 24 ? 3 : 4;\n    return index % step === 0 || index === total - 1;\n  }\n\n  protected volumePath(series: 'total' | 'inbound' | 'outbound'): string {\n    const points = this.volumePoints();\n    if (!points.length) return '';\n    const max = Math.max(\n      ...points.map((p) => Math.max(p.count, p.inbound ?? 0, p.outbound ?? 0)),\n      1,\n    );\n    const w = 100;\n    const h = 100;\n    const step = points.length === 1 ? 0 : w / (points.length - 1);\n    return points\n      .map((p, i) => {\n        const yVal =\n          series === 'inbound'\n            ? (p.inbound ?? Math.round(p.count * 0.8))\n            : series === 'outbound'\n              ? (p.outbound ?? Math.round(p.count * 0.2))\n              : p.count;\n        const x = i * step;\n        const y = h - (yVal / max) * h;\n        return `${i === 0 ? 'M' : 'L'}${x.toFixed(2)},${y.toFixed(2)}`;\n      })\n      .join(' ');\n  }\n\n  protected volumeAreaPath(): string {\n    const line = this.volumePath('total');\n    if (!line) return '';\n    return `${line} L100,100 L0,100 Z`;\n  }\n\n  protected volumeAxisLabels(): string[] {\n    const points = this.volumePoints();\n    return points.map((p, i) => this.volumeAxisLabel(p, i, points.length));\n  }\n\n  protected volumeAxisLabel(point: AnalyticsVolumePoint, index: number, total: number): string {\n    if (/week/i.test(point.day) || /week/i.test(point.label)) {\n      const week = point.day || point.label;\n      const month = point.date ? this.formatMonthYear(point.date) : '';\n      return month ? `${week} · ${month}` : week;\n    }\n    if (point.date) {\n      if (total <= 7) return this.formatChartDate(point.date);\n      const step = total <= 14 ? 2 : total <= 31 ? 5 : 7;\n      if (index % step !== 0 && index !== total - 1) return '';\n      return this.formatChartDate(point.date);\n    }\n    return point.day || point.label;\n  }\n\n  protected deltaTone(kpi: AnalyticsKpiCard | null | undefined): string {\n    if (!kpi?.delta) return 'neutral';\n    if (kpi.tone === 'pos' || kpi.tone === 'warn' || kpi.tone === 'neg') return kpi.tone;\n    if (/^\\+/.test(kpi.delta.trim())) return 'pos';\n    if (/^-|−/.test(kpi.delta.trim())) return 'warn';\n    return 'neutral';\n  }\n\n  protected formatChartDate(date: string): string {\n    const iso = /^(\\d{4})-(\\d{2})-(\\d{2})/.exec(date.trim());\n    if (iso) return `${iso[2]}/${iso[3]}`;\n    return date;\n  }\n\n  protected estimatedCalls(pct: number): number {\n    const total = this.data()?.kpis.totalCalls ?? 0;\n    if (!total) return Math.round(pct);\n    return Math.round((total * pct) / 100);\n  }\n\n  protected onVolumeEnter(index: number): void {\n    this.hoveredVolume.set(index);\n  }\n\n  protected onVolumeLeave(): void {\n    this.hoveredVolume.set(null);\n  }\n\n  private volumePointHeadline(point: AnalyticsVolumePoint): string {\n    const raw = (point.label || point.day || '').trim();\n    if (/week/i.test(raw) && point.date) {\n      return `${raw} · ${this.formatMonthYear(point.date)}`;\n    }\n    if (point.date) return this.formatFullChartDate(point.date);\n    return raw || 'Period';\n  }\n\n  private formatMonthYear(date: string): string {\n    const d = this.parseIsoDate(date);\n    if (!d) return '';\n    return d.toLocaleDateString(undefined, { month: 'short', year: 'numeric' });\n  }\n\n  private formatFullChartDate(date: string): string {\n    const d = this.parseIsoDate(date);\n    if (!d) return this.formatChartDate(date);\n    return d.toLocaleDateString(undefined, {\n      month: 'short',\n      day: 'numeric',\n      year: 'numeric',\n    });\n  }\n\n  private formatPeriodRange(start: Date, end: Date): string {\n    const sameYear = start.getFullYear() === end.getFullYear();\n    const sameMonth = sameYear && start.getMonth() === end.getMonth();\n    if (sameMonth) {\n      return `${start.toLocaleDateString(undefined, { month: 'short', day: 'numeric' })} – ${end.getDate()}, ${end.getFullYear()}`;\n    }\n    if (sameYear) {\n      return `${start.toLocaleDateString(undefined, { month: 'short', day: 'numeric' })} – ${end.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' })}`;\n    }\n    return `${start.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' })} – ${end.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' })}`;\n  }\n\n  private parseIsoDate(value: string | null | undefined): Date | null {\n    if (!value?.trim()) return null;\n    const iso = /^(\\d{4})-(\\d{2})-(\\d{2})/.exec(value.trim());\n    if (iso) {\n      const d = new Date(Number(iso[1]), Number(iso[2]) - 1, Number(iso[3]));\n      return Number.isNaN(d.getTime()) ? null : d;\n    }\n    const d = new Date(value);\n    return Number.isNaN(d.getTime()) ? null : d;\n  }\n\n  private findKpi(re: RegExp): AnalyticsKpiCard | null {\n    return this.data()?.kpiCards.find((c) => re.test(c.label)) ?? null;\n  }\n\n  private load(): void {\n    this.loading.set(true);\n    this.chartsReady.set(false);\n    this.hoveredVolume.set(null);\n    this.api.getAnalytics(this.range()).subscribe(({ data }) => {\n      this.data.set(data);\n      this.loading.set(false);\n      // Next frame so CSS enter animations run after paint.\n      requestAnimationFrame(() => this.chartsReady.set(true));\n    });\n  }\n}\n","<div class=\"eds-page analytics-page\">\n  <header class=\"mb-5 flex flex-wrap items-start justify-between gap-4\">\n    <div>\n      <h1 class=\"eds-h1\">Analytics</h1>\n      <p class=\"eds-body-sm\">How the AI is doing over time, and what’s worth changing.</p>\n    </div>\n    <div class=\"flex flex-wrap items-center gap-2\">\n      <div class=\"analytics-page__range flex gap-1 rounded-md border p-1\" role=\"group\" aria-label=\"Date range\">\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-sm text-zinc-500\"\n            [class.analytics-page__range-btn--active]=\"range() === r.id\"\n            (click)=\"setRange(r.id)\"\n          >\n            {{ r.label }}\n          </button>\n        }\n      </div>\n      <eds-button variant=\"secondary\" type=\"button\">\n        <eds-icon name=\"download\" [size]=\"18\" />\n        Export\n      </eds-button>\n      <button\n        type=\"button\"\n        class=\"analytics-page__icon-btn inline-flex h-9 w-9 cursor-pointer items-center justify-center rounded-md border text-zinc-500\"\n        aria-label=\"Filter\"\n      >\n        <eds-icon name=\"filter_list\" [size]=\"20\" />\n      </button>\n    </div>\n  </header>\n\n  @if (loading()) {\n    <div class=\"flex flex-col gap-4\" aria-busy=\"true\" aria-live=\"polite\">\n      <div class=\"analytics-page__skeleton analytics-page__skeleton--hero h-36 rounded-2xl border\"></div>\n      <div class=\"flex gap-3\">\n        <div class=\"analytics-page__skeleton analytics-page__skeleton--stat h-24 flex-1 rounded-2xl border\"></div>\n        <div class=\"analytics-page__skeleton analytics-page__skeleton--stat h-24 flex-1 rounded-2xl border\"></div>\n        <div class=\"analytics-page__skeleton analytics-page__skeleton--stat h-24 flex-1 rounded-2xl border\"></div>\n        <div class=\"analytics-page__skeleton analytics-page__skeleton--stat h-24 flex-1 rounded-2xl border\"></div>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        <div class=\"analytics-page__skeleton analytics-page__skeleton--chart h-72 flex-1 rounded-2xl border\"></div>\n        <div class=\"analytics-page__skeleton analytics-page__skeleton--chart h-72 flex-1 rounded-2xl border\"></div>\n      </div>\n      <p class=\"eds-body-sm mt-1\">Loading analytics…</p>\n    </div>\n  } @else {\n    @if (data(); as d) {\n    <div class=\"analytics-page__body\" [class.analytics-page__body--ready]=\"chartsReady()\">\n    <section\n      class=\"analytics-page__hero eds-animate-fade-up mb-3 grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-3\"\n      aria-label=\"Key outcomes\"\n    >\n      <article class=\"analytics-page__impact flex min-h-36 flex-col gap-2 rounded-2xl p-5 text-white\">\n        <span class=\"text-sm font-medium leading-snug opacity-90\">\n          {{ impactKpi()?.label || 'Estimated Impact This Month' }}\n        </span>\n        <strong class=\"text-4xl font-bold leading-tight tracking-tight\">\n          {{ impactKpi()?.value || '—' }}\n        </strong>\n        <p class=\"m-0 max-w-sm text-sm leading-normal opacity-90\">\n          {{ impactKpi()?.sub || 'of front-desk time handled by the AI' }}\n        </p>\n      </article>\n\n      <article class=\"analytics-page__card flex flex-col justify-center gap-2 rounded-2xl border bg-white px-4 py-4\">\n        <span class=\"eds-label\">{{ resolutionKpi()?.label || 'AI Autonomous Resolution' }}</span>\n        <div class=\"flex items-baseline gap-3\">\n          <strong class=\"text-4xl font-bold leading-none text-zinc-900\">\n            {{ resolutionKpi()?.value || '—' }}\n          </strong>\n          @if (resolutionKpi()?.delta) {\n            <span\n              class=\"analytics-page__trend inline-flex items-center gap-1 text-xs font-semibold leading-none\"\n              [attr.data-tone]=\"deltaTone(resolutionKpi())\"\n            >\n              <eds-icon\n                [name]=\"deltaTone(resolutionKpi()) === 'pos' ? 'trending_up' : 'trending_down'\"\n                [size]=\"16\"\n              />\n              {{ resolutionKpi()!.delta }}\n            </span>\n          }\n        </div>\n        <p class=\"m-0 text-xs leading-normal text-zinc-500\">\n          {{ resolutionKpi()?.sub || 'without staff intervention' }}\n        </p>\n      </article>\n\n      <article\n        class=\"analytics-page__distribution analytics-page__card flex flex-col gap-3 rounded-2xl border bg-white px-4 py-4 md:col-span-2 lg:col-span-1\"\n      >\n        <div class=\"flex flex-wrap items-baseline justify-between gap-3\">\n          <strong class=\"text-xl font-bold leading-snug text-zinc-900\">{{ totalCallsLabel() }}</strong>\n          @if (directionSub(); as dir) {\n            <span class=\"text-xs leading-normal text-zinc-500\">{{ dir }}</span>\n          }\n        </div>\n        <div class=\"analytics-page__stack flex h-3.5 rounded-full\" role=\"img\" aria-label=\"Call distribution\">\n          @for (seg of distribution(); track seg.label) {\n            <span\n              class=\"analytics-page__stack-seg relative block h-full min-w-0.5 cursor-default\"\n              [style.width.%]=\"seg.width\"\n              [style.background]=\"seg.color\"\n              [attr.aria-label]=\"distributionTooltip(seg.label, seg.value)\"\n            >\n              <span class=\"analytics-page__tooltip\">{{ distributionTooltip(seg.label, seg.value) }}</span>\n            </span>\n          }\n        </div>\n        <ul class=\"m-0 flex list-none flex-wrap gap-x-4 gap-y-2 p-0 text-xs text-zinc-500\">\n          @for (seg of distribution(); track seg.label) {\n            <li class=\"inline-flex items-center gap-2\">\n              <span class=\"h-2 w-2 shrink-0 rounded-full\" [style.background]=\"seg.color\"></span>\n              <span>\n                {{ seg.label }}\n                <strong class=\"font-semibold text-zinc-900\">{{ estimatedCalls(seg.value).toLocaleString() }}</strong>\n                calls\n              </span>\n              <em class=\"not-italic font-semibold\">{{ seg.value }}%</em>\n            </li>\n          }\n        </ul>\n      </article>\n    </section>\n\n    <section\n      class=\"eds-animate-fade-up mb-4 grid grid-cols-1 gap-3 md:grid-cols-2 lg: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-2 rounded-2xl border bg-white px-4 py-4\">\n          <div class=\"flex items-center justify-between gap-2\">\n            <span class=\"eds-label\">{{ kpi.label }}</span>\n            @if (kpi.delta) {\n              <span\n                class=\"analytics-page__trend inline-flex items-center gap-1 text-xs font-semibold leading-none\"\n                [attr.data-tone]=\"deltaTone(kpi)\"\n              >\n                <eds-icon\n                  [name]=\"deltaTone(kpi) === 'pos' ? 'trending_up' : 'trending_down'\"\n                  [size]=\"14\"\n                />\n                {{ kpi.delta }}\n              </span>\n            }\n          </div>\n          <strong class=\"text-3xl font-bold leading-tight text-zinc-900\">{{ kpi.value }}</strong>\n          @if (kpi.sub) {\n            <span class=\"text-xs leading-normal text-zinc-500\">{{ kpi.sub }}</span>\n          }\n        </article>\n      }\n    </section>\n\n    <div class=\"grid grid-cols-1 gap-4 md:grid-cols-2\">\n      <article class=\"eds-card analytics-page__chart eds-animate-fade-up px-4 py-4 shadow-sm\">\n        <div class=\"analytics-page__chart-head mb-3 flex flex-wrap items-baseline justify-between gap-3\">\n          <div class=\"flex min-w-0 flex-wrap items-baseline gap-3\">\n            <h2 class=\"eds-h2\">Call Volume</h2>\n            <span\n              class=\"analytics-page__chart-period inline-flex items-center rounded-full border px-3 py-1 text-xs font-medium text-zinc-500\"\n            >\n              {{ periodLabel() }}\n            </span>\n          </div>\n          <ul class=\"m-0 flex list-none flex-wrap gap-x-4 gap-y-3 p-0 text-xs font-medium text-zinc-500\">\n            <li>\n              <span class=\"analytics-page__dot analytics-page__dot--total mr-2 inline-block h-2 w-2 rounded-full\"></span>\n              Total Calls\n            </li>\n            <li>\n              <span class=\"analytics-page__dot analytics-page__dot--in mr-2 inline-block h-2 w-2 rounded-full\"></span>\n              Inbound Calls\n            </li>\n            <li>\n              <span class=\"analytics-page__dot analytics-page__dot--out mr-2 inline-block h-2 w-2 rounded-full\"></span>\n              Outbound Calls\n            </li>\n          </ul>\n        </div>\n        <div class=\"analytics-page__line-chart relative h-56\">\n          <svg viewBox=\"0 0 100 100\" preserveAspectRatio=\"none\" aria-hidden=\"true\">\n            <path class=\"analytics-page__area\" [attr.d]=\"volumeAreaPath()\" />\n            <path class=\"analytics-page__line analytics-page__line--total\" [attr.d]=\"volumePath('total')\" fill=\"none\" />\n            <path class=\"analytics-page__line analytics-page__line--in\" [attr.d]=\"volumePath('inbound')\" fill=\"none\" />\n            <path class=\"analytics-page__line analytics-page__line--out\" [attr.d]=\"volumePath('outbound')\" fill=\"none\" />\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 volumePoints(); track point.date || point.label; 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]=\"volumeTooltip(point)\"\n                (mouseenter)=\"onVolumeEnter(i)\"\n                (focus)=\"onVolumeEnter(i)\"\n                (blur)=\"onVolumeLeave()\"\n              >\n                <span class=\"analytics-page__tooltip analytics-page__tooltip--multiline\">\n                  {{ volumeTooltip(point) }}\n                </span>\n              </button>\n            }\n          </div>\n          <div class=\"mt-2 flex justify-between gap-1\">\n            @for (label of volumeAxisLabels(); track $index) {\n              <span class=\"flex-1 text-center font-mono text-xs font-medium uppercase text-zinc-500\">\n                {{ label }}\n              </span>\n            }\n          </div>\n        </div>\n      </article>\n\n      <article class=\"eds-card analytics-page__chart eds-animate-fade-up px-4 py-4 shadow-sm\">\n        <h2 class=\"eds-h2 mb-4\">Top Call Reasons</h2>\n        <div class=\"flex flex-col gap-3\">\n          @for (item of d.reasons; track item.label; let i = $index) {\n            <div\n              class=\"analytics-page__hbar-row grid items-center gap-3\"\n              [attr.aria-label]=\"hbarTooltip(item.label, item.value)\"\n            >\n              <span class=\"text-sm font-medium text-zinc-900\">{{ item.label }}</span>\n              <div class=\"analytics-page__hbar-track relative h-2.5 rounded-full\">\n                <span\n                  class=\"analytics-page__hbar-fill block h-full min-w-1 rounded-full\"\n                  [style.width.%]=\"(item.value / maxValue(d.reasons)) * 100\"\n                  [style.background]=\"reasonColor(i)\"\n                  [style.animation-delay.ms]=\"i * 40\"\n                ></span>\n                <span class=\"analytics-page__tooltip\">{{ hbarTooltip(item.label, item.value) }}</span>\n              </div>\n              <span class=\"text-right font-mono text-xs font-semibold text-zinc-500\">{{ item.value }}%</span>\n            </div>\n          }\n        </div>\n      </article>\n\n      <article class=\"eds-card analytics-page__chart eds-animate-fade-up px-4 py-4 shadow-sm\">\n        <h2 class=\"eds-h2 mb-4\">Reasons AI got stuck</h2>\n        <div class=\"flex flex-col gap-3\">\n          @for (item of d.transfers; track item.label; let i = $index) {\n            <div\n              class=\"analytics-page__hbar-row grid items-center gap-3\"\n              [attr.aria-label]=\"hbarTooltip(item.label, item.value)\"\n            >\n              <span class=\"text-sm font-medium text-zinc-900\">{{ item.label }}</span>\n              <div class=\"analytics-page__hbar-track relative h-2.5 rounded-full\">\n                <span\n                  class=\"analytics-page__hbar-fill block h-full min-w-1 rounded-full\"\n                  [style.width.%]=\"(item.value / maxValue(d.transfers)) * 100\"\n                  [style.background]=\"stuckColor(i)\"\n                  [style.animation-delay.ms]=\"i * 40\"\n                ></span>\n                <span class=\"analytics-page__tooltip\">{{ hbarTooltip(item.label, item.value) }}</span>\n              </div>\n              <span class=\"text-right font-mono text-xs font-semibold text-zinc-500\">{{ item.value }}%</span>\n            </div>\n          }\n        </div>\n      </article>\n\n      <article class=\"eds-card analytics-page__chart eds-animate-fade-up px-4 py-4 shadow-sm\">\n        <div class=\"analytics-page__chart-head mb-3 flex flex-wrap items-baseline justify-between gap-3\">\n          <h2 class=\"eds-h2\">Peak Hours</h2>\n          <span class=\"eds-label\">\n            @if (d.peakHours.timezone) {\n              {{ d.peakHours.timezone }}\n            } @else {\n              Calls per hour\n            }\n          </span>\n        </div>\n        <div class=\"flex flex-col gap-2\">\n          <div class=\"flex h-40 items-end gap-1\" role=\"list\" aria-label=\"Call volume by hour\">\n            @for (point of d.peakHours.points; track point.hour; let i = $index) {\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]=\"peakTooltip(point)\"\n              >\n                <div class=\"analytics-page__peak-wrap relative flex min-h-0 flex-1 items-end\">\n                  <div\n                    class=\"analytics-page__peak-bar w-full min-h-0.5 rounded-t bg-blue-300 transition-colors duration-150\"\n                    [style.height.%]=\"barHeightPercent(point, d.peakHours.points)\"\n                    [style.animation-delay.ms]=\"i * 18\"\n                  ></div>\n                  <span class=\"analytics-page__tooltip\">{{ peakTooltip(point) }}</span>\n                </div>\n              </div>\n            }\n          </div>\n          <div class=\"flex gap-1\">\n            @for (point of d.peakHours.points; track point.hour; let i = $index) {\n              <span class=\"min-h-3.5 flex-1 text-center font-mono text-xs font-medium text-zinc-500\">\n                @if (showPeakAxisLabel(i, d.peakHours.points.length)) {\n                  {{ point.label }}\n                }\n              </span>\n            }\n          </div>\n        </div>\n      </article>\n    </div>\n    </div>\n    }\n  }\n</div>\n"],"names":[],"mappings":"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"}