Migrate charts from Chart.js to Victory.js for PatternFly consistency
This commit is contained in:
@@ -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;">
|
||||||
<canvas id="${cpuChartId}" width="400" height="200"></canvas>
|
<div id="${cpuChartId}" style="width: 400px; 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;">
|
||||||
<canvas id="${memoryChartId}" width="400" height="200"></canvas>
|
<div id="${memoryChartId}" style="width: 400px; 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;">
|
||||||
@@ -2895,128 +2895,136 @@
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
function createCPUChart(canvasId, cpuData) {
|
function createCPUChart(containerId, cpuData) {
|
||||||
const ctx = document.getElementById(canvasId);
|
const container = document.getElementById(containerId);
|
||||||
if (!ctx) return;
|
if (!container) return;
|
||||||
|
|
||||||
const chartData = cpuData?.data || [];
|
const chartData = cpuData?.data || [];
|
||||||
|
|
||||||
new Chart(ctx, {
|
// Clear container
|
||||||
type: 'line',
|
container.innerHTML = '';
|
||||||
data: {
|
|
||||||
datasets: [{
|
// Create Victory chart using React.createElement
|
||||||
label: 'CPU Usage (cores)',
|
const chart = React.createElement(Victory.VictoryChart, {
|
||||||
data: chartData,
|
width: 400,
|
||||||
borderColor: '#0066CC',
|
height: 200,
|
||||||
backgroundColor: 'rgba(0, 102, 204, 0.1)',
|
theme: Victory.VictoryTheme.material,
|
||||||
borderWidth: 2,
|
style: {
|
||||||
fill: true,
|
parent: { background: '#1E1E1E' }
|
||||||
tension: 0.4
|
}
|
||||||
}]
|
}, [
|
||||||
},
|
React.createElement(Victory.VictoryAxis, {
|
||||||
options: {
|
key: 'y-axis',
|
||||||
responsive: true,
|
dependentAxis: true,
|
||||||
maintainAspectRatio: false,
|
style: {
|
||||||
plugins: {
|
axis: { stroke: '#404040' },
|
||||||
legend: {
|
tickLabels: { fill: '#FFFFFF', fontSize: 12 },
|
||||||
labels: {
|
grid: { stroke: '#404040' }
|
||||||
color: '#FFFFFF'
|
},
|
||||||
}
|
tickFormat: (t) => `${t.toFixed(3)} cores`
|
||||||
|
}),
|
||||||
|
React.createElement(Victory.VictoryAxis, {
|
||||||
|
key: 'x-axis',
|
||||||
|
style: {
|
||||||
|
axis: { stroke: '#404040' },
|
||||||
|
tickLabels: { fill: '#FFFFFF', fontSize: 12 },
|
||||||
|
grid: { stroke: '#404040' }
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
React.createElement(Victory.VictoryLine, {
|
||||||
|
key: 'cpu-line',
|
||||||
|
data: chartData,
|
||||||
|
style: {
|
||||||
|
data: {
|
||||||
|
stroke: '#0066CC',
|
||||||
|
strokeWidth: 2
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
scales: {
|
animate: {
|
||||||
x: {
|
duration: 2000,
|
||||||
type: 'time',
|
onLoad: { duration: 1000 }
|
||||||
time: {
|
}
|
||||||
displayFormats: {
|
}),
|
||||||
hour: 'HH:mm',
|
React.createElement(Victory.VictoryArea, {
|
||||||
day: 'MMM dd'
|
key: 'cpu-area',
|
||||||
}
|
data: chartData,
|
||||||
},
|
style: {
|
||||||
ticks: {
|
data: {
|
||||||
color: '#FFFFFF'
|
fill: 'rgba(0, 102, 204, 0.1)',
|
||||||
},
|
fillOpacity: 0.3
|
||||||
grid: {
|
|
||||||
color: '#404040'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
y: {
|
|
||||||
beginAtZero: true,
|
|
||||||
ticks: {
|
|
||||||
color: '#FFFFFF',
|
|
||||||
callback: function(value) {
|
|
||||||
return value.toFixed(3) + ' cores';
|
|
||||||
}
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
color: '#404040'
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
})
|
||||||
});
|
]);
|
||||||
|
|
||||||
|
// Render the chart
|
||||||
|
ReactDOM.render(chart, container);
|
||||||
}
|
}
|
||||||
|
|
||||||
function createMemoryChart(canvasId, memoryData) {
|
function createMemoryChart(containerId, memoryData) {
|
||||||
const ctx = document.getElementById(canvasId);
|
const container = document.getElementById(containerId);
|
||||||
if (!ctx) return;
|
if (!container) return;
|
||||||
|
|
||||||
const chartData = memoryData?.data || [];
|
const chartData = memoryData?.data || [];
|
||||||
|
|
||||||
new Chart(ctx, {
|
// Clear container
|
||||||
type: 'line',
|
container.innerHTML = '';
|
||||||
data: {
|
|
||||||
datasets: [{
|
// Create Victory chart using React.createElement
|
||||||
label: 'Memory Usage (MB)',
|
const chart = React.createElement(Victory.VictoryChart, {
|
||||||
data: chartData,
|
width: 400,
|
||||||
borderColor: '#CC0000',
|
height: 200,
|
||||||
backgroundColor: 'rgba(204, 0, 0, 0.1)',
|
theme: Victory.VictoryTheme.material,
|
||||||
borderWidth: 2,
|
style: {
|
||||||
fill: true,
|
parent: { background: '#1E1E1E' }
|
||||||
tension: 0.4
|
}
|
||||||
}]
|
}, [
|
||||||
},
|
React.createElement(Victory.VictoryAxis, {
|
||||||
options: {
|
key: 'y-axis',
|
||||||
responsive: true,
|
dependentAxis: true,
|
||||||
maintainAspectRatio: false,
|
style: {
|
||||||
plugins: {
|
axis: { stroke: '#404040' },
|
||||||
legend: {
|
tickLabels: { fill: '#FFFFFF', fontSize: 12 },
|
||||||
labels: {
|
grid: { stroke: '#404040' }
|
||||||
color: '#FFFFFF'
|
},
|
||||||
}
|
tickFormat: (t) => `${t.toFixed(1)} MB`
|
||||||
|
}),
|
||||||
|
React.createElement(Victory.VictoryAxis, {
|
||||||
|
key: 'x-axis',
|
||||||
|
style: {
|
||||||
|
axis: { stroke: '#404040' },
|
||||||
|
tickLabels: { fill: '#FFFFFF', fontSize: 12 },
|
||||||
|
grid: { stroke: '#404040' }
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
React.createElement(Victory.VictoryLine, {
|
||||||
|
key: 'memory-line',
|
||||||
|
data: chartData,
|
||||||
|
style: {
|
||||||
|
data: {
|
||||||
|
stroke: '#CC0000',
|
||||||
|
strokeWidth: 2
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
scales: {
|
animate: {
|
||||||
x: {
|
duration: 2000,
|
||||||
type: 'time',
|
onLoad: { duration: 1000 }
|
||||||
time: {
|
}
|
||||||
displayFormats: {
|
}),
|
||||||
hour: 'HH:mm',
|
React.createElement(Victory.VictoryArea, {
|
||||||
day: 'MMM dd'
|
key: 'memory-area',
|
||||||
}
|
data: chartData,
|
||||||
},
|
style: {
|
||||||
ticks: {
|
data: {
|
||||||
color: '#FFFFFF'
|
fill: 'rgba(204, 0, 0, 0.1)',
|
||||||
},
|
fillOpacity: 0.3
|
||||||
grid: {
|
|
||||||
color: '#404040'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
y: {
|
|
||||||
beginAtZero: true,
|
|
||||||
ticks: {
|
|
||||||
color: '#FFFFFF',
|
|
||||||
callback: function(value) {
|
|
||||||
return value.toFixed(1) + ' MB';
|
|
||||||
}
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
color: '#404040'
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
})
|
||||||
});
|
]);
|
||||||
|
|
||||||
|
// Render the chart
|
||||||
|
ReactDOM.render(chart, container);
|
||||||
}
|
}
|
||||||
|
|
||||||
function updateWorkloadDetails(data) {
|
function updateWorkloadDetails(data) {
|
||||||
@@ -3256,8 +3264,9 @@
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<!-- Chart.js for historical analysis graphs -->
|
<!-- React and Victory.js for PatternFly charts -->
|
||||||
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
|
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
|
||||||
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@2.0.0/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
|
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
|
||||||
|
<script src="https://unpkg.com/victory@36.6.12/dist/victory.min.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Reference in New Issue
Block a user