Fix x-axis ticks to reflect hourly and 15-minute intervals

[s-egge]

Hourly/15-minute Interval Before

Both hourly and 15-minute intervals would only display the day on the x-axis

Hourly/15-minute Interval After

The new hourly interval is displayed in the bottom picture.

The 15-minute interval displayed in the top picture now shows the day of the week and the time, which is every 30-minutes here due to having ~2 1/2 days of data displayed. I added formatting to the 'minute' option so that the day is visible, otherwise the data is hard to read as displayed here, without the update:

Monthly Interval

One side effect of this change is that the monthly interval labels are now Month Year instead of Month / Day:

Before:

After:

This can easily be changed by adding a formatting rule for the month interval if the previous format is preferred.

[s-egge]

The x-axis labels don't update when comparing multiple time periods for one building:

[s-egge]

The x-axis ticks for comparing multiple time periods have a custom function so that the different dates will stack, see here:

energy-dashboard/src/components/charts/chartController.vue

Line 396 in ddfe96d

buildXaxisTick (index) {

I added formatting for the 15-minute, hourly, and monthly intervals. I also increased the minimum padding for multiple time comparisons because the 15-minute intervals were difficult to distinguish.

[solderq35]

I noticed that the map popup graph y axis is a bit squished due to the x axis taking up more space, maybe need to readjust the height for that component (src\components\map\sideView.vue)

[s-egge]

I updated the comparison charts to have the day of the week formatting, as well as changed the height of the sideView chart by 50 pixels. According to the Chart.js docs, this line:

energy-dashboard/src/components/charts/linechart.js

Line 117 in 2431c15

autoSkip: true,

Is supposed prevent axis tick overlap, but I've found a few complaints of it not working as intended. There was a patch in 2.9 that seemed to fix it for some people, but I wasn't able to find any other way of fixing it aside from limiting the max number of ticks, but then that would alter the larger charts.

Here is a comparison of the charts as they are currently on the dashboard (on the left) and the charts after adding 50 pixels to the height (on the right):

[solderq35]

Tweaked heights a bit as the map popups were going under the screen for me on 1980 x 1080p screen dimensions on Chrome