Number Flow Display

A Directus extension that displays a animated number flow component with extensive formatting options powered by Numbro.js.

Screenshot:

Features

• Animated Number Flow: Smoothly animates number changes.
• Prefix & Suffix: Add text before or after the number.
• Icon: Display an icon before the number.
• Customizable Animation: Control the animation duration and transition speed.
• Advanced Formatting: Use Numbro.js for advanced number formatting, including:
  • Thousand separators
  • Mantissa (decimal places)
  • Optional mantissa
  • Trim mantissa
  • Average (e.g., 1.5k)
  • Space separated
  • Negative number formatting (sign or parenthesis)
  • Force sign display
  • Output as number, percent, currency, time, ordinal, or bytes.
  • And more...

Installation

1. Go to the Settings module in your Directus project.
2. Navigate to the Marketplace.
3. Search for Number Flow and click the Install button.

Alternatively, you can install the extension manually:

1. Navigate to your Directus project's api directory.
2. Run the command: pnpm add @emahuni/directus-extension-numberflow.display
3. Restart your Directus instance.

You should be able to use the display extension in your project.

Author

Emmanuel Mahuni https://github.com/emahuni

Inspired by the incredible work of directus-extension-number-flow.