-
Notifications
You must be signed in to change notification settings - Fork 4
/
CFD.js
89 lines (73 loc) · 2.44 KB
/
CFD.js
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
const {Chart, ArcElement, LineElement, BarElement, PointElement, BarController, BubbleController, DoughnutController, LineController, PieController, PolarAreaController, RadarController, ScatterController, CategoryScale, LinearScale, LogarithmicScale, RadialLinearScale, TimeScale, TimeSeriesScale, Decimation, Filler, Legend, Title, Tooltip, SubTitle} = require('chart.js');
Chart.register(ArcElement, LineElement, BarElement, PointElement, BarController, BubbleController, DoughnutController, LineController, PieController, PolarAreaController, RadarController, ScatterController, CategoryScale, LinearScale, LogarithmicScale, RadialLinearScale, TimeScale, TimeSeriesScale, Decimation, Filler, Legend, Title, Tooltip, SubTitle);
const API = require("./API");
const distinct = (value, index, self) => self.indexOf(value) === index;
const createDataset = (label, color) => ({
label: label,
type: 'line',
data: [],
fill: true,
stepped: true,
pointRadius: 0,
backgroundColor: `rgba(${color}, 0.1)`,
borderColor: `rgba(${color}, 1)`,
borderWidth: 1,
});
const colors = [
'101, 103, 107',
'153, 102, 255',
'54, 162, 235',
'75, 192, 192',
'255, 205, 86',
'255, 159, 64',
'255, 99, 132',
]
const config = {
type: 'line',
data: {
datasets: []
},
options: {
animation: false,
scales: {
x: {
type: 'linear',
ticks: {stepSize: 5}
},
y: {
type: 'linear',
ticks: {stepSize: 5},
stacked: true,
},
},
plugins: {
legend: {display: true, position: 'left', align: 'start', reverse: true},
}
},
};
const Cfd = (context, gameId) => {
const chart = new Chart(context, config);
const getHistory = (iterationId) => API(gameId).stats(iterationId)
.then(response => response.json())
.then(response => response.history);
const initialize = (detail) => {
chart.data.datasets = detail.columns
.map(column => column.taskName)
.filter(distinct)
.reverse()
.map((label, index) => createDataset(label, colors[index]))
};
const update = async (iterationId) => {
const newHistory = await getHistory(iterationId);
const getSeries = label => newHistory.map(record => ({x: record.time, y: record[label]}));
chart.data.datasets.forEach(dataset => dataset.data = getSeries(dataset.label))
chart.update()
};
const clear = () => chart.clear()
return {
initialize,
update,
clear
}
}
module.exports = Cfd;