Description

The previous fix to address timeseries tick labels outside of the date range was in PR #1899, however, it was found that using 'category' axis type can cause timeseries plots to display data out of order if the series have varying date intervals.

This fix is for "Day" aggregation unit. The other units are handled by using a "linear" tickmode from PR #1899

This refactor puts the work on Plotly to correctly order the axis by using the "date" axis type. To address the original issue of having date tick labels outside the date interval I decided to follow @jpwhite4 suggestions to remove tick labels that are outside the selected duration.

Plotly relayout events are tied to the Ext.js 'resize' event, but Plotly relayout events can happen outside of Ext.js 'resize' events (e.g. Zoom is a relayout event but not resize), therefore, I needed to add a listener to the Usage tab to ensure erroneous tick labels were removed on zooming (mainly resetting the zoom). The metric explorer tab already had a listener on the relayout event.

Motivation and Context

Out of order timeseries plots are very undesirable. Makes it impossible to accurately view the plot

Tests performed

Tested on my dev-port on xdmod-dev

Checklist:

• The pull request description is suitable for a Changelog entry
• The milestone is set correctly on the pull request
• The appropriate labels have been added to the pull request