fix: improve chart readability with larger fonts, rotated labels, and horizontal bar chart for namespace distribution
This commit is contained in:
@@ -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 pie chart using CSS with labels on slices
|
// Create horizontal bar chart for better readability
|
||||||
pieChartHtml += '<div style="position: relative; width: 300px; height: 300px;">';
|
let chartHtml = '<div style="padding: 20px; height: 100%; overflow-y: auto;">';
|
||||||
|
|
||||||
let currentAngle = 0;
|
sortedData.forEach((item, index) => {
|
||||||
data.forEach((item, index) => {
|
const percentage = data.reduce((sum, d) => sum + d.cpu_requests, 0) > 0 ?
|
||||||
const percentage = totalCpu > 0 ? (item.cpu_requests / totalCpu) * 100 : 0;
|
(item.cpu_requests / data.reduce((sum, d) => sum + d.cpu_requests, 0)) * 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 style="
|
||||||
|
width: ${percentage}%;
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(90deg, #0066CC, #4ECDC4);
|
||||||
|
border-radius: 4px;
|
||||||
|
transition: width 0.3s ease;
|
||||||
"></div>
|
"></div>
|
||||||
<div style="
|
</div>
|
||||||
position: absolute;
|
</div>
|
||||||
left: ${labelX}px;
|
|
||||||
top: ${labelY}px;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
color: white;
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: bold;
|
|
||||||
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, {
|
||||||
|
|||||||
Reference in New Issue
Block a user