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