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}`; +};