Trends: Interactivity

Trends supports interactivity, emitting events like `dotHovered`, `dotExited`, `dotTouchStarted`, and `dotTouchEnded`.

These events can be used to create dynamic, responsive visualizations, enhancing user engagement and data exploration.

Events

dotHovered 
[payload]
dotExited 
[payload]
dotTouchStarted 
[payload]
dotTouchEnded 
[payload]

Usage

<Trends
  {geometry}
  {keyToColorFn}
  {valueFormatFn}
  theme={{
    curveStroke: 'black',
    curveStrokeWidth: 1,
    frameFill: 'none',
    frameStroke: 'black',
    gridStroke: 'lightgrey',
    gridStrokeDasharray: '4 8',
    heroStrokeWidth: 2,
    textColor: 'black',
  }}
  trends={exampleTrends}
/>

Props

geometry

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

keyToColorFn

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

theme

    ▶ { curveStroke: "black" ,curveStrokeWidth: 1 ,frameFill: "none" ,frameStroke: "black" ,gridStroke: "lightgrey" , … }
    • curveStroke: "black"
    • curveStrokeWidth: 1
    • frameFill: "none"
    • frameStroke: "black"
    • gridStroke: "lightgrey"
    • gridStrokeDasharray: "4 8"
    • heroStrokeWidth: 2
    • textColor: "black"

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)
    • [[Prototype]]: ƒ ()