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

Improve: Storage donut chart using Victory.js VictoryPie - PatternFly style implementation

Browse Source
This commit is contained in:
Anderson
2025-10-27 13:31:53 -03:00
parent 19baa430cc
commit 5a7be90581
1 changed files with 48 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
app/static/index.html
View File

@@ -2793,78 +2793,59 @@
utilizationPercentage >= 75 ? '#f59e0b' : utilizationPercentage >= 75 ? '#f59e0b' :
utilizationPercentage >= 50 ? '#3b82f6' : '#22c55e'; utilizationPercentage >= 50 ? '#3b82f6' : '#22c55e';
// Create SVG donut chart // Check if Victory is available
const width = 250; if (typeof Victory === 'undefined' || typeof React === 'undefined') {
const height = 250; throw new Error('Victory.js or React not available');
const radius = Math.min(width, height) / 2 - 10; }
const innerRadius = radius * 0.6;
const cx = width / 2;
const cy = height / 2;
// Calculate angles for the donut // Victory.js data format
const usedAngle = (utilizationPercentage / 100) * 360; const chartData = [
const unusedAngle = 360 - usedAngle; { x: 'Used', y: utilizationPercentage },
{ x: 'Unused', y: unusedPercentage }
];
// Convert angle to radians and create arc paths // Clear container
const getPath = (angle) => { container.innerHTML = '<div style="height: 250px; width: 250px; margin: 0 auto;"></div>';
const startAngle = -90; // Start from top const chartDiv = container.firstChild;
const endAngle = startAngle + angle;
const startAngleRad = (startAngle * Math.PI) / 180;
const endAngleRad = (endAngle * Math.PI) / 180;
const x1 = cx + radius * Math.cos(startAngleRad);
const y1 = cy + radius * Math.sin(startAngleRad);
const x2 = cx + radius * Math.cos(endAngleRad);
const y2 = cy + radius * Math.sin(endAngleRad);
const x3 = cx + innerRadius * Math.cos(endAngleRad);
const y3 = cy + innerRadius * Math.sin(endAngleRad);
const x4 = cx + innerRadius * Math.cos(startAngleRad);
const y4 = cy + innerRadius * Math.sin(startAngleRad);
const largeArcFlag = angle > 180 ? 1 : 0;
return `M ${x1} ${y1} A ${radius} ${radius} 0 ${largeArcFlag} 1 ${x2} ${y2} L ${x3} ${y3} A ${innerRadius} ${innerRadius} 0 ${largeArcFlag} 0 ${x4} ${y4} Z`;
};
const usedPath = getPath(usedAngle); // Create VictoryPie component
const unusedPath = getPath(unusedAngle); const donutChart = React.createElement(Victory.VictoryPie, {
data: chartData,
width: 230,
height: 230,
innerRadius: 85,
colorScale: [usedColor, '#374151'],
style: {
data: {
stroke: 'none',
strokeWidth: 0
}
},
labels: () => null,
animate: {
duration: 500,
onLoad: { duration: 500 }
},
startAngle: -90,
endAngle: 270
});
container.innerHTML = ` // Render the chart
<svg width="${width}" height="${height}" style="display: block; margin: 0 auto;"> ReactDOM.render(donutChart, chartDiv);
<!-- Used arc -->
<path d="${usedPath}" // Add center text overlay
fill="${usedColor}" const centerText = document.createElement('div');
stroke="#1f2937" centerText.style.cssText = 'position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; pointer-events: none;';
stroke-width="2"> centerText.innerHTML = `
<animate attributeName="opacity" values="0;1" dur="0.8s" fill="freeze" /> <div style="font-size: 48px; font-weight: bold; color: #ffffff; font-family: system-ui, sans-serif;">
</path> ${Math.round(utilizationPercentage)}%
</div>
<!-- Unused arc --> <div style="font-size: 14px; color: #9ca3af; margin-top: 8px; font-family: system-ui, sans-serif;">
<path d="${unusedPath}" ${formatBytes(totalStorageUsed)}
fill="#374151" </div>
stroke="#1f2937"
stroke-width="2">
<animate attributeName="opacity" values="0;1" dur="0.8s" fill="freeze" />
</path>
<!-- Center text with percentage -->
<text x="${cx}" y="${cy - 5}"
text-anchor="middle"
dominant-baseline="middle"
style="font-size: 36px; font-weight: bold; fill: #f9fafb; font-family: system-ui;">
${utilizationPercentage.toFixed(1)}%
</text>
<!-- Subtitle -->
<text x="${cx}" y="${cy + 25}"
text-anchor="middle"
dominant-baseline="middle"
style="font-size: 14px; fill: #9ca3af; font-family: system-ui;">
${formatBytes(totalStorageUsed)}
</text>
</svg>
`; `;
chartDiv.style.position = 'relative';
chartDiv.appendChild(centerText);
} catch (error) { } catch (error) {
console.error('Error updating storage donut chart:', error); console.error('Error updating storage donut chart:', error);