esnet / react-timeseries-charts

Declarative and modular timeseries charting components for React
http://software.es.net/react-timeseries-charts
Other
861 stars 284 forks source link

Bug in Network Traffic example #381

Open brenkao opened 5 years ago

brenkao commented 5 years ago

🐛Bug report

Describe the bug Hovering over the Data In or Data Out div will cause the tracker to flicker.

To Reproduce Steps to reproduce the behavior:

  1. Go to http://software.es.net/react-timeseries-charts/#/example/traffic
  2. Hover on Data In or Data Out
  3. Observe the date time and tracker flicker

Expected behavior Mouse should be able to hover over the div

Desktop: Chrome 73 and Firefox 66

Additional context handleMouseOut fires causing the tracker to return null.

brandly commented 5 years ago

i think trackerStyle, defined here, needs to be extended:

https://github.com/esnet/react-timeseries-charts/blob/21a6c32ea8b34de35767eb0ec5e7d8b676106e48/src/website/packages/charts/examples/traffic/Index.js#L56-L62

to something like this

  const trackerStyle = { 
     box: {
         pointerEvents: "none" 
     },
     line: { 
         stroke: "#a62011", 
         cursor: "crosshair", 
         pointerEvents: "none" 
     } 
  }; 

i haven't tested this 😅