https://sifrovacky.cz/assets/tracker/charts/reply_chart-34b1e037.js

1import Highcharts from 'highcharts'
2
3
4const chartId = 'reply_chart-chart'
5const { url } = document.getElementById(chartId).dataset
6const response = await fetch(url)
7const stats = await response.json()
8
9new Highcharts.Chart(chartId, {
10  chart: {
11    zoomType: 'x',
12    spacingRight: 20
13  },
14  title: {
15    text: 'Rychlost odezvy',
16  },
17  legend: {
18    enabled: false,
19  },
20  xAxis: {
21    type: "datetime",
22    maxZoom: 3600000,
23  },
24  yAxis: {
25    title: {
26      text: 'Doba zpracování (min)',
27    },
28    min: 0,
29  },
30  tooltip: {
31    formatter: function () {
32      let text = '<span style="font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif; font-size:12px;color:#333333;padding:0;white-space:nowrap;fill:#333333;">'
33      text += '<span style="font-size: 10px">';
34      text += Highcharts.dateFormat('%H:%M', parseInt(this.x));
35      text += '</span>'
36      text += '</span>'
37      text += '<br/>';
38      text += '<strong>Tým: ' + '</strong>' + this.point.team + '<br/>';
39      text += '<strong>Délka odezvy: ' + Math.round(this.point.y) + ' min ' + Math.round(60 * (this.point.y - Math.floor(this.point.y))) + ' sec' + '</strong>' + '<br/>';
40      return text;
41    }
42  },
43  plotOptions: {
44    area: {
45      lineWidth: 1,
46      marker: {
47        enabled: false,
48        states: {
49          hover: {
50            enabled: true,
51            radius: 5
52          }
53        }
54      },
55      states: {
56        hover: {
57          lineWidth: 1
58        }
59      }
60    }
61  },
62  series: [{
63    name: 'Doba',
64    type: 'area',
65    data: stats.map(({ team, received_at, time_to_reply }) => ({
66      team,
67      x: received_at * 1000,
68      y: time_to_reply / 60
69    }))
70  }],
71});
72