@flourish/formatters

Flourish formatter

Flourish module for formatting numbers and dates using the format id's of the interpreter module.

Install

To install the module, type:

npm install @flourish/formatters

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

- property: x_format
  import: "@flourish/formatters/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/formatters/number-formatter"

Usage

getFormatter(format_id)

This function return a formatter function with the given format_id. For example:

import { getFormatter } from @flourish/formatter;

const numFormat = getFormatter("number$point_comma");
console.log(numFormat(12235.56)); // "12.235,56"

const dateFormat = getFormatter("datetime$%d/%m/%Y");
console.log(dateFormat(Date.now())); // "20/01/2022"

initNumberFormatter(state_obj)

This function returns a function for generating a number-formatting function with additional properties that can be specified by the user of the template via the settings panel when the settings.yml from the number-formatter folder is included in the template.yml file. For example...

- Number formatting
- property: formatting
  import: "@flourish/formatters/number-formatter"

// In state.js
const state = {
	...
	formatting = {};
	...
}

// In draw.js
...
const getNumberFormatter = initNumberFormatter(state.formatting);

function draw() {
	...
}

// In update.js
function update() {
	...
	const numberFormatter = getNumberFormatter(output_id);
	const label = numberFormatter(value);
	...
}