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

207
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,10 +95,10 @@ 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,
@ -83,33 +110,15 @@ addEventListener("load", () => {
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,
@ -121,33 +130,15 @@ addEventListener("load", () => {
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,
@ -159,26 +150,8 @@ addEventListener("load", () => {
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,10 +164,10 @@ 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,
@ -206,33 +179,15 @@ addEventListener("load", () => {
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,
@ -244,33 +199,15 @@ addEventListener("load", () => {
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,
@ -282,25 +219,7 @@ addEventListener("load", () => {
pointStyle: "star", pointStyle: "star",
}; };
}), }),
}, "過去72時間のキャッシュ済み送受信データ量(GB)の推移",
options: { );
plugins: {
title: {
display: true,
text: "過去72時間のキャッシュ済み送受信データ量(GB)の推移",
},
legend: {
labels: {
usePointStyle: true,
},
},
},
scales: {
y: {
beginAtZero: true,
},
},
},
});
}); });
}); });