horizontal shift when show error bars

[huss]

Describe the bug

When error bars are selected, the dates on the x-axis expand so the graphic is compress somewhat toward the center of the graphic. Normalizing by area does not do this.

To Reproduce

Any meter/group on a line graphic that supports error bars should show this.

Expected behavior

The shift is visually unappealing. It is unclear if the width of the horizontal error bar is causing Plotly to automatically do this. If so, the fix may be difficult. If so, we can reconsider what to do.

Additional context

None

[sainmas]

I would like to work on this issue.

[huss]

I would like to work on this issue.

@sainmas Great. I've assigned you the issue. Please let me know if you need anything.

[sainmas]

Hey Huss, I just have a question as to the bug at hand here.
Just so I have a perfect understanding, is this the issue at hand?
This image is before I click the "Show error bars" button.

Down underneath is an image of after I click on the button. The fact that there is empty space to the left of the graph?

[huss]

The issue is hard to see due to including the Electric Utility group. It is hard to see but there are a few values graphed on the far, right edge of the graphic because they span only a few, very different dates than the Cos 23 meter. Here is what I see if I only graph that meter:

and this what it looks like after you add error bars:

Hopefully this is easier to see the shift of the original graph to the left and right when error bars are shown. Let me know if this is not clear or you need anything else.

[sainmas]

Hello @huss ,
I've tried multiple different attempts at trying to figure out where the file would be that interacts with the x-axis at the bottom with no real success. I think I have narrowed it down to these two lines are what I assume cause the issue. (these are in src/client/app/redux/selectors/lineChartSelectors.ts )

If you do not mind me asking, what exactly is happening in this .map program? I understand that it is adding the bars, but how is it affecting the x-axis at the same time?

[huss]

@sainmas This code is involved when error bars are shown. I believe that it is calculating the amount above and below the reading value that the error line should, i.e., the height above and below the point that the error bar will display. To be specific, the first line is taking each point in the yMaxData array and taking the max value minus the value which is how far above the reading (average value or yData[index]) to place the upper range. The next line does similarly but for the min. I hope this helps and let me know if you need more information.