Principle:Langgenius Dify UIPresentation
| Knowledge Sources | Dify |
|---|---|
| Domains | Frontend, UI |
| Last Updated | 2026-02-12 07:00 GMT |
Overview
Dify provides a centralized set of presentation formatting utilities for numbers, file sizes, time durations, and dates, ensuring consistent data display across all frontend surfaces.
Description
The utils/format.ts module serves as Dify's formatting hub for transforming raw numeric and temporal data into human-readable strings. The formatNumber function adds comma separators to numbers while correctly handling decimal places, scientific notation for very small numbers (e.g., 0.0000008), and string-to-number coercion. The formatFileSize function converts byte counts into readable units (bytes, KB, MB, GB, TB, PB) using progressive division by 1024. The formatTime function similarly converts seconds into minutes or hours.
For large-scale metrics, formatNumberAbbreviated produces compact representations with magnitude suffixes (k, M, B), including logic to promote values that round up to 1000 of a given unit to the next higher unit (e.g., 999,500 becomes "1.0M" rather than "1000.0k"). The module also includes locale-aware date formatting through formatTimeFromNow, which integrates with dayjs and its relative time plugin to produce strings like "3 hours ago" or "2 days ago" in the user's locale. The locale mapping imports support over 20 languages including CJK, RTL (Farsi), and various European languages.
All formatting functions are pure (no side effects) and defensive (handling null, zero, and edge-case inputs gracefully). This centralization ensures that a "1,234,567" formatted number looks the same whether it appears in a dataset statistics panel, a log viewer, or a billing dashboard.
Usage
Use this principle when:
- Displaying numeric data (counts, sizes, durations) anywhere in the frontend UI
- Adding new formatting functions for data types not yet covered (e.g., currency, percentages)
- Implementing locale-aware date or time displays in new features
Theoretical Basis
Centralizing presentation formatting follows the Single Responsibility Principle where one module owns the concern of data-to-display transformation. The progressive unit conversion algorithm (dividing until a threshold is crossed) is an application of the Dimensional Analysis approach from scientific computing. The locale-aware date formatting implements Internationalization (i18n) best practices by delegating locale-specific formatting rules to the dayjs library rather than hardcoding them.