De-duplicate conflicting formatNumber implementations

src/components/visualization/DataExplorationTools.tsx

@@ -15,7 +15,7 @@ import {
   calculateStatistics,
   exportToCSV,
   exportToJSON,
-  formatNumber,
+  formatNumberCompact,
 } from '@/utils/visualizationUtils';
 import {
   Filter,
@@ -190,7 +190,7 @@ export const DataExplorationTools: React.FC<DataExplorationToolsProps> = ({
               <span className="text-xs text-gray-600 dark:text-gray-400">Mean</span>
             </div>
             <div className="text-xl font-bold text-gray-900 dark:text-white">
-              {formatNumber(statistics.mean)}
+              {formatNumberCompact(statistics.mean)}
             </div>
           </div>
 
@@ -200,7 +200,7 @@ export const DataExplorationTools: React.FC<DataExplorationToolsProps> = ({
               <span className="text-xs text-gray-600 dark:text-gray-400">Median</span>
             </div>
             <div className="text-xl font-bold text-gray-900 dark:text-white">
-              {formatNumber(statistics.median)}
+              {formatNumberCompact(statistics.median)}
             </div>
           </div>
 
@@ -210,7 +210,7 @@ export const DataExplorationTools: React.FC<DataExplorationToolsProps> = ({
               <span className="text-xs text-gray-600 dark:text-gray-400">Mode</span>
             </div>
             <div className="text-xl font-bold text-gray-900 dark:text-white">
-              {formatNumber(statistics.mode)}
+              {formatNumberCompact(statistics.mode)}
             </div>
           </div>
 
@@ -220,7 +220,7 @@ export const DataExplorationTools: React.FC<DataExplorationToolsProps> = ({
               <span className="text-xs text-gray-600 dark:text-gray-400">Max</span>
             </div>
             <div className="text-xl font-bold text-gray-900 dark:text-white">
-              {formatNumber(statistics.max)}
+              {formatNumberCompact(statistics.max)}
             </div>
           </div>
 
@@ -230,7 +230,7 @@ export const DataExplorationTools: React.FC<DataExplorationToolsProps> = ({
               <span className="text-xs text-gray-600 dark:text-gray-400">Min</span>
             </div>
             <div className="text-xl font-bold text-gray-900 dark:text-white">
-              {formatNumber(statistics.min)}
+              {formatNumberCompact(statistics.min)}
             </div>
           </div>
 
@@ -240,7 +240,7 @@ export const DataExplorationTools: React.FC<DataExplorationToolsProps> = ({
               <span className="text-xs text-gray-600 dark:text-gray-400">Std Dev</span>
             </div>
             <div className="text-xl font-bold text-gray-900 dark:text-white">
-              {formatNumber(statistics.stdDev)}
+              {formatNumberCompact(statistics.stdDev)}
             </div>
           </div>
         </div>
@@ -283,7 +283,7 @@ export const DataExplorationTools: React.FC<DataExplorationToolsProps> = ({
                     key={datasetIndex}
                     className="text-right py-2 px-4 text-gray-900 dark:text-white"
                   >
-                    {formatNumber(dataset.data[index])}
+                    {formatNumberCompact(dataset.data[index])}
                   </td>
                 ))}
               </tr>

src/components/visualization/QUICK_START.md

@@ -170,11 +170,15 @@ All components automatically support dark mode through Tailwind CSS.
 ### Format Numbers
 
 ```tsx
-import { formatNumber, formatPercentage } from '@/utils/visualizationUtils';
+import { formatNumberCompact, formatPercentage } from '@/utils/visualizationUtils';
 
-formatNumber(1500); // "1.5K"
-formatNumber(1500000); // "1.5M"
+formatNumberCompact(1500); // "1.5K"
+formatNumberCompact(1500000); // "1.5M"
 formatPercentage(45.67); // "45.7%"
+
+// For locale-aware formatting, use i18nUtils.formatNumber
+import { formatNumber } from '@/utils/i18nUtils';
+formatNumber(1500, 'en-US'); // "1,500"
 ```
 
 ### Calculate Statistics

src/components/visualization/README.md

@@ -228,7 +228,7 @@ Helper functions for data transformation and formatting.
 
 ```tsx
 import {
-  formatNumber,
+  formatNumberCompact,
   formatPercentage,
   generateDateLabels,
   aggregateByTimePeriod,
@@ -241,9 +241,13 @@ import {
   generateSampleData,
 } from '@/utils/visualizationUtils';
 
-// Format numbers
-formatNumber(1500); // "1.5K"
-formatNumber(1500000); // "1.5M"
+// Format numbers with compact suffix (K, M, B)
+formatNumberCompact(1500); // "1.5K"
+formatNumberCompact(1500000); // "1.5M"
+
+// For locale-aware formatting, use i18nUtils.formatNumber
+import { formatNumber } from '@/utils/i18nUtils';
+formatNumber(1500, 'en-US'); // "1,500"
 
 // Format percentages
 formatPercentage(45.678); // "45.7%"

src/utils/__tests__/visualizationUtils.test.ts

@@ -4,7 +4,7 @@
 
 import { describe, it, expect } from 'vitest';
 import {
-  formatNumber,
+  formatNumberCompact,
   formatPercentage,
   generateDateLabels,
   calculateMovingAverage,
@@ -15,24 +15,24 @@ import {
 } from '../visualizationUtils';
 
 describe('visualizationUtils', () => {
-  describe('formatNumber', () => {
+  describe('formatNumberCompact', () => {
     it('should format numbers with K suffix', () => {
-      expect(formatNumber(1500)).toBe('1.5K');
-      expect(formatNumber(999)).toBe('999');
+      expect(formatNumberCompact(1500)).toBe('1.5K');
+      expect(formatNumberCompact(999)).toBe('999');
     });
 
     it('should format numbers with M suffix', () => {
-      expect(formatNumber(1500000)).toBe('1.5M');
-      expect(formatNumber(2300000)).toBe('2.3M');
+      expect(formatNumberCompact(1500000)).toBe('1.5M');
+      expect(formatNumberCompact(2300000)).toBe('2.3M');
     });
 
     it('should format numbers with B suffix', () => {
-      expect(formatNumber(1500000000)).toBe('1.5B');
-      expect(formatNumber(3200000000)).toBe('3.2B');
+      expect(formatNumberCompact(1500000000)).toBe('1.5B');
+      expect(formatNumberCompact(3200000000)).toBe('3.2B');
     });
 
     it('should handle zero', () => {
-      expect(formatNumber(0)).toBe('0');
+      expect(formatNumberCompact(0)).toBe('0');
     });
   });
 

src/utils/chartUtils.ts

@@ -10,6 +10,7 @@ import {
   AggregationType,
   generateDateLabels,
   generateSampleData,
+  formatNumberCompact,
 } from '@/utils/visualizationUtils';
 import { getNumberFormat } from './intlCache';
 
@@ -118,9 +119,7 @@ export const formatDashboardMetric = (
       return `${value.toFixed(1)}%`;
     case 'count':
     default:
-      if (value >= 1_000_000) return `${(value / 1_000_000).toFixed(1)}M`;
-      if (value >= 1_000) return `${(value / 1_000).toFixed(1)}K`;
-      return String(Math.round(value));
+      return formatNumberCompact(value);
   }
 };
 

src/utils/visualizationUtils.ts

@@ -67,9 +67,17 @@ export const CHART_COLOR_PALETTE = [
 ];
 
 /**
- * Format number with appropriate suffix (K, M, B)
+ * Format number with appropriate suffix (K, M, B) for compact display
+ * @deprecated Use formatNumberCompact for clarity, or i18nUtils.formatNumber for locale-aware formatting
  */
 export const formatNumber = (num: number): string => {
+  return formatNumberCompact(num);
+};
+
+/**
+ * Format number with appropriate suffix (K, M, B) for compact display
+ */
+export const formatNumberCompact = (num: number): string => {
   if (num >= 1000000000) {
     return (num / 1000000000).toFixed(1) + 'B';
   }