jamulus-usage-stats/index.html at master · dtinth/jamulus-usage-stats · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<html>
  <head>
    <script
      type="text/javascript"
      src="https://www.gstatic.com/charts/loader.js"
    ></script>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/water.css@2/out/light.min.css"
    />
    <style>
      body {
        max-width: 960px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <p style="margin: 2em 0">
      <span id="status">Loading…</span>
    </p>
    <div
      id="regions_div"
      style="margin: auto; width: 900px; height: 500px"
    ></div>
    <p style="margin: 2em 0">
      <a href="https://github.com/dtinth/jamulus-usage-stats">GitHub</a>
    </p>
    <script type="text/javascript">
      google.charts.load('current', {
        packages: ['geochart'],
      })
      google.charts.setOnLoadCallback(drawRegionsMap)

      function setStatus(text) {
        document.getElementById('status').innerHTML = text
      }

      function parseCSV(string) {
        const lines = string
          .split('\n')
          .filter((line) => line.trim())
          .map((line) => line.trim().split(','))
        const headers = lines.shift()
        return lines.map((line) =>
          Object.fromEntries(headers.map((header, i) => [header, line[i]])),
        )
      }

      async function drawRegionsMap() {
        setStatus('Loading data (1/3)')
        const index = await fetch('index.json').then((r) => r.json())
        const dailyFiles = index
          .filter((f) => f.startsWith('daily/'))
          .sort()
          .slice(-2)

        const stats = []
        for (const [i, file] of dailyFiles.entries()) {
          setStatus(`Loading data (${i + 2}/3)`)
          const raw = parseCSV(await fetch(file).then((r) => r.text()))
          for (const row of raw) {
            stats.push(row)
          }
        }

        stats.sort((a, b) => (a.bucket < b.bucket ? -1 : 1))
        const toUse = stats[stats.length - 2]

        {
          const array = [
            ['Country', 'Users'],
            ...Object.entries(toUse).flatMap(([key, value]) => {
              if (key === '--' || key.length !== 2) {
                return []
              }
              return [[key, +value]]
            }),
          ]
          var data = google.visualization.arrayToDataTable(array)
          var options = {}
          var chart = new google.visualization.GeoChart(
            document.getElementById('regions_div'),
          )
          chart.draw(data, options)
          setStatus(`Found ${toUse.total} Jamulus clients on ${toUse.bucket}.`)
        }
      }
    </script>
  </body>
</html>