Improve rounding and formatting with package data

Replace bankersRound with appropriate rounding methods Add formatFileSize for formatting file sizes correctly refs #887
thunderstore-io · Nov 7, 2023 · 7808de7 · 7808de7
1 parent e759628
commit 7808de7
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 20 deletions.
diff --git a/packages/cyberstorm/src/components/Layout/PackageDetailLayout/PackageDetailLayout.tsx b/packages/cyberstorm/src/components/Layout/PackageDetailLayout/PackageDetailLayout.tsx
@@ -28,7 +28,7 @@ import {
 import { faUsers } from "@fortawesome/pro-regular-svg-icons";
 import { PackageDependencyList } from "./PackageDependencyList/PackageDependencyList";
 import { CopyButton } from "../../CopyButton/CopyButton";
-import { bankersRound, formatInteger } from "../../../utils/utils";
+import { formatFileSize, formatInteger } from "../../../utils/utils";
 import { useState } from "react";
 import { Tabs } from "../../Tabs/Tabs";
 import { PackageChangeLog } from "./PackageChangeLog/PackageChangeLog";
@@ -309,7 +309,7 @@ function getMetaInfoData(packageData: Package) {
     {
       key: "5",
       label: "Size",
-      content: <>{`${bankersRound(packageData.size / 1000, 1)} MB`}</>,
+      content: <>{formatFileSize(packageData.size)}</>,
     },
     {
       key: "6",

diff --git a/...es/cyberstorm/src/components/Layout/PackageDetailLayout/PackageTagList/PackageTagList.tsx b/...es/cyberstorm/src/components/Layout/PackageDetailLayout/PackageTagList/PackageTagList.tsx
@@ -10,7 +10,6 @@ import {
   faLips,
   faSparkles,
 } from "@fortawesome/pro-solid-svg-icons";
-import { bankersRound } from "../../../../utils/utils";
 import { ReactNode } from "react";
 
 export interface PackageTagListProps {
@@ -36,9 +35,8 @@ export function PackageTagList(props: PackageTagListProps) {
 PackageTagList.displayName = "PackageTagList";
 
 function getPackageFlags(packageData: Package) {
-  const updateTimeDelta = bankersRound(
-    (Date.now() - Date.parse(packageData.lastUpdated)) / 86400000,
-    0
+  const updateTimeDelta = Math.round(
+    (Date.now() - Date.parse(packageData.lastUpdated)) / 86400000
   );
   const isNew = updateTimeDelta < 3;
   if (

diff --git a/packages/cyberstorm/src/components/PackageCard/PackageCard.tsx b/packages/cyberstorm/src/components/PackageCard/PackageCard.tsx
@@ -10,7 +10,7 @@ import {
   faWarning,
 } from "@fortawesome/free-solid-svg-icons";
 import { Tag } from "../Tag/Tag";
-import { bankersRound, classnames, formatInteger } from "../../utils/utils";
+import { classnames, formatInteger } from "../../utils/utils";
 import { PackagePreview } from "@thunderstore/dapper/types";
 import { PackageLink, UserLink } from "../Links/Links";
 import { faLips, faSparkles } from "@fortawesome/pro-solid-svg-icons";
@@ -101,9 +101,8 @@ const getStyle = (scheme: PackageCardProps["colorScheme"] = "default") => {
 };
 
 function getPackageFlags(packageData: PackagePreview) {
-  const updateTimeDelta = bankersRound(
-    (Date.now() - Date.parse(packageData.lastUpdated)) / 86400000,
-    0
+  const updateTimeDelta = Math.round(
+    (Date.now() - Date.parse(packageData.lastUpdated)) / 86400000
   );
   const isNew = updateTimeDelta < 3;
   if (
@@ -159,9 +158,8 @@ function getPackageFlags(packageData: PackagePreview) {
 }
 
 function getMetaItemList(packageData: PackagePreview) {
-  const updateTimeDelta = bankersRound(
-    (Date.now() - Date.parse(packageData.lastUpdated)) / 86400000,
-    0
+  const updateTimeDelta = Math.round(
+    (Date.now() - Date.parse(packageData.lastUpdated)) / 86400000
   );
   return (
     <div className={styles.metaItemWrapper}>

diff --git a/packages/cyberstorm/src/utils/utils.ts b/packages/cyberstorm/src/utils/utils.ts
@@ -7,15 +7,24 @@ export const formatInteger = (inputNumber: number) => {
   return Intl.NumberFormat("en", { notation: "compact" }).format(inputNumber);
 };
 
+export const formatFileSize = (bytes: number) => {
+  // NumberFormat with byte unit type, renders GBs as BBs "Billion bytes", so correct that mistake here.
+  if (bytes > 999999999 && bytes < 1000000000000) {
+    return `${(bytes / 1000000000).toLocaleString(undefined, {
+      minimumFractionDigits: 1,
+      maximumFractionDigits: 1,
+    })} GB`;
+  }
+  return Intl.NumberFormat("en", {
+    notation: "compact",
+    style: "unit",
+    unit: "byte",
+    unitDisplay: "narrow",
+  }).format(bytes);
+};
+
 export const classnames = (
   ...classnames: (string | null | undefined)[]
 ): string => {
   return classnames.filter(String).join(" ");
 };
-
-export const bankersRound = (n: number, d = 2) => {
-  const x = n * Math.pow(10, d);
-  const r = Math.round(x);
-  const br = Math.abs(x) % 1 === 0.5 ? (r % 2 === 0 ? r : r - 1) : r;
-  return br / Math.pow(10, d);
-};