V

Vuer-Viz

vuer-vizv1.0.2

Publication-Quality Visualizations

Data Formatters

Vuer-Viz provides a comprehensive set of formatters for axis labels and tooltips. These formatters automatically generate nice tick intervals and format values for optimal readability.

Available Formatters

Time Duration Formatters

seconds

Formats seconds with automatic escalation through larger units.

xFormat="seconds"

Intervals: 1s, 5s, 10s, 15s, 30s, 1m, 2m, 5m, 10m, 15m, 30m, 1h, 2h, 3h, 6h, 12h, 1d

Format: "2h 30m 15s", "45m 30s", "15s"

Use cases:

  • Training step duration
  • Process execution time
  • Short-duration events

minutes

Formats minutes with full escalation: minutes → hours → days → months → years.

xFormat="minutes"

Intervals: 1m, 5m, 10m, 15m, 30m, 1h, 2h, 3h, 4h, 6h, 12h, 1d, 2d, 3d, 1w, 15d, 30d, 2mo, 3mo, 6mo, 1y

Format: "1y 2mo", "5d 3h", "2h 30m", "45m"

Features:

  • Shows at most 2 units for readability
  • 1 month = 30 days (43,200 minutes)
  • 1 year = 365 days (525,600 minutes)

Use cases:

  • Long-running training sessions
  • Project timelines
  • Historical data

days

Formats values as days, hours, and minutes.

xFormat="days"

Intervals: 1d, 2d, 3d, 1w, 2w, 30d

Format: "2d 3h 30m", "5h 45m", "30m"

Use cases:

  • Multi-day experiments
  • Weekly summaries

Timestamp Formatters

time

Formats Unix timestamps (milliseconds) as time strings.

xFormat="time"

Intervals: 1s, 5s, 10s, 30s, 1m, 5m, 10m, 30m, 1h, 2h, 6h, 12h, 1d, 1w, 30d

Format: "2:30 PM", "14:30"

Use cases:

  • Real-time monitoring
  • Event logs
  • Intraday data

timeUTC

Formats Unix timestamps in UTC timezone.

xFormat="timeUTC"

Format: Same as time but in UTC

Use cases:

  • Server logs
  • Distributed systems
  • International data

dateTime

Formats Unix timestamps as date and time.

xFormat="dateTime"

Format: "Jan 1, 2:30 PM", "Dec 31, 23:59"

Use cases:

  • Multi-day time series
  • Historical analysis

date

Formats Unix timestamps as dates only.

xFormat="date"

Format: "Jan 1, 2025", "Dec 31, 2024"

Use cases:

  • Daily aggregations
  • Calendar data
  • Long-term trends

Numeric Formatters

auto (default)

Automatic formatting with intelligent tick generation.

xFormat="auto"  // or omit xFormat

Format:

  • Small values (< 0.01): Scientific notation (1.23e-3)
  • Large values (> 10000): Scientific notation (1.23e+4)
  • Otherwise: Decimal notation (12.34)

Use cases:

  • General numeric data
  • Unknown value ranges

si

Formats numbers with SI prefixes (K, M, B).

yFormat="si"

Format: "1.2B", "450M", "23.5K", "3.2"

Prefixes:

  • K = thousand (10³)
  • M = million (10⁶)
  • B = billion (10⁹)

Use cases:

  • Large counts
  • Population data
  • Financial figures

percent

Formats values as percentages.

yFormat="percent"

Format: "75%", "12%", "0%"

Default: Multiplies by 100 (0-1 range → 0-100%)

Use cases:

  • Success rates
  • Completion percentages
  • Probabilities

Angular Formatters

degrees

Converts radians to degrees.

xFormat="degrees"

Format: "90.0°", "45.0°", "180.0°"

Use cases:

  • Rotation angles
  • Geographic coordinates
  • Phase measurements

pi

Formats radians as multiples of π.

xFormat="pi"

Format: "π/2", "2π", "π/4", "-π"

Common fractions: π/6, π/4, π/3, π/2, 2π/3, 3π/4, 5π/6, π, 2π

Use cases:

  • Trigonometric functions
  • Signal processing
  • Phase plots

Logarithmic Formatter

log

Formats values using logarithmic scale.

yFormat="log"

Format: "10^2", "10^1", "10^0"

Default base: 10 (can be customized in code)

Use cases:

  • Exponential growth
  • Power laws
  • Log-scale plots

Temperature Formatters

tempC

Formats temperature in Celsius.

yFormat="tempC"

Format: "25.0°C", "-10.5°C"

Use cases:

  • Weather data
  • Sensor readings

tempF

Formats temperature in Fahrenheit.

yFormat="tempF"

Format: "77.0°F", "14.0°F"

Use cases:

  • US weather data
  • Imperial unit systems

Usage Examples

Time Duration

<LineChart
  series={trainingSeries}
  xLabel="Training Time"
  xFormat="minutes"  // Will show "2h 30m", "5d 3h", etc.
  yLabel="Loss"
/>

Large Numbers with SI Prefixes

<BarChart
  series={populationData}
  xLabel="Country"
  yLabel="Population"
  yFormat="si"  // Will show "1.2B", "450M", etc.
/>

Percentages

<LineChart
  series={accuracySeries}
  xLabel="Epoch"
  yLabel="Accuracy"
  yFormat="percent"  // Will show "95%", "87%", etc.
/>

Timestamps

<LineChart
  series={eventSeries}
  xLabel="Time"
  xFormat="dateTime"  // Will show "Jan 1, 2:30 PM", etc.
  yLabel="Events"
/>

Angular Data

<LineChart
  series={phaseSeries}
  xLabel="Phase"
  xFormat="pi"  // Will show "π/2", "π", "2π", etc.
  yLabel="Amplitude"
/>

Custom Formatters

You can also provide custom formatter functions:

<LineChart
  series={series}
  xLabel="Custom"
  xFormat={(value) => `$${value.toFixed(2)}`}  // Custom currency format
/>

Best Practices

1. Match Formatter to Data Type

Use appropriate formatters for your data:

  • Duration data → seconds, minutes, days
  • Timestamps → time, dateTime, date
  • Large numbers → si
  • Ratios → percent
  • Angles → degrees or pi

2. Consider Value Range

Choose formatters that work well with your data range:

  • minutes formatter escalates automatically from minutes to years
  • si formatter adapts to magnitude (K, M, B)
  • auto formatter uses scientific notation for very small/large values

3. Consistent Formatting

Use the same formatter for related charts:

// Good: Consistent formatting across related charts
<LineChart xFormat="minutes" />
<BarChart xFormat="minutes" />

// Avoid: Mixing formats for the same data type
<LineChart xFormat="minutes" />
<BarChart xFormat="seconds" />

4. Timezone Awareness

For distributed systems, use timeUTC to avoid timezone confusion:

<LineChart
  xFormat="timeUTC"  // Consistent across timezones
  series={serverLogsSeries}
/>

Related Documentation

Previous
Data Structure
Next
Chart Layout