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
[payload]
[payload]
[payload]
[payload]
[payload]
[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