Quint-Semantik auf einer Uhr: SaaS-Betrieb, 24 h
Die Daten der Quint-Zeitleiste auf einem Ring (24-h-Uhr, UTC, 10-Minuten-Slots). Außen: Anfragen je 10 Minuten, Farbe = Fehlerrate, Randband = Vergleich mit einem typischen Tag, ◆ Deployments, ● Pipeline-Läufe, rotes ◆ für den Alarm um 18:40 Uhr. Innen, an den Slots ausgerichtet: Kosten je Cluster (€ / h; von außen nach innen eu-k8s-2, eu-k8s-1, us-k8s-1) und p95-Latenz (ms; Checkout, Payments, Search, ebenfalls von außen nach innen) als benannte Heatmap-Ringe, hellere Farbe = höherer Wert (logarithmische Farbskala, unter dem Ring erläutert; „All 6 rows“ zeigt alle Services und Cluster); danach das verbleibende Fehlerbudget je Service über 30 Tage (Legende in %, Ringbeschriftung: Verfügbarkeit · p95-Latenz) und der Traffic nach Region › Service (M Anfragen in 24 h). Der rote Sektor markiert den Vorfall von 18:40 bis 19:20 Uhr auf allen Ringen: Einen Slot darin mit dem Mauszeiger hervorheben oder fixieren, und Kosten für eu-k8s-2, Checkout-Latenz und EU-Traffic werden gemeinsam hervorgehoben.
Control rooms
Diagramm ohne Website-Rahmen öffnen ↗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()Warten auf das Diagramm.
Open Data & agent view to read this chart through chart.describe().
Aus der laufenden Bibliothek über das optionale agent/describe -Modul gelesen. Text, Tabelle und JSON zeigen denselben Zustand. Ausschließlich Demonstrationsdaten.
$ 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. Speichern Sie zuerst eine JSON-Spezifikation und prüfen Sie vor dem Rendern die geladene Runtime und die unterstützten Module. Befehlsreferenz
Loading /gallery/radial-column/quint-radial/index.md …This example uses Premium modules. Compare licences · Embedding in a distributed product?