Quad semantics: SaaS ops control room, 24 h
Where do traffic, errors and operating conditions change together?
Control rooms
How to read this example
- 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 thisStart 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.
Open the chart without page chrome ↗Drawing width at least 760 px. Scroll within the chart on smaller screens.
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)
chart.render()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
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()Waiting for the chart.
Open Data & agent view to read this chart through chart.describe().
Read from the running library through its optional agent/describe module. Text, table and JSON share the same snapshot. Demo data only.
$ wcc chart export radial-column-saas-ops-quad.json --out radial-column-saas-ops-quad.svg --with-tablePublic agent tools 0.2.3, tested with Library 1.1.5; available from the versioned GitHub release and npm. Save a JSON spec first and check the loaded runtime and supported modules before rendering. Command reference
Loading /gallery/radial-column/saas-ops-quad/index.md …This example uses Premium modules. Compare licences · Embedding in a distributed product?