Quint semantics on a clock: SaaS ops, 24 h
The Quint timeline's data on one ring (24 h clock, UTC, 10-min slots). Outside: requests per 10 min, colour = error rate, rim band = vs a typical day, ◆ deploys, ● pipeline runs, red ◆ the 18:40 alert. Inside, aligned with the slots: cost per cluster (€ / h; eu-k8s-2, eu-k8s-1, us-k8s-1 from the outside in) and p95 latency (ms; Checkout, Payments, Search, also from the outside in) as named heatmap rings, brighter = higher (log colour scale, keyed under the ring; "All 6 rows" shows every service and cluster); then error budget left per service over 30 days (legend %, ring label: availability · p95 latency) and Region › Service traffic (M requests in 24 h). The red wedge marks the incident 18:40–19:20 across every ring: hover or pin a slot in it and eu-k8s-2 cost, Checkout latency and EU traffic light up together. Compact screens keep every 10-minute slot and every displayed service/cluster row; only the empty centre, ring gaps and legend placement shrink. The two heat layers still show the explicitly named three-row story selection, not an aggregate of six rows.
Control rooms
Open the chart without page chrome ↗Drawing width at least 760 px. Scroll within the chart on smaller screens.
// First chart on this page. The example combines several charts or controls;
// open the standalone example for the full source.
const options = {
"chart": {
"type": "radialColumn",
"height": 720,
"toolbar": {
"show": false
}
},
"series": [
{
"name": "Requests (per 10 min)",
"data": [
{
"x": "00:00",
"y": 14280,
"meta": {
"err": 0.23,
"typ": -1
}
},
{
"x": "00:10",
"y": 14580,
"meta": {
"err": 0.35,
"typ": 1
}
},
{
"x": "00:20",
"y": 14820,
"meta": {
"err": 0.32,
"typ": 2
}
},
{
"x": "00:30",
"y": 14520,
"meta": {
"err": 0.34,
"typ": -1
}
},
{
"x": "00:40",
"y": 14640,
"meta": {
"err": 0.28,
"typ": 0
}
},
{
"x": "00:50",
"y": 15000,
"meta": {
"err": 0.29,
"typ": 2
}
},
{
"x": "01:00",
"y": 15300,
"meta": {
"err": 0.31,
"typ": 3
}
},
{
"x": "01:10",
"y": 15360,
"meta": {
"err": 0.25,
"typ": 3
}
},
{
"x": "01:20",
"y": 14940,
"meta": {
"err": 0.25,
"typ": 0
}
},
{
"x": "01:30",
"y": 15300,
"meta": {
"err": 0.3,
"typ": 1
}
},
{
"x": "01:40",
"y": 15360,
"meta": {
"err": 0.24,
"typ": 0
}
},
{
"x": "01:50",
"y": 15420,
"meta": {
"err": 0.22,
"typ": 0
}
},
{
"x": "02:00",
"y": 15540,
"meta": {
"err": 0.26,
"typ": 0
}
},
{
"x": "02:10",
"y": 16020,
"meta": {
"err": 0.22,
"typ": 2
}
},
{
"x": "02:20",
"y": 15600,
"meta": {
"err": 0.27,
"typ": -2
}
},
{
"x": "02:30",
"y": 16020,
"meta": {
"err": 0.23,
"typ": 0
}
},
{
"x": "02:40",
"y": 16740,
"meta": {
"err": 0.32,
"typ": 3
}
},
{
"x": "02:50",
"y": 16440,
"meta": {
"err": 0.33,
"typ": 1
}
},
{
"x": "03:00",
"y": 16920,
"meta": {
"err": 0.24,
"typ": 3
}
},
{
"x": "03:10",
"y": 16440,
"meta": {
"err": 0.27,
"typ": -1
}
},
{
"x": "03:20",
"y": 16800,
"meta": {
"err": 0.36,
"typ": 1
}
},
{
"x": "03:30",
"y": 16260,
"meta": {
"err": 0.2,
"typ": -4
}
},
{
"x": "03:40",
"y": 17280,
"meta": {
"err": 0.21,
"typ": 2
}
},
{
"x": "03:50",
"y": 16800,
"meta": {
"err": 0.38,
"typ": -2
}
},
{
"x": "04:00",
"y": 18000,
"meta": {
"err": 0.38,
"typ": 5
}
},
{
"x": "04:10",
"y": 16920,
"meta": {
"err": 0.23,
"typ": -2
}
},
{
"x": "04:20",
"y": 17040,
"meta": {
"err": 0.23,
"typ": -2
}
},
{
"x": "04:30",
"y": 17820,
"meta": {
"err": 0.23,
"typ": 2
}
},
{
"x": "04:40",
"y": 17520,
"meta": {
"err": 0.38,
"typ": 0
}
},
{
"x": "04:50",
"y": 16800,
"meta": {
"err": 0.38,
"typ": -4
}
},
{
"x": "05:00",
"y": 17340,
"meta": {
"err": 0.38,
"typ": -1
}
},
{
"x": "05:10",
"y": 17640,
"meta": {
"err": 0.33,
"typ": 0
}
},
{
"x": "05:20",
"y": 17040,
"meta": {
"err": 0.3,
"typ": -3
}
},
{
"x": "05:30",
"y": 17580,
"meta": {
"err": 0.34,
"typ": 0
}
},
{
"x": "05:40",
"y": 16980,
"meta": {
"err": 0.38,
"typ": -4
}
},
{
"x": "05:50",
"y": 17700,
"meta": {
"err": 0.19,
"typ": 1
}
},
{
"x": "06:00",
"y": 18420,
"meta": {
"err": 0.39,
"typ": 5
}
},
{
"x": "06:10",
"y": 17340,
"meta": {
"err": 0.34,
"typ": 0
}
},
{
"x": "06:20",
"y": 17340,
"meta": {
"err": 0.27,
"typ": 0
}
},
{
"x": "06:30",
"y": 17460,
"meta": {
"err": 0.32,
"typ": 1
}
},
{
"x": "06:40",
"y": 17520,
"meta": {
"err": 0.27,
"typ": 1
}
},
{
"x": "06:50",
"y": 17340,
"meta": {
"err": 1.3,
"typ": 1
}
},
{
"x": "07:00",
"y": 17760,
"meta": {
"err": 1.12,
"typ": 4
}
},
{
"x": "07:10",
"y": 16980,
"meta": {
"err": 1.2,
"typ": -1
}
},
{
"x": "07:20",
"y": 17400,
"meta": {
"err": 1.12,
"typ": 2
}
},
{
"x": "07:30",
"y": 16920,
"meta": {
"err": 1.19,
"typ": 0
}
},
{
"x": "07:40",
"y": 17220,
"meta": {
"err": 0.26,
"typ": 2
}
},
{
"x": "07:50",
"y": 16800,
"meta": {
"err": 0.3,
"typ": -1
}
},
{
"x": "08:00",
"y": 16560,
"meta": {
"err": 0.23,
"typ": -2
}
},
{
"x": "08:10",
"y": 16680,
"meta": {
"err": 0.35,
"typ": -1
}
},
{
"x": "08:20",
"y": 17640,
"meta": {
"err": 0.33,
"typ": 4
}
},
{
"x": "08:30",
"y": 17280,
"meta": {
"err": 0.31,
"typ": 2
}
},
{
"x": "08:40",
"y": 16980,
"meta": {
"err": 0.21,
"typ": 0
}
},
{
"x": "08:50",
"y": 16140,
"meta": {
"err": 0.18,
"typ": -5
}
},
{
"x": "09:00",
"y": 17160,
"meta": {
"err": 0.21,
"typ": 0
}
},
{
"x": "09:10",
"y": 16800,
"meta": {
"err": 0.28,
"typ": -2
}
},
{
"x": "09:20",
"y": 17880,
"meta": {
"err": 0.35,
"typ": 3
}
},
{
"x": "09:30",
"y": 16980,
"meta": {
"err": 0.23,
"typ": -2
}
},
{
"x": "09:40",
"y": 17880,
"meta": {
"err": 0.38,
"typ": 2
}
},
{
"x": "09:50",
"y": 17340,
"meta": {
"err": 0.31,
"typ": -2
}
},
{
"x": "10:00",
"y": 17160,
"meta": {
"err": 0.32,
"typ": -4
}
},
{
"x": "10:10",
"y": 18360,
"meta": {
"err": 0.2,
"typ": 1
}
},
{
"x": "10:20",
"y": 17820,
"meta": {
"err": 0.18,
"typ": -3
}
},
{
"x": "10:30",
"y": 18060,
"meta": {
"err": 0.38,
"typ": -2
}
},
{
"x": "10:40",
"y": 19140,
"meta": {
"err": 0.37,
"typ": 2
}
},
{
"x": "10:50",
"y": 19800,
"meta": {
"err": 0.31,
"typ": 5
}
},
{
"x": "11:00",
"y": 18960,
"meta": {
"err": 0.29,
"typ": -1
}
},
{
"x": "11:10",
"y": 19740,
"meta": {
"err": 0.32,
"typ": 2
}
},
{
"x": "11:20",
"y": 20400,
"meta": {
"err": 0.4,
"typ": 4
}
},
{
"x": "11:30",
"y": 19980,
"meta": {
"err": 0.39,
"typ": 0
}
},
{
"x": "11:40",
"y": 19680,
"meta": {
"err": 0.37,
"typ": -3
}
},
{
"x": "11:50",
"y": 21060,
"meta": {
"err": 0.35,
"typ": 3
}
},
{
"x": "12:00",
"y": 20220,
"meta": {
"err": 0.2,
"typ": -2
}
},
{
"x": "12:10",
"y": 21840,
"meta": {
"err": 0.34,
"typ": 4
}
},
{
"x": "12:20",
"y": 21360,
"meta": {
"err": 0.3,
"typ": 1
}
},
{
"x": "12:30",
"y": 21960,
"meta": {
"err": 0.28,
"typ": 3
}
},
{
"x": "12:40",
"y": 21240,
"meta": {
"err": 0.23,
"typ": -2
}
},
{
"x": "12:50",
"y": 22620,
"meta": {
"err": 0.33,
"typ": 4
}
},
{
"x": "13:00",
"y": 22320,
"meta": {
"err": 0.38,
"typ": 2
}
},
{
"x": "13:10",
"y": 21000,
"meta": {
"err": 0.18,
"typ": -5
}
},
{
"x": "13:20",
"y": 22680,
"meta": {
"err": 0.23,
"typ": 2
}
},
{
"x": "13:30",
"y": 23160,
"meta": {
"err": 0.21,
"typ": 3
}
},
{
"x": "13:40",
"y": 22560,
"meta": {
"err": 0.31,
"typ": 0
}
},
{
"x": "13:50",
"y": 22800,
"meta": {
"err": 0.34,
"typ": 0
}
},
{
"x": "14:00",
"y": 23580,
"meta": {
"err": 0.35,
"typ": 3
}
},
{
"x": "14:10",
"y": 23400,
"meta": {
"err": 0.2,
"typ": 2
}
},
{
"x": "14:20",
"y": 22140,
"meta": {
"err": 0.31,
"typ": -3
}
},
{
"x": "14:30",
"y": 22440,
"meta": {
"err": 0.32,
"typ": -2
}
},
{
"x": "14:40",
"y": 23520,
"meta": {
"err": 0.19,
"typ": 2
}
},
{
"x": "14:50",
"y": 23460,
"meta": {
"err": 0.33,
"typ": 2
}
},
{
"x": "15:00",
"y": 23520,
"meta": {
"err": 0.29,
"typ": 1
}
},
{
"x": "15:10",
"y": 23820,
"meta": {
"err": 0.35,
"typ": 3
}
},
{
"x": "15:20",
"y": 24120,
"meta": {
"err": 0.22,
"typ": 4
}
},
{
"x": "15:30",
"y": 23160,
"meta": {
"err": 0.39,
"typ": -1
}
},
{
"x": "15:40",
"y": 23460,
"meta": {
"err": 0.24,
"typ": 1
}
},
{
// Full configuration available through Raw or Copy.import WestCoastCharts from 'west-coast-charts'
import premium from 'west-coast-charts/premium'
import quint from 'west-coast-charts/layers/quint'
WestCoastCharts.use(premium).use(quint)
const WestCoastChartsPremium = premium
const WestCoastChartsLayer_quint = quint
WestCoastCharts.setLicenseKey(LICENCE_KEY) // paid production licence; localhost evaluation needs no key
const options = {
"chart": {
"type": "radialColumn",
"height": 720,
"toolbar": {
"show": false
}
},
"series": [
{
"name": "Requests (per 10 min)",
"data": [
{
"x": "00:00",
"y": 14280,
"meta": {
"err": 0.23,
"typ": -1
}
},
{
"x": "00:10",
"y": 14580,
"meta": {
"err": 0.35,
"typ": 1
}
},
{
"x": "00:20",
"y": 14820,
"meta": {
"err": 0.32,
"typ": 2
}
},
{
"x": "00:30",
"y": 14520,
"meta": {
"err": 0.34,
"typ": -1
}
},
{
"x": "00:40",
"y": 14640,
"meta": {
"err": 0.28,
"typ": 0
}
},
{
"x": "00:50",
"y": 15000,
"meta": {
"err": 0.29,
"typ": 2
}
},
{
"x": "01:00",
"y": 15300,
"meta": {
"err": 0.31,
"typ": 3
}
},
{
"x": "01:10",
"y": 15360,
"meta": {
"err": 0.25,
"typ": 3
}
},
{
"x": "01:20",
"y": 14940,
"meta": {
"err": 0.25,
"typ": 0
}
},
{
"x": "01:30",
"y": 15300,
"meta": {
"err": 0.3,
"typ": 1
}
},
{
"x": "01:40",
"y": 15360,
"meta": {
"err": 0.24,
"typ": 0
}
},
{
"x": "01:50",
"y": 15420,
"meta": {
"err": 0.22,
"typ": 0
}
},
{
"x": "02:00",
"y": 15540,
"meta": {
"err": 0.26,
"typ": 0
}
},
{
"x": "02:10",
"y": 16020,
"meta": {
"err": 0.22,
"typ": 2
}
},
{
"x": "02:20",
"y": 15600,
"meta": {
"err": 0.27,
"typ": -2
}
},
{
"x": "02:30",
"y": 16020,
"meta": {
"err": 0.23,
"typ": 0
}
},
{
"x": "02:40",
"y": 16740,
"meta": {
"err": 0.32,
"typ": 3
}
},
{
"x": "02:50",
"y": 16440,
"meta": {
"err": 0.33,
"typ": 1
}
},
{
"x": "03:00",
"y": 16920,
"meta": {
"err": 0.24,
"typ": 3
}
},
{
"x": "03:10",
"y": 16440,
"meta": {
"err": 0.27,
"typ": -1
}
},
{
"x": "03:20",
"y": 16800,
"meta": {
"err": 0.36,
"typ": 1
}
},
{
"x": "03:30",
"y": 16260,
"meta": {
"err": 0.2,
"typ": -4
}
},
{
"x": "03:40",
"y": 17280,
"meta": {
"err": 0.21,
"typ": 2
}
},
{
"x": "03:50",
"y": 16800,
"meta": {
"err": 0.38,
"typ": -2
}
},
{
"x": "04:00",
"y": 18000,
"meta": {
"err": 0.38,
"typ": 5
}
},
{
"x": "04:10",
"y": 16920,
"meta": {
"err": 0.23,
"typ": -2
}
},
{
"x": "04:20",
"y": 17040,
"meta": {
"err": 0.23,
"typ": -2
}
},
{
"x": "04:30",
"y": 17820,
"meta": {
"err": 0.23,
"typ": 2
}
},
{
"x": "04:40",
"y": 17520,
"meta": {
"err": 0.38,
"typ": 0
}
},
{
"x": "04:50",
"y": 16800,
"meta": {
"err": 0.38,
"typ": -4
}
},
{
"x": "05:00",
"y": 17340,
"meta": {
"err": 0.38,
"typ": -1
}
},
{
"x": "05:10",
"y": 17640,
"meta": {
"err": 0.33,
"typ": 0
}
},
{
"x": "05:20",
"y": 17040,
"meta": {
"err": 0.3,
"typ": -3
}
},
{
"x": "05:30",
"y": 17580,
"meta": {
"err": 0.34,
"typ": 0
}
},
{
"x": "05:40",
"y": 16980,
"meta": {
"err": 0.38,
"typ": -4
}
},
{
"x": "05:50",
"y": 17700,
"meta": {
"err": 0.19,
"typ": 1
}
},
{
"x": "06:00",
"y": 18420,
"meta": {
"err": 0.39,
"typ": 5
}
},
{
"x": "06:10",
"y": 17340,
"meta": {
"err": 0.34,
"typ": 0
}
},
{
"x": "06:20",
"y": 17340,
"meta": {
"err": 0.27,
"typ": 0
}
},
{
"x": "06:30",
"y": 17460,
"meta": {
"err": 0.32,
"typ": 1
}
},
{
"x": "06:40",
"y": 17520,
"meta": {
"err": 0.27,
"typ": 1
}
},
{
"x": "06:50",
"y": 17340,
"meta": {
"err": 1.3,
"typ": 1
}
},
{
"x": "07:00",
"y": 17760,
"meta": {
"err": 1.12,
"typ": 4
}
},
{
"x": "07:10",
"y": 16980,
"meta": {
"err": 1.2,
"typ": -1
}
},
{
"x": "07:20",
"y": 17400,
"meta": {
"err": 1.12,
"typ": 2
}
},
{
"x": "07:30",
"y": 16920,
"meta": {
"err": 1.19,
"typ": 0
}
},
{
"x": "07:40",
"y": 17220,
"meta": {
"err": 0.26,
"typ": 2
}
},
{
"x": "07:50",
"y": 16800,
"meta": {
"err": 0.3,
"typ": -1
}
},
{
"x": "08:00",
"y": 16560,
"meta": {
"err": 0.23,
"typ": -2
}
},
{
"x": "08:10",
"y": 16680,
"meta": {
"err": 0.35,
"typ": -1
}
},
{
"x": "08:20",
"y": 17640,
"meta": {
"err": 0.33,
"typ": 4
}
},
{
"x": "08:30",
"y": 17280,
"meta": {
"err": 0.31,
"typ": 2
}
},
{
"x": "08:40",
"y": 16980,
"meta": {
"err": 0.21,
"typ": 0
}
},
{
"x": "08:50",
"y": 16140,
"meta": {
"err": 0.18,
"typ": -5
}
},
{
"x": "09:00",
"y": 17160,
"meta": {
"err": 0.21,
"typ": 0
}
},
{
"x": "09:10",
"y": 16800,
"meta": {
"err": 0.28,
"typ": -2
}
},
{
"x": "09:20",
"y": 17880,
"meta": {
"err": 0.35,
"typ": 3
}
},
{
"x": "09:30",
"y": 16980,
"meta": {
"err": 0.23,
"typ": -2
}
},
{
"x": "09:40",
"y": 17880,
"meta": {
"err": 0.38,
"typ": 2
}
},
{
"x": "09:50",
"y": 17340,
"meta": {
"err": 0.31,
"typ": -2
}
},
{
"x": "10:00",
"y": 17160,
"meta": {
"err": 0.32,
"typ": -4
}
},
{
"x": "10:10",
"y": 18360,
"meta": {
"err": 0.2,
"typ": 1
}
},
{
"x": "10:20",
"y": 17820,
"meta": {
"err": 0.18,
"typ": -3
}
},
{
"x": "10:30",
"y": 18060,
"meta": {
"err": 0.38,
"typ": -2
}
},
{
"x": "10:40",
"y": 19140,
"meta": {
"err": 0.37,
"typ": 2
}
},
{
"x": "10:50",
"y": 19800,
"meta": {
"err": 0.31,
"typ": 5
}
},
{
"x": "11:00",
"y": 18960,
"meta": {
"err": 0.29,
"typ": -1
}
},
{
"x": "11:10",
"y": 19740,
"meta": {
"err": 0.32,
"typ": 2
}
},
{
"x": "11:20",
"y": 20400,
"meta": {
"err": 0.4,
"typ": 4
}
},
{
"x": "11:30",
"y": 19980,
"meta": {
"err": 0.39,
"typ": 0
}
},
{
"x": "11:40",
"y": 19680,
"meta": {
"err": 0.37,
"typ": -3
}
},
{
"x": "11:50",
"y": 21060,
"meta": {
"err": 0.35,
"typ": 3
}
},
{
"x": "12:00",
"y": 20220,
"meta": {
"err": 0.2,
"typ": -2
}
},
{
"x": "12:10",
"y": 21840,
"meta": {
"err": 0.34,
"typ": 4
}
},
{
"x": "12:20",
"y": 21360,
"meta": {
"err": 0.3,
"typ": 1
}
},
{
"x": "12:30",
"y": 21960,
"meta": {
"err": 0.28,
"typ": 3
}
},
{
"x": "12:40",
"y": 21240,
"meta": {
"err": 0.23,
"typ": -2
}
},
{
"x": "12:50",
"y": 22620,
"meta": {
"err": 0.33,
"typ": 4
}
},
{
"x": "13:00",
"y": 22320,
"meta": {
"err": 0.38,
"typ": 2
}
},
{
"x": "13:10",
"y": 21000,
"meta": {
"err": 0.18,
"typ": -5
}
},
{
"x": "13:20",
"y": 22680,
"meta": {
"err": 0.23,
"typ": 2
}
},
{
"x": "13:30",
"y": 23160,
"meta": {
"err": 0.21,
"typ": 3
}
},
{
"x": "13:40",
"y": 22560,
"meta": {
"err": 0.31,
"typ": 0
}
},
{
"x": "13:50",
"y": 22800,
"meta": {
"err": 0.34,
"typ": 0
}
},
{
"x": "14:00",
"y": 23580,
"meta": {
"err": 0.35,
"typ": 3
}
},
{
"x": "14:10",
"y": 23400,
"meta": {
"err": 0.2,
"typ": 2
}
},
{
"x": "14:20",
"y": 22140,
"meta": {
"err": 0.31,
"typ": -3
}
},
{
"x": "14:30",
"y": 22440,
"meta": {
"err": 0.32,
"typ": -2
}
},
{
"x": "14:40",
"y": 23520,
"meta": {
"err": 0.19,
"typ": 2
}
},
{
"x": "14:50",
"y": 23460,
"meta": {
"err": 0.33,
"typ": 2
}
},
{
"x": "15:00",
"y": 23520,
"meta": {
"err": 0.29,
"typ": 1
}
},
{
"x": "15:10",
"y": 23820,
"meta": {
"err": 0.35,
"typ": 3
}
},
{
"x": "15:20",
"y": 24120,
"meta": {
"err": 0.22,
"typ": 4
}
},
{
"x": "15:30",
"y": 23160,
"meta": {
"err": 0.39,
"typ": -1
}
},
{
"x": "15:40",
"y": 23460,
"meta": {
"err": 0.24,
"typ": 1
}
},
{
// 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-quint-radial.json --out radial-column-quint-radial.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/quint-radial/index.md …This example uses Premium modules. Compare licences · Embedding in a distributed product?