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