hypermc/my-mc-stats-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix chart sizing

Browse Source
This commit is contained in:
MCHost
2025-07-14 20:59:15 -04:00
parent 28ce85c2d2
commit bf174e1355
1 changed files with 32 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
status.html
View File

@@ -55,6 +55,11 @@
visibility: visible !important;
transform: none !important;
}
canvas {
width: 100% !important;
height: 300px !important;
}
</style>
</head>
@@ -139,9 +144,12 @@
<p class="text-lg opacity-90" id="ai-fault-count">0</p>
</div>
</div>
<h3 class="text-xl minecraft-font mb-6 text-teal-400 text-center">Docker Network Traffic</h3>
<canvas id="docker-net-chart" class="mb-8"></canvas>
<h3 class="text-xl minecraft-font mb-6 text-teal-400 text-center">Minecraft Containers (Sorted by CPU)</h3>
<div>
<h3 class="text-xl minecraft-font mb-6 text-teal-400 text-center">Docker Network Traffic</h3>
<div class="chart-container">
<canvas id="docker-net-chart"></canvas>
</div>
</div> <h3 class="text-xl minecraft-font mb-6 text-teal-400 text-center">Minecraft Containers (Sorted by CPU)</h3>
<div class="container-table">
<table class="w-full text-sm text-gray-200 mb-8">
<thead class="text-xs uppercase bg-gray-800">
@@ -179,19 +187,19 @@
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<div>
<h3 class="text-xl minecraft-font mb-6 text-teal-400 text-center">CPU Usage</h3>
<canvas id="cpu-chart"></canvas>
<canvas id="cpu-chart" class="mb-8"></canvas>
</div>
<div>
<h3 class="text-xl minecraft-font mb-6 text-teal-400 text-center">RAM Usage</h3>
<canvas id="ram-chart"></canvas>
<canvas id="ram-chart" class="mb-8"></canvas>
</div>
<div>
<h3 class="text-xl minecraft-font mb-6 text-teal-400 text-center">Network Traffic</h3>
<canvas id="net-chart"></canvas>
<canvas id="net-chart" class="mb-8"></canvas>
</div>
<div>
<h3 class="text-xl minecraft-font mb-6 text-teal-400 text-center">Disk I/O</h3>
<canvas id="disk-chart"></canvas>
<canvas id="disk-chart" class="mb-8"></canvas>
</div>
</div>
</section>
@@ -222,15 +230,15 @@
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<div>
<h3 class="text-xl minecraft-font mb-6 text-teal-400 text-center">CPU Usage</h3>
<canvas id="jump-cpu-chart"></canvas>
<canvas id="jump-cpu-chart" class="mb-8"></canvas>
</div>
<div>
<h3 class="text-xl minecraft-font mb-6 text-teal-400 text-center">Network Traffic</h3>
<canvas id="jump-net-chart"></canvas>
<canvas id="jump-net-chart" class="mb-8"></canvas>
</div>
<div>
<h3 class="text-xl minecraft-font mb-6 text-teal-400 text-center">Disk I/O</h3>
<canvas id="jump-disk-chart"></canvas>
<canvas id="jump-disk-chart" class="mb-8"></canvas>
</div>
</div>
</section>
@@ -306,14 +314,15 @@
const commonOptions = {
responsive: true,
maintainAspectRatio: false,
animation: { duration: 500, easing: 'linear' },
scales: {
y: { beginAtZero: true, grid: { color: 'rgba(255,255,255,0.1)' } },
x: { grid: { display: false } }
y: { beginAtZero: true, grid: { color: 'rgba(255,255,255,0.1)' }, ticks: { color: '#e5e7eb' } },
x: { grid: { display: false }, ticks: { color: '#e5e7eb' } }
},
plugins: {
tooltip: { mode: 'index', intersect: false },
legend: { labels: { color: '#e5e7eb' } }
legend: { display: true, position: 'top', labels: { color: '#e5e7eb' } }
}
};
@@ -347,8 +356,8 @@
data: {
labels: [],
datasets: [
{ label: 'User (%)', data: [], borderColor: '#38bdf8', fill: false, tension: 0.3 },
{ label: 'System (%)', data: [], borderColor: '#fb7185', fill: false, tension: 0.3 }
{ label: 'User (%)', data: [], borderColor: '#38bdf8', borderWidth: 2, fill: false, tension: 0 },
{ label: 'System (%)', data: [], borderColor: '#fb7185', borderWidth: 2, fill: false, tension: 0 }
]
},
options: {
@@ -369,8 +378,8 @@
data: {
labels: [],
datasets: [
{ label: 'Used (MB)', data: [], borderColor: '#38bdf8', fill: false, tension: 0.3 },
{ label: 'Free (MB)', data: [], borderColor: '#fb7185', fill: false, tension: 0.3 }
{ label: 'Used (MB)', data: [], borderColor: '#38bdf8', borderWidth: 2, fill: false, tension: 0 },
{ label: 'Free (MB)', data: [], borderColor: '#fb7185', borderWidth: 2, fill: false, tension: 0 }
]
},
options: {
@@ -415,8 +424,8 @@
data: {
labels: [],
datasets: [
{ label: 'Read', data: [], borderColor: '#38bdf8', fill: false, tension: 0.3 },
{ label: 'Write', data: [], borderColor: '#fb7185', fill: false, tension: 0.3 }
{ label: 'Read', data: [], borderColor: '#38bdf8', borderWidth: 2, fill: false, tension: 0 },
{ label: 'Write', data: [], borderColor: '#fb7185', borderWidth: 2, fill: false, tension: 0 }
]
},
options: {
@@ -436,8 +445,8 @@
data: {
labels: [],
datasets: [
{ label: 'User (%)', data: [], borderColor: '#38bdf8', fill: false, tension: 0.3 },
{ label: 'System (%)', data: [], borderColor: '#fb7185', fill: false, tension: 0.3 }
{ label: 'User (%)', data: [], borderColor: '#38bdf8', borderWidth: 2, fill: false, tension: 0 },
{ label: 'System (%)', data: [], borderColor: '#fb7185', borderWidth: 2, fill: false, tension: 0 }
]
},
options: {
@@ -483,8 +492,8 @@
data: {
labels: [],
datasets: [
{ label: 'Read', data: [], borderColor: '#38bdf8', fill: false, tension: 0.3 },
{ label: 'Write', data: [], borderColor: '#fb7185', fill: false, tension: 0.3 }
{ label: 'Read', data: [], borderColor: '#38bdf8', borderWidth: 2, fill: false, tension: 0 },
{ label: 'Write', data: [], borderColor: '#fb7185', borderWidth: 2, fill: false, tension: 0 }
]
},
options: {