canvastable/test.html at master · xwinstone/canvastable · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    html, body {
      padding:0;
      margin:0;
      width:100%;
      height:100%
    }
  </style>
  <meta charset="UTF-8">
  <title>Canvas Table CPU Usage Test</title>
</head>
<body>

</body>
<script src="https://unpkg.com/x-canvas-table/umd/canvastable.min.js"></script>
<script>
  function tableCreate() {
    const wrapper = document.createElement('div')
    document.body.appendChild(wrapper)
    const columns = colMock()

    const ct = new CanvasTable({
      container: wrapper,
      columns: columns,
      style: { height: 300, width: 800 }
    })

    const refreshTime = Math.floor(Math.random() * 100) + 400 // slow
    // const refreshTime = 500 // fast
    console.log(refreshTime)
    setInterval(() => {
      ct.source = dataMock(50)
    }, refreshTime)
  }
  function dataMock(len) {
    let data = [];
    for (let j = 0; j < len; j ++) {
      let row = {};
      Array.from({length: 10}).forEach((col, i) => {
        row[`col${i+1}`] = Math.floor(Math.random() * 10000);
      });
      data.push(row)
    }
    return data;
  }
  function colMock () {
    let columns = [];
    for(let i = 0; i < 10; i ++) {
      columns.push({
        dataIndex: `col${i + 1}`,
        title: `col${i + 1}`,
        popTitle: `col${i + 1}-pop`
      })
    }
    return columns
  }

  tableCreate()
  tableCreate()
  tableCreate()
  tableCreate()
  tableCreate()
  tableCreate()
  tableCreate()
  tableCreate()
  tableCreate()
  tableCreate()
</script>
</html>