yuuki/stats
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

チャートの作成を簡素化

Browse source
This commit is contained in:
yuuki 2024-11-11 13:26:46 +09:00
parent 1c5a1b2c64
commit 730b984a27
1 changed files with 129 additions and 210 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

339
static/script.js
View file

@ -57,6 +57,33 @@ async function worker2(item) {
}; };
} }
function createChart(ctx, labels, datasets, title) {
new Chart(ctx, {
data: {
labels,
datasets,
},
options: {
plugins: {
title: {
display: true,
text: title,
},
legend: {
labels: {
usePointStyle: true,
},
},
},
scales: {
y: {
beginAtZero: true,
},
},
},
});
}
addEventListener("load", () => { addEventListener("load", () => {
Promise.all(websites.map((i) => worker(i))) Promise.all(websites.map((i) => worker(i)))
.then((results) => { .then((results) => {
@ -68,117 +95,63 @@ addEventListener("load", () => {
const ctxUsers = document.querySelector("#users").getContext("2d"); const ctxUsers = document.querySelector("#users").getContext("2d");
new Chart(ctxUsers, { createChart(
data: { ctxUsers,
labels: range.map((d) => d.toISOString().slice(0, 10)).reverse(), range.map((d) => d.toISOString().slice(0, 10)).reverse(),
datasets: results.map((r) => { results.map((r) => {
return { return {
type: "line", type: "line",
label: r.domain, label: r.domain,
data: range.map((d) => r.json["data"]["viewer"]["zones"][0]["httpRequests1dGroups"].find((g) => g["dimensions"]["date"] === d.toISOString().slice(0, 10))?.["uniq"]?.["uniques"] ?? null).reverse(), data: range.map((d) => r.json["data"]["viewer"]["zones"][0]["httpRequests1dGroups"].find((g) => g["dimensions"]["date"] === d.toISOString().slice(0, 10))?.["uniq"]?.["uniques"] ?? null).reverse(),
borderColor: r.fg, borderColor: r.fg,
borderWidth: 1, borderWidth: 1,
fill: "origin", fill: "origin",
backgroundColor: r.bg, backgroundColor: r.bg,
pointStyle: "star", pointStyle: "star",
}; };
}), }),
}, "過去30日のユーザー数の推移",
options: { );
plugins: {
title: {
display: true,
text: "過去30日のユーザー数の推移",
},
legend: {
labels: {
usePointStyle: true,
},
},
},
scales: {
y: {
beginAtZero: true,
},
},
},
});
const ctxBytes = document.querySelector("#bytes").getContext("2d"); const ctxBytes = document.querySelector("#bytes").getContext("2d");
new Chart(ctxBytes, { createChart(
data: { ctxBytes,
labels: range.map((d) => d.toISOString().slice(0, 10)).reverse(), range.map((d) => d.toISOString().slice(0, 10)).reverse(),
datasets: results.map((r) => { results.map((r) => {
return { return {
type: "line", type: "line",
label: r.domain, label: r.domain,
data: range.map((d) => r.json["data"]["viewer"]["zones"][0]["httpRequests1dGroups"].find((g) => g["dimensions"]["date"] === d.toISOString().slice(0, 10))?.["sum"]?.["bytes"] / 1000 ** 3 ?? null).reverse(), data: range.map((d) => r.json["data"]["viewer"]["zones"][0]["httpRequests1dGroups"].find((g) => g["dimensions"]["date"] === d.toISOString().slice(0, 10))?.["sum"]?.["bytes"] / 1000 ** 3 ?? null).reverse(),
borderColor: r.fg, borderColor: r.fg,
borderWidth: 1, borderWidth: 1,
fill: "origin", fill: "origin",
backgroundColor: r.bg, backgroundColor: r.bg,
pointStyle: "star", pointStyle: "star",
}; };
}), }),
}, "過去30日の送受信データ量(GB)の推移",
options: { );
plugins: {
title: {
display: true,
text: "過去30日の送受信データ量(GB)の推移",
},
legend: {
labels: {
usePointStyle: true,
},
},
},
scales: {
y: {
beginAtZero: true,
},
},
},
});
const ctxBytes2 = document.querySelector("#bytes2").getContext("2d"); const ctxBytes2 = document.querySelector("#bytes2").getContext("2d");
new Chart(ctxBytes2, { createChart(
data: { ctxBytes2,
labels: range.map((d) => d.toISOString().slice(0, 10)).reverse(), range.map((d) => d.toISOString().slice(0, 10)).reverse(),
datasets: results.map((r) => { results.map((r) => {
return { return {
type: "line", type: "line",
label: r.domain, label: r.domain,
data: range.map((d) => r.json["data"]["viewer"]["zones"][0]["httpRequests1dGroups"].find((g) => g["dimensions"]["date"] === d.toISOString().slice(0, 10))?.["sum"]?.["cachedBytes"] / 1000 ** 3 ?? null).reverse(), data: range.map((d) => r.json["data"]["viewer"]["zones"][0]["httpRequests1dGroups"].find((g) => g["dimensions"]["date"] === d.toISOString().slice(0, 10))?.["sum"]?.["cachedBytes"] / 1000 ** 3 ?? null).reverse(),
borderColor: r.fg, borderColor: r.fg,
borderWidth: 1, borderWidth: 1,
fill: "origin", fill: "origin",
backgroundColor: r.bg, backgroundColor: r.bg,
pointStyle: "star", pointStyle: "star",
}; };
}), }),
}, "過去30日のキャッシュ済み送受信データ量(GB)の推移",
options: { );
plugins: {
title: {
display: true,
text: "過去30日のキャッシュ済み送受信データ量(GB)の推移",
},
legend: {
labels: {
usePointStyle: true,
},
},
},
scales: {
y: {
beginAtZero: true,
},
},
},
});
}); });
Promise.all(websites.map((i) => worker2(i))) Promise.all(websites.map((i) => worker2(i)))
@ -191,116 +164,62 @@ addEventListener("load", () => {
const ctxUsers = document.querySelector("#users-2").getContext("2d"); const ctxUsers = document.querySelector("#users-2").getContext("2d");
new Chart(ctxUsers, { createChart(
data: { ctxUsers,
labels: range.map((d) => d.toLocaleString()).reverse(), range.map((d) => d.toLocaleString()).reverse(),
datasets: results.map((r) => { results.map((r) => {
return { return {
type: "line", type: "line",
label: r.domain, label: r.domain,
data: range.map((d) => r.json["data"]["viewer"]["zones"][0]["httpRequests1hGroups"].find((g) => g["dimensions"]["datetime"] === d.toISOString().slice(0, 19) + "Z")?.["uniq"]?.["uniques"] ?? null).reverse(), data: range.map((d) => r.json["data"]["viewer"]["zones"][0]["httpRequests1hGroups"].find((g) => g["dimensions"]["datetime"] === d.toISOString().slice(0, 19) + "Z")?.["uniq"]?.["uniques"] ?? null).reverse(),
borderColor: r.fg, borderColor: r.fg,
borderWidth: 1, borderWidth: 1,
fill: "origin", fill: "origin",
backgroundColor: r.bg, backgroundColor: r.bg,
pointStyle: "star", pointStyle: "star",
}; };
}), }),
}, "過去72時間のユーザー数の推移",
options: { )
plugins: {
title: {
display: true,
text: "過去72時間のユーザー数の推移",
},
legend: {
labels: {
usePointStyle: true,
},
},
},
scales: {
y: {
beginAtZero: true,
},
},
},
});
const ctxBytes = document.querySelector("#bytes-2").getContext("2d"); const ctxBytes = document.querySelector("#bytes-2").getContext("2d");
new Chart(ctxBytes, { createChart(
data: { ctxBytes,
labels: range.map((d) => d.toLocaleString()).reverse(), range.map((d) => d.toLocaleString()).reverse(),
datasets: results.map((r) => { results.map((r) => {
return { return {
type: "line", type: "line",
label: r.domain, label: r.domain,
data: range.map((d) => r.json["data"]["viewer"]["zones"][0]["httpRequests1hGroups"].find((g) => g["dimensions"]["datetime"] === d.toISOString().slice(0, 19) + "Z")?.["sum"]?.["bytes"] / 1000 ** 3 ?? null).reverse(), data: range.map((d) => r.json["data"]["viewer"]["zones"][0]["httpRequests1hGroups"].find((g) => g["dimensions"]["datetime"] === d.toISOString().slice(0, 19) + "Z")?.["sum"]?.["bytes"] / 1000 ** 3 ?? null).reverse(),
borderColor: r.fg, borderColor: r.fg,
borderWidth: 1, borderWidth: 1,
fill: "origin", fill: "origin",
backgroundColor: r.bg, backgroundColor: r.bg,
pointStyle: "star", pointStyle: "star",
}; };
}), }),
}, "過去72時間の送受信データ量(GB)の推移",
options: { )
plugins: {
title: {
display: true,
text: "過去72時間の送受信データ量(GB)の推移",
},
legend: {
labels: {
usePointStyle: true,
},
},
},
scales: {
y: {
beginAtZero: true,
},
},
},
});
const ctxBytes2 = document.querySelector("#bytes2-2").getContext("2d"); const ctxBytes2 = document.querySelector("#bytes2-2").getContext("2d");
new Chart(ctxBytes2, { createChart(
data: { ctxBytes2,
labels: range.map((d) => d.toLocaleString()).reverse(), range.map((d) => d.toLocaleString()).reverse(),
datasets: results.map((r) => { results.map((r) => {
return { return {
type: "line", type: "line",
label: r.domain, label: r.domain,
data: range.map((d) => r.json["data"]["viewer"]["zones"][0]["httpRequests1hGroups"].find((g) => g["dimensions"]["datetime"] === d.toISOString().slice(0, 19) + "Z")?.["sum"]?.["cachedBytes"] / 1000 ** 3 ?? null).reverse(), data: range.map((d) => r.json["data"]["viewer"]["zones"][0]["httpRequests1hGroups"].find((g) => g["dimensions"]["datetime"] === d.toISOString().slice(0, 19) + "Z")?.["sum"]?.["cachedBytes"] / 1000 ** 3 ?? null).reverse(),
borderColor: r.fg, borderColor: r.fg,
borderWidth: 1, borderWidth: 1,
fill: "origin", fill: "origin",
backgroundColor: r.bg, backgroundColor: r.bg,
pointStyle: "star", pointStyle: "star",
}; };
}), }),
}, "過去72時間のキャッシュ済み送受信データ量(GB)の推移",
options: { );
plugins: {
title: {
display: true,
text: "過去72時間のキャッシュ済み送受信データ量(GB)の推移",
},
legend: {
labels: {
usePointStyle: true,
},
},
},
scales: {
y: {
beginAtZero: true,
},
},
},
});
}); });
}); });