diff --git a/src/gui/src/UI/Settings/UITabUsage.js b/src/gui/src/UI/Settings/UITabUsage.js
index 007f2129f..eb38d85c9 100644
--- a/src/gui/src/UI/Settings/UITabUsage.js
+++ b/src/gui/src/UI/Settings/UITabUsage.js
@@ -86,7 +86,11 @@ export default {
data-id="${sanitize_id(entry.id)}"
>
${html_encode(name)}:
- ${i18n('used_of', entry)}
+ ${i18n('used_of', {
+ ...entry,
+ used: window.format_SI(entry.used),
+ available: window.format_SI(entry.available),
+ })}
${Number(entry.usage_percentage)}%
@@ -110,7 +114,11 @@ export default {
el_divContent
.querySelector(`[data-id=${sanitize_id(event.id)}] .usage-progbar span`)
.innerText = '' + Number(event.usage_percentage) + '%';
- const used_of_str = i18n('used_of', event);
+ const used_of_str = i18n('used_of', {
+ ...event,
+ used: window.format_SI(event.used),
+ available: window.format_SI(event.available),
+ });
el_divContent
.querySelector(`[data-id=${sanitize_id(event.id)}] > span`)
.innerText = used_of_str;
diff --git a/src/gui/src/helpers.js b/src/gui/src/helpers.js
index 0f1438eba..4eff77b75 100644
--- a/src/gui/src/helpers.js
+++ b/src/gui/src/helpers.js
@@ -2728,4 +2728,28 @@ window.get_profile_picture = async function(username){
}
return icon;
-}
\ No newline at end of file
+}
+
+window.format_SI = (num) => {
+ if ( num === 0 ) return "0";
+
+ const mulUnits = ["", "K", "M", "G", "T", "P", "E", "Z", "Y"];
+ const divUnits = ["m", "ยต", "n", "p", "f", "a", "z", "y"];
+
+ const abs = Math.abs(num);
+ let exp = Math.floor(Math.log10(abs) / 3);
+ let symbol = "";
+
+ symbol = exp >= 0
+ ? mulUnits[exp]
+ : divUnits[-exp - 1] ;
+
+ if ( ! symbol ) {
+ symbol = `e${exp * 3}`;
+ }
+
+ const scaled = num / Math.pow(10, exp * 3);
+ const rounded = Number.parseFloat(scaled.toPrecision(3));
+
+ return `${rounded}${symbol}`;
+};