fix(dashboard): constrain chart containers to prevent infinite canvas growth
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:
@@ -842,10 +842,16 @@ body {
|
|||||||
|
|
||||||
/* Charts */
|
/* Charts */
|
||||||
.chart-container {
|
.chart-container {
|
||||||
|
position: relative;
|
||||||
background: var(--bg1);
|
background: var(--bg1);
|
||||||
border: 1px solid var(--bg2);
|
border: 1px solid var(--bg2);
|
||||||
border-radius: var(--border-radius);
|
border-radius: var(--border-radius);
|
||||||
padding: 1.5rem;
|
padding: 1.5rem;
|
||||||
|
height: 350px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-container canvas {
|
||||||
|
max-height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Forms */
|
/* Forms */
|
||||||
|
|||||||
@@ -186,11 +186,11 @@ class Dashboard {
|
|||||||
<div class="grid-2">
|
<div class="grid-2">
|
||||||
<div class="chart-container">
|
<div class="chart-container">
|
||||||
<h3 class="card-title">Request Volume (Last 24h)</h3>
|
<h3 class="card-title">Request Volume (Last 24h)</h3>
|
||||||
<canvas id="requests-chart" height="300"></canvas>
|
<canvas id="requests-chart"></canvas>
|
||||||
</div>
|
</div>
|
||||||
<div class="chart-container">
|
<div class="chart-container">
|
||||||
<h3 class="card-title">Provider Share</h3>
|
<h3 class="card-title">Provider Share</h3>
|
||||||
<canvas id="providers-chart" height="300"></canvas>
|
<canvas id="providers-chart"></canvas>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="grid-2">
|
<div class="grid-2">
|
||||||
@@ -241,7 +241,7 @@ class Dashboard {
|
|||||||
</div>
|
</div>
|
||||||
<div class="chart-container">
|
<div class="chart-container">
|
||||||
<h3 class="card-title">Usage by Client</h3>
|
<h3 class="card-title">Usage by Client</h3>
|
||||||
<canvas id="client-usage-chart" height="250"></canvas>
|
<canvas id="client-usage-chart"></canvas>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
@@ -333,11 +333,11 @@ class Dashboard {
|
|||||||
<div class="grid-2">
|
<div class="grid-2">
|
||||||
<div class="chart-container">
|
<div class="chart-container">
|
||||||
<h3 class="card-title">Volume by Client</h3>
|
<h3 class="card-title">Volume by Client</h3>
|
||||||
<canvas id="clients-chart" height="300"></canvas>
|
<canvas id="clients-chart"></canvas>
|
||||||
</div>
|
</div>
|
||||||
<div class="chart-container">
|
<div class="chart-container">
|
||||||
<h3 class="card-title">Model Distribution</h3>
|
<h3 class="card-title">Model Distribution</h3>
|
||||||
<canvas id="models-chart" height="300"></canvas>
|
<canvas id="models-chart"></canvas>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -364,7 +364,7 @@ class Dashboard {
|
|||||||
<div class="grid-2">
|
<div class="grid-2">
|
||||||
<div class="chart-container">
|
<div class="chart-container">
|
||||||
<h3 class="card-title">Provider Spending</h3>
|
<h3 class="card-title">Provider Spending</h3>
|
||||||
<canvas id="costs-chart" height="300"></canvas>
|
<canvas id="costs-chart"></canvas>
|
||||||
</div>
|
</div>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-header">
|
<div class="card-header">
|
||||||
@@ -418,15 +418,15 @@ class Dashboard {
|
|||||||
<div class="grid-3 monitoring-charts">
|
<div class="grid-3 monitoring-charts">
|
||||||
<div class="chart-container">
|
<div class="chart-container">
|
||||||
<h3 class="card-title">Latency (ms)</h3>
|
<h3 class="card-title">Latency (ms)</h3>
|
||||||
<canvas id="response-time-chart" height="200"></canvas>
|
<canvas id="response-time-chart"></canvas>
|
||||||
</div>
|
</div>
|
||||||
<div class="chart-container">
|
<div class="chart-container">
|
||||||
<h3 class="card-title">Error Rate (%)</h3>
|
<h3 class="card-title">Error Rate (%)</h3>
|
||||||
<canvas id="error-rate-chart" height="200"></canvas>
|
<canvas id="error-rate-chart"></canvas>
|
||||||
</div>
|
</div>
|
||||||
<div class="chart-container">
|
<div class="chart-container">
|
||||||
<h3 class="card-title">Rate Limiting</h3>
|
<h3 class="card-title">Rate Limiting</h3>
|
||||||
<canvas id="rate-limit-chart" height="200"></canvas>
|
<canvas id="rate-limit-chart"></canvas>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|||||||
Reference in New Issue
Block a user