search

huww98 / TimeChart

An chart library specialized for large-scale time-series data, built on WebGL.
https://huww98.github.io/TimeChart
MIT License
365 stars 31 forks source link

Shadow root remains on dispose #13

Closed toastedcrumpets closed 3 years ago

toastedcrumpets commented 3 years ago

Hi, First, thanks for this awesome library.

Every now and then I need to clear the chart, so I call dispose and try to re-render by rerunning TimeChart on the existing div element; however, as the shadowroot already exists I get an error. In the constructor for TimeChart, can we test if the shadowroot property is not null before creating the shadow root and reuse it?

I've been trying to figure out a way of clearing the shadowroot, and while this can be done its challenging with frameworks like React where you don't really control DOM elements directly. Thanks!

huww98 commented 3 years ago

Thanks for the feedback. That fix is very easy. And I've created an example to prove this works by continuously dispose and recreate the chart. It loops several hundreds of times without any problems. And no resource leak observed from the performance monitor in Chrome devtools.

toastedcrumpets commented 3 years ago

That's great! I'll try it out tonight when I'm home again.

I've made a fairly cool project already out of your library, its a multimeter interface modelled after the Keithley 2450/DMM6500/DMM7510 systems (see here https://youtu.be/Y5Y6hLfyklA for what I'm trying to repeat). I've gotten pretty close to their interface now, its built out of a python backend with websockets/socket.io communication to a React frontend. I'm going to publish the code on Github and make a Youtube video about the project this week.

I still have a few issues/comments. Should I make more issues or keep in this one, and do you accept pull requests?

My main issue at the moment is getting documentation/an understanding of the realtime option. I currently can switch between seeing all data (I set realTime;false and change maxDomainExtent), and following along with the data (realTime:True) but once I drag I can no-longer restore the graph back to seeing all the data by setting realTime and maxDomainExtents. I can make an example if this would help communicate the issue.

I also want to allow the graph to be dragged beyond the max domain extents, as often we want to set up the graph to look for peaks that might not be visible yet.

Finally I want to add some options to render glPoints at each data node (with or without lines).

Thanks again for sharing this library and responding so quickly!

huww98 commented 3 years ago

Of course, I accept PR.

maxDomainExtent is only intended to limit user interaction, preventing them from zooming the chart to small. And should not change the current zoom level. You can see how to control zoom programmatically here:

https://github.com/huww98/TimeChart/blob/1f3c514044f4e1f504e99d73990a068c8d49fcda/benchmark/interaction/timechart.html#L41

Basically, you need to change xRange, yRange. Setting xRange to 'auto' should be enough to allow users to see all data.

I also want to allow the graph to be dragged beyond the max domain extents, as often we want to set up the graph to look for peaks that might not be visible yet.

Setting maxDomain to a higher value and autoRange to false should do it.

I will take a closer look this weekend.

toastedcrumpets commented 3 years ago

Thanks that's great, I've now got the zoom out and follow working exactly as I want. Regarding the panning, great, just setting autoRange to false gives me min/max as infinity, while setting xRange and yRange to 'auto' whenever I want to 'reset' gives me exactly what I want too.

If I get points working I'll make a PR. Thanks again!