From dd98a1316a61b587c8e6340d5bea89dd32a09260 Mon Sep 17 00:00:00 2001
From: IMB11 <hendersoncal117@gmail.com>
Date: Mon, 30 Jun 2025 23:08:05 +0100
Subject: [PATCH] fix: Unsatisfactory rounding of download sums (#3872)

Co-authored-by: Prospector <6166773+Prospector@users.noreply.github.com>
---
 .../src/composables/compact-number.ts         | 32 ++++++++++++-------
 apps/frontend/src/pages/organization/[id].vue |  7 ++--
 apps/frontend/src/pages/user/[id].vue         |  3 +-
 3 files changed, 27 insertions(+), 15 deletions(-)

diff --git a/apps/frontend/src/composables/compact-number.ts b/apps/frontend/src/composables/compact-number.ts
index a09060795..c635a389e 100644
--- a/apps/frontend/src/composables/compact-number.ts
+++ b/apps/frontend/src/composables/compact-number.ts
@@ -1,18 +1,26 @@
-import { createFormatter, type Formatter } from "@vintl/compact-number";
-import type { IntlController } from "@vintl/vintl/controller";
+const formatters = new WeakMap<object, Intl.NumberFormat>();
 
-const formatters = new WeakMap<IntlController<any>, Formatter>();
+export function useCompactNumber(truncate = false, fractionDigits = 2, locale?: string) {
+  const context = {};
 
-export function useCompactNumber(): Formatter {
-  const vintl = useVIntl();
+  let formatter = formatters.get(context);
 
-  let formatter = formatters.get(vintl);
-
-  if (formatter == null) {
-    const formatterRef = computed(() => createFormatter(vintl.intl));
-    formatter = (value, options) => formatterRef.value(value, options);
-    formatters.set(vintl, formatter);
+  if (!formatter) {
+    formatter = new Intl.NumberFormat(locale, {
+      notation: "compact",
+      maximumFractionDigits: fractionDigits,
+    });
+    formatters.set(context, formatter);
   }
 
-  return formatter;
+  function format(value: number): string {
+    let formattedValue = value;
+    if (truncate) {
+      const scale = Math.pow(10, fractionDigits);
+      formattedValue = Math.floor(value * scale) / scale;
+    }
+    return formatter!.format(formattedValue);
+  }
+
+  return format;
 }
diff --git a/apps/frontend/src/pages/organization/[id].vue b/apps/frontend/src/pages/organization/[id].vue
index 6a93ecd63..901300161 100644
--- a/apps/frontend/src/pages/organization/[id].vue
+++ b/apps/frontend/src/pages/organization/[id].vue
@@ -98,7 +98,10 @@
               {{ formatCompactNumber(projects?.length || 0) }}
               projects
             </div>
-            <div class="flex items-center gap-2 font-semibold">
+            <div
+              v-tooltip="sumDownloads.toLocaleString()"
+              class="flex items-center gap-2 font-semibold"
+            >
               <DownloadIcon class="h-6 w-6 text-secondary" />
               {{ formatCompactNumber(sumDownloads) }}
               downloads
@@ -282,7 +285,7 @@ import NavTabs from "~/components/ui/NavTabs.vue";
 const vintl = useVIntl();
 const { formatMessage } = vintl;
 
-const formatCompactNumber = useCompactNumber();
+const formatCompactNumber = useCompactNumber(true);
 
 const auth = await useAuth();
 const user = await useUser();
diff --git a/apps/frontend/src/pages/user/[id].vue b/apps/frontend/src/pages/user/[id].vue
index 9e08f6da4..8e6b031aa 100644
--- a/apps/frontend/src/pages/user/[id].vue
+++ b/apps/frontend/src/pages/user/[id].vue
@@ -80,6 +80,7 @@
               projects
             </div>
             <div
+              v-tooltip="sumDownloads.toLocaleString()"
               class="flex items-center gap-2 border-0 border-r border-solid border-divider pr-4 font-semibold"
             >
               <DownloadIcon class="h-6 w-6 text-secondary" />
@@ -389,7 +390,7 @@ const config = useRuntimeConfig();
 const vintl = useVIntl();
 const { formatMessage } = vintl;
 
-const formatCompactNumber = useCompactNumber();
+const formatCompactNumber = useCompactNumber(true);
 
 const formatRelativeTime = useRelativeTime();