Nivo: Feature (or example) request: Brush

[jfsiii]

This is a common, but often challenging, interaction. It'd be great to see how it should work in nivo.

[guzmonne]

I created a simple line chart with a brush using nivo components. I didn't create a pull request since I had to do some hacked actions to make it work.

1. I had to add a new child component called Brush inside the Line component.
2. I added three new props to the Line component that are then passed to the Brush component. Two to set the initial Brush position, and a callback to call onBrush.
3. I had to modify the SvgWrappercomponent to provide a handler to each children, that gives them access to a ref of the parent svg component. I needed this ref to convert mouse coordinates to svg coordinates.

Do you approve of these API modification, or would you do things differently. I can generate a pull request from your comments if you want.

[stahlmanDesign]

@guzmonne this is great. Your description and examples of 'hacked actions' to make this work are helpful for understanding how to customize or enhance Nivo.

Here's what I was thinking of doing with a stacked bar chart. I've seen this before with D3 but wasn't sure how to bring it to Nivo:

[guzmonne]

I believe you could accomplish it with nivo by extending the Bar components to handle child components, or hacking it like I did with the Line component.

I published a medium article explaining how I did it, and the shortcomings of my method.

[MarcMagnin]

Great work @guzmonne!
I've just noticed this issue while I was exposition such feature in a 'zoom' related issue.
I'm thinking about the same "generic" kinda brush feature that would simply return the range (start/end) of the selected data to be able to do whatever you want with it such as this sample from highcharts:
https://www.highcharts.com/demo/line-time-series

Having a generic simple capability to select an area by dragging dropping the mouse to act on it is a top feature.

[ghost]

@guzmonne this is great. Your description and examples of 'hacked actions' to make this work are helpful for understanding how to customize or enhance Nivo.

Here's what I was thinking of doing with a stacked bar chart. I've seen this before with D3 but wasn't sure how to bring it to Nivo:

can I get your code for bar chart with nivo-brush-zoom its too urgent for me please

[ghost]

@stahlmanDesign please share your code for bar charts nivo-brush-zoom. please its too urgent

[stahlmanDesign]

Sorry, I never moved forward with this so I don't have a working solution. I am still interested if someone is able to make it work.

[ghost]

Hello sir,
I am working on it. I will let you know when it is done.

Thanks
satyam kumar

On Fri, 3 Jan 2020, 21:17 Justin Stahlman, [e-mail] wrote:

Sorry, I never moved forward with this so I don't have a working solution.
I am still interested if someone is able to make it work.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/plouc/nivo/issues/32?email_source=notifications&email_token=ALQWK4J24N5SQGF5YERJFZTQ35MXNA5CNFSM4DX5B5F2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEIBNEOY#issuecomment-570610235,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/ALQWK4OOTEJDHVYHT66GKP3Q35MXNANCNFSM4DX5B5FQ
.

[stale[bot]]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[sattuchin]

This feature would be very useful. Please prioritize when possible. Thank you!