jinryu/days.html at main · code4fukui/jinryu · 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
<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width"><link rel="icon" href="data:">
  <script src="https://cdn.jsdelivr.net/npm/d3@5.16.0/dist/d3.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/c3@0.7.20/c3.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/c3@0.7.20/c3.min.css" rel="stylesheet">
</head><body>
<h1>人流データ</h1>

<div id=chart></div>

<script type="module">
import { ArrayUtil } from "https://js.sabae.cc/ArrayUtil.js";
import { fetchDataJinryu } from "./fetchDataJinryu.js";

const param = new URL(location.href).searchParams;
const seliccid = param.get("iccid") || "8981040000001207740";

const fetchData = async () => {
  const data = await fetchDataJinryu();
  console.log(data);

  const res = {};
  const dates = ArrayUtil.toUnique(data.map(d => d.dt.substring(0, "2023-06-19".length)));
  for (const date of dates) {
    const datad = data.filter(d => d.dt.startsWith(date) && d.iccid == seliccid).map(d => ({ t: d.dt.substring("2023-06-19T".length, "2023-06-19T00:00:00".length), n: d.data }));
    res[date] = datad;
  }
  return res;
};

const showChart = (bindto, data) => {
  const dt = [];
  for (let i = 0; i < 24; i++) {
    const h = i < 10 ? "0" + i : "" + i;
    dt.push(h);
  }
  const days = Object.keys(data);
  const cnt = [];
  for (const day of days) {
    const data1 = [];
    data1.push(day);
    const data0 = data[day];
    console.log(data0);
    for (const h of dt) {
      const f = data0.filter(d => d.t.startsWith(h));
      if (f.length) {
        const dd = f.reduce((prev, d) => prev + d.n, 0);
        data1.push(dd);
      } else {
        data1.push(NaN);
      }
    }
    cnt.push(data1);
  }
  console.log(dt, cnt);
  const chart = c3.generate({
    data: {
        columns: [
            //['hour', ...dt],
            ...cnt,
        ]
    },
  });
};

const redraw = async () => {
  const data = await fetchData();
  showChart("#chart", data);
};

setInterval(redraw, 5 * 60 * 1000);
redraw();

</script>

<script type="module" src="https://js.sabae.cc/QRCode.js"></script>
<qr-code></qr-code>