search

plouc / nivo

nivo provides a rich set of dataviz components, built on top of the awesome d3 and React libraries
https://nivo.rocks
MIT License
13.19k stars 1.03k forks source link

ResponsiveLine is not interactive on mobile #445

Open iliyanyotov opened 5 years ago

iliyanyotov commented 5 years ago

The ResponsiveLine chart component is not interactive on iOS devices. Working fine on Samsung S8, S9 and OpenPlus 5, but not on iPhone 6 and 7.

The flag for interactivity (isInteractive) is set to true by default and the chart doesn't have any customizations.

The tooltip shows and the chart is interactive on Samsung S8.

milasevicius commented 5 years ago

@plouc Maybe you could give some insight how to fix it? I would like to make a PR. Other charts works fine on iOS

plouc commented 5 years ago

@milasevicius, sorry but I have no idea where this could come from, did you had any errors?

milasevicius commented 5 years ago

@plouc, I inspected iOS safari but no errors show up. It does work on android, but line chart / heatmap chart tooltips doesnt work on ios chrome / safari. (Bar chart and pie chart tooltips works).

milasevicius commented 5 years ago

@plouch also, if i select inspect element and click on line chart in ios simulator, tooltip shows up. So my long shot guess would be that it registers touch events differently

iliyanyotov commented 5 years ago

Thanks for the replies. I can't see any errors as well when debugging this @milasevicius. For example, BarChart ones are displaying as expected.

martin-kieliszek commented 5 years ago

iPhone 6S accessing charts on webpage using @nivo/line with isInteractive={true} likewise presents no tooltip or interactivity on touch.

This is in contrast to using a mouse with devtools set to iPhone 6 - where tooltips work as expected

Any ideas on how a user may obtain tooltips in another manner if no touch capability exists right now?

Thanks all

martin-kieliszek commented 5 years ago

I've managed to modify the library locally to enable tooltips to work for iPhones

Tested on iPhone 8S - confirmed didn't work before, worked after Tested on iPhone 6S - confirmed didn't work before, worked after Tested on iPad Mini - confirmed didn't work before, worked after

Is it possible for you to review @plouc ? (edit: sorry for errant tag @iliyanyotov) Appears to be very quick fix that I'm sure a large contingent of users would like to see - especially those that may not have known their line graph tooltips aren't working on some iPhones.

I simply added onClick: showTooltip, to the LineSlicesItem element :

nivo-line-umd.js line 227 nivo-line-esm.js line 226 nivo-line-cjs.js line 233

Example:


React.createElement("rect", {
    x: -20,
    width: 40,
    height: height,
    fill: "#F00",
    fillOpacity: 0,
    onMouseEnter: showTooltip,
    onMouseMove: showTooltip,
    onMouseLeave: hideTooltip,
    onClick: showTooltip,    <---------------------- Added 
  }));

Please feel free to improve further if you can think of other use cases or if issues are discovered.

I look forward to your response and potential push

Edit: Do you have any thoughts on this @plouc ? Am excited to see what your thoughts are

alan345 commented 5 years ago

Hi @martin-kieliszek have you make it worked? Maybe you can share a forked repo? I have the same issue..

alan345 commented 5 years ago

Hello @plouc, Can you please look at this small change recommended by @martin-kieliszek ? Now, it is not working on Iphone because of this issue Thanks!

alan345 commented 5 years ago

@martin-kieliszek, Do you know what should be changed in the code not compiled here https://github.com/plouc/nivo/tree/master/packages/line ?

So we can fork, and create a PR for this issue? Thanks