improvements to ingest.html
This commit is contained in:
parent
1e41262d70
commit
170fdf647d
1 changed files with 161 additions and 56 deletions
|
|
@ -15,82 +15,187 @@
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.chart-container {
|
.chart-container {
|
||||||
height: 50vh;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.smaller {
|
.main {
|
||||||
height: 33vh;
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, minmax(300px, 1fr));
|
||||||
|
gap: 1rem;
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wide {
|
||||||
|
grid-column: span 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.graph-head {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sums-15m {
|
||||||
|
color: rgba(165, 165, 165, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sums-1h {
|
||||||
|
color: rgba(165, 165, 165, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sums-6h {
|
||||||
|
color: rgba(165, 165, 165, 0.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sums-1d {
|
||||||
|
color: rgba(165, 165, 165, 0.4);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<h1>Ingest Stats</h1>
|
<h1>Ingest Stats <span id="loading">[LOADING...]</span></h1>
|
||||||
<div>
|
<div class="main">
|
||||||
<h3>All Events by Type</h3>
|
<div class="wide">
|
||||||
<div class="chart-container">
|
<div class="graph-head">
|
||||||
<canvas id="all-events-by-type" />
|
<h3>All Events by Type</h3>
|
||||||
|
<p id="all-events-by-type-sums">(0, 0, 0, 0)</p>
|
||||||
|
</div>
|
||||||
|
<div class="chart-container">
|
||||||
|
<canvas id="all-events-by-type" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="wide">
|
||||||
<div>
|
<div class="graph-head">
|
||||||
<h3>Events by World</h3>
|
<h3>Events by World</h3>
|
||||||
<div class="chart-container">
|
</div>
|
||||||
<canvas id="events-by-world" />
|
<div class="chart-container">
|
||||||
|
<canvas id="events-by-world" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div>
|
||||||
<div>
|
<div class="graph-head">
|
||||||
<h3>Connery</h3>
|
<h3>Connery [US West]</h3>
|
||||||
<div class="chart-container smaller">
|
<p id="connery-sums">(0, 0, 0, 0)</p>
|
||||||
<canvas id="connery" />
|
</div>
|
||||||
|
<div class="chart-container smaller">
|
||||||
|
<canvas id="connery" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div>
|
||||||
<div>
|
<div class="graph-head">
|
||||||
<h3>Miller</h3>
|
<h3>Miller [EU]</h3>
|
||||||
<div class="chart-container smaller">
|
<p id="miller-sums">(0, 0, 0, 0)</p>
|
||||||
<canvas id="miller" />
|
</div>
|
||||||
|
<div class="chart-container smaller">
|
||||||
|
<canvas id="miller" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div>
|
||||||
<div>
|
<div class="graph-head">
|
||||||
<h3>Cobalt</h3>
|
<h3>Cobalt [EU]</h3>
|
||||||
<div class="chart-container smaller">
|
<p id="cobalt-sums">(0, 0, 0, 0)</p>
|
||||||
<canvas id="cobalt" />
|
</div>
|
||||||
|
<div class="chart-container smaller">
|
||||||
|
<canvas id="cobalt" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div>
|
||||||
<div>
|
<div class="graph-head">
|
||||||
<h3>Emerald</h3>
|
<h3>Emerald [US East]</h3>
|
||||||
<div class="chart-container smaller">
|
<p id="emerald-sums">(0, 0, 0, 0)</p>
|
||||||
<canvas id="emerald" />
|
</div>
|
||||||
|
<div class="chart-container smaller">
|
||||||
|
<canvas id="emerald" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div>
|
||||||
<div>
|
<div class="graph-head">
|
||||||
<h3>Jaeger</h3>
|
<h3>Jaeger [US East]</h3>
|
||||||
<div class="chart-container smaller">
|
<p id="jaeger-sums">(0, 0, 0, 0)</p>
|
||||||
<canvas id="jaeger" />
|
</div>
|
||||||
|
<div class="chart-container smaller">
|
||||||
|
<canvas id="jaeger" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div>
|
||||||
<div>
|
<div class="graph-head">
|
||||||
<h3>SolTech</h3>
|
<h3>SolTech [Tokyo]</h3>
|
||||||
<div class="chart-container smaller">
|
<p id="soltech-sums">(0, 0, 0, 0)</p>
|
||||||
<canvas id="soltech" />
|
</div>
|
||||||
|
<div class="chart-container smaller">
|
||||||
|
<canvas id="soltech" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div>
|
||||||
<div>
|
<div class="graph-head">
|
||||||
<h3>Genudine</h3>
|
<h3>Genudine [US East] [PS4]</h3>
|
||||||
<div class="chart-container smaller">
|
<p id="genudine-sums">(0, 0, 0, 0)</p>
|
||||||
<canvas id="genudine" />
|
</div>
|
||||||
|
<div class="chart-container smaller">
|
||||||
|
<canvas id="genudine" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div>
|
||||||
<div>
|
<div class="graph-head">
|
||||||
<h3>Ceres</h3>
|
<h3>Ceres [EU] [PS4]</h3>
|
||||||
<div class="chart-container smaller">
|
<p id="ceres-sums">(0, 0, 0, 0)</p>
|
||||||
<canvas id="ceres" />
|
</div>
|
||||||
|
<div class="chart-container smaller">
|
||||||
|
<canvas id="ceres" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
<script src="https://cdn.jsdelivr.net/npm/chart.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://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/humanize-plus@1.8.2/dist/humanize.min.js"></script>
|
||||||
<script>
|
<script>
|
||||||
const renderChart = (id, data, config = {}) => {};
|
const sumsStr = (_15m, _1h, _6h, _24h) => `
|
||||||
|
<span class="sums-15m" title="sum of last 15 minutes">${Humanize.intComma(
|
||||||
|
_15m
|
||||||
|
)},</span>
|
||||||
|
<span class="sums-1h" title="sum of last 1 hour">${Humanize.compactInteger(
|
||||||
|
_1h
|
||||||
|
)},</span>
|
||||||
|
<span class="sums-6h" title="sum of last 6 hours">${Humanize.compactInteger(
|
||||||
|
_6h
|
||||||
|
)},</span>
|
||||||
|
<span class="sums-1d" title="sum of last 1 day">${Humanize.compactInteger(
|
||||||
|
_24h
|
||||||
|
)}</span>`;
|
||||||
|
|
||||||
|
const doSums = async (id, events) => {
|
||||||
|
// Calculate sums for the last 15 minutes, 1 hour, 6 hours, and 1 day based on event timestamps
|
||||||
|
let sums = [0, 0, 0, 0];
|
||||||
|
let now = Date.now();
|
||||||
|
let fifteenMinutes = 15 * 60 * 1000;
|
||||||
|
let oneHour = 60 * 60 * 1000;
|
||||||
|
let sixHours = 6 * 60 * 60 * 1000;
|
||||||
|
let oneDay = 24 * 60 * 60 * 1000;
|
||||||
|
|
||||||
|
for (let ev of events) {
|
||||||
|
let diff = now - new Date(ev.time);
|
||||||
|
if (diff < fifteenMinutes) {
|
||||||
|
sums[0] += ev.count;
|
||||||
|
}
|
||||||
|
if (diff < oneHour) {
|
||||||
|
sums[1] += ev.count;
|
||||||
|
}
|
||||||
|
if (diff < sixHours) {
|
||||||
|
sums[2] += ev.count;
|
||||||
|
}
|
||||||
|
if (diff < oneDay) {
|
||||||
|
sums[3] += ev.count;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
document.getElementById(`${id}-sums`).innerHTML = sumsStr(...sums);
|
||||||
|
};
|
||||||
|
|
||||||
const allEventsByType = (id, events) => {
|
const allEventsByType = (id, events) => {
|
||||||
|
doSums(id, events);
|
||||||
let allEvents = events.reduce(
|
let allEvents = events.reduce(
|
||||||
(acc, ev) => {
|
(acc, ev) => {
|
||||||
acc[ev.eventName][ev.time] = (acc[ev.time] || 0) + ev.count;
|
acc[ev.eventName][ev.time] = (acc[ev.time] || 0) + ev.count;
|
||||||
|
|
@ -112,12 +217,10 @@
|
||||||
{
|
{
|
||||||
label: "Deaths",
|
label: "Deaths",
|
||||||
data: allEvents.Death,
|
data: allEvents.Death,
|
||||||
// backgroundColor: "#cead42",
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "Vehicle Destroys",
|
label: "Vehicle Destroys",
|
||||||
data: allEvents.VehicleDestroy,
|
data: allEvents.VehicleDestroy,
|
||||||
// backgroundColor: "#7842ce",
|
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
|
@ -207,6 +310,8 @@
|
||||||
let events = body.data.analytics.events;
|
let events = body.data.analytics.events;
|
||||||
window.events = events;
|
window.events = events;
|
||||||
|
|
||||||
|
document.getElementById("loading").style.display = "none";
|
||||||
|
|
||||||
allEventsByType("all-events-by-type", events);
|
allEventsByType("all-events-by-type", events);
|
||||||
eventsByWorld(events);
|
eventsByWorld(events);
|
||||||
[
|
[
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue