# Quad semantics: SaaS ops control room, 24 h (Radial Column example)

> WestCoast Charts 1.1.5, release, public Core release, on npm. HTML: https://westcoast-charts.com/gallery/radial-column/saas-ops-quad/ · Index for agents: https://westcoast-charts.com/llms.txt

Four layers keyed by service and time. Outside: requests per 10 min (colour = error rate, rim band = vs a typical day, ◆ deploys, ● pipeline runs). Then cost per cluster (labelled by cluster type), per-service error budget left (ring label: availability · p95 latency), and Region › Service traffic at the core. Click a service, a cluster or a time slot to pin it; Esc clears. The story: an EU spike at 18:40 on eu-k8s-2 right after checkout v2.41. Compact layout retains every time slot, all six service budgets, all cluster costs and both Region › Service depths; ring space is shared by actual ring count.

## Question

Where do traffic, errors and operating conditions change together?

## How to read it

- Time & requests: Read clockwise from midnight. Each outer bar covers ten minutes; its length shows requests and its colour shows the error rate.
- Outer rim: The band compares traffic with a typical day. Diamonds mark deployments; dots mark pipeline runs.
- Service rings: Region › Service traffic is at the core. The surrounding service rings show remaining 30-day error budgets; their labels add availability and p95 latency.
- Cluster ring: Cost per cluster, in thousands of dollars per day. Cluster labels identify the infrastructure.

Try: Start with the red bars near 18:40 and compare their timing with the deployment marker. Hover to inspect that period, then select Checkout or eu-k8s-2 to follow the configured relationships. Click to pin a selection; Escape clears it.

- Chart type: `radialColumn` (Radial Column)
- Collection: Radial Column · Radial Column · Control rooms
- Raw configuration: https://westcoast-charts.com/gallery-src/radial-column/saas-ops-quad.js
- Standalone example: https://westcoast-charts.com/embed/samples/wcc/premium/radial-column.html?only=saas-ops-quad

## Setup

```js
import WestCoastCharts from 'west-coast-charts'
import premium from 'west-coast-charts/premium'

WestCoastCharts.use(premium)
const WestCoastChartsPremium = premium
WestCoastCharts.setLicenseKey(LICENCE_KEY) // paid production licence; localhost evaluation needs no key
```

## Options

Shortened: the full configuration (50 kB, mostly data) is at https://westcoast-charts.com/gallery-src/radial-column/saas-ops-quad.js.

