Flourish custom colors
Add settings and logic to easily add custom colors to your template
npm install @flourish/custom-colors
settings.yml file should be imported into your template’s
template.yml file, like this:
- Colours- property: colorimport: "@flourish/custom-colors"
Import the package like
import createCustomColors from "@flourish/custom-colors"
var colors = createCustomColors(state.color) creates a new object
You only need to pass in a state to get the color function working.
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
updateColorScale method should be called.
colors.updateColorScale(domain) updates the color scale based on the