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

Adjust styling of utilization graphs

Browse Source
This commit is contained in:
Joshua Boniface 2025-02-27 01:27:25 -05:00
parent f2652380fc
commit f66d095614
1 changed files with 68 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -152,12 +152,14 @@
<div class="card-header">
<h6 class="card-title mb-0">
<span class="metric-label">CPU Utilization</span>
<span class="metric-value">
{{ metricsData.cpu.data[metricsData.cpu.data.length - 1] || 0 }}%
</span>
</h6>
</div>
<div class="card-body">
<div class="metric-percentage">
<h4 class="metric-value">
{{ metricsData.cpu.data[metricsData.cpu.data.length - 1] || 0 }}%
</h4>
</div>
<Line :data="cpuChartData" :options="chartOptions" />
</div>
</div>
@ -166,12 +168,14 @@
<div class="card-header">
<h6 class="card-title mb-0">
<span class="metric-label">Memory Utilization</span>
<span class="metric-value">
{{ metricsData.memory.data[metricsData.memory.data.length - 1] || 0 }}%
</span>
</h6>
</div>
<div class="card-body">
<div class="metric-percentage">
<h4 class="metric-value">
{{ metricsData.memory.data[metricsData.memory.data.length - 1] || 0 }}%
</h4>
</div>
<Line :data="memoryChartData" :options="chartOptions" />
</div>
</div>
@ -180,12 +184,14 @@
<div class="card-header">
<h6 class="card-title mb-0">
<span class="metric-label">Storage Utilization</span>
<span class="metric-value">
{{ metricsData.storage?.data[metricsData.storage?.data.length - 1] || 0 }}%
</span>
</h6>
</div>
<div class="card-body">
<div class="metric-percentage">
<h4 class="metric-value">
{{ metricsData.storage?.data[metricsData.storage?.data.length - 1] || 0 }}%
</h4>
</div>
<Line :data="storageChartData" :options="chartOptions" />
</div>
</div>
@ -406,7 +412,15 @@ const cpuChartData = computed(() => ({
label: 'CPU',
data: props.metricsData.cpu.data,
borderColor: 'rgb(75, 192, 192)',
fill: false
fill: true,
backgroundColor: 'rgba(75, 192, 192, 0.1)',
borderWidth: 1.5,
tension: 0.4,
pointRadius: 0,
pointHoverRadius: 4,
pointBackgroundColor: 'rgba(255, 255, 255, 0.8)',
pointBorderColor: 'rgba(75, 192, 192, 0.5)',
pointBorderWidth: 1.5
}]
}));
@ -416,7 +430,15 @@ const memoryChartData = computed(() => ({
label: 'Memory',
data: props.metricsData.memory.data,
borderColor: 'rgb(153, 102, 255)',
fill: false
fill: true,
backgroundColor: 'rgba(153, 102, 255, 0.1)',
borderWidth: 1.5,
tension: 0.4,
pointRadius: 0,
pointHoverRadius: 4,
pointBackgroundColor: 'rgba(255, 255, 255, 0.8)',
pointBorderColor: 'rgba(153, 102, 255, 0.5)',
pointBorderWidth: 1.5
}]
}));
@ -426,7 +448,15 @@ const storageChartData = computed(() => ({
label: 'Storage',
data: props.metricsData.storage?.data || [],
borderColor: 'rgb(255, 159, 64)',
fill: false
fill: true,
backgroundColor: 'rgba(255, 159, 64, 0.1)',
borderWidth: 1.5,
tension: 0.4,
pointRadius: 0,
pointHoverRadius: 4,
pointBackgroundColor: 'rgba(255, 255, 255, 0.8)',
pointBorderColor: 'rgba(255, 159, 64, 0.5)',
pointBorderWidth: 1.5
}]
}));
@ -452,21 +482,12 @@ const chartOptions = {
}
},
y: {
display: true,
display: false,
grid: {
display: true
display: false
},
min: 0,
max: 100,
ticks: {
stepSize: 20
}
}
},
elements: {
point: {
radius: 0,
hoverRadius: 4
max: 100
}
},
animation: false,
@ -673,19 +694,15 @@ const chartOptions = {
padding: 0.5rem;
display: flex;
flex-direction: column;
justify-content: center; /* Center vertically */
align-items: center; /* Center horizontally */
}
.metric-card .card-body > * {
margin: 0; /* Remove any default margins */
position: relative;
}
.metric-card .metric-value {
font-size: 1.25rem;
font-size: 1.25rem; /* Return to original size for metric cards */
font-weight: bold;
color: #333;
line-height: 1; /* Tighter line height */
line-height: 1;
margin: 0;
}
.card-header h6 {
@ -700,9 +717,26 @@ const chartOptions = {
color: #666;
}
.metric-value {
font-weight: bold;
.metric-percentage {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(255, 255, 255, 0.5);
padding: 0.25rem 0.5rem;
border-radius: 0.5rem;
box-shadow: 0 0 10px rgba(0,0,0,0.05);
z-index: 2;
}
/* Style for the percentage overlay in graphs */
.metric-percentage .metric-value {
font-size: 2.5rem;
font-weight: normal; /* Match health graph */
color: #333;
line-height: 1;
margin: 0;
text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}
@media (max-width: 1400px) {