-
Notifications
You must be signed in to change notification settings - Fork 386
/
UsageProgressComponent.vue
96 lines (82 loc) · 2.74 KB
/
UsageProgressComponent.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<v-card :title="title" variant="flat" :border="true" rounded="xlg">
<v-card-item class="pt-1">
<v-row>
<v-col cols="12" class="pb-1">
<v-progress-linear :color="color" :model-value="percentage" rounded height="6" />
</v-col>
<v-col cols="6">
<p class="text-medium-emphasis">Used</p>
<h4>{{ onlyLimit ? "---" : format(used || 0) }}</h4>
<v-divider class="my-3" />
<p class="text-medium-emphasis">Percentage</p>
<h4 class="">{{ onlyLimit ? "---" : percentage+'%' }}</h4>
</v-col>
<v-col cols="6">
<p class="text-right text-medium-emphasis">Available</p>
<h4 class="text-right">{{ onlyLimit ? "---" : format(available) }}</h4>
<v-divider class="my-3" />
<p class="text-right text-medium-emphasis">Limit</p>
<h4 class="text-right">{{ format(limit) }}</h4>
</v-col>
<v-divider />
<v-col>
<v-btn size="small" variant="outlined" color="default" class="mt-1 my-2">Change Limits</v-btn>
</v-col>
</v-row>
</v-card-item>
</v-card>
</template>
<script setup lang="ts">
import { computed } from 'vue';
import {
VCard,
VCardItem,
VRow,
VCol,
VProgressLinear,
VDivider,
VBtn,
} from 'vuetify/components';
import { Dimensions, Size } from '@/utils/bytesSize';
const props = defineProps<{
title: string;
isBytes?: boolean;
onlyLimit?: boolean;
used?: number;
limit: number;
color: string;
}>();
const percentage = computed((): string => {
if (props.onlyLimit || !props.used) {
return '0';
}
const p = props.used/props.limit * 100;
return Math.round(p).toString();
});
const available = computed((): number => {
if (props.onlyLimit || !props.used) {
return 0;
}
return props.limit - props.used;
});
/**
* Returns a stringify val considering if val is expressed in bytes and it that case it returns the
* value in the best human readable memory size unit rounding down to 0 when its expressed in bytes
* and truncating the decimals when its expressed in other units.
*/
function format(val: number): string {
if (!props.isBytes) {
return val.toString();
}
const valmem = new Size(val, 2);
switch (valmem.label) {
case Dimensions.Bytes:
return '0';
default:
return `${valmem.formattedBytes.replace(/\.0+$/, '')}${valmem.label}`;
}
}
</script>