Add ChartJS BarCharts to Dashboard "Chart" tab #997
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
ChartJS is a modular charting library that only includes basic functionality in the core package. So there are a couple others we will need too: - chartjs-adapter-moment is so that time-based axes can be labeled using time formats resolved from moment.js. Then all we have to do is pass in timestamps and chartJS will figure out how to show them on the axes. Fortunately, we already have moment.js so this doesn't incur much package size cost. - chartjs-plugin-annotation is how we will display dashed lines on the graphs (to show whether you're meeting a 'target' or goal) Basically, it just enables drawing extra information on top of the chart.
Our new `BarChart` component is a wrapper around ChartJS's `Bar`. This should make it convenient to draw either vertical or horizontal bar charts, and easily show dashed lines for any number of 'target' values. This is now demonstrated in the 'Chart' tab of the dashboard, where horizontal bar charts will show for Distance, Trips, Duration, Speed. metrics.js was tweaked so that the data is formatted for the new BarChart component (and with timestamps on y axis and values on x axis)
This is a fairly minor fix; when we switched internationalization engines from ng-translate to i18next, I changed 'cookies' to use the count parameter but forgot to do the same for icecream and bananas.
5 tasks
Check the timezones. |
To represent the dates on the charts, we would like to use unix epoch timestamps, which represent the start of the day in UTC. However, ChartJS by default uses the user's local time when it parses timestamps. We would like to override this behavior and use UTC, but the Moment.js adapter for ChartJS doesn't support specifying time zones. So, this is the point at which we need to add Luxon to the project. Then we can use the Luxon adapter for ChartJS, which does support time zones. We should really be switching from Moment.js to Luxon anyway. We still rely on Moment.js in many other places in the app, so we have to keep both around for now. Moment.js is very heavy; fortunately Luxon is more lightweight. Before too long, we should be able to remove Moment.js altogether and enjoy a smaller bundle size :)
|
The "Chart" tab is now working as expected. 
@shankari Ready for review / merge -- and potentially to be included in the next release? |
shankari
approved these changes
Jul 6, 2023
|
@JGreenlee I think this is fine to merge as-is given that it is only for a few releases, but wanted to give you a chance to respond if that was helpful. |
|
I'm going to merge this for now but leave the comment about the colors open to revisit later. |
|
ready to merge |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
After deciding to use ChartJS instead of Plotly (e-mission/e-mission-docs#918 (comment)), I re-implemented the charts on the Dashboard.
This solution is temporary; we may only have 1 or 2 production releases with graphs like this. In the next iteration of the Dashboard, these charts will likely be moved out of the 'Chart' tab into a unified view.
I made the decision to show these bar charts as horizontal instead of vertical. This way, they can grow taller when there is more information to be on the graph. This took a bit of work, but I think it is worth it.
Screen.Recording.2023-06-29.at.12.16.53.PM.mov
TODO:
I am still working on axis labels (ie what unit of measurement?)need to add more colors to the palette (currently it repeats the same 4)need to fix the dates (they appear to be off by 1 day)