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

Improve chart titles

Browse Source
This commit is contained in:
Joshua Boniface 2025-02-27 00:02:04 -05:00
parent 18a32315ea
commit 74110a94d7
1 changed files with 32 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,7 +9,12 @@
<div class="metric-item">
<div class="card">
<div class="card-header">
<h6 class="card-title mb-0">CPU</h6>
<h6 class="card-title mb-0">
CPU
<span class="current-value">
{{ props.metricsData.cpu.data[props.metricsData.cpu.data.length - 1] || 0 }}%
</span>
</h6>
</div>
<div class="card-body">
<Line
@ -24,7 +29,12 @@
<div class="metric-item">
<div class="card">
<div class="card-header">
<h6 class="card-title mb-0">Memory</h6>
<h6 class="card-title mb-0">
Memory
<span class="current-value">
{{ props.metricsData.memory.data[props.metricsData.memory.data.length - 1] || 0 }}%
</span>
</h6>
</div>
<div class="card-body">
<Line
@ -39,7 +49,12 @@
<div class="metric-item">
<div class="card">
<div class="card-header">
<h6 class="card-title mb-0">Storage</h6>
<h6 class="card-title mb-0">
Storage
<span class="current-value">
{{ props.metricsData.storage?.data[props.metricsData.storage?.data.length - 1] || 0 }}%
</span>
</h6>
</div>
<div class="card-body">
<Line
@ -123,7 +138,8 @@ const chartOptions = {
},
plugins: {
legend: {
position: 'top'
position: 'top',
display: false // Hide legend completely
}
},
animation: false,
@ -144,7 +160,7 @@ const healthChartData = computed(() => ({
const cpuChartData = computed(() => ({
labels: props.metricsData.cpu.labels,
datasets: [{
label: 'CPU %',
label: 'CPU',
data: props.metricsData.cpu.data,
borderColor: 'rgb(75, 192, 192)',
fill: false
@ -154,7 +170,7 @@ const cpuChartData = computed(() => ({
const memoryChartData = computed(() => ({
labels: props.metricsData.memory.labels,
datasets: [{
label: 'Memory %',
label: 'Memory',
data: props.metricsData.memory.data,
borderColor: 'rgb(153, 102, 255)',
fill: false
@ -164,7 +180,7 @@ const memoryChartData = computed(() => ({
const storageChartData = computed(() => ({
labels: props.metricsData.storage?.labels || [],
datasets: [{
label: 'Storage %',
label: 'Storage',
data: props.metricsData.storage?.data || [],
borderColor: 'rgb(255, 159, 64)',
fill: false
@ -216,5 +232,14 @@ const storageChartData = computed(() => ({
.card-header h6 {
font-size: 0.95rem;
font-weight: 600;
display: flex;
justify-content: space-between;
align-items: center;
}
.current-value {
font-size: 1.1rem;
font-weight: bold;
color: #333;
}
</style>