Skip to content

Commit 808be06

Browse files
Handynfts2Handynfts2
committed
Fix #920: De-duplicate conflicting formatNumber implementations
- Rename visualizationUtils.formatNumber to formatNumberCompact for clarity - Keep formatNumber as deprecated alias for backward compatibility - Update chartUtils.formatDashboardMetric to use formatNumberCompact - Update all imports and usages in DataExplorationTools component - Update tests to use formatNumberCompact - Update documentation (QUICK_START.md and README.md) to use formatNumberCompact - Add documentation notes about locale-aware formatting via i18nUtils.formatNumber This consolidates the three different formatNumber implementations: - visualizationUtils.formatNumberCompact: For compact K/M/B suffixing - i18nUtils.formatNumber: For locale-aware formatting via Intl - chartUtils.formatDashboardMetric: Now uses formatNumberCompact internally
1 parent c44c6d9 commit 808be06

6 files changed

Lines changed: 43 additions & 28 deletions

File tree

‎src/components/visualization/DataExplorationTools.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import {
1515
calculateStatistics,
1616
exportToCSV,
1717
exportToJSON,
18-
formatNumber,
18+
formatNumberCompact,
1919
} from '@/utils/visualizationUtils';
2020
import {
2121
Filter,
@@ -190,7 +190,7 @@ export const DataExplorationTools: React.FC<DataExplorationToolsProps> = ({
190190
<span className="text-xs text-gray-600 dark:text-gray-400">Mean</span>
191191
</div>
192192
<div className="text-xl font-bold text-gray-900 dark:text-white">
193-
{formatNumber(statistics.mean)}
193+
{formatNumberCompact(statistics.mean)}
194194
</div>
195195
</div>
196196

@@ -200,7 +200,7 @@ export const DataExplorationTools: React.FC<DataExplorationToolsProps> = ({
200200
<span className="text-xs text-gray-600 dark:text-gray-400">Median</span>
201201
</div>
202202
<div className="text-xl font-bold text-gray-900 dark:text-white">
203-
{formatNumber(statistics.median)}
203+
{formatNumberCompact(statistics.median)}
204204
</div>
205205
</div>
206206

@@ -210,7 +210,7 @@ export const DataExplorationTools: React.FC<DataExplorationToolsProps> = ({
210210
<span className="text-xs text-gray-600 dark:text-gray-400">Mode</span>
211211
</div>
212212
<div className="text-xl font-bold text-gray-900 dark:text-white">
213-
{formatNumber(statistics.mode)}
213+
{formatNumberCompact(statistics.mode)}
214214
</div>
215215
</div>
216216

@@ -220,7 +220,7 @@ export const DataExplorationTools: React.FC<DataExplorationToolsProps> = ({
220220
<span className="text-xs text-gray-600 dark:text-gray-400">Max</span>
221221
</div>
222222
<div className="text-xl font-bold text-gray-900 dark:text-white">
223-
{formatNumber(statistics.max)}
223+
{formatNumberCompact(statistics.max)}
224224
</div>
225225
</div>
226226

@@ -230,7 +230,7 @@ export const DataExplorationTools: React.FC<DataExplorationToolsProps> = ({
230230
<span className="text-xs text-gray-600 dark:text-gray-400">Min</span>
231231
</div>
232232
<div className="text-xl font-bold text-gray-900 dark:text-white">
233-
{formatNumber(statistics.min)}
233+
{formatNumberCompact(statistics.min)}
234234
</div>
235235
</div>
236236

@@ -240,7 +240,7 @@ export const DataExplorationTools: React.FC<DataExplorationToolsProps> = ({
240240
<span className="text-xs text-gray-600 dark:text-gray-400">Std Dev</span>
241241
</div>
242242
<div className="text-xl font-bold text-gray-900 dark:text-white">
243-
{formatNumber(statistics.stdDev)}
243+
{formatNumberCompact(statistics.stdDev)}
244244
</div>
245245
</div>
246246
</div>
@@ -283,7 +283,7 @@ export const DataExplorationTools: React.FC<DataExplorationToolsProps> = ({
283283
key={datasetIndex}
284284
className="text-right py-2 px-4 text-gray-900 dark:text-white"
285285
>
286-
{formatNumber(dataset.data[index])}
286+
{formatNumberCompact(dataset.data[index])}
287287
</td>
288288
))}
289289
</tr>

‎src/components/visualization/QUICK_START.md‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -170,11 +170,15 @@ All components automatically support dark mode through Tailwind CSS.
170170
### Format Numbers
171171

172172
```tsx
173-
import { formatNumber, formatPercentage } from '@/utils/visualizationUtils';
173+
import { formatNumberCompact, formatPercentage } from '@/utils/visualizationUtils';
174174

175-
formatNumber(1500); // "1.5K"
176-
formatNumber(1500000); // "1.5M"
175+
formatNumberCompact(1500); // "1.5K"
176+
formatNumberCompact(1500000); // "1.5M"
177177
formatPercentage(45.67); // "45.7%"
178+
179+
// For locale-aware formatting, use i18nUtils.formatNumber
180+
import { formatNumber } from '@/utils/i18nUtils';
181+
formatNumber(1500, 'en-US'); // "1,500"
178182
```
179183

180184
### Calculate Statistics

‎src/components/visualization/README.md‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -228,7 +228,7 @@ Helper functions for data transformation and formatting.
228228

229229
```tsx
230230
import {
231-
formatNumber,
231+
formatNumberCompact,
232232
formatPercentage,
233233
generateDateLabels,
234234
aggregateByTimePeriod,
@@ -241,9 +241,13 @@ import {
241241
generateSampleData,
242242
} from '@/utils/visualizationUtils';
243243

244-
// Format numbers
245-
formatNumber(1500); // "1.5K"
246-
formatNumber(1500000); // "1.5M"
244+
// Format numbers with compact suffix (K, M, B)
245+
formatNumberCompact(1500); // "1.5K"
246+
formatNumberCompact(1500000); // "1.5M"
247+
248+
// For locale-aware formatting, use i18nUtils.formatNumber
249+
import { formatNumber } from '@/utils/i18nUtils';
250+
formatNumber(1500, 'en-US'); // "1,500"
247251

248252
// Format percentages
249253
formatPercentage(45.678); // "45.7%"

‎src/utils/__tests__/visualizationUtils.test.ts‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
import { describe, it, expect } from 'vitest';
66
import {
7-
formatNumber,
7+
formatNumberCompact,
88
formatPercentage,
99
generateDateLabels,
1010
calculateMovingAverage,
@@ -15,24 +15,24 @@ import {
1515
} from '../visualizationUtils';
1616

1717
describe('visualizationUtils', () => {
18-
describe('formatNumber', () => {
18+
describe('formatNumberCompact', () => {
1919
it('should format numbers with K suffix', () => {
20-
expect(formatNumber(1500)).toBe('1.5K');
21-
expect(formatNumber(999)).toBe('999');
20+
expect(formatNumberCompact(1500)).toBe('1.5K');
21+
expect(formatNumberCompact(999)).toBe('999');
2222
});
2323

2424
it('should format numbers with M suffix', () => {
25-
expect(formatNumber(1500000)).toBe('1.5M');
26-
expect(formatNumber(2300000)).toBe('2.3M');
25+
expect(formatNumberCompact(1500000)).toBe('1.5M');
26+
expect(formatNumberCompact(2300000)).toBe('2.3M');
2727
});
2828

2929
it('should format numbers with B suffix', () => {
30-
expect(formatNumber(1500000000)).toBe('1.5B');
31-
expect(formatNumber(3200000000)).toBe('3.2B');
30+
expect(formatNumberCompact(1500000000)).toBe('1.5B');
31+
expect(formatNumberCompact(3200000000)).toBe('3.2B');
3232
});
3333

3434
it('should handle zero', () => {
35-
expect(formatNumber(0)).toBe('0');
35+
expect(formatNumberCompact(0)).toBe('0');
3636
});
3737
});
3838

‎src/utils/chartUtils.ts‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import {
1010
AggregationType,
1111
generateDateLabels,
1212
generateSampleData,
13+
formatNumberCompact,
1314
} from '@/utils/visualizationUtils';
1415
import { getNumberFormat } from './intlCache';
1516

@@ -118,9 +119,7 @@ export const formatDashboardMetric = (
118119
return `${value.toFixed(1)}%`;
119120
case 'count':
120121
default:
121-
if (value >= 1_000_000) return `${(value / 1_000_000).toFixed(1)}M`;
122-
if (value >= 1_000) return `${(value / 1_000).toFixed(1)}K`;
123-
return String(Math.round(value));
122+
return formatNumberCompact(value);
124123
}
125124
};
126125

‎src/utils/visualizationUtils.ts‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,9 +67,17 @@ export const CHART_COLOR_PALETTE = [
6767
];
6868

6969
/**
70-
* Format number with appropriate suffix (K, M, B)
70+
* Format number with appropriate suffix (K, M, B) for compact display
71+
* @deprecated Use formatNumberCompact for clarity, or i18nUtils.formatNumber for locale-aware formatting
7172
*/
7273
export const formatNumber = (num: number): string => {
74+
return formatNumberCompact(num);
75+
};
76+
77+
/**
78+
* Format number with appropriate suffix (K, M, B) for compact display
79+
*/
80+
export const formatNumberCompact = (num: number): string => {
7381
if (num >= 1000000000) {
7482
return (num / 1000000000).toFixed(1) + 'B';
7583
}

0 commit comments

Comments
 (0)