トータル数も表示する

This commit is contained in:
yuuki 2025-01-07 15:59:38 +09:00
parent 0a16474f9d
commit 56ae1797ed
3 changed files with 60 additions and 42 deletions

View file

@ -1,27 +1,31 @@
{ query GetZoneAnalytics($zoneTag: string, $from: string, $to: string) {
viewer { viewer {
zones(filter: { zones(filter: {zoneTag: $zoneTag}) {
zoneTag: $zoneTag totals: httpRequests1dGroups(limit: 10000, filter: {date_gt: $from, date_leq: $to}) {
}) { uniq {
httpRequests1dGroups( uniques
orderBy: [date_ASC], __typename
limit: $limit,
filter: {
date_gt: $from,
date_leq: $to
} }
) { __typename
}
zones: httpRequests1dGroups(orderBy: [date_ASC], limit: 10000, filter: {date_gt: $from, date_leq: $to}) {
dimensions { dimensions {
date timeslot: date
__typename
}
uniq {
uniques
__typename
} }
sum { sum {
bytes bytes
cachedBytes cachedBytes
__typename
} }
uniq { __typename
uniques
}
} }
__typename
} }
__typename
} }
} }

View file

@ -1,27 +1,31 @@
{ query GetZoneAnalytics($zoneTag: string, $from: string, $to: string) {
viewer { viewer {
zones(filter: { zones(filter: {zoneTag: $zoneTag}) {
zoneTag: $zoneTag totals: httpRequests1hGroups(limit: 10000, filter: {datetime_gt: $from, datetime_leq: $to}) {
}) { uniq {
httpRequests1hGroups( uniques
orderBy: [datetime_ASC], __typename
limit: $limit,
filter: {
datetime_gt: $from,
datetime_leq: $to
} }
) { __typename
}
zones: httpRequests1hGroups(orderBy: [datetime_ASC], limit: 10000, filter: {datetime_gt: $from, datetime_leq: $to}) {
dimensions { dimensions {
datetime timeslot: datetime
__typename
}
uniq {
uniques
__typename
} }
sum { sum {
bytes bytes
cachedBytes cachedBytes
__typename
} }
uniq { __typename
uniques
}
} }
__typename
} }
__typename
} }
} }

View file

@ -89,8 +89,8 @@ addEventListener("load", () => {
.then((results) => { .then((results) => {
document.querySelector("#loading").remove(); document.querySelector("#loading").remove();
const scale = Math.max(...results.map((r) => r.json["data"]["viewer"]["zones"][0]["httpRequests1dGroups"].length)); const scale = Math.max(...results.map((r) => r.json["data"]["viewer"]["zones"][0]["zones"].length));
const endedAt = Math.max(...results.map((r) => r.json["data"]["viewer"]["zones"][0]["httpRequests1dGroups"].map((g) => new Date(g["dimensions"]["date"]).getTime())).flat()); const endedAt = Math.max(...results.map((r) => r.json["data"]["viewer"]["zones"][0]["zones"].map((g) => new Date(g["dimensions"]["timeslot"]).getTime())).flat());
const range = Array.from({ length: scale }, (_, k) => new Date(endedAt - k * 24 * 60 * 60 * 1000)); const range = Array.from({ length: scale }, (_, k) => new Date(endedAt - k * 24 * 60 * 60 * 1000));
const ctxUsers = document.querySelector("#users").getContext("2d"); const ctxUsers = document.querySelector("#users").getContext("2d");
@ -99,10 +99,15 @@ addEventListener("load", () => {
ctxUsers, ctxUsers,
range.map((d) => d.toISOString().slice(0, 10)).reverse(), range.map((d) => d.toISOString().slice(0, 10)).reverse(),
results.map((r) => { results.map((r) => {
const total = Intl.NumberFormat('en-US', {
notation: "compact",
maximumFractionDigits: 1,
}).format(r.json["data"]["viewer"]["zones"][0]["totals"][0]["uniq"]["uniques"]);
return { return {
type: "line", type: "line",
label: r.domain, label: r.domain + " - (" + total + ")",
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]["zones"].find((g) => g["dimensions"]["timeslot"] === d.toISOString().slice(0, 10))?.["uniq"]?.["uniques"] ?? null).reverse(),
borderColor: r.fg, borderColor: r.fg,
borderWidth: 1, borderWidth: 1,
fill: "origin", fill: "origin",
@ -122,7 +127,7 @@ addEventListener("load", () => {
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]["zones"].find((g) => g["dimensions"]["timeslot"] === 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",
@ -142,7 +147,7 @@ addEventListener("load", () => {
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]["zones"].find((g) => g["dimensions"]["timeslot"] === 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",
@ -158,8 +163,8 @@ addEventListener("load", () => {
.then((results) => { .then((results) => {
document.querySelector("#loading-2").remove(); document.querySelector("#loading-2").remove();
const scale = Math.max(...results.map((r) => r.json["data"]["viewer"]["zones"][0]["httpRequests1hGroups"].length)); const scale = Math.max(...results.map((r) => r.json["data"]["viewer"]["zones"][0]["zones"].length));
const endedAt = Math.max(...results.map((r) => r.json["data"]["viewer"]["zones"][0]["httpRequests1hGroups"].map((g) => new Date(g["dimensions"]["datetime"]).getTime())).flat()); const endedAt = Math.max(...results.map((r) => r.json["data"]["viewer"]["zones"][0]["zones"].map((g) => new Date(g["dimensions"]["timeslot"]).getTime())).flat());
const range = Array.from({ length: scale }, (_, k) => new Date(endedAt - k * 60 * 60 * 1000)); const range = Array.from({ length: scale }, (_, k) => new Date(endedAt - k * 60 * 60 * 1000));
const ctxUsers = document.querySelector("#users-2").getContext("2d"); const ctxUsers = document.querySelector("#users-2").getContext("2d");
@ -168,10 +173,15 @@ addEventListener("load", () => {
ctxUsers, ctxUsers,
range.map((d) => d.toLocaleString()).reverse(), range.map((d) => d.toLocaleString()).reverse(),
results.map((r) => { results.map((r) => {
const total = Intl.NumberFormat('en-US', {
notation: "compact",
maximumFractionDigits: 1,
}).format(r.json["data"]["viewer"]["zones"][0]["totals"][0]["uniq"]["uniques"]);
return { return {
type: "line", type: "line",
label: r.domain, label: r.domain + " - (" + total + ")",
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]["zones"].find((g) => g["dimensions"]["timeslot"] === d.toISOString().slice(0, 19) + "Z")?.["uniq"]?.["uniques"] ?? null).reverse(),
borderColor: r.fg, borderColor: r.fg,
borderWidth: 1, borderWidth: 1,
fill: "origin", fill: "origin",
@ -191,7 +201,7 @@ addEventListener("load", () => {
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]["zones"].find((g) => g["dimensions"]["timeslot"] === 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",
@ -211,7 +221,7 @@ addEventListener("load", () => {
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]["zones"].find((g) => g["dimensions"]["timeslot"] === 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",