mk-stats/index.html at master · cokeenet/mk-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
---
last_30: []
---
{%- for i in site.data.stats -%}
{%- assign last_30 = last_30 | concat: i[1] -%}
{%- endfor -%}
{%- assign last_30 = last_30 | sort: 'timestamp' | reverse | slice: 0, 30 | reverse -%}
<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <title>魔趣装机量统计 by XiNGRZ</title>
    <script src="https://gw.alipayobjects.com/os/lib/antv/g2/3.4.10/dist/g2.min.js"></script>
    <script src="moment.min.js"></script>
  </head>
  <body>
    <p><a href="https://stats.mokeedev.com">数据来源</a> / <a href="https://github.com/xingrz/mk-stats">源码</a> / 本页面每24小时更新</p>
    <div id="c1" />
  </body>
</html>

<script>
const source = {{ last_30 | jsonify }};
const devices = {{ site.data.smartisan | concat: site.data.meizu | jsonify }};

const chart = new G2.Chart({
  container: 'c1',
  forceFit: true,
});

const data = [];
for (const record of source) {
  for (const name of devices) {
    data.push({ timestamp: record.timestamp, device: name, value: record[name] });
  }
}

chart.source(data, {
  timestamp: {
    formatter: function formatter(text) {
      const date = moment(text * 1000).utcOffset(8);
      return date.format('YYYY-MM-DD HH:mm');
    }
  }
});

for (const name of devices) {
  chart.line().position(`timestamp*value`).color('device');
}

chart.render();
</script>