https://sifrovacky.cz/assets/stats/views/charts/puzzle-position-statistics-5c48b5c6.js

1import Highcharts from 'highcharts'
2
3import 'stats/highcharts-defaults'
4
5import { api, q, handleResponse } from 'stats/api'
6import decorate from 'stats/decorators/game'
7import colorize from 'stats/colors'
8import { formatTooltip } from 'stats/helpers/charts'
9
10const chartId = 'puzzle-position-statistics-chart'
11
12let data = document.getElementById(chartId).dataset
13
14const { gameId } = data
15
16const game = await api('games')
17  .from('games')
18  .select(q(['game_id', 'name', 'start', 'end']))
19  .eq('game_id', gameId)
20  .single()
21  .then(handleResponse())
22
23const tickInterval = decorate(game).getTickInterval()
24const url = location.pathname + '.json' + location.search
25
26fetch(url)
27  .then((response) => response.json())
28  .then((stats) => {
29    const chart_type_limit = 80
30    const chart_type = stats.length > chart_type_limit ? 'bar' : 'column'
31
32    const leftMargin = chart_type === 'column' ? 70 : 200
33    const rotation = chart_type === 'column' ? -45 : 0
34
35    const categories = stats.map((stat) => stat.team.name)
36
37    data = stats.map((stat) => {
38      return {
39        y: parseInt(stat.time_spent),
40        action: stat,
41        color: colorize(stat)
42      }
43    })
44
45    const team_statistics_url = data.teamStatisticsUrl
46
47    window.chart_by_time_spent = Highcharts.chart(chartId,
48      {
49        chart: {
50          margin: [50, 200, 150, leftMargin],
51          type: chart_type
52        },
53        title: {
54          text: 'Doba luštění',
55          style: {
56            margin: '10px 10px 0 0'
57          }
58        },
59
60        legend: {
61          layout: 'vertical',
62          style: {
63            left: 'auto',
64            bottom: 'auto',
65            right: '10px',
66            top: '100px'
67          }
68        },
69        xAxis: {
70          categories,
71          labels: {
72            rotation,
73            align: 'right'
74          },
75          tickmarkPlacement: 'on'
76        },
77        yAxis: {
78          title: {
79            text: 'Doba luštění'
80          },
81          tickInterval,
82          labels: {
83            formatter () {
84              return Math.round(this.value / 3600) + 'h'
85            },
86            style: {
87              color: '#4572A7'
88            }
89          }
90        },
91        plotOptions: {
92          series: {
93            stacking: 'normal'
94          }
95        },
96
97        tooltip: {
98          formatter () {
99            const { action } = this.point
100            data = {
101              Příchod: action.reached_at,
102              Pořadí: action.rank + '.',
103              'Změna pořadí': action.change_of_rank,
104              'Doba na šifře': action.time_spent,
105              'Pořadí na šifře': action.puzzle_rank + '.'
106            }
107            return formatTooltip(this.x, data)
108          }
109        },
110
111        series: [
112          {
113            name: 'Čas na šifře',
114            data,
115            point: {
116              events: {
117                click () {
118                  return (window.location =
119                      team_statistics_url + '/' + actions[this.x].team_id)
120                }
121              }
122            }
123          }
124        ]
125      }
126    )
127  })