jjkiers/cloudron-box
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Remove graph subtext and move to footer

Browse Source
This commit is contained in:
Girish Ramakrishnan
2025-10-03 17:10:56 +02:00
parent 0b310f849a
commit 02fe971f0b
13 changed files with 15 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dashboard/src/components/GraphItem.vue
+7
View File
@@ -21,6 +21,7 @@ let yscaleUnit = null;
const props = defineProps({
title: String,
subtext: String,
footer: String,
period: Object, // { hours, format, tooltpFormat }
yscale: String, // cpu, memory
memory: Number,
@@ -307,6 +308,7 @@ defineExpose({
<canvas ref="graphNode"></canvas>
<div ref="tooltipElem" class="graphs-tooltip"></div>
</div>
<div class="footer">{{ footer }}</div>
</div>
</template>
@@ -322,6 +324,11 @@ defineExpose({
height: 160px;
}
.footer {
text-align: center;
font-weight: bold;
}
</style>
<style>
dashboard/src/components/SystemGraphs.vue
+2 -4
View File
@@ -209,7 +209,6 @@ onUnmounted(async () => {
<div class="graphs" v-if="!busy">
<GraphItem ref="cpuGraphItem"
:title="$t('system.cpuUsage.title')"
:subtext='systemCpus.length ? `${systemCpus.length} Core "${systemCpus[0].model}"` : ""'
:period="period"
yscale="cpu"
:cpu-count="systemCpus.length"
@@ -218,7 +217,6 @@ onUnmounted(async () => {
<GraphItem ref="memoryGraphItem"
:title="$t('system.systemMemory.title')"
:subtext="`RAM: ${prettyDecimalSize(systemMemory.memory)} Swap: ${prettyDecimalSize(systemMemory.swap)}`"
:period="period"
yscale="memory"
:memory="systemMemory.memory + systemMemory.swap"
@@ -227,7 +225,7 @@ onUnmounted(async () => {
<GraphItem ref="diskGraphItem"
title="Disk I/O"
:subtext="$t('app.graphs.diskIOTotal', { read: blockReadTotal, write: blockWriteTotal })"
:footer="$t('app.graphs.diskIOTotal', { read: blockReadTotal, write: blockWriteTotal })"
:period="period"
yscale="disk"
>
@@ -235,7 +233,7 @@ onUnmounted(async () => {
<GraphItem ref="networkGraphItem"
title="Network I/O"
:subtext="$t('app.graphs.networkIOTotal', { inbound: networkReadTotal, outbound: networkWriteTotal })"
:footer="$t('app.graphs.networkIOTotal', { inbound: networkReadTotal, outbound: networkWriteTotal })"
:period="period"
yscale="network"
>
dashboard/src/components/app/Graphs.vue
+2 -4
View File
@@ -140,7 +140,6 @@ onUnmounted(async () => {
<GraphItem ref="cpuGraphItem"
:title="$t('system.cpuUsage.title')"
:subtext="`${app.cpuQuota}% of ${systemCpus.length} Core ${systemCpus[0].model}`"
:period="period"
yscale="cpu"
:cpu-count="systemCpus.length"
@@ -150,7 +149,6 @@ onUnmounted(async () => {
<GraphItem ref="memoryGraphItem"
title="Memory"
:subtext="`RAM: ${prettyBinarySize(app.memoryLimit || app.manifest.memoryLimit || 256*1024*1024)}`"
:period="period"
yscale="memory"
:memory="appMemory"
@@ -160,7 +158,7 @@ onUnmounted(async () => {
<GraphItem ref="diskGraphItem"
title="Disk I/O"
:subtext="$t('app.graphs.diskIOTotal', { read: blockReadTotal, write: blockWriteTotal })"
:footer="$t('app.graphs.diskIOTotal', { read: blockReadTotal, write: blockWriteTotal })"
:period="period"
yscale="disk"
>
@@ -168,7 +166,7 @@ onUnmounted(async () => {
<GraphItem ref="networkGraphItem"
title="Network I/O"
:subtext="$t('app.graphs.networkIOTotal', { inbound: networkReadTotal, outbound: networkWriteTotal })"
:footer="$t('app.graphs.networkIOTotal', { inbound: networkReadTotal, outbound: networkWriteTotal })"
:period="period"
yscale="network"
>