Closed s-egge closed 8 months ago
The x-axis labels don't update when comparing multiple time periods for one building:
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.
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)
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):
Tweaked heights a bit as the map popups were going under the screen for me on 1980 x 1080p screen dimensions on Chrome
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 ofMonth / Day
:Before:
After:
This can easily be changed by adding a formatting rule for the month interval if the previous format is preferred.