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

fix: improve chart readability with larger fonts, rotated labels, and horizontal bar chart for namespace distribution

Browse Source
This commit is contained in:
Anderson
2025-10-15 22:34:37 -03:00
parent 9faa4516f2
commit 0243062889
1 changed files with 46 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
app/static/index.html
View File

@@ -2379,7 +2379,7 @@
dependentAxis: true, dependentAxis: true,
style: { style: {
axis: { stroke: '#666' }, axis: { stroke: '#666' },
tickLabels: { fill: '#ccc', fontSize: 12 } tickLabels: { fill: '#ccc', fontSize: 16, angle: -45, textAnchor: 'end' }
}, },
tickFormat: (t) => `${t}%` tickFormat: (t) => `${t}%`
}), }),
@@ -2389,7 +2389,7 @@
tickCount: 8, tickCount: 8,
style: { style: {
axis: { stroke: '#666' }, axis: { stroke: '#666' },
tickLabels: { fill: '#ccc', fontSize: 12 } tickLabels: { fill: '#ccc', fontSize: 16, angle: -45, textAnchor: 'end' }
}, },
tickFormat: (t) => new Date(t).toLocaleTimeString('pt-BR', { tickFormat: (t) => new Date(t).toLocaleTimeString('pt-BR', {
hour: '2-digit', hour: '2-digit',
@@ -2468,56 +2468,51 @@
// Calculate total CPU for percentages // Calculate total CPU for percentages
const totalCpu = data.reduce((sum, item) => sum + item.cpu_requests, 0); const totalCpu = data.reduce((sum, item) => sum + item.cpu_requests, 0);
// Create pie chart with labels directly on slices // Sort by CPU usage and take top 10
let pieChartHtml = '<div style="display: flex; align-items: center; justify-content: center; height: 100%;">'; const sortedData = data
.sort((a, b) => b.cpu_requests - a.cpu_requests)
.slice(0, 10);
// Create horizontal bar chart for better readability
let chartHtml = '<div style="padding: 20px; height: 100%; overflow-y: auto;">';
// Create pie chart using CSS with labels on slices sortedData.forEach((item, index) => {
pieChartHtml += '<div style="position: relative; width: 300px; height: 300px;">'; const percentage = data.reduce((sum, d) => sum + d.cpu_requests, 0) > 0 ?
(item.cpu_requests / data.reduce((sum, d) => sum + d.cpu_requests, 0)) * 100 : 0;
let currentAngle = 0;
data.forEach((item, index) => {
const percentage = totalCpu > 0 ? (item.cpu_requests / totalCpu) * 100 : 0;
const angle = (percentage / 100) * 360;
const color = colors[index % colors.length];
if (angle > 0) { chartHtml += `
// Calculate label position <div style="margin-bottom: 12px;">
const midAngle = currentAngle + (angle / 2); <div style="display: flex; justify-content: space-between; margin-bottom: 4px;">
const labelRadius = 120; <span style="color: var(--pf-global--Color--100); font-size: 14px; font-weight: 500;">
const labelX = 150 + Math.cos((midAngle - 90) * Math.PI / 180) * labelRadius; ${item.namespace}
const labelY = 150 + Math.sin((midAngle - 90) * Math.PI / 180) * labelRadius; </span>
<span style="color: var(--pf-global--Color--200); font-size: 12px;">
pieChartHtml += ` ${percentage.toFixed(1)}%
</span>
</div>
<div style=" <div style="
position: absolute; width: 100%;
width: 300px; height: 8px;
height: 300px; background: var(--pf-global--BackgroundColor--200);
border-radius: 50%; border-radius: 4px;
background: conic-gradient(from ${currentAngle}deg, ${color} 0deg ${angle}deg, transparent ${angle}deg); overflow: hidden;
transform: rotate(-90deg); ">
"></div> <div style="
<div style=" width: ${percentage}%;
position: absolute; height: 100%;
left: ${labelX}px; background: linear-gradient(90deg, #0066CC, #4ECDC4);
top: ${labelY}px; border-radius: 4px;
transform: translate(-50%, -50%); transition: width 0.3s ease;
color: white; "></div>
font-size: 12px; </div>
font-weight: bold; </div>
text-shadow: 1px 1px 2px rgba(0,0,0,0.8); `;
pointer-events: none;
white-space: nowrap;
">${item.namespace}</div>
`;
currentAngle += angle;
}
}); });
pieChartHtml += '</div>'; chartHtml += '</div>';
pieChartHtml += '</div>';
// Clear container and render chart // Clear container and render chart
container.innerHTML = pieChartHtml; container.innerHTML = chartHtml;
} }
// 3. Issues by Severity Timeline // 3. Issues by Severity Timeline
@@ -2605,7 +2600,7 @@
dependentAxis: true, dependentAxis: true,
style: { style: {
axis: { stroke: '#666' }, axis: { stroke: '#666' },
tickLabels: { fill: '#ccc', fontSize: 12 } tickLabels: { fill: '#ccc', fontSize: 16, angle: -45, textAnchor: 'end' }
} }
}), }),
React.createElement(Victory.VictoryAxis, { React.createElement(Victory.VictoryAxis, {
@@ -2614,7 +2609,7 @@
tickCount: 7, tickCount: 7,
style: { style: {
axis: { stroke: '#666' }, axis: { stroke: '#666' },
tickLabels: { fill: '#ccc', fontSize: 12 } tickLabels: { fill: '#ccc', fontSize: 16, angle: -45, textAnchor: 'end' }
}, },
tickFormat: (t) => new Date(t).toLocaleDateString('pt-BR', { tickFormat: (t) => new Date(t).toLocaleDateString('pt-BR', {
day: '2-digit', day: '2-digit',
@@ -2703,7 +2698,7 @@
dependentAxis: true, dependentAxis: true,
style: { style: {
axis: { stroke: '#666' }, axis: { stroke: '#666' },
tickLabels: { fill: '#ccc', fontSize: 12 } tickLabels: { fill: '#ccc', fontSize: 16, angle: -45, textAnchor: 'end' }
}, },
tickFormat: (t) => `${t}m` tickFormat: (t) => `${t}m`
}), }),
@@ -2711,7 +2706,7 @@
key: 'x-axis', key: 'x-axis',
style: { style: {
axis: { stroke: '#666' }, axis: { stroke: '#666' },
tickLabels: { fill: '#ccc', fontSize: 12 } tickLabels: { fill: '#ccc', fontSize: 16, angle: -45, textAnchor: 'end' }
} }
}), }),
React.createElement(Victory.VictoryBar, { React.createElement(Victory.VictoryBar, {
@@ -2792,7 +2787,7 @@
dependentAxis: true, dependentAxis: true,
style: { style: {
axis: { stroke: '#666' }, axis: { stroke: '#666' },
tickLabels: { fill: '#ccc', fontSize: 12 } tickLabels: { fill: '#ccc', fontSize: 16, angle: -45, textAnchor: 'end' }
}, },
tickFormat: (t) => `${t}%` tickFormat: (t) => `${t}%`
}), }),
@@ -2800,7 +2795,7 @@
key: 'x-axis', key: 'x-axis',
style: { style: {
axis: { stroke: '#666' }, axis: { stroke: '#666' },
tickLabels: { fill: '#ccc', fontSize: 12 } tickLabels: { fill: '#ccc', fontSize: 16, angle: -45, textAnchor: 'end' }
} }
}), }),
React.createElement(Victory.VictoryGroup, { React.createElement(Victory.VictoryGroup, {