Feature (or example) request: Brush

jfsiii commented 7 years ago

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

guzmonne commented 6 years ago

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.

I had to add a new child component called Brush inside the Line component.
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.
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 commented 6 years ago

@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 commented 6 years ago

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 commented 6 years ago

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 commented 4 years ago

@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 commented 4 years ago

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

stahlmanDesign commented 4 years ago

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 commented 4 years ago

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, notifications@github.com 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] commented 3 years ago

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 commented 3 years ago

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

wolasss commented 3 years ago

I agree, this is needed

RafaelZamoraBallerTV commented 3 years ago

bump

asherccohen commented 3 years ago

Bump

Ynng commented 3 years ago

bump

nico-hernandez commented 3 years ago

bump

shockhs commented 3 years ago

bump

swest06 commented 3 years ago

Can someone explain how to do this with the responsive heat map.

yuqian5 commented 3 years ago

Very essential features for mobile viewing support. Bump.

stale[bot] commented 3 years ago

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!

kbzowski commented 3 years ago

bump

lm93547 commented 2 years ago

bump

AmalRichwin-AT commented 2 years ago

bump

Kvodnon commented 2 years ago

bump

stale[bot] commented 2 years ago

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!

wolasss commented 2 years ago

bump

natBizitza commented 2 years ago

Bump

stale[bot] commented 2 years ago

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!

wolasss commented 2 years ago

bump

JavaScriptJohn commented 2 years ago

bump

umble commented 1 year ago

bump

bjorn-bakken commented 1 year ago

Is this still stale? Would be very handy.

stale[bot] commented 1 year ago

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!

wolasss commented 1 year ago

bump