The Dialpad Manager Trend View is a single-file HTML analytics dashboard for call center managers. It renders six time-series charts — call volume, ASA, abandonment rate, service level, AHT, and CSAT/utilization — across selectable 1, 7, 14, or 30-day ranges. Data comes from the Dialpad Stats API v2 via a three-job async fetch pattern, with a fully functional demo mode requiring no credentials.

This file is a sub-page of the parent platform shell. It loads ../nav.js for the site-wide navigation overlay. A missing nav.js produces a 404 in the browser console but does not break the dashboard — all charts, controls, and modes function fully without it.

A single self-contained HTML file. No build step. No server-side component. All logic executes in the browser. The rendering pipeline is linear: data in → normalize → charts out.

Two persistent chrome elements sit above the 2×3 chart grid: the Rail (48px) and the Status Bar (28px). Always visible regardless of range or mode.

Stacked bar chart showing daily call counts by outcome across the selected range. Header displays total period volume. Clicking the panel opens the Detail Pane with full API field reference and the exact POST body used.

Derived metric — not a direct API field. Header value and color code red/orange/green vs. the 5% SLA ceiling.

The sixth panel is a CSS grid split into two equal halves inside the canvas parent div. Left: CSAT bar chart (1–5 scale). Right: agent utilization filled line chart.

The dashboard uses the Dialpad Stats API v2 — an async job-pattern API. You POST a job, receive a job ID, wait, then poll GET until the CSV is ready. There is no synchronous endpoint that returns data immediately.

{
  "export_type":   "stats",           // "stats" for daily aggregates; "records" for CSAT individual rows
  "stat_type":    "calls",           // "calls" | "onduty" | "csat"
  "target_type":  "callcenter",      // "callcenter" | "department" | "office" | "user"
  "target_id":    "off_1a2b",        // Dialpad callcenter / office / user ID
  "timezone":     "America/Chicago", // IANA timezone — affects day boundary calculation
  "is_today":     false,             // false = completed historical days; true = includes live today (~30min refresh)
  "days_ago_start": 7,               // How many days back to start — DAYS state variable
  "days_ago_end":   0                // 0 = through yesterday; 1 = exclude yesterday
}

Implemented in fetchLiveData() and pollStats(id, headers, base, waitStep, getStep). All fetch steps are visualized in the Fetch Overlay modal with a progress bar.

The following metrics are displayed as N/A in the status bar because they are not buildable from the Dialpad Stats API v2 in any form. These limitations are also documented inside the Detail Pane for each chart.

Both genDemoData() and normalizeStats() produce the same stats object. renderCharts() consumes only this shape and does not know or care where data originated.

{
  dates:   ['YYYY-MM-DD', ...],     // N dates ascending — all chart x-axes

  calls: {
    inbound:  [number|null],  // inbound_calls per day
    outbound: [number|null],  // outbound_calls per day
    missed:   [number|null],  // missed calls per day
    abandoned:[number|null],  // abandoned calls per day
    answered: [number|null],  // answered calls per day (used in SL% formula)
    aht:      [number|null]   // avg handle time in minutes (CC targets only)
  },

  service: {
    serviceLevel: [number|null], // % — pre-computed: service_level / answered × 100
    asa:          [number|null], // seconds — pre-computed: asa_minutes × 60
    abandonRate:  [number|null]  // % — pre-computed: abandoned / inbound × 100
  },

  agents: {
    available:   [number|null], // agent-hours available
    occupied:    [number|null], // agent-hours on calls
    wrapup:      [number|null], // agent-hours in post-call wrap-up
    utilization: [number|null]  // % — pre-computed: (occ+wru) / total × 100
  },

  quality: {
    csat: [number|null]         // 1–5 avg per day — pre-computed from survey records
  }
}

All thresholds are hard-coded in renderCharts(). To change a threshold, update both the slaLine() value and the corresponding kpiBadge threshold array.

The dashboard ships in demo mode. Data is generated by genDemoData(DAYS) using bounded Math.random() ranges. Weekend days produce ~40% lower call volumes. Every demo refresh regenerates all data — no persistence between refreshes.

All items below activate when proxy is live. Features in demo mode today that require proxy to become functional are noted.

• Deploy proxy server — Azure Function, Cloudflare Worker, or Express. Must forward POST /api/v2/stats and GET /api/v2/stats/{id} to Dialpad with Authorization: Bearer injected server-side.
• Update base variable — In fetchLiveData(), change var base = 'https://dialpad.com/api/v2/' to your proxy base URL (e.g. '/api/proxy/dialpad/').
• Move API key server-side — For shared kiosk/wall displays, store the key as an environment variable in the proxy. Remove the KEY input from the rail and let the proxy inject auth headers silently.
• Replace TARGET_IDs — Update all <option value="..."> values and display names with real Dialpad callcenter / office IDs.
• Set correct timezone — Update "timezone" in POST body to match each target's operational timezone.
• Verify CSAT feature enabled — Confirm in Dialpad Admin that CSAT surveys are enabled for the target. Without this, the csat export is empty and CSAT chart shows all gaps.
• Test full async fetch cycle — Run a live load and observe the Fetch Overlay. All steps A–H should complete with green checkmarks. Step C/E/G timeout = increase attempts or reduce DAYS range.
• Test Production Mode — Enable Production, let it run 2 cycles (10 min). Verify 5-min interval fires, charts update, interval clears cleanly on toggle-off.
• Remove demo KTC bar — Delete #ktc-demo-bar div and associated CSS for standalone deployment.