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

Updated Paid breakdown tooltip positioning

Browse source
This commit is contained in:
Peter Zimon 2022-05-11 12:50:05 +02:00
parent 032e86c12e
commit d24ec03177
3 changed files with 15 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -89,6 +89,7 @@ export default class PaidBreakdown extends Component {
get chartOptions() {
const barColor = this.feature.nightShift ? 'rgba(200, 204, 217, 0.25)' : 'rgba(200, 204, 217, 0.65)';
let maxWidth = 0;
return {
responsive: true,
@ -123,6 +124,8 @@ export default class PaidBreakdown extends Component {
custom: function (tooltip) {
// get tooltip element
const tooltipEl = document.getElementById('gh-dashboard5-breakdown-tooltip');
const chartContainerEl = tooltipEl.parentElement;
const chartWidth = chartContainerEl.offsetWidth;
const tooltipWidth = tooltipEl.offsetWidth;
// only show tooltip when active
@ -132,11 +135,16 @@ export default class PaidBreakdown extends Component {
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 - (tooltipWidth / 2) + 'px';
tooltipEl.style.left = tooltip.x - offsetX + 'px';
tooltipEl.style.top = '70px';
},
callbacks: {

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

@ -183,7 +183,7 @@ export default class PaidMix extends Component {
tooltipEl.style.opacity = 1;
tooltipEl.style.position = 'absolute';
tooltipEl.style.left = tooltip.x - offsetX + 'px';
tooltipEl.style.top = '30px';
tooltipEl.style.top = '30px';
},
callbacks: {
label: (tooltipItems, data) => {

6
ghost/admin/app/styles/layouts/dashboard-v5.css
View file

@ -1808,9 +1808,13 @@ Dashboard v5 Tooltips */
border-color: #8E42FF;
}
.gh-dashboard5-breakdown .gh-dashboard5-tooltip {
min-width: 140px;
}
.gh-dashboard5-breakdown .gh-dashboard5-tooltip-value {
display: grid;
grid-template-columns: auto auto;
grid-template-columns: auto 1fr;
}
.gh-dashboard5-breakdown .gh-dashboard5-tooltip-value-1 {