Trends: Formatting, Highlighting

Trends allows custom formatting of keys and values through `keyFormatFn` and `valueFormatFn` props.

It also supports highlighting a specific trend as a hero, making it stand out among other trends.

Usage

<Trends
  {keyFormatFn}
  {keyToColorFn}
  geometry={{
    ...geometry,
    safetyLeft: 80,
    safetyRight: 80,
  }}
  hero={{trendKey: 'Good'}}
  trends={exampleTrends}
  valueFormatFn={value => `${Math.round(value)} units`}
/>

Props

geometry

    ▶ { safetyBottom: 50 ,safetyLeft: 80 ,safetyRight: 80 ,safetyTop: 50 }
    • safetyBottom: 50
    • safetyLeft: 80
    • safetyRight: 80
    • safetyTop: 50

hero

    ▶ { trendKey: "Good" }
    • trendKey: "Good"

keyFormatFn

    ▶ ƒ key => key.slice(-5)
    • length: 1
    • name: "keyFormatFn"
    • [[Function]]: key => key.slice(-5)
    • [[Prototype]]: ƒ ()

keyToColorFn

    ▶ ƒ undefined
    • length: 1
    • [[Function]]: key => keyToColorMap[key]
    • [[Prototype]]: ƒ ()

trends

    ▶ (5) [ {…} ,{…} ,{…} ,{…} ,{…} ]
    • 0: { key: "Average" ,values: Array(18) }
    • 1: { key: "Good" ,values: Array(18) }
    • 2: { key: "Very Good" ,values: Array(18) }
    • 3: { key: "Poor" ,values: Array(18) }
    • 4: { key: "Very Poor" ,values: Array(18) }
    • length: 5

valueFormatFn

    ▶ ƒ value => `${Math.round(value)
    • length: 1
    • name: "valueFormatFn"
    • [[Function]]: value => `${Math.round(value)} units`
    • [[Prototype]]: ƒ ()