01 What Is It

The ROC Leaders Board is a single-file HTML dashboard designed for wall display or NOC browser tabs. It aggregates operational metrics from ConnectWise Manage and presents them as animated KPI panels, bar charts, gauge arcs, and an SLA trend line — all filterable by engineer. No backend server is required for rendering; a lightweight reverse proxy is required only to satisfy CORS when the dashboard is hosted outside the CW Manage domain.

The file is self-contained: HTML, CSS, and JavaScript in one document. Chart rendering uses Chart.js 4.4.1 loaded from cdnjs. No other runtime dependencies exist.

02 Integration Status

03 Architecture

Component Map

Data Flow

DOMContentLoaded
  → loadDashboard()
      if DEMO  → demoData() → renderAll()
      if LIVE  → cwFetch() × 4 (parallel Promise.all)
                 → build data object
                 → renderAll()
  → startAutoRefresh(30000)
       every 30 s: same branch logic

Proxy Pattern

All CW Manage requests route through a local reverse proxy at /proxy. The proxy accepts a JSON body with { url, method, headers } and forwards the request server-side. This keeps API credentials out of the browser and avoids CORS rejections from CW Manage.

POST /proxy
Content-Type: application/json

{
  "url":     "https://na.myconnectwise.net/v4_6_release/apis/3.0/service/tickets?...",
  "method":  "GET",
  "headers": {
    "Authorization": "Basic base64(company+pubkey:privkey)",
    "clientId":      "your-client-id",
    "Content-Type":  "application/json"
  }
}

04 Dashboard Panels — Row 1

05 Dashboard Panels — Row 2

06 Dashboard Panels — Row 3

07 Dashboard Panels — Row 4

08 Dashboard Panels — Row 5

09 Topbar KPIs

Five sticky KPI counters render across the top bar. Each is clickable and opens the relevant detail drawer.

The DEMO / LIVE badge and week range label also appear in the topbar. The live dot pulses yellow in demo mode; switching to live turns it green.

10 Ticker & Engineer Filter Bar

Alert Ticker

A scrolling ticker below the topbar surfaces real-time alerts. Items include open P1/P2 counts, weekly closed count, SLA percentages, CSAT average, hours logged, and the first 5 open ticket titles with assignees. Hover to pause scrolling. Click any item to show it in the toast notification.

Engineer Filter Bar

A pill bar below the ticker lists all configured engineers. Clicking an engineer pill filters all bar charts to highlight that engineer's bars (others fade to 15% opacity). Clicking the active engineer again resets to "All." The filter also works by clicking a bar segment directly in any chart or by clicking an engineer name in any detail drawer row.

The engineer list is driven by CW.members — set this in the Config modal or pre-populate the CW state object.

11 Detail Drawer

A slide-in panel from the right edge exposes deep-dive data for each metric category. Drawer types:

Close with the ✕ button, clicking the overlay, or pressing Escape. Press / to jump directly to the open tickets drawer.

12 Config Modal Fields

Open via the ⚙ Config button in the topbar. Settings are persisted to localStorage under the key roc-cw-cfg. On next page load, stored config is restored automatically and DEMO mode is disabled if server + keys are present.

13 Proxy Activation Checklist

The dashboard uses a proxy-ready wiring pattern. The real fetch() call is commented out above the mock fallback in the cwFetch() function. Complete these steps to go live:

• Deploy a reverse proxy — Node/Express, Nginx, or a simple serverless function that accepts POST /proxy with body {url, method, headers} and forwards the request to CW Manage.
• Register a Client ID — Go to developer.connectwise.com, register your application, and obtain a Client ID UUID. Required on every CW REST request since 2019.4.
• Generate API Keys — In CW Manage: System > Members > [member] > API Keys > Add. Copy public and private keys.
• Open cwFetch() in the dashboard source — Uncomment the real fetch() block (lines ~20 lines inside cwFetch). Remove or comment the mock fallback line below it.
• Verify board names match exactly — Board names in the Config modal must match the exact board names in CW Manage (case-sensitive).
• Verify member identifiers match CW logins — The Members field uses CW member identifiers (login names), not display names.
• Save config in the dashboard — Fill all fields in ⚙ Config and click "Connect to CW →". The DEMO badge switches to LIVE and a full data load fires.
• Test with browser DevTools open — Watch the Network tab for /proxy calls. Check console for any "CW API HTTP" errors from cwFetch.
• Confirm priority name strings — CW Manage priority names vary by account (e.g. "Priority 1 - Critical" vs "P1 - Critical"). Update the priority name comparisons in loadDashboard() to match your CW instance.

14 Exact API Endpoints Used

All endpoints are from the ConnectWise Manage REST API v3.0. Base URL: https://{server}/v4_6_release/apis/3.0/

Documentation: developer.connectwise.com

15 Documented Vendor API Limitations

16 Troubleshooting

17 Demo vs Live Mode