106 lines
2.5 KiB
JavaScript
106 lines
2.5 KiB
JavaScript
// helpers for views
|
|
function show(node, force = true) {
|
|
if (force || node.style.display === "none") {
|
|
node.style.display = node.saved_display || "block";
|
|
}
|
|
}
|
|
|
|
function hide(node) {
|
|
node.saved_display = node.style.display;
|
|
node.style.display = "none";
|
|
}
|
|
|
|
function toggle(node) {
|
|
if (node.style.display === "none") {
|
|
show(node);
|
|
} else {
|
|
hide(node);
|
|
}
|
|
}
|
|
|
|
Array.toObject = function (arr) {
|
|
return arr.reduce((base, current) => {
|
|
base[current[0]] = current[1];
|
|
return base;
|
|
}, {});
|
|
};
|
|
|
|
function __map__(cb = (e) => e) {
|
|
const arr = [];
|
|
for (i = 0; i < this.length; i++) {
|
|
arr.push(cb(this[i]));
|
|
}
|
|
return arr;
|
|
}
|
|
|
|
HTMLCollection.prototype.map = __map__;
|
|
NodeList.prototype.map = __map__;
|
|
NamedNodeMap.prototype.map = __map__;
|
|
HTMLInputElement.prototype.attributesObject = function () {
|
|
return Array.toObject(this.attributes.map((attr) => [attr.name, attr.value]));
|
|
};
|
|
HTMLFormElement.prototype.attributesObject = function () {
|
|
return Array.toObject(this.attributes.map((attr) => [attr.name, attr.value]));
|
|
};
|
|
|
|
// This part is charts
|
|
function setupChart({ all_dates }, ...cumuls) {
|
|
const chart = Highcharts.chart('recap-xp-container', {
|
|
chart: {
|
|
backgroundColor: '#000',
|
|
},
|
|
title: {
|
|
text: '',
|
|
color: '#55f5f5',
|
|
},
|
|
xAxis: {
|
|
categories: all_dates,
|
|
},
|
|
series: cumuls.map((cumul, idx) => ({
|
|
// color: '#55f5f5',
|
|
visible: idx != 0,
|
|
name: cumul.name,
|
|
data: cumul.data,
|
|
})),
|
|
});
|
|
}
|
|
|
|
function objectToQueryParam(obj) {
|
|
return Object.entries(obj).map(tuple => tuple.join("=")).join("&");
|
|
}
|
|
|
|
function urlWithQueryParams(base, object_with_params) {
|
|
if (Object.keys(object_with_params).length > 0) {
|
|
return `${base}?${objectToQueryParam(object_with_params)}`;
|
|
}
|
|
return base;
|
|
}
|
|
|
|
async function requestChart() {
|
|
let url = "/api/pex/v1/recap";
|
|
const days_ago = document.querySelector("#inputDaysAgo").value;
|
|
if (days_ago.length > 0) {
|
|
url = urlWithQueryParams(url, { days_ago });
|
|
}
|
|
ajax({
|
|
method: "GET",
|
|
url: url,
|
|
body: null,
|
|
headers: { Accept: "application/json" },
|
|
on_success: (body) => {
|
|
const json_output = JSON.parse(body);
|
|
setupChart({ all_dates: json_output.all_dates }, ...json_output.pex_tables);
|
|
},
|
|
});
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', async function () {
|
|
requestChart();
|
|
|
|
const form = document.querySelector(".recap-xp form#reloader");
|
|
form.addEventListener("submit", (event) => {
|
|
event.preventDefault();
|
|
requestChart();
|
|
});
|
|
});
|