mongodb-js · jcobis · Oct 1, 2025 · Oct 1, 2025 · Oct 1, 2025 · Oct 2, 2025
@@ -68,7 +68,6 @@
     "mongodb-collection-model": "^5.35.3",
     "mongodb-ns": "^3.0.1",
     "mongodb-schema": "^12.6.3",
-    "numeral": "^2.0.6",
     "react": "^17.0.2",
     "react-redux": "^8.1.3",
     "redux": "^4.2.1",

@@ -1,5 +1,6 @@
 import {
   Body,
+  compactBytes,
   css,
   palette,
   spacing,
@@ -9,7 +10,6 @@ import React, { useMemo } from 'react';
 import { connect } from 'react-redux';
 import type { CollectionState } from '../../modules/collection-tab';
 import type { SchemaAnalysisState } from '../../schema-analysis-types';
-import numeral from 'numeral';
 import { DEFAULT_DOCUMENT_COUNT, MAX_DOCUMENT_COUNT } from './constants';
 
 const BYTE_PRECISION_THRESHOLD = 1000;
@@ -40,8 +40,8 @@ const boldStyles = css({
 });
 
 const formatBytes = (bytes: number) => {
-  const precision = bytes <= BYTE_PRECISION_THRESHOLD ? '0' : '0.0';
-  return numeral(bytes).format(precision + 'b');
+  const decimals = bytes <= BYTE_PRECISION_THRESHOLD ? 0 : 1;
+  return compactBytes(bytes, true, decimals);
 };
 
 type ErrorState =
@@ -101,7 +101,7 @@ const DocumentCountScreen = ({
     }
   };
 
-  return schemaAnalysisState.status === 'complete' ? (
+  return (
     <div>
       <Body className={titleStyles}>
         Specify Number of Documents to Generate
@@ -130,9 +130,6 @@ const DocumentCountScreen = ({
         </div>
       </div>
     </div>
-  ) : (
-    // Not reachable since schema analysis must be finished before the modal can be opened
-    <div>We are analyzing your collection.</div>
   );
 };
 

@@ -811,10 +811,10 @@ describe('MockDataGeneratorModal', () => {
       );
       userEvent.clear(documentCountInput);
       userEvent.type(documentCountInput, '1000');
-      expect(screen.getByText('100.0KB')).to.exist;
+      expect(screen.getByText('100.0 kB')).to.exist;
       userEvent.clear(documentCountInput);
       userEvent.type(documentCountInput, '2000');
-      expect(screen.getByText('200.0KB')).to.exist;
+      expect(screen.getByText('200.0 kB')).to.exist;
     });
   });
 

@@ -218,6 +218,7 @@ export {
 } from './components/links/link';
 export { ChevronCollapse } from './components/chevron-collapse-icon';
 export { formatDate } from './utils/format-date';