```js
const options = {
  "chart": {
    "type": "radialColumn",
    "height": 700,
    "toolbar": {
      "show": false
    }
  },
  "series": [
    {
      "name": "Requests",
      "data": [
        {
          "x": "00:00",
          "y": 3838,
          "meta": {
            "err": 0.28,
            "typ": -1
          }
        },
        {
          "x": "00:10",
          "y": 3833,
          "meta": {
            "err": 0.19,
            "typ": -1
          }
        },
        {
          "x": "00:20",
          "y": 3851,
          "meta": {
            "err": 0.27,
            "typ": 1
          }
        },
        {
          "x": "00:30",
          "y": 3764,
          "meta": {
            "err": 0.28,
            "typ": 0
          }
        },
        {
          "x": "00:40",
          "y": 3707,
          "meta": {
            "err": 0.24,
            "typ": 0
          }
        },
        {
          "x": "00:50",
          "y": 3625,
          "meta": {
            "err": 0.34,
            "typ": -1
          }
        },
        {
          "x": "01:00",
          "y": 3560,
          "meta": {
            "err": 0.26,
            "typ": -1
          }
        },
        {
          "x": "01:10",
          "y": 3548,
          "meta": {
            "err": 0.36,
            "typ": 0
          }
        },
        {
          "x": "01:20",
          "y": 3464,
          "meta": {
            "err": 0.2,
            "typ": 0
          }
        },
        {
          "x": "01:30",
          "y": 3382,
          "meta": {
            "err": 0.34,
            "typ": -1
          }
        },
        {
          "x": "01:40",
          "y": 3352,
          "meta": {
            "err": 0.3,
            "typ": 0
          }
        },
        {
          "x": "01:50",
          "y": 3271,
          "meta": {
            "err": 0.23,
            "typ": 0
          }
        },
        {
          "x": "02:00",
          "y": 3184,
          "meta": {
            "err": 0.36,
            "typ": -1
          }
        },
        {
          "x": "02:10",
          "y": 3084,
          "meta": {
            "err": 0.22,
            "typ": -1
          }
        },
        {
          "x": "02:20",
          "y": 3064,
          "meta": {
            "err": 0.34,
            "typ": 0
          }
        },
        {
          "x": "02:30",
          "y": 2940,
          "meta": {
            "err": 0.26,
            "typ": -1
          }
        },
        {
          "x": "02:40",
          "y": 2944,
          "meta": {
            "err": 0.29,
            "typ": 1
          }
        },
        {
          "x": "02:50",
          "y": 2803,
          "meta": {
            "err": 0.31,
            "typ": -1
          }
        },
        {
          "x": "03:00",
          "y": 2468,
          "meta": {
            "err": 0.25,
            "typ": -11
          }
        },
        {
          "x": "03:10",
          "y": 2401,
          "meta": {
            "err": 0.88,
            "typ": -11
          }
        },
        {
          "x": "03:20",
          "y": 2328,
          "meta": {
            "err": 1.06,
            "typ": -11
          }
        },
        {
          "x": "03:30",
          "y": 2287,
          "meta": {
            "err": 0.94,
            "typ": -11
          }
        },
        {
          "x": "03:40",
          "y": 2180,
          "meta": {
            "err": 1.06,
            "typ": -13
          }
        },
        {
          "x": "03:50",
          "y": 2180,
          "meta": {
            "err": 0.34,
            "typ": -11
          }
        },
        {
          "x": "04:00",
          "y": 2426,
          "meta": {
            "err": 0.36,
            "typ": 1
          }
        },
        {
          "x": "04:10",
          "y": 2336,
          "meta": {
            "err": 0.24,
            "typ": 0
          }
        },
        {
          "x": "04:20",
          "y": 2305,
          "meta": {
            "err": 0.19,
            "typ": 0
          }
        },
        {
          "x": "04:30",
          "y": 2288,
          "meta": {
            "err": 0.36,
            "typ": 1
          }
        },
        {
          "x": "04:40",
          "y": 2214,
          "meta": {
            "err": 0.37,
            "typ": 0
          }
        },
        {
          "x": "04:50",
          "y": 2163,
          "meta": {
            "err": 0.33,
            "typ": -1
          }
        },
        {
          "x": "05:00",
          "y": 2202,
          "meta": {
            "err": 0.3,
            "typ": 1
          }
        },
        {
          "x": "05:10",
          "y": 2167,
          "meta": {
            "err": 0.29,
            "typ": 1
          }
        },
        {
          "x": "05:20",
          "y": 2167,
          "meta": {
            "err": 0.28,
            "typ": 1
          }
        },
        {
          "x": "05:30",
          "y": 2166,
          "meta": {
            "err": 0.4,
            "typ": 1
          }
        },
        {
          "x": "05:40",
          "y": 2132,
          "meta": {
            "err": 0.36,
            "typ": 0
          }
        },
        {
          "x": "05:50",
          "y": 2141,
          "meta": {
            "err": 0.23,
            "typ": 0
          }
        },
        {
          "x": "06:00",
          "y": 2120,
          "meta": {
            "err": 0.19,
            "typ": -1
          }
        },
        {
          "x": "06:10",
          "y": 2182,
          "meta": {
            "err": 0.2,
            "typ": 1
          }
        },
        {
          "x": "06:20",
          "y": 2167,
          "meta": {
            "err": 0.3,
            "typ": 0
          }
        },
        {
          "x": "06:30",
          "y": 2187,
          "meta": {
            "err": 0.28,
            "typ": 0
          }
        },
        {
          "x": "06:40",
          "y": 2189,
          "meta": {
            "err": 0.26,
            "typ": -1
          }
        },
        {
          "x": "06:50",
          "y": 2216,
          "meta": {
            "err": 0.31,
            "typ": -1
          }
        },
        {
          "x": "07:00",
          "y": 2264,
          "meta": {
            "err": 0.38,
            "typ": 0
          }
        },
        {
          "x": "07:10",
          "y": 2257,
          "meta": {
            "err": 0.4,
            "typ": -1
          }
        },
        {
          "x": "07:20",
          "y": 2342,
          "meta": {
            "err": 0.35,
            "typ": 1
          }
        },
        {
          "x": "07:30",
          "y": 2334,
          "meta": {
            "err": 0.26,
            "typ": 0
          }
        },
        {
          "x": "07:40",
          "y": 2377,
          "meta": {
            "err": 0.32,
            "typ": 1
          }
        },
        {
          "x": "07:50",
          "y": 2372,
          "meta": {
            "err": 0.25,
            "typ": 0
          }
        },
        {
          "x": "08:00",
          "y": 2391,
          "meta": {
            "err": 0.24,
            "typ": 0
          }
        },
        {
          "x": "08:10",
          "y": 2437,
          "meta": {
            "err": 0.31,
            "typ": 1
          }
        },
        {
          "x": "08:20",
          "y": 2445,
          "meta": {
            "err": 0.21,
            "typ": 1
          }
        },
        {
          "x": "08:30",
          "y": 2399,
          "meta": {
            "err": 0.39,
            "typ": -1
          }
        },
        {
          "x": "08:40",
          "y": 2443,
          "meta": {
            "err": 0.24,
            "typ": 1
          }
        },
        {
          "x": "08:50",
          "y": 2454,
          "meta": {
            "err": 0.26,
            "typ": 1
          }
        },
        {
          "x": "09:00",
          "y": 2456,
          "meta": {
            "err": 0.29,
            "typ": 1
          }
        },
        {
          "x": "09:10",
          "y": 2425,
          "meta": {
            "err": 0.23,
            "typ": 0
          }
        },
        {
          "x": "09:20",
          "y": 2387,
          "meta": {
            "err": 1.06,
            "typ": -1
          }
        },
        {
          "x": "09:30",
          "y": 2433,
          "meta": {
            "err": 0.94,
            "typ": 1
          }
        },
        {
          "x": "09:40",
          "y": 2411,
          "meta": {
            "err": 0.25,
            "typ": 1
          }
        },
        {
          "x": "09:50",
          "y": 2403,
          "meta": {
            "err": 0.28,
            "typ": 1
          }
        },
        {
          "x": "10:00",
          "y": 2325,
          "meta": {
            "err": 0.18,
            "typ": -1
          }
        },
        {
          "x": "10:10",
          "y": 2310,
          "meta": {
            "err": 0.3,
            "typ": -1
          }
        },
        {
          "x": "10:20",
          "y": 2310,
          "meta": {
            "err": 0.36,
            "typ": -1
          }
        },
        {
          "x": "10:30",
          "y": 2292,
          "meta": {
            "err": 0.32,
            "typ": -1
          }
        },
        {
          "x": "10:40",
          "y": 2318,
          "meta": {
            "err": 0.29,
            "typ": 1
          }
        },
        {
          "x": "10:50",
          "y": 2283,
          "meta": {
            "err": 0.22,
            "typ": 1
          }
        },
        {
          "x": "11:00",
          "y": 2257,
          "meta": {
            "err": 0.29,
            "typ": 0
          }
        },
        {
          "x": "11:10",
          "y": 2212,
          "meta": {
            "err": 0.24,
            "typ": -1
          }
        },
        {
          "x": "11:20",
          "y": 2212,
          "meta": {
            "err": 0.32,
            "typ": 0
          }
        },
        {
          "x": "11:30",
          "y": 2195,
          "meta": {
            "err": 0.25,
            "typ": 0
          }
        },
        {
          "x": "11:40",
          "y": 2184,
          "meta": {
            "err": 0.29,
            "typ": 0
          }
        },
        {
          "x": "11:50",
          "y": 2148,
          "meta": {
            "err": 0.32,
            "typ": -1
          }
        },
        {
          "x": "12:00",
          "y": 2184,
          "meta": {
            "err": 0.29,
            "typ": 1
          }
        },
        {
          "x": "12:10",
          "y": 2161,
          "meta": {
            "err": 0.23,
            "typ": 0
          }
        },
        {
          "x": "12:20",
          "y": 2169,
          "meta": {
            "err": 0.26,
            "typ": 1
          }
        },
        {
          "x": "12:30",
          "y": 2123,
          "meta": {
            "err": 0.31,
            "typ": -1
          }
        },
        {
          "x": "12:40",
          "y": 2141,
          "meta": {
            "err": 0.22,
            "typ": 0
          }
        },
        {
          "x": "12:50",
          "y": 2151,
          "meta": {
            "err": 0.38,
            "typ": 0
          }
        },
        {
          "x": "13:00",
          "y": 2149,
          "meta": {
            "err": 0.22,
            "typ": 0
          }
        },
        {
          "x": "13:10",
          "y": 2185,
          "meta": {
            "err": 0.36,
            "typ": 1
          }
        },
        {
          "x": "13:20",
          "y": 2187,
          "meta": {
            "err": 0.23,
            "typ": 1
          }
        },
        {
          "x": "13:30",
          "y": 2170,
          "meta": {
            "err": 0.23,
            "typ": -1
          }
        },
        {
          "x": "13:40",
          "y": 2187,
          "meta": {
            "err": 0.38,
            "typ": -1
          }
        },
        {
          "x": "13:50",
          "y": 2230,
          "meta": {
            "err": 0.3,
            "typ": 1
          }
        },
        {
          "x": "14:00",
          "y": 2232,
          "meta": {
            "err": 0.29,
            "typ": 0
          }
        },
        {
          "x": "14:10",
          "y": 2256,
          "meta": {
            "err": 0.34,
            "typ": 0
          }
        },
        {
          "x": "14:20",
          "y": 2253,
          "meta": {
            "err": 0.35,
            "typ": -1
          }
        },
        {
          "x": "14:30",
          "y": 2334,
          "meta": {
            "err": 0.18,
            "typ": 1
          }
        },
        {
          "x": "14:40",
          "y": 2366,
          "meta": {
            "err": 0.29,
            "typ": 1
          }
        },
        {
          "x": "14:50",
          "y": 2389,
          "meta": {
            "err": 0.18,
            "typ": 0
          }
        },
        {
          "x": "15:00",
          "y": 2444,
          "meta": {
            "err": 0.39,
            "typ": 1
          }
        },
        {
          "x": "15:10",
          "y": 2489,
          "meta": {
            "err": 0.23,
            "typ": 1
          }
        },
        {
          "x": "15:20",
          "y": 2479,
          "meta": {
            "err": 0.26,
            "typ": -1
          }
        },
        {
          "x": "15:30",
          "y": 2549,
          "meta": {
            "err": 0.4,
            "typ": 0
          }
        },
        {
          "x": "15:40",
          "y": 2620,
          "meta": {
            "err": 0.28,
            "typ": 1
          }
        },
        {
          "x": "15:50",
          "y": 2628,
          "meta": {
            "err": 0.3,
  // Full configuration available through Raw or Copy.

const chart = new WestCoastCharts(document.querySelector('#chart'), options)
await chart.render()
```

## Verify

- Text check (Library 1.1.5): load `west-coast-charts/agent/describe` and call `chart.describe({ format: "json" })` for the actual drawn state. The live reader is on this example’s HTML page.
- Command line (Public agent tools 0.2.3, tested with Library 1.1.5; available from the versioned GitHub release and npm, https://westcoast-charts.com/docs/cli/index.md): `wcc chart export radial-column-saas-ops-quad.json --out radial-column-saas-ops-quad.svg --with-table` (save the options above as JSON first)