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

Fix: adjust Victory.js charts to fill container width and height properly

Browse Source
This commit is contained in:
Anderson
2025-10-03 09:25:02 -03:00
parent a2a5acf861
commit 37a6681cd6
1 changed files with 24 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
app/static/index.html
View File

@@ -2645,7 +2645,7 @@
</div> </div>
<div style="padding: 20px;"> <div style="padding: 20px;">
<div style="height: 300px; position: relative;"> <div style="height: 300px; position: relative;">
<div id="${cpuChartId}" style="width: 400px; height: 200px;"></div> <div id="${cpuChartId}" style="width: 100%; height: 200px; min-height: 200px;"></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;">
@@ -2675,7 +2675,7 @@
</div> </div>
<div style="padding: 20px;"> <div style="padding: 20px;">
<div style="height: 300px; position: relative;"> <div style="height: 300px; position: relative;">
<div id="${memoryChartId}" style="width: 400px; height: 200px;"></div> <div id="${memoryChartId}" style="width: 100%; height: 200px; min-height: 200px;"></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;">
@@ -2904,13 +2904,21 @@
// Clear container // Clear container
container.innerHTML = ''; container.innerHTML = '';
// Get container dimensions
const containerWidth = container.offsetWidth || 400;
const containerHeight = container.offsetHeight || 200;
// Create Victory chart using React.createElement // Create Victory chart using React.createElement
const chart = React.createElement(Victory.VictoryChart, { const chart = React.createElement(Victory.VictoryChart, {
width: 400, width: containerWidth,
height: 200, height: containerHeight,
theme: Victory.VictoryTheme.material, theme: Victory.VictoryTheme.material,
style: { style: {
parent: { background: '#1E1E1E' } parent: {
background: '#1E1E1E',
width: '100%',
height: '100%'
}
} }
}, [ }, [
React.createElement(Victory.VictoryAxis, { React.createElement(Victory.VictoryAxis, {
@@ -2970,13 +2978,21 @@
// Clear container // Clear container
container.innerHTML = ''; container.innerHTML = '';
// Get container dimensions
const containerWidth = container.offsetWidth || 400;
const containerHeight = container.offsetHeight || 200;
// Create Victory chart using React.createElement // Create Victory chart using React.createElement
const chart = React.createElement(Victory.VictoryChart, { const chart = React.createElement(Victory.VictoryChart, {
width: 400, width: containerWidth,
height: 200, height: containerHeight,
theme: Victory.VictoryTheme.material, theme: Victory.VictoryTheme.material,
style: { style: {
parent: { background: '#1E1E1E' } parent: {
background: '#1E1E1E',
width: '100%',
height: '100%'
}
} }
}, [ }, [
React.createElement(Victory.VictoryAxis, { React.createElement(Victory.VictoryAxis, {