anobre/openshift-resource-governance
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix: improve chart dimensions and aspect ratio to prevent squeezed appearance

Browse Source
This commit is contained in:
Anderson
2025-10-03 09:38:17 -03:00
parent 5c812acef1
commit eb2c0c23b5
1 changed files with 10 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
app/static/index.html
View File

@@ -2654,8 +2654,8 @@
</h3> </h3>
</div> </div>
<div style="padding: 20px;"> <div style="padding: 20px;">
<div style="height: 300px; position: relative;"> <div style="height: 350px; position: relative;">
<div id="${cpuChartId}" style="width: 100%; height: 200px; min-height: 200px;"></div> <div id="${cpuChartId}" style="width: 100%; height: 300px; min-height: 300px;"></div>
</div> </div>
${cpuData.data && cpuData.data.length > 0 ? ` ${cpuData.data && cpuData.data.length > 0 ? `
<div style="margin-top: 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px;"> <div style="margin-top: 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px;">
@@ -2684,8 +2684,8 @@
</h3> </h3>
</div> </div>
<div style="padding: 20px;"> <div style="padding: 20px;">
<div style="height: 300px; position: relative;"> <div style="height: 350px; position: relative;">
<div id="${memoryChartId}" style="width: 100%; height: 200px; min-height: 200px;"></div> <div id="${memoryChartId}" style="width: 100%; height: 300px; min-height: 300px;"></div>
</div> </div>
${memoryData.data && memoryData.data.length > 0 ? ` ${memoryData.data && memoryData.data.length > 0 ? `
<div style="margin-top: 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px;"> <div style="margin-top: 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px;">
@@ -2914,9 +2914,9 @@
// Clear container // Clear container
container.innerHTML = ''; container.innerHTML = '';
// Get container dimensions // Get container dimensions and ensure proper aspect ratio
const containerWidth = container.offsetWidth || 400; const containerWidth = container.offsetWidth || 400;
const containerHeight = container.offsetHeight || 200; const containerHeight = Math.max(container.offsetHeight || 200, 250); // Minimum height of 250px
// Create Victory chart using React.createElement // Create Victory chart using React.createElement
const chart = React.createElement(Victory.VictoryChart, { const chart = React.createElement(Victory.VictoryChart, {
@@ -2924,6 +2924,7 @@
height: containerHeight, height: containerHeight,
theme: Victory.VictoryTheme.material, theme: Victory.VictoryTheme.material,
scale: { x: 'time' }, scale: { x: 'time' },
padding: { top: 20, bottom: 50, left: 60, right: 20 },
style: { style: {
parent: { parent: {
background: '#1E1E1E', background: '#1E1E1E',
@@ -2997,9 +2998,9 @@
// Clear container // Clear container
container.innerHTML = ''; container.innerHTML = '';
// Get container dimensions // Get container dimensions and ensure proper aspect ratio
const containerWidth = container.offsetWidth || 400; const containerWidth = container.offsetWidth || 400;
const containerHeight = container.offsetHeight || 200; const containerHeight = Math.max(container.offsetHeight || 200, 250); // Minimum height of 250px
// Create Victory chart using React.createElement // Create Victory chart using React.createElement
const chart = React.createElement(Victory.VictoryChart, { const chart = React.createElement(Victory.VictoryChart, {
@@ -3007,6 +3008,7 @@
height: containerHeight, height: containerHeight,
theme: Victory.VictoryTheme.material, theme: Victory.VictoryTheme.material,
scale: { x: 'time' }, scale: { x: 'time' },
padding: { top: 20, bottom: 50, left: 60, right: 20 },
style: { style: {
parent: { parent: {
background: '#1E1E1E', background: '#1E1E1E',