simplify isZoomed historical graph update logic

This commit is contained in:
Nick Krecklow 2020-06-12 18:32:53 -05:00
parent b7ed5fdd93
commit 5b6d65e1c9
No known key found for this signature in database
GPG Key ID: 5F149FDE156FFA94
2 changed files with 10 additions and 54 deletions

@ -3,7 +3,7 @@ import uPlot from 'uplot'
import { RelativeScale } from './scale' import { RelativeScale } from './scale'
import { formatNumber, formatTimestampSeconds } from './util' import { formatNumber, formatTimestampSeconds } from './util'
import { uPlotTooltipPlugin, uPlotIsZoomedPlugin } from './plugins' import { uPlotTooltipPlugin } from './plugins'
import { FAVORITE_SERVERS_STORAGE_KEY } from './favorites' import { FAVORITE_SERVERS_STORAGE_KEY } from './favorites'
@ -18,7 +18,6 @@ export class GraphDisplayManager {
this._hasLoadedSettings = false this._hasLoadedSettings = false
this._initEventListenersOnce = false this._initEventListenersOnce = false
this._showOnlyFavorites = false this._showOnlyFavorites = false
this._isPlotZoomed = false
} }
addGraphPoint (timestamp, playerCounts) { addGraphPoint (timestamp, playerCounts) {
@ -50,14 +49,14 @@ export class GraphDisplayManager {
} }
} }
// If not zoomed, paint updated data structure // Dedrive plotTimestamps from the uPlot instance's data since this._graphTimestamps has been mutated
// Otherwise flag the plot data as dirty with repainting to be handled by #handlePlotZoomOut const plotTimestamps = this._plotInstance.data[0]
// This prevents #addGraphPoint calls from resetting the graph's zoom state const plotScaleX = this._plotInstance.scales.x
if (!this._isPlotZoomed) {
this._plotInstance.setData(this.getGraphData()) const isZoomed = plotScaleX.min > plotTimestamps[0] || plotScaleX.max < plotTimestamps[plotTimestamps.length - 1]
} else {
this._isPlotZoomedDataDirty = true // Avoid redrawing the plot when zoomed
} this._plotInstance.setData(this.getGraphData(), !isZoomed)
} }
loadLocalStorage () { loadLocalStorage () {
@ -251,8 +250,7 @@ export class GraphDisplayManager {
} else { } else {
this._app.tooltip.hide() this._app.tooltip.hide()
} }
}), })
uPlotIsZoomedPlugin(this.handlePlotZoomIn, this.handlePlotZoomOut)
], ],
...this.getPlotSize(), ...this.getPlotSize(),
cursor: { cursor: {
@ -347,21 +345,6 @@ export class GraphDisplayManager {
this._resizeRequestTimeout = undefined this._resizeRequestTimeout = undefined
} }
handlePlotZoomIn = () => {
this._isPlotZoomed = true
}
handlePlotZoomOut = () => {
this._isPlotZoomed = false
// Test if the data has changed while the plot was zoomed in
if (this._isPlotZoomedDataDirty) {
this._isPlotZoomedDataDirty = false
this._plotInstance.setData(this.getGraphData())
}
}
initEventListeners () { initEventListeners () {
if (!this._initEventListenersOnce) { if (!this._initEventListenersOnce) {
this._initEventListenersOnce = true this._initEventListenersOnce = true
@ -469,9 +452,6 @@ export class GraphDisplayManager {
this._graphData = [] this._graphData = []
this._hasLoadedSettings = false this._hasLoadedSettings = false
this._isPlotZoomed = false
this._isPlotZoomedDataDirty = false
// Fire #clearTimeout if the timeout is currently defined // Fire #clearTimeout if the timeout is currently defined
if (this._resizeRequestTimeout) { if (this._resizeRequestTimeout) {
clearTimeout(this._resizeRequestTimeout) clearTimeout(this._resizeRequestTimeout)

@ -26,27 +26,3 @@ export function uPlotTooltipPlugin (onHover) {
} }
} }
} }
export function uPlotIsZoomedPlugin (onZoomIn, onZoomOut) {
return {
hooks: {
setSelect: u => {
u._zoomPluginIgnoreNextSetScale = true
if (onZoomIn) {
onZoomIn(u)
}
},
setScale: u => {
if (typeof u._zoomPluginIgnoreNextSetScale !== 'boolean') {
return
}
if (u._zoomPluginIgnoreNextSetScale) {
u._zoomPluginIgnoreNextSetScale = false
} else if (onZoomOut) {
onZoomOut(u)
}
}
}
}
}