fix chart sizing

This commit is contained in:
MCHost
2025-07-14 20:59:15 -04:00
parent 28ce85c2d2
commit bf174e1355

View File

@@ -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: {