OSU-Sustainability-Office / energy-dashboard

Oregon State University's energy dashboard.
https://dashboard.sustainability.oregonstate.edu
GNU General Public License v3.0
11 stars 0 forks source link

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

Closed s-egge closed 4 months ago

s-egge commented 4 months ago

Hourly/15-minute Interval Before

image

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

Hourly/15-minute Interval After

image image

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: image

Monthly Interval

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

Before: image

After: image

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

s-egge commented 4 months ago

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

s-egge commented 4 months ago

The x-axis ticks for comparing multiple time periods have a custom function so that the different dates will stack, see here: https://github.com/OSU-Sustainability-Office/energy-dashboard/blob/ddfe96d12c62853cc0c54a47aa081d2b51cadb1b/src/components/charts/chartController.vue#L396

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.

image image image

solderq35 commented 4 months ago

image

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 commented 4 months ago

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: https://github.com/OSU-Sustainability-Office/energy-dashboard/blob/2431c15d6e01db974b99f66196736745a98775a3/src/components/charts/linechart.js#L117 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): image image

solderq35 commented 4 months ago

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