mallow/chart.html at main · numasi/mallow · 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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<div style="display: inline-block; position: relative; width: 5000px;">
  <canvas id="chart"></canvas>
  <canvas id="chart2"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
  function signals(row) {
    if (row.signal === 'SELL')
      return 'red'
    if (row.signal === 'BUY')
      return 'green'

    return 'white'
  }

  function actions(row) {
    const action = row.action
    if (action === 'SELL')
      return 'red'
    if (action === 'FSELL')
      return 'pink'
    if (action === 'BUY')
      return 'green'
    if (action === 'FBUY')
      return 'lightgreen'

    return 'white'
  }

  (async function fetchNGo() {
    let data = await fetch("./data")
    data = await data.text()
    data = data.split('\n')
    const annotation = data[0].split(' ')
    data = data.slice(1, -1)
    data = data.map(line =>
      annotation.reduce((acc, label, i) => ({ [label]: line.split(' ')[i], ...acc}), {}))
    const ctx = document.getElementById('chart')
    const ctx2 = document.getElementById('chart2')

    new Chart(ctx, {
      type: 'line',
      data: {
        labels: data.map(line => line.timestamp),
        datasets: [
          {
            label: 'Typical price',
            data: data.map(line => line.typical),
            fill: false,
            borderColor: 'rgb(75, 192, 192)',
            tension: 0.2
          },
          {
            label: 'Short HMA',
            data: data.map(line => line.shortHMA),
            fill: false,
            borderColor: 'rgb(124, 120, 21)',
            tension: 0.2,
/*            segment: {
              pointBorderColor: ctx =>
            },*/
            pointBackgroundColor: ctx => actions(data[ctx.index]),
            pointStyle: ctx => data[ctx.index].action || data[ctx.index].signal ? 'point' : false
           // pointBackgroundColor: ctx => console.log(ctx)
          },
          {
            label: 'Long HMA',
            data: data.map(line => line.longHMA),
            fill: false,
            borderColor: 'rgb(124, 120, 21)',
            pointStyle: false,
            tension: 0.2,
          }
        ]
      },
      options: {
        responsive: true,
        scales: {
        }
      }
    })

    new Chart(ctx2, {
      type: 'line',
      data: {
        labels: data.map(line => line.period),
        datasets: [
          {
            label: 'HMA Speed',
            data: data.map(line => line.speed),
            fill: false,
            borderColor: 'rgb(5, 120, 231)',
            tension: 0.2
          },
          {
            label: 'HMA Acceleration',
            data: data.map(line => line.acc),
            fill: false,
            borderColor: 'rgb(55, 120, 31)',
            tension: 0.2
          },
      ]
      },
      options: {
        scales: {
        }
      }
    })
})()
</script>