Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 | 24x 24x 24x 22x 12x 7x 11x | import { useMemo } from 'react';
import { formatCurrency, formatPercentage } from '../utils/formatUtils';
/**
* Options for metric formatting
*/
export interface MetricFormattingOptions {
/**
* Locale string for regional formatting (e.g., 'en-US', 'sv-SE')
*/
locale?: string;
/**
* Currency code (e.g., 'USD', 'EUR', 'SEK')
*/
currency?: string;
}
/**
* Formatted metric functions
*/
export interface MetricFormatters {
/**
* Format a number as currency
* @param value - Numeric value to format
* @returns Formatted currency string
*/
currency: (value: number) => string;
/**
* Format a decimal as percentage
* @param value - Decimal value (0-1 range) to format
* @param decimalPlaces - Number of decimal places (default: 0)
* @returns Formatted percentage string
*/
percentage: (value: number, decimalPlaces?: number) => string;
/**
* Format a number with locale-specific formatting
* @param value - Number to format
* @returns Formatted number string
*/
number: (value: number) => string;
}
/**
* Custom hook providing memoized formatting functions for metrics
*
* ## Business Perspective
*
* This hook provides consistent metric formatting across all widgets,
* ensuring that financial data, percentages, and numbers are displayed
* uniformly. This improves comprehension and professionalism in security
* reports and dashboards presented to stakeholders. 📊
*
* The memoization ensures efficient rendering when formatting large
* datasets or when components re-render frequently.
*
* @param options - Formatting options (locale, currency)
* @returns Memoized formatting functions for common metric types
*
* @example
* ```typescript
* // Use default locale and currency (en-US, USD)
* const { currency, percentage, number } = useFormattedMetrics();
*
* console.log(currency(50000)); // "$50,000"
* console.log(percentage(0.95)); // "95%"
* console.log(number(1234567)); // "1,234,567"
*
* // Use custom locale and currency
* const formatters = useFormattedMetrics({
* locale: 'sv-SE',
* currency: 'SEK'
* });
* console.log(formatters.currency(50000)); // "50 000 kr"
* ```
*/
export function useFormattedMetrics(
options?: MetricFormattingOptions
): MetricFormatters {
const locale = options?.locale ?? 'en-US';
const currency = options?.currency ?? 'USD';
return useMemo(
() => ({
currency: (value: number) => formatCurrency(value, { locale, currency }),
percentage: (value: number, decimalPlaces = 0) =>
formatPercentage(value, decimalPlaces),
number: (value: number) => value.toLocaleString(locale),
}),
[locale, currency]
);
}
|