search

scottbez1 / webdp100

WIP web-based driver (and maybe eventually GUI?) for the Alientek DP100 digital power supply using WebHID
65 stars 7 forks source link

Add live charts for voltage and current output #2

Open manuelF opened 4 months ago

manuelF commented 4 months ago

This PR introduces a toggleable graph (default off) to the webpage. This plots Voltage and Current out, collected every time there is a data point.

This is my first PR using React, so my apologies for probably not the most idiomatic code.

Thanks!

Preview: image

Dygear commented 4 months ago

That's really cool!

scottbez1 commented 4 months ago

Super cool, thanks for the contribution! I will try to take a closer look soon!

One thing that catches my eye from a quick glance is the chartValues being a simple variable/object, rather than using react state for it. I suspect the chart is only coincidentally getting re-drawn because other elements are also being re-rendered when new data comes in, but it would be best to make the chart data reactive state itself via a useState hook.

Let me know if you'd like to try making those changes, otherwise I'm happy to poke around a bit in the PR when I get some free time.

manuelF commented 4 months ago

If you can play around with it and come up with a solution that would be great, no rush!

I am woefully unfamiliar with React state management so probably anything is better than what my current changes express.

Thanks!