ColorBinsG: interactivity

If `isInteractive` is `true`, the component emits events when interacting with the bins.

Events:

• Clicking a bin selects or deselects it depending on if it was already selected and depending on the pressed modifier key (see below) and dispatches a `clicked` event with payload `{index, selectedBins}`

• Clicking the background resets the selection and dispatches a `clicked` event, with payload `{selectedBins: []}`

• Mouse-entering a bin dispatches a `entered` event, with the payload being the entered bin index

• Mouse-exiting a bin dispatches a `exited` event, with the payload being the exited bin index

• Brushing – clicking a bin and dragging the pointer over other bins selects them and dispatches brush events:

•• as soon as we start brushing, a `brushstart` event gets dispatched, the payload being the index of the bin where we started brushing;

•• continuing dragging, when the pointer crosses bins a `brushed` event gets dispatched with the payload being `{selectedBins, end, start}`, the currently selected bins and the brushing start and end indices;

•• when we stop dragging by releasing the pointer, a `brushend` event gets dispatched, the payload being the index of the bin where we stopped brushing.

You can use modifiers to add or remove to the selection:

• Holding the `shift` key when brushing or clicking adds the brushed bins to the selection, the payload being the start bin index;

• Holding the `alt` key when brushing or clicking removes the brushed bins to the selection.

A green/red line is displayed to help you understand what's going on (respectively). You can customise these with props `brushAddStroke`, `brushRemoveStroke`, `brushStrokeOpacity`, `brushStrokeWidth`

You can customize the style of selected bins using: `selectedBinStroke`, `selectedBinStrokeWidth`.

Please interact with the chart to read the correspondent event payload below.

Choose an example

Events

brushed
[payload]
brushend
[payload]
brushstart
[payload]
clicked
[payload]
entered
[payload]
exited
[payload]

Usage

<ColorBinsG
  {bins}
  {height}
  {width}
  flags={{isInteractive: true}}
/>

Props

bins

    (11) [ {…} ,{…} ,{…} ,{…} ,{…} , ]
    • 0: { range: Array(2) ,color: "red" }
    • 1: { range: Array(2) ,color: "yellow" }
    • 2: { range: Array(2) ,color: "palegreen" }
    • 3: { range: Array(2) ,color: "cyan" }
    • 4: { range: Array(2) ,color: "khaki" }
    • 5: { range: Array(2) ,color: "lightskyblue" }
    • 6: { range: Array(2) ,color: "blue" }
    • 7: { range: Array(2) ,color: "magenta" }
    • 8: { range: Array(2) ,color: "orange" }
    • 9: { range: Array(2) ,color: "violet" }
    • 10: { range: Array(2) ,color: "brown" }
    • length: 11

flags

    { isInteractive: true }
    • isInteractive: true