or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

data-transformations.mddataframe-operations.mddatetime-operations.mdevent-system.mdfield-processing.mdindex.mdplugin-system.mdtheme-system.mdutility-functions.mdvalue-formatting.md
tile.json

value-formatting.mddocs/

Value Formatting

Extensive value formatting system supporting units, localization, custom formatters, and display processing for presenting data values in user-friendly formats.

Capabilities

Core Formatting Functions

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);

Decimal Formatting

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;

Unit-Specific Formatters

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 Configuration

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[];
};

Type Definitions

/**
 * 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[];
}

Built-in Format Categories

The value formatting system includes numerous built-in format categories:

Data & Storage

  • bytes: Bytes formatting (B, KB, MB, GB, TB, PB)
  • bits: Bits formatting (b, Kb, Mb, Gb, Tb, Pb)
  • kbytes: Kilobytes base formatting
  • mbytes: Megabytes base formatting

Data Rate

  • binBps: Binary bytes per second (B/s, KiB/s, MiB/s, GiB/s)
  • binbps: Binary bits per second (b/s, Kib/s, Mib/s, Gib/s)
  • Bps: Decimal bytes per second (B/s, KB/s, MB/s, GB/s)
  • bps: Decimal bits per second (b/s, Kb/s, Mb/s, Gb/s)

Numbers

  • short: Short number format (K, M, B, T)
  • percent: Percentage formatting (0-100%)
  • percentunit: Percentage from unit (0-1 to 0-100%)
  • decbytes: Decimal bytes (1000-based scaling)
  • deckbytes: Decimal kilobytes
  • decmbytes: Decimal megabytes

Time

  • hertz: Frequency formatting (Hz, KHz, MHz, GHz)
  • ns: Nanoseconds
  • µs: Microseconds
  • ms: Milliseconds
  • s: Seconds
  • m: Minutes
  • h: Hours
  • d: Days

Throughput

  • ops: Operations per second
  • rps: Requests per second
  • wps: Writes per second
  • iops: Input/output operations per second
  • cps: Counts per second

Currency

  • currencyUSD: US Dollars ($)
  • currencyGBP: British Pounds (£)
  • currencyEUR: Euros (€)
  • currencyJPY: Japanese Yen (¥)

Energy

  • watt: Watts (W, kW, MW, GW)
  • kwatt: Kilowatts
  • watth: Watt-hours (Wh, kWh, MWh, GWh)
  • kwatth: Kilowatt-hours
  • joule: Joules (J, kJ, MJ, GJ)
  • ev: Electron volts (eV, keV, MeV, GeV)
  • amp: Amperes (A, kA, MA, GA)
  • volt: Volts (V, kV, MV, GV)
  • ohm: Ohms (Ω, kΩ, MΩ, GΩ)

Mass

  • gram: Grams (g, kg, Mg, Gg)
  • kg: Kilograms
  • lb: Pounds
  • oz: Ounces

Length

  • lengthm: Meters (m, km, Mm, Gm)
  • lengthkm: Kilometers
  • lengthmi: Miles
  • lengthft: Feet
  • lengthin: Inches

Velocity

  • velocityms: Meters per second (m/s)
  • velocitykmh: Kilometers per hour (km/h)
  • velocitymph: Miles per hour (mph)
  • velocityknot: Knots

Volume

  • litre: Liters (L, kL, ML, GL)
  • m3: Cubic meters
  • ft3: Cubic feet
  • gal: Gallons

Area

  • aream2: Square meters (m², km², Mm², Gm²)
  • areakm2: Square kilometers
  • areami2: Square miles
  • areaft2: Square feet
  • areaha: Hectares

Temperature

  • celsius: Celsius (°C)
  • farenheit: Fahrenheit (°F)
  • kelvin: Kelvin (K)

Pressure

  • pressurembar: Millibars (mbar)
  • pressurebar: Bars (bar)
  • pressurekbar: Kilobars (kbar)
  • pressurepa: Pascals (Pa, kPa, MPa, GPa)
  • pressurehpa: Hectopascals (hPa)
  • pressurepsi: PSI

Boolean

  • bool: Boolean (true/false)
  • bool01: Boolean (0/1)
  • boolonoff: Boolean (on/off)
  • boolyesno: Boolean (yes/no)

Locale Formatting

  • locale: Locale-specific number formatting
  • none: No formatting (raw value)

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"