amedenblik
commented
9 months ago We are seeing more some slowness now with the addition of the updateFloodStats() function. Some things to look into:
-
Think about the efficiency of the 3 functions that get called: updateshadedstats, updatepeaksafterzoom, updatefloodstats
-
Does Highcharts have any reactive capabilities? Could we reference the extremes for the min/max x values of the horizontal lines?
-
Does Highcharts have a nicer way to handle data gaps? How does weather.gov handle data gaps?
-
Maybe reconsider having so many plots loading at the same time.
Currently, the modal tab "Gage Analysis Plots" (part of the gage page) freezes up for a second when clicked, and then the plots are all loaded simultaneously. We would like to have the tab open right when it is clicked, and then let the plots continue to load. Ideally, we would also separate the functions that go into creating each plot so they can load individually. The plots share the request for daily flow data.
Could also just have one graph load quickly (maybe stage vs. discharge?), so the user gets some feedback that things are actually loading, while the others still load
Additionally, in the Annual Peak Flow plot, gages with large data gaps in their daily flow data seem to be particularly slow (ex: 12340000). The daily flow array is being looped through so that each day between the start and end have a data row, and days without recordings get a null value to allow for a gap in the line. Maybe there is a better/quicker way to do this?
Nulls are added with this line:
differences.forEach(date => this.formattedDailyFlow.push({x: date, y: null}))Tips: