Fix spacing in left popover on Security Dashboard
Summary
When hovering your mouse over the Security Dashboard chart, the right popover looks good but the left popover overlaps the dot and the cursor on the chart.
Steps to reproduce
Security & Compliance -> Security Dashboard (hover mouse on line chart; move towards the righthand side to get the popover to switch from right to left)
Example Project
What is the current bug behavior?
What is the expected correct behavior?
You should be able to see the point where the cursor is pointing on the line chart
Relevant logs and/or screenshots
Output of checks
Results of GitLab environment info
Expand for output related to GitLab environment info
(For installations with omnibus-gitlab package run and paste the output of: `sudo gitlab-rake gitlab:env:info`) (For installations from source run and paste the output of: `sudo -u git -H bundle exec rake gitlab:env:info RAILS_ENV=production`)
Results of GitLab application Check
Expand for output related to the GitLab application check
(For installations with omnibus-gitlab package run and paste the output of:
sudo gitlab-rake gitlab:check SANITIZE=true
)(For installations from source run and paste the output of:
sudo -u git -H bundle exec rake gitlab:check RAILS_ENV=production SANITIZE=true
)(we will only investigate if the tests are passing)
Possible fixes
The mouse in the following image is located where the vertical line is and the tooltip shows up around 100px
distant to the mouse.
It seems like the code responsible for the position is located in gitlab-ui
's src/components/charts/line/line.vue
component (at least for the line chart):
showHideTooltip(mouseEvent) {
this.showDataTooltip = this.chart.containPixel('grid', [mouseEvent.zrX, mouseEvent.zrY]);
this.dataTooltipPosition = {
left: `${mouseEvent.zrX + DATA_TOOLTIP_LEFT_OFFSET}px`,
top: `${mouseEvent.zrY}px`,
};
},
Now this code assumes that the tooltip is always located on the right side. However, the tooltip is intelligent and it knows to show on the left side when there is no more space left on the right - which is not accounted in this bit of code. I believe this causes the bug.