Chart Report - Allow multiple X Axis for different time indexes #1247
Conversation
Add index filter item to allow ticks to be displayed for deviceTime, serverTime, in addition to the default fixTime
src/reports/ChartReportPage.jsx
Outdated
| @@ -123,7 +141,8 @@ const ChartReportPage = () => { | |||
| }} | |||
| > | |||
| <XAxis | |||
| dataKey="fixTime" | |||
| dataKey={timeIndex} | |||
| interval="preserveStartEnd" | |||
There was a problem hiding this comment.
I had an issue with labels overlapping, but im struggling to reproduce it now. Here it is on a tab i still had open:
interval="preserveStartEnd"
Causes overlapping labels to be hidden/grouped, when the default behavior is to show them all. preserveStartEnd just makes sure that the label at the start/end of the axis are not hidden, so that the timestamp where the graph starts and ends is preserved
There was a problem hiding this comment.
Oh, i can reproduce it now. Had to clear browser cache. This is what it looks like without preserving start/end
There was a problem hiding this comment.
Can you provide a comparison? I'm not sure I understand what it actually does.
There was a problem hiding this comment.
Yep, but I actually think I should remove this line and address it in a separate issue, because I think it needs further investigation. It's also not directly related to this PR, so I might remove this line and go over it in a new issue for someone to look into further later.
interval has a few options, but the documentation is really lacking. It can be a number, but its not clear what the number represents (i assume every X tick is used as a label). Setting it to 0, will apparently show all ticks on the X axis. So if you have 1000 ticks, you have 1000 labels, and they will all overlap and be illegible.
A value of "preserveStart", "preserveEnd" or "preserveStartEnd", is supposed to result in an automatic calculation of which labels to show, so that none of them overlap. Basically if you have 1000 labels, it will hide most of them, with conditions.
The default value is "preserveEnd". This should hide all the overlapping labels, but prioritize keeping the last one
"preserveStart" should hide all the overlapping labels, but prioritize keeping the first one
"preserveStartEnd" is just a combination of both. it makes sure that the labels at either end of the axis are displayed, and any that are hidden are somewhere in between. Except in testing, it doesn't always, and often you get the same problem of labels overlapping
Initially when I tested this, I had the following:
And then after changing the interval to preserveStartEnd, i had this:
So I thought i had rectified the issue and moved on. Basically a "this isnt related but i'll fix that bug while im here".
But in further testing, the actual result seems to be unpredictable. The value likely should be preserveStartEnd, and that should be the recharts default, but it isn't, and changing it doesn't actually fix the issue.
More likely than not, this is actually a bug in recharts. A lot of people seem to be having issues with these labels. Interval should honor the value of minTickGap, which by default is supposed to ensure a minimum gap between the labels, but in practice it just doesn't work the way the docs say it does. It seems like there is some kind of disconnect between interval, minTickGap, and tickFormatter. Other people have come up with convoluted fixes for this issue, but really it comes down to recharts behavior.
Anyway, happy to remove this line and investigate it separately. It doesn't help, so its really pointless being here
rename timeIndex > timeType
Add reportTimeType string for Chart Reports
Use reportTimeType
Remove preserveStartEnd interval, because it didn't actually fix anything
|
Thank you. |
I noticed an issue displaying some data in Chart Reports.
For devices that periodically disable GPS, 'fixTime' can be the same across multiple updates, while other data changes.
So displaying 'Battery Level' over time for example, results in stacked ticks, because 'fixTime' is used for the X axis:
This is probably ideal behavior for some data, but not for others. Proposed solution is allowing user to choose which time to use by adding an extra select filter on chart reports:
I'm not convinced its the best approach, but its the simplest I could think of.
Criticism is welcome 😄