Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-17 23:44:39 -05:00
Code Issues Activity

Improved dashboard tooltip positioning

Browse source
This commit is contained in:
Peter Zimon 2022-05-11 10:51:32 +02:00
parent 28919eb057
commit 6e3267315a
4 changed files with 21 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
ghost/admin/app/components/dashboard/v5/charts/anchor.js
View file

@ -275,13 +275,11 @@ export default class Anchor extends Component {
// only show tooltip when active
if (tooltip.opacity === 0) {
tooltipEl.style.display = 'none';
tooltipEl.style.opacity = 0;
return;
}
// update tooltip styles
tooltipEl.style.display = 'block';
tooltipEl.style.opacity = 1;
tooltipEl.style.position = 'absolute';

3
ghost/admin/app/components/dashboard/v5/charts/paid-breakdown.js
View file

@ -123,6 +123,7 @@ export default class PaidBreakdown extends Component {
custom: function (tooltip) {
// get tooltip element
const tooltipEl = document.getElementById('gh-dashboard5-breakdown-tooltip');
const tooltipWidth = tooltipEl.offsetWidth;
// only show tooltip when active
if (tooltip.opacity === 0) {
@ -135,7 +136,7 @@ export default class PaidBreakdown extends Component {
tooltipEl.style.display = 'block';
tooltipEl.style.opacity = 1;
tooltipEl.style.position = 'absolute';
tooltipEl.style.left = tooltip.x + 'px';
tooltipEl.style.left = tooltip.x - (tooltipWidth / 2) + 'px';
tooltipEl.style.top = '70px';
},
callbacks: {

14
ghost/admin/app/components/dashboard/v5/charts/paid-mix.js
View file

@ -164,20 +164,26 @@ export default class PaidMix extends Component {
custom: function (tooltip) {
// get tooltip element
const tooltipEl = document.getElementById('gh-dashboard5-mix-tooltip');
const chartContainerEl = tooltipEl.parentElement;
const chartWidth = chartContainerEl.offsetWidth;
const tooltipWidth = tooltipEl.offsetWidth;
// only show tooltip when active
if (tooltip.opacity === 0) {
tooltipEl.style.display = 'none';
tooltipEl.style.opacity = 0;
return;
}
let offsetX = 0;
if (tooltip.x > chartWidth - tooltipWidth) {
offsetX = tooltipWidth - 10;
}
// update tooltip styles
tooltipEl.style.display = 'block';
tooltipEl.style.opacity = 1;
tooltipEl.style.position = 'absolute';
tooltipEl.style.left = tooltip.x + 'px';
tooltipEl.style.top = tooltip.y + 'px';
tooltipEl.style.left = tooltip.x - offsetX + 'px';
tooltipEl.style.top = '30px';
},
callbacks: {
label: (tooltipItems, data) => {

12
ghost/admin/app/components/dashboard/v5/charts/paid-mrr.js
View file

@ -173,19 +173,25 @@ export default class PaidMrr extends Component {
custom: function (tooltip) {
// get tooltip element
const tooltipEl = document.getElementById('gh-dashboard5-mrr-tooltip');
const chartContainerEl = tooltipEl.parentElement;
const chartWidth = chartContainerEl.offsetWidth;
const tooltipWidth = tooltipEl.offsetWidth;
// only show tooltip when active
if (tooltip.opacity === 0) {
tooltipEl.style.display = 'none';
tooltipEl.style.opacity = 0;
return;
}
let offsetX = 0;
if (tooltip.x > chartWidth - tooltipWidth) {
offsetX = tooltipWidth - 10;
}
// update tooltip styles
tooltipEl.style.display = 'block';
tooltipEl.style.opacity = 1;
tooltipEl.style.position = 'absolute';
tooltipEl.style.left = tooltip.x + 'px';
tooltipEl.style.left = tooltip.x - offsetX + 'px';
tooltipEl.style.top = tooltip.y + 'px';
},
callbacks: {