parallelvirtualcluster/pvc-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve graph data point display

Browse Source
This commit is contained in:
Joshua Boniface 2025-02-26 23:52:05 -05:00
parent bc1ca6d8ab
commit 18a32315ea
2 changed files with 13 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
pvc-vue/src/components/ClusterOverview.vue
View File

@ -172,8 +172,6 @@ const getDeltaClass = (delta) => {
}; };
const healthChartData = computed(() => { const healthChartData = computed(() => {
const health = props.clusterData.cluster_health?.health || 0;
return { return {
labels: props.metricsHistory.labels, labels: props.metricsHistory.labels,
datasets: [{ datasets: [{
@ -195,13 +193,17 @@ const healthChartData = computed(() => {
}, },
borderWidth: 1.5, borderWidth: 1.5,
tension: 0.4, tension: 0.4,
pointRadius: 2, pointRadius: 0,
pointBackgroundColor: (ctx) => { pointHoverRadius: 4,
const value = ctx.parsed.y; pointBackgroundColor: 'rgba(255, 255, 255, 0.8)', // Light background for all points
if (value > 90) return 'rgba(40, 167, 69, 0.2)'; // Green pointBorderColor: (ctx) => {
if (value > 50) return 'rgba(255, 193, 7, 0.2)'; // Yellow if (!ctx.raw) return 'rgba(0, 0, 0, 0.2)';
return 'rgba(220, 53, 69, 0.2)'; // Red const value = ctx.raw;
} if (value > 90) return 'rgba(40, 167, 69, 0.5)'; // Green
if (value > 50) return 'rgba(255, 193, 7, 0.5)'; // Yellow
return 'rgba(220, 53, 69, 0.5)'; // Red
},
pointBorderWidth: 1.5
}] }]
}; };
}); });

3
pvc-vue/src/components/MetricsCharts.vue
View File

@ -117,7 +117,8 @@ const chartOptions = {
tension: 0.2 tension: 0.2
}, },
point: { point: {
radius: 2 radius: 0,
hoverRadius: 4
} }
}, },
plugins: { plugins: {