Extensive value formatting system supporting units, localization, custom formatters, and display processing for presenting data values in user-friendly formats.
Primary functions for value formatting and display processing.
/**
* Gets value formatter by format ID
* @param id - Format identifier (e.g., "bytes", "percent", "short")
* @returns Value formatter function
*/
function getValueFormat(id: string): ValueFormatter;
/**
* Gets index of all available value formatters
* @returns Object mapping format IDs to formatter functions
*/
function getValueFormatterIndex(): ValueFormatterIndex;
/**
* Gets all available value formats organized by category
* @returns Array of value format categories
*/
function getValueFormats(): ValueFormatCategory[];
/**
* Converts formatted value to string representation
* @param value - Formatted value object
* @returns String representation of the formatted value
*/
function formattedValueToString(value: FormattedValue): string;Usage Examples:
import { getValueFormat, formattedValueToString } from "@grafana/data";
// Format bytes
const bytesFormatter = getValueFormat("bytes");
const formatted = bytesFormatter(1024000, 2);
console.log(formatted.text); // "1.02 MB"
// Format percentage
const percentFormatter = getValueFormat("percent");
const percentage = percentFormatter(0.8567, 1);
console.log(percentage.text); // "85.7%"
// Convert formatted value to string
const stringValue = formattedValueToString(formatted);Functions for precise decimal formatting and fixed-point representation.
/**
* Formats number to fixed decimal places
* @param value - Number to format
* @param decimals - Number of decimal places
* @returns Formatted string with fixed decimals
*/
function toFixed(value: number, decimals?: number): string;
/**
* Formats number with scaling and fixed decimals
* @param value - Number to format
* @param decimals - Number of decimal places
* @param scaledDecimals - Scaled decimal places
* @param additionalDecimals - Additional decimal places
* @param ext - Extension info for units
* @returns Formatted string with scaling
*/
function toFixedScaled(
value: number,
decimals?: number,
scaledDecimals?: number,
additionalDecimals?: number,
ext?: string
): string;
/**
* Formats number with unit as fixed decimal
* @param unit - Unit string
* @param decimals - Number of decimal places
* @returns Formatter function for the unit
*/
function toFixedUnit(unit: string, decimals?: number): ValueFormatter;Specialized formatters for different unit types and scales.
/**
* Checks if unit represents boolean values
* @param unit - Unit string to check
* @returns True if unit is boolean type
*/
function isBooleanUnit(unit: string): boolean;
/**
* Creates boolean value formatter
* @param t - Text for true value
* @param f - Text for false value
* @returns Boolean formatter function
*/
function booleanValueFormatter(t: string, f: string): ValueFormatter;
/**
* Creates scaled units formatter
* @param factor - Scaling factor
* @param extArray - Array of unit extensions
* @returns Scaled units formatter
*/
function scaledUnits(factor: number, extArray: string[]): ValueFormatter;
/**
* Creates simple count unit formatter
* @param symbol - Unit symbol
* @returns Count formatter function
*/
function simpleCountUnit(symbol: string): ValueFormatter;
/**
* String formatter that passes values through unchanged
* @param value - Value to format
* @returns Formatted value with string representation
*/
function stringFormater(value: any): FormattedValue;Locale settings and internationalization support.
/**
* Locale configuration object
* Controls decimal separators, thousand separators, and number formatting
*/
const locale: {
/** Decimal separator character */
decimal: string;
/** Thousands separator character */
thousands: string;
/** Number grouping configuration */
grouping: number[];
/** Currency symbol */
currency: string[];
};/**
* Value formatter function type
*/
type ValueFormatter = (value: number, decimals?: number, scaledDecimals?: number, isUtc?: boolean) => FormattedValue;
/**
* Value formatter index mapping IDs to formatters
*/
type ValueFormatterIndex = { [id: string]: ValueFormatter };
/**
* Formatted value result
*/
interface FormattedValue {
/** Formatted text representation */
text: string;
/** Original numeric value */
numeric: number;
/** Optional prefix (e.g., currency symbol) */
prefix?: string;
/** Optional suffix (e.g., unit symbol) */
suffix?: string;
}
/**
* Value format definition
*/
interface ValueFormat {
/** Format name */
name: string;
/** Format ID */
id: string;
/** Format function */
fn: ValueFormatter;
/** Submenu formats (for hierarchical organization) */
submenu?: ValueFormat[];
}
/**
* Value format category
*/
interface ValueFormatCategory {
/** Category name */
name: string;
/** Formats in this category */
formats: ValueFormat[];
}The value formatting system includes numerous built-in format categories:
Usage Examples for Built-in Formats:
import { getValueFormat } from "@grafana/data";
// Data formatting
const bytesFormatter = getValueFormat("bytes");
console.log(bytesFormatter(1048576).text); // "1.05 MB"
// Percentage formatting
const percentFormatter = getValueFormat("percent");
console.log(percentFormatter(0.8567, 1).text); // "85.7%"
// Time formatting
const timeFormatter = getValueFormat("ms");
console.log(timeFormatter(1500).text); // "1.50 s"
// Currency formatting
const currencyFormatter = getValueFormat("currencyUSD");
console.log(currencyFormatter(1234.56, 2).text); // "$1.23K"
// Short number formatting
const shortFormatter = getValueFormat("short");
console.log(shortFormatter(1500000).text); // "1.50M"