@flourish/custom-colors

Flourish custom colors

Add settings and logic to easily add custom colors to your template

Install

npm install @flourish/custom-colors

Basic usage

The settings.yml file should be imported into your template’s template.yml file, like this:

  - Colours
  - property: color
    import: "@flourish/custom-colors"

Import the package like import createCustomColors from "@flourish/custom-colors"

var colors = createCustomColors(state.color) creates a new object colors.

You only need to pass in a state to get the color function working.

Methods

colors.getColor(value) finds the correct color for value. Will just return the fallback value unless the updateColorScale method has been called at some point.

colors.fallback([value]) returns the current fallback value if value is undefined or (usually) sets it to value if it is defined and returns the colors object. The value "default" (re)sets the fallback to be the default value of null. The fallback value is returned whenever the getColor method cannot interpret the value passed into it (for example if that value is non-numeric when in sequential or diverging mode).

colors.stringNormalizer([func]) returns the current string normalizer function if func is undefined or (usually) sets it to func if it is defined and returns the colors object. The value "default" (re)sets the normalizer function to a function that lowercases input and strips out whitespace. Passing in any other value that is not a function (e.g. null) tells the colors object to not perform any normalization.

The string normalizer function is only used when in categorical mode. Its purpose is to allow for insignifcant (as viewed by the developer) discrepancies (such as case and whitespacing) in spelling in input data. After calling witha value for func, the updateColorScale method should be called.

colors.updateColorScale(domain) updates the color scale based on the domain array.