Format numbers


1.0.02 years ago3 years agoMinified + gzip package size for @flourish/number-formatter in KB


Flourish number formatter

Flourish module for setting the numeric separators used in a template. Used in conjunction with Flourish number localization.


To install the module, type:

npm install @flourish/number-formatter

To add the module's settings block, include something like the following in a templates' template.yml file:

- property: x_format
  import: "@flourish/number-formatter"

Since you may well want different formatting for different variables or axes, it is quite likely you may want to include multiple settings blocks:

- property: y_format
  import: "@flourish/number-formatter"


Include a (usually empty) object in the state declaration for every instance of the formatter you intend to use in the template:

    var state = {
        /* Other declarations of default values */
        x_format: {},
        y_format: {},
        // etc...

Make sure each instance of the module is initialised somewhere in the code before draw is called (usually alongside Flourish number localization):

import initLocalization from "@flourish/number-localization";
import initFormatter from "@flourish/number-formatter";
/* Other imports and code */
var localization = initLocalization(state.localization);
var getXAxisFormatter = initFormatter(state.x_format);
var getYAxisFormatter = initFormatter(state.y_format);
/* Other initialisation code, eg Flourish-number-formatter instances */
export { localization, getXAxisFormatter, getYAxisformatter/*, etc */ };

These functions can now be used to generate functions that format numbers into (nice) text output:

import { localization, getXAxisFormatter, getYAxisFormatter } from "init.js";
var localeFunction = localization.getFormatterFunction();
var xFormat = getXAxisFormatter(localeFunction);
var yFormat = getYAxisFormatter(localeFunction);
xFormat(7230.386798) // Could produce something like $7,230.4 depending on user settings

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.