4km dashboard charts beats quickly on Firefox

[zhe-zhao]

Moving from Trello

Describe the bug
As shown in the screen recording, the chart section flashes quickly on Firefox.

To Reproduce
@gtycherry Can help to add more?

Expected behavior
Should display charts normal as in Chrome

Screenshots

Desktop (please complete the following information):

• Browser [Firefox]
• Version [1.1.6]

[karuppiah7890]

overflow-x: auto seems to be the problem. It's over here

metrik/frontend/src/components/LineChart.tsx

Line 42 in c0667a4

"overflow-x": "auto",

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x

There's some sort of addition and removal of scroll bar because of this property, which is causing this issue

If we use overflow-x: scroll, firefox always shows a scroll which doesn't look great. I think we could remove it, I saw no problem in removing and resizing in my resolution. The container still seemed responsive. I don't see a scenario where scroll bars would appear because of the auto and it will be useful, because I could never use the scroll bar much (very little scrolling was available) even while resizing

[zhe-zhao]

@karuppiah7890 There was a feature to show the horizontal scroll bar for charts with more than 10 evaluation period. Means if you select a larger time period, like 6 months, the scroll bar shows to so that we see a fixed spacing between two adjacent points.
Refer to code:

metrik/frontend/src/components/LineChart.tsx

Line 37 in c0667a4

const minLengthForDisplayScrollBar = 10;

A quick fix here is to use a component prop to toggle the overflow-x attr.
Or, alternatively we can consider removing the "fixed spacing" feature, as it doesn't look so nice as expected by us.