Fix Graph Resizing

[RChandler234]

Description

Currently all the graphs resize in a weird way where it shifts all the points on the graph. Due to a lot of requests from engineering/ the fact that I suspect this way of re-rendering is more cumbersome to re-render, we want to try to make the graph slide along as it updates, or at least re-render in a way that looks less weird/ more performant

Acceptance Criteria

• [ ] New way of graph resizing/ updating should look better/ be more performant
• [ ] Any other existing functionality should be unaffected

Proposed Solution

Look into Apex Charts, see if there's another way to live update the graphs

Mocks

N/A

[RChandler234]

Did a little looking into this, was frustrating because large chunks of Apex Charts documentation just seems to be down sometimes. I also couldn't find evidence of apex charts having the flow functionality we want for the graph. From looking through Apex Charts, it seems that it's well liked for it's broad range of features/ graphs and its customizability, but I'm not sure it's optimized for a real-time use case (It also noticeably lags the rest of the screen when updating in realtime)

Due to all this and the fact that we really only need a fleshed out line graph for the realtime functionality, I'm considering finding another graph library, or doing it completely custom using D3 (https://d3js.org/) https://www.npmjs.com/package/billboard.js?activeTab=readme https://www.npmjs.com/package/chart.js?activeTab=readme (https://www.freecodecamp.org/news/how-to-integrate-chart-js-in-angular-using-data-from-a-rest-api/)

[RChandler234]

The flow examples in this demo show what we wanna go for with the realtime line graphs (this library is no longer supported, all the devs have migrated to worked on billboardjs, which I linked above): https://c3js.org/

[RChandler234]

good info: https://bost.ocks.org/mike/path/

[RChandler234]

https://apexcharts.com/javascript-chart-demos/line-charts/realtime/