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
|
const colors = {
red: 'rgb(255, 45, 70)',
green: 'rgb(75, 192, 35)',
};
////////////////////////////////////////////////////////////////////////////////
// Main
////////////////////////////////////////////////////////////////////////////////
const mount = document.getElementById('mount');
const chart = new Chart(mount, {
type: 'scatter',
data: {
datasets: [
{
label: 'Revenue',
data: data.data.transactions.filter(x => x.Inflow > 0).map(x => ({
x: x.Date,
y: x.Inflow,
metadata: x,
})),
backgroundColor: colors.green,
},
{
label: 'Expenses',
data: data.data.transactions.filter(x => x.Outflow).map(x => ({
x: x.Date,
y: x.Outflow,
metadata: x,
})),
backgroundColor: colors.red,
},
],
},
options: {
scales: {
x: {
type: 'time',
title: {
display: true,
text: 'Date',
},
},
y: {
title: {
display: true,
text: 'Amount ($USD)'
},
},
},
plugins: {
tooltip: {
callbacks: {
title: function(x) {
return `$${x[0].raw.y} (${x[0].raw.metadata.Date.toLocaleDateString()})`;
},
label: function(x) {
const { Category, Payee, Memo } = x.raw.metadata;
return `${Payee} - ${Category} (${Memo})`;
},
},
},
},
},
});
|