+export { compactBytes, compactNumber } from './utils/format';
 export {
   VirtualList,
   type VirtualListRef,

@@ -0,0 +1,46 @@
+/**
+ * Format bytes into a human-readable string with appropriate units.
+ *
+ * @param bytes - The number of bytes to format
+ * @param si - Use SI units (1000-based) if true, binary units (1024-based) if false
+ * @param decimals - Number of decimal places to show
+ * @returns Formatted string with units (e.g., "1.5 MB", "2.0 KiB", "-1.5 MB")
+ */
+export function compactBytes(bytes: number, si = true, decimals = 2): string {
+  const isNegative = bytes < 0;
+  const absBytes = Math.abs(bytes);
+
+  if (absBytes === 0) {
+    return '0 B';
+  }
+
+  const threshold = si ? 1000 : 1024;
+  const units = si
+    ? ['B', 'kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
+    : ['B', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
+  let i = Math.floor(Math.log(absBytes) / Math.log(threshold));
+  if (i >= units.length) {
+    i = units.length - 1;
+  }
+  const num = absBytes / Math.pow(threshold, i);
+  return `${isNegative ? '-' : ''}${num.toFixed(decimals)} ${units[i]}`;
+}
+
+/**
+ * Format a number into a compact notation with appropriate suffix.
+ *
+ * @param number - The number to format
+ * @returns Formatted string with compact notation (e.g., "1.5 K", "2 M")
+ */
+export function compactNumber(number: number): string {
+  return new Intl.NumberFormat('en', {
+    notation: 'compact',
+  })
+    .formatToParts(number)
+    .reduce((acc, part) => {
+      if (part.type === 'compact') {
+        return `${acc} ${part.value}`;
+      }
+      return `${acc}${part.value}`;
+    }, '');
+}
@@ -98,7 +98,6 @@
     "mongodb-data-service": "^22.34.3",
     "mongodb-ns": "^3.0.1",
     "mongodb-query-parser": "^4.3.0",
-    "numeral": "^2.0.6",
     "react": "^17.0.2",
     "reflux": "^0.4.1",
     "semver": "^7.6.3"

@@ -1,6 +1,12 @@
 import React, { useMemo } from 'react';
-import numeral from 'numeral';
-import { css, Tooltip, Badge, spacing } from '@mongodb-js/compass-components';
+import {
+  css,
+  Tooltip,
+  Badge,
+  spacing,
+  compactBytes,
+  compactNumber,
+} from '@mongodb-js/compass-components';
 import type { CrudStore } from './stores/crud-store';
 import { usePreference } from 'compass-preferences-model/provider';
 
@@ -22,12 +28,14 @@ const isNumber = (val: any): val is number => {
   return typeof val === 'number' && !isNaN(val);
 };
 
-const format = (value: any, format = 'a') => {
+const format = (value: any, formatType: 'number' | 'bytes' = 'number') => {
   if (!isNumber(value)) {
     return INVALID;
   }
-  const precision = value <= 1000 ? '0' : '0.0';
-  return numeral(value).format(precision + format);
+  const decimals = value <= 1000 ? 0 : 1;
+  return formatType === 'bytes'
+    ? compactBytes(value, true, decimals)
+    : compactNumber(value);
 };
 
 type CollectionStatsProps = {
@@ -84,9 +92,9 @@ export const CrudTabTitle = ({
       avg_document_size = NaN,
     } = collectionStats ?? {};
     return {
-      documentCount: format(document_count),
-      storageSize: format(storage_size - free_storage_size, 'b'),
-      avgDocumentSize: format(avg_document_size, 'b'),
+      documentCount: format(document_count, 'number'),
+      storageSize: format(storage_size - free_storage_size, 'bytes'),
+      avgDocumentSize: format(avg_document_size, 'bytes'),
     };
   }, [collectionStats]);
   const enableDbAndCollStats = usePreference('enableDbAndCollStats');

@@ -53,7 +53,6 @@
     "@mongodb-js/prettier-config-compass": "^1.2.9",
     "@mongodb-js/testing-library-compass": "^1.3.17",
     "@mongodb-js/tsconfig-compass": "^1.2.12",
-    "@types/numeral": "^2.0.5",
     "chai": "^4.2.0",
     "depcheck": "^1.4.1",
     "electron": "^37.6.1",
@@ -88,7 +87,6 @@
     "mongodb-mql-engines": "^0.0.4",
     "mongodb-ns": "^3.0.1",
     "mongodb-query-parser": "^4.3.0",
-    "numeral": "^2.0.6",
     "react": "^17.0.2",
     "react-redux": "^8.1.3",
     "redux": "^4.2.1",

@@ -17,8 +17,8 @@ describe('SizeField', function () {
   describe('SizeField functions', function () {
     it('formats size', function () {
       expect(formatSize(908)).to.equal('908 B');
-      expect(formatSize(2020)).to.equal('2.0 KB');
-      expect(formatSize(202020)).to.equal('202.0 KB');
+      expect(formatSize(2020)).to.equal('2.0 kB');
+      expect(formatSize(202020)).to.equal('202.0 kB');
     });
 
     it('returns correct tooltip', function () {

@@ -1,15 +1,14 @@
-import numeral from 'numeral';
 import React from 'react';
-import { Body, Tooltip } from '@mongodb-js/compass-components';
+import { Body, Tooltip, compactBytes } from '@mongodb-js/compass-components';
 
 type SizeFieldProps = {
   size: number;
   relativeSize: number;
 };
 
 export const formatSize = (size: number) => {
-  const precision = size <= 1000 ? '0' : '0.0';
-  return numeral(size).format(precision + ' b');
+  const decimals = size <= 1000 ? 0 : 1;
+  return compactBytes(size, true, decimals);
 };
 
 export const getSizeTooltip = (relativeSize: number): string => {