hobokenchicken/GopherGate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(dashboard): constrain chart containers to prevent infinite canvas growth
Some checks failed
CI / Check (push) Has been cancelled
Details
CI / Clippy (push) Has been cancelled
Details
CI / Formatting (push) Has been cancelled
Details
CI / Test (push) Has been cancelled
Details
CI / Release Build (push) Has been cancelled
Details

Browse Source 
Added fixed height and position:relative to .chart-container so Chart.js
responsive mode has a bounded parent. Removed height attributes from all
canvas elements that conflict with Chart.js responsive sizing.
This commit is contained in:
Dustin Newkirk
2026-03-02 13:52:28 -05:00
parent fbd3751102
commit e38f012b23
2 changed files with 15 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
static/js/dashboard.js
View File

@@ -186,11 +186,11 @@ class Dashboard {
<div class="grid-2">
<div class="chart-container">
<h3 class="card-title">Request Volume (Last 24h)</h3>
<canvas id="requests-chart" height="300"></canvas>
<canvas id="requests-chart"></canvas>
</div>
<div class="chart-container">
<h3 class="card-title">Provider Share</h3>
<canvas id="providers-chart" height="300"></canvas>
<canvas id="providers-chart"></canvas>
</div>
</div>
<div class="grid-2">
@@ -241,7 +241,7 @@ class Dashboard {
</div>
<div class="chart-container">
<h3 class="card-title">Usage by Client</h3>
<canvas id="client-usage-chart" height="250"></canvas>
<canvas id="client-usage-chart"></canvas>
</div>
`;
}
@@ -333,11 +333,11 @@ class Dashboard {
<div class="grid-2">
<div class="chart-container">
<h3 class="card-title">Volume by Client</h3>
<canvas id="clients-chart" height="300"></canvas>
<canvas id="clients-chart"></canvas>
</div>
<div class="chart-container">
<h3 class="card-title">Model Distribution</h3>
<canvas id="models-chart" height="300"></canvas>
<canvas id="models-chart"></canvas>
</div>
</div>
@@ -364,7 +364,7 @@ class Dashboard {
<div class="grid-2">
<div class="chart-container">
<h3 class="card-title">Provider Spending</h3>
<canvas id="costs-chart" height="300"></canvas>
<canvas id="costs-chart"></canvas>
</div>
<div class="card">
<div class="card-header">
@@ -418,15 +418,15 @@ class Dashboard {
<div class="grid-3 monitoring-charts">
<div class="chart-container">
<h3 class="card-title">Latency (ms)</h3>
<canvas id="response-time-chart" height="200"></canvas>
<canvas id="response-time-chart"></canvas>
</div>
<div class="chart-container">
<h3 class="card-title">Error Rate (%)</h3>
<canvas id="error-rate-chart" height="200"></canvas>
<canvas id="error-rate-chart"></canvas>
</div>
<div class="chart-container">
<h3 class="card-title">Rate Limiting</h3>
<canvas id="rate-limit-chart" height="200"></canvas>
<canvas id="rate-limit-chart"></canvas>
</div>
</div>
`;