-
Notifications
You must be signed in to change notification settings - Fork 9
/
graph.html
109 lines (95 loc) · 3.59 KB
/
graph.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.jsdelivr.net/npm/chart.js/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/google-palette/1.1.0/palette.js"></script>
</head>
<body>
<div>
<input id="file-input" type="file" />
<div style="width: 90%; margin-bottom: 20px">
<canvas id="chart"></canvas>
</div>
<label>Logarithmic Y: <input id="log-scale-check" type="checkbox"></label>
<button id="hide-all-btn">Hide all</button>
<button id="show-all-btn">Show all</button>
<script>
const config = {
type: 'line',
data: {datasets: []},
options: {
scales: {
x: {
type: 'timeseries'
}
},
},
};
const chart = new Chart(document.getElementById('chart'), config);
function plot(queryResult) {
const series = {};
for (const entry of queryResult) {
for (const metric of entry.result) {
const keys = Object.keys(metric.metric);
const parts = [];
for (const key of keys) {
parts.push(key + '=' + metric.metric[key]);
}
const seriesLabel = parts.join(',') || 'query';
series[seriesLabel] = series[seriesLabel] || [];
series[seriesLabel].push({x: metric.value[0] * 1000, y: +metric.value[1]});
}
}
const colors = palette('mpn65', Math.min(30, Object.keys(series).length)).map(function(hex) { return '#' + hex; });
config.data.datasets = Object.keys(series).map(function(label) {
return {
label: label,
borderColor: colors.pop(),
data: series[label]
}
});
chart.update();
}
function readFile(e) {
const file = e.target.files[0];
if (!file) {
return;
}
const reader = new FileReader();
reader.onload = function(e) {
const queryResult = [];
for (let line of e.target.result.split('\n')) {
line = line.trim();
if (line.length) {
queryResult.push(JSON.parse(line));
}
}
plot(queryResult);
};
reader.readAsText(file);
}
function toggleLogScale(e) {
config.options.scales.y.type = e.currentTarget.checked ? 'logarithmic' : undefined;
chart.update();
}
function hideAll() {
chart.data.datasets.forEach(function(ds) {
ds.hidden = true;
});
chart.update();
}
function showAll() {
chart.data.datasets.forEach(function(ds) {
ds.hidden = false;
});
chart.update();
}
document.getElementById('file-input').addEventListener('change', readFile, false);
document.getElementById('log-scale-check').addEventListener('change', toggleLogScale, false);
document.getElementById('hide-all-btn').addEventListener('click', hideAll, false);
document.getElementById('show-all-btn').addEventListener('click', showAll, false);
</script>
</div>
</body>
</html>