Use responsive design for plot sizing

ghost commented 3 years ago

Uses the full space available and dynamically resizes with the browser.

A workaround is needed for this:
When the temp tab is not selected at startup, then it will not be the active tab, which means the HTML element is set to display: none.
Since the graph's container object doesn't have a size, plotly can't size the graph accordingly. It takes a guess and uses 700x450. The way Octoprint's UI is done, just doesn't mesh entirely well with plotly. There are many possible ways around it, this one is simple: 'Display' the tab contents, so that plotly can work as intended, then hide them again.

There is no visual indication that this occurs, as the objects are made 100% transparent before they are displayed, and are hidden behind other objects (the active tab) anyway. They're visible enough for plotly to work but not for us to see them.

Now that plot width is not an issue, height is set to maximum of the browser height minus toolbars/padding/etc.

Minor tweaks to the spike lines and hover labels while I'm in here, plus a range slider so we can keep an eye on current events while zooming in, and recover from accidental over-zooming easily.

Should fix: https://github.com/j7126/OctoPrint-Dashboard/issues/5 https://github.com/1r0b1n0/OctoPrint-Tempsgraph/issues/22 https://github.com/1r0b1n0/OctoPrint-Tempsgraph/issues/29 https://github.com/1r0b1n0/OctoPrint-Tempsgraph/issues/24 https://github.com/1r0b1n0/OctoPrint-Tempsgraph/issues/19 https://github.com/1r0b1n0/OctoPrint-Tempsgraph/issues/15 https://github.com/1r0b1n0/OctoPrint-Tempsgraph/issues/4

Examples of scaling: Big, Or ridiculously small: