From 880760c6020945f578d2988ccfc606b345dc9938 Mon Sep 17 00:00:00 2001
From: KernelDeimos <eric.alex.dube@gmail.com>
Date: Thu, 15 May 2025 13:43:10 -0400
Subject: [PATCH] ux: use financial units instead of SI for credits

Instead of K, M, G, T, P it's K, M, B, T, Q.
---
 src/gui/src/UI/Settings/UITabUsage.js |  8 ++++----
 src/gui/src/helpers.js                | 21 +++++++++++++++++++--
 2 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/src/gui/src/UI/Settings/UITabUsage.js b/src/gui/src/UI/Settings/UITabUsage.js
index eb38d85c9..d19363b71 100644
--- a/src/gui/src/UI/Settings/UITabUsage.js
+++ b/src/gui/src/UI/Settings/UITabUsage.js
@@ -88,8 +88,8 @@ export default {
                             <h3 style="margin-bottom: 5px; font-size: 14px;">${html_encode(name)}:</h3>
                             <span style="font-size: 13px; margin-bottom: 3px;">${i18n('used_of', {
                                 ...entry,
-                                used: window.format_SI(entry.used),
-                                available: window.format_SI(entry.available),
+                                used: window.format_credits(entry.used),
+                                available: window.format_credits(entry.available),
                             })}</span>
                             <div class="usage-progbar-wrapper" style="width: 100%;">
                                 <div class="usage-progbar" style="width: ${Number(entry.usage_percentage)}%;"><span class="usage-progbar-percent">${Number(entry.usage_percentage)}%</span></div>
@@ -116,8 +116,8 @@ export default {
                         .innerText = '' + Number(event.usage_percentage) + '%';
                     const used_of_str = i18n('used_of', {
                         ...event,
-                        used: window.format_SI(event.used),
-                        available: window.format_SI(event.available),
+                        used: window.format_credits(event.used),
+                        available: window.format_credits(event.available),
                     });
                     el_divContent
                         .querySelector(`[data-id=${sanitize_id(event.id)}] > span`)
diff --git a/src/gui/src/helpers.js b/src/gui/src/helpers.js
index 4eff77b75..b10ec769c 100644
--- a/src/gui/src/helpers.js
+++ b/src/gui/src/helpers.js
@@ -2730,7 +2730,7 @@ window.get_profile_picture = async function(username){
     return icon;
 }
 
-window.format_SI = (num) => {
+window.format_with_units = (num, { mulUnits, divUnits, precision = 3 }) => {
   if ( num === 0 ) return "0";
 
   const mulUnits = ["", "K", "M", "G", "T", "P", "E", "Z", "Y"];
@@ -2749,7 +2749,24 @@ window.format_SI = (num) => {
   }
 
   const scaled = num / Math.pow(10, exp * 3);
-  const rounded = Number.parseFloat(scaled.toPrecision(3));
+  const rounded = Number.parseFloat(scaled.toPrecision(precision));
 
   return `${rounded}${symbol}`;
 };
+
+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"];
+  
+  return window.format_with_units(num, { mulUnits, divUnits });
+};
+
+window.format_credits = (num) => {
+  if ( num === 0 ) return "0";
+  
+  const mulUnits = ["", "K", "M", "B", "T", "Q"];
+
+  return window.format_with_units(num, { mulUnits })
+};